jQuery 选择器

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" >