jQuery文档
详细选择器参考此文档
基本选择器
1.id选择器
只能获取一个dom对象
<script type="text/javascript">
$(function(){
alert($("#id").length);
alert($("#id").val());
})
</script>
input type="text" id="myclass" value="里斯" />
input type="text" id="myclass" value="王五" />
2.class选择器
可以获取一个对象数组
<script type="text/javascript">
$(function(){
alert($(".myclass").length);
alert($(".myclass").val());
alert($(".myclass")[1].value);
alert($($(".myclass")[1]).val());
})
</script>
<input type="text" class="myclass" value="张三" />
<input type="text" class="myclass" value="里斯" />
层次选择器
1.parent > child
在给定的父元素下匹配所有的子元素
<script type="text/javascript">
$(function(){
alert($(".myclass").length);
alert($($("div > .myclass")[1]).val());
alert($("div + .myclass").val());
})
</script>
<div>
<input type="text" value="zhansan" class="myclass" >
<br/>
<input type="text" value="lisi" class="myclass" >
</div>
<input type="text" value="wangwu" class="myclass" >
2.prev + next
匹配所有紧接在 prev 元素后的 next 元素
$(function(){
alert($(".myclass").length);
alert($($("div > .myclass")[1]).val());
alert($("div + .myclass").length);
alert($("div + .myclass").val());
})
<div>
<input type="text" value="zhansan" class="myclass" >
<br>
<input type="text" value="lisi" class="myclass" >
</div>
<input type="text" value="wangwu" class="myclass" >
3.prev ~ siblings
匹配 prev 元素之后的所有 siblings 元素
$(function(){
alert($("div ~ .myclass").length);
alert($("div ~ input").length);
alert($($("div ~ .myclass")[1]).val());
})
<div>
<input type="text" value="zhansan" class="myclass" >
<input type="text" value="lisi" class="myclass" >
</div>
<input type="text" value="lisi" class="myclass" >
<div>
<input type="text" value="zhansan" class="myclass" >
</div>
<input type="text" value="wangwu" class="myclass" >
<input type="text" value="lisi" class="myclass" >
元素选择器
$(function(){
alert($(".myclass[value]").length);
alert($(".myclass[value=zhansan]").length);
alert($("div~[value!=zhansan]").length);
})
<div>
<input type="text" value="zhansan" class="myclass" >
<input type="text" value="lisi" class="myclass" >
</div>
<input type="text" value="lisi" class="myclass" >
<div>
<input type="text" value="zhansan" class="myclass" >
</div>
<input type="text" value="wangwu" class="myclass" >
<input type="text" value="lisi" class="myclass" >