jQuery的强大选择器小结

jQuery的选择器主要包括基本选择器子选择器特征选择器位置选择器。

一基本选择器

$("input“):选择所有是input标签的元素

$("#input1"):选择id为input1的元素

$(".acss"):选择所有包含acss这个Css类样式的

代码

<body>

<ahref="">link</a>

<inputid="input1"class="acss">

<inputid="Text1"class="acss">

<inputid="Text2">

varoo=$("input");//oo是以上3个的集合

varpp=$("#input1");//pp是第一个

varqq=$(".acss");//qq是前两个的集合

</script>

</body>

可以用以上3个尽兴组合式的查询

varww=$("input.acss");//选择具有acss的input标签元素

varee=$("input#Text1.acss");//选择具有acss的id为Text1的标签为input的元素

二、子选择器

父节点和直接子节点用(>)隔开，即实现子选择器方式

<pclass="acss">

<ahref=""id="a1"></a>

<ahref=""></a>

</p>

<p>

<ahref=""id="a2"></a>

<ahref=""></a>

</p>

varoo=$("pa");//选择了p下面的所有的a

varpp=$("p>a");//选择了2个a元素，id为a1和a2

varqq=$("p.acssa");//选择了id为a1的元素

</script>

三、特征选择器

根据元素特征进行选择a[href^=http://]

代码

<div>

<inputid="Text3"name="myInput"/>

<inputid="Text5"name="myput"/>

<inputid="Text4"name="yourInput"/>

<aid="a3"href="http://www.baidu.com"></a>

<aid="a4"href="www.baidu.com"></a>

</div>

varoo=$("a[href^=http://]");//选择href以http://开头的a。a3选中

varpp=$("input[name$=Input]");//选择name以Input结尾的input。Text3，Text4选中

varqq=$("a[href*=com]");//选择href以包含com的a。a3，a4选中

varww=$("input[id=Text3]");//选择正好等于的

</script>

另外jQuery还提供了has方法，如上面例子中

div:has(input)含义是。选择包含input的所有div

注意：divinput是选择的是div中的所有input元素

四、位置选择器

位置选择器主要是根据元素的位置进行选择，

diva:first返回页面第一个在div中的a

divalast返回页面最后一个在div中的a

divodd返回页面偶数位置的div

diveven返回页面奇数位置的idv

divfirst-child返回div中第一个子选择

divlast-child返回div中最后一个子选择

only-child没有兄弟节点的元素

nth-child(n)：第n个子节点

eq(n)第n个匹配元素

gt(n)n之后的匹配元素不包含

lt(n)n之前的匹配元素不包含

五、jQuery自定义选择

名称说明解释

:input匹配所有input,textarea,select和button元素查找所有的input元素:

$(":input")

:text匹配所有的文本框查找所有文本框:

$(":text")

:password匹配所有密码框查找所有密码框:

$(":password")

:radio匹配所有单选按钮查找所有单选按钮

:checkbox匹配所有复选框查找所有复选框:

$(":checkbox")

:submit匹配所有提交按钮查找所有提交按钮:

$(":submit")

:image匹配所有图像域

匹配所有图像域:

$(":image")

:reset匹配所有重置按钮查找所有重置按钮:

$(":reset")

:button匹配所有按钮查找所有按钮:

$(":button")

:file匹配所有文件域查找所有文件域:

$(":file")

名称说明解释

:enabled匹配所有可用元素

查找所有可用的input元素:

$("input:enabled")

:disabled匹配所有不可用元素查找所有不可用的input元素:

$("input:disabled")

:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)查找所有选中的复选框元素:

$("input:checked")

:selected匹配所有选中的option元素查找所有选中的选项元素:

$("selectoption:selected")

jQuery的强大选择器小结

相关推荐