jQuery的强大选择器小结
jQuery的选择器主要包括基本选择器子选择器特征选择器位置选择器。
一基本选择器
$("input“):选择所有是input标签的元素
$("#input1"):选择id为input1的元素
$(".acss"):选择所有包含acss这个Css类样式的
代码
<body>
<ahref="">link</a>
<inputid="input1"class="acss">
<inputid="Text1"class="acss">
<inputid="Text2">
<script>
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>
<ahref=""></a>
<ahref=""></a>
<ahref=""></a>
<ahref=""></a>
<ahref=""></a>
</p>
<p>
<ahref=""id="a2"></a>
<ahref=""></a>
<ahref=""></a>
<ahref=""></a>
<ahref=""></a>
<ahref=""></a>
<ahref=""></a>
</p>
<script>
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>
<script>
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")