ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery セレクターの簡潔なまとめ (使用例付き、一目でわかる)_jquery

jQuery セレクターの簡潔なまとめ (使用例付き、一目でわかる)_jquery

WBOY
WBOYオリジナル
2016-05-16 16:51:121208ブラウズ

本文现在对所有已知的 jquery 选择器做一个总结,深刻而熟练的掌握这些选择器,对我们快速的写各种 jquery 效果大有帮助!下面就对 jquery 各种选择做一个罗列吧!由于 jquery 用法非常简单,这里就不再举各种例子加深理解了。

元素 元素 のすべての 要素
选择器 实例 选取
* $("#item *") 选择 id 属性为 item 下的所有元素
#id $("#lastname") id="lastname" 的元素
.class $(".intro") 所有 class="intro" 的元素
element $("p") 所有

元素

.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
     
:first $("p:first") 第一个

元素

:last $("p:last") 最后一个

元素

:even $("tr:even") 所有偶数
:odd $("tr:odd") 所有奇数
:next $('.item').next('div') class为 item 的下一个 div 兄弟元素,等价于 $('.item + div')
:prev $('.item').prev('div') class为 item 的上一个 div 兄弟元素
:nextAll $('.item').nextAll('div') class 为 item 之后的所有的 div 兄弟元素,等价于 $('.inside ~ div')
:parent > child $('div > span') 选取 div 下的第一代 span 元素,又称直系子元素
:parent $('.item:parent') 选取 class 为 item 的元素的父级元素
     
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始)
:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素
:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素
:not(selector) $("input:not(:empty)") $("input:not(.must)") 所有不为空的 input 元素;所有 class 属性不为 must 的元素
     
:header $(":header") 所有标题元素

-

:animated   所有动画元素
     
:contains(text) $("div:contains('www.phpernote.com')") 所有 div 元素中包含 www.phpernote.com 字符串的所有元素
:empty $(".item:empty") 所有 class 属性为 item 的元素中无子(元素)节点的所有元素
:hidden $("p:hidden") 所有隐藏的

元素

:has $('.item:has(span)') 所有 class 属性为 item 的元素中包含有 span 的所有元素(不分是否直系)
:visible $("table:visible") 所有可见的表格
     
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
     
[attribute] $("a[href]") 所有带有 href 属性的 a 标签元素
[属性=] $("[href='#']") href 属性値が「#」に等しいすべての要素
[属性!=] $("[href!='#']") href 属性値が「#」に等しくないすべての要素
[属性$=] $("[href$='.jpg']") すべての href 属性の値には、「.jpg」で終わる要素が含まれます
:入力 $(":input") すべての 要素
:テキスト $(":text") type="text" のすべての 要素
:パスワード $(":パスワード") type="password" を持つすべての 要素
:ラジオ $(":ラジオ") type="radio" のすべての 要素
:チェックボックス $(":checkbox") type="checkbox"
:送信 $(":submit") type="submit" のすべての 要素
:リセット $(":reset") type="reset" を持つすべての 要素
:ボタン $(":button") type="button" のすべての 要素
:画像 $(":image") type="image" のすべての 要素
:ファイル $(":file") type="file" のすべての 要素
:有効 $(":有効") アクティブ化されたすべての入力要素
:無効 $(":無効") 無効になっているすべての入力要素
:選択済み $(":selected") 選択されたすべての入力要素
:チェック済み $(":checked") 選択されたすべての入力要素
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。