jQuery レビュー 強力な JQuery Selector_jquery

WBOY
リリース: 2016-05-16 18:28:53
オリジナル
897 人が閲覧しました

在jQuery出世以来,它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架,它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果,轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点,它已经被微软官方认可加入VS IDE中拥有强大的智能提示,并据官方的统计现在至少有20%的国际性大网站已经加入jQuery作为其脚本。

1:首先是JavaScript的DOM 和 jQuery包装集的区分


1.1:在JavaScript中我们访问的方式是操作DOM结构,提供的可用方法有:

1: document.getElementById("ID"):根据ID获取DOM对象。

2:document.getElementsByName("name"):根据HTML标记name属性获取一个DOM数组。

3:document.getElementsByTagName("Tag"):根据HTML的Tag获取一个DOM数组。

1.2:jQuery相对DOM则提供了许多可用的方法和属性。

jQuery简单的获取对象有$(“#id”) ,$(“.class”),$(“tag”)方式,它的书写方式和css3.0相似 id用#,class(css)用.,HTMl Tag则直接书写。关于jquery的选择器在下面讲述,这里不急。         

1.3:JavaScript的DOM对象转可以化为jQuery包装集:通过$(element)赴会就为jQuery包装集。

 

2:jQuery最强大的就是提供了一个万能的属性选择器。


2.1基本选择器

选择表达式

说明

举例

#id

根据给定的ID匹配一个元素用#

$("#testDiv2")  获取ID为testDiv2的元素

.class

根据给定的类匹配元素(也就是取class的值)用.

$(".myDiv")    获取class为myDiv的一组元素

element

根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等)

$("div")    获取所有的div元素

selector1,selector2,selectorN

将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开

$("#testDiv2,p")

$("p,span,div.myDiv") 获取所有的p,span和class为myDiv的元素

*

选择所有的元素

$("*")

2.2简单选择器

选择表达式

说明

举例

:first

匹配找到的第一个元素

$("div:first")

:last

匹配找到的最后一个元素

$("div:last")

:eq(index)

匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始

$("div:eq(1)")

:gt(index)

匹配所有大于给定索引值的元素

$("div:gt(0)")    查找第1个以后的元素

:lt(index)

匹配所有小于给定索引值的元素

$("div:lt(2)")     查找第一行和第二行的元素

:even

匹配所有索引值为偶数的元素,从 0 开始计数

$("div:even")
查找第1,3,5个div

:odd

匹配所有索引值为奇数的元素,从 0 开始计数

$("div:odd")
查找第2,4个div

:not(selector)

去除所有与给定选择器匹配的元素
selector为表达式,可以是属性里面的一个值

$("input:not(:checked)")
查找所有未选中的input 元素[注 :checked为自定义筛选选择器,后面会讲到]

:header

匹配如 h1, h2, h3之类的标题元素

$(":header").css("background", "#EEE");
添加样式

:animated

匹配所有正在执行动画效果的元素

暂无例子

3.3:内容选择器

选择表达式

说明

举例

:contains(text)

匹配包含给定文本的元素,只要里面出现即可

$("p:contains('段落')")
找带有段落字样的p元素

:empty

匹配所有不包含子元素或者文本的空元素

$("div:empty")

:has(selector)

匹配含有选择器所匹配的元素的元素

$("div:has('p')")

:parent

匹配含有子元素或者文本的元素

$("div:parent")

4.4 子要素セレクター

セレクター

选择器

说明

举例

:first-child

匹配第一个子元素

$("ul li:first-child")//在每个 ul 中查找第一个 li

:last-child

匹配最后一个子元素

$("ul li:last-child")//在每个 ul 中查找最后一个 li

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!

可以使用:
nth-child(even)//偶数行

:nth-child(odd)//奇数行
:nth-child(3n)
:nth-child(2)//索引为2的
:nth-child(3n 1)
:nth-child(3n 2)

$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

$("ul li:nth-child(2)")//在每个 ul 查找第 2 个li

:only-child

如果某个元素是父元素中唯一的子元素,那将会被匹配

如果父元素中含有其他元素,那将不会被匹配。

$("ul li:only-child")//在 ul 中查找是唯一子元素的 li

説明

:first-child

选择器

说明

举例

:hidden

匹配所有的不可见元素,input 元素的 type 属性为 "hidden" 的话也会被匹配到

$("div:hidden")

:visible

匹配所有的可见元素

$("div:visible")//元素来匹配

$(".divH:visible")//根据class来匹配

最初の子要素と一致します

$("ul li:first-child")//各 ul の最初の li を検索します

:last-child

最後の子要素と一致します

$("ul li:last-child")//各 ul の最後の li を検索します

:nth-child(index/even/odd/equation)

親要素の下にある N 番目の子要素または奇数偶数要素と一致します

':eq(index)' は 1 つの要素のみに一致しますが、この要素はすべての親要素の子要素に一致します。 :nth-child は 1 から始まり、:eq() は 0 から始まります。

次のものが使用できます。
nth-child(even)//偶数行

:nth-child(odd)//奇数行
:nth-child(3n) :nth-child(2)//インデックス 2
:nth-child(3n 1)
:nth-child(3n 2)

$("ul li:nth-child(2)")//各 ul の 2 番目の li を検索します

:nth-child(index/even/odd/equation)

親要素の下にある N 番目の子要素または奇数偶数要素と一致します

$("ul li:nth-child(2)")//各 ul の 2 番目の li を検索します

:子のみ

要素が親要素の唯一の子要素である場合、その要素が一致します

親要素に他の要素が含まれている場合、その要素は一致しません。

$("ul li:only-child")//ul

内の唯一の子要素である li を検索します 4.5: 可視性セレクター にも一致します。

セレクター

説明

:非表示

は、すべての非表示要素に一致します。入力要素の type 属性が「hidden」の場合、

$("div:hidden")

:表示

表示されているすべての要素と一致します

$("div:visible")//一致する要素

$(".divH:visible")//一致するクラス

これ以上の例を説明する必要はありません。誰もが jQuery についてある程度の知識を持っているはずです。はは…
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!