jQuery罗选

1.过滤

?

eq(index)		获取第N个元素，从0算起。
hasClass(class)	检查当前的元素是否含有某个特定的类，如果有，则返回true，等效is("." + class)。
slice(start,[end])	选取一个匹配的子集
filter(expr)
			筛选出与指定表达式匹配的元素集合。
			这个方法用于缩小匹配的范围。用逗号分隔多个表达式
filter(fn)
			筛选出与指定函数返回值匹配的元素集合
			这个函数内部将对每个对象计算一次 (正如 '$.each'). 
			如果调用的函数返回false则这个元素被删除，否则就会保留。
is(expr)
			用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
			如果没有元素符合，或者表达式无效，都返回'false'. 
			'filter' 内部实际也是在调用这个函数，所以，filter()函数原有的规则在这里也适用。
map(callback)
			将一组元素转换成其他数组（不论是否是元素数组）
			你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。
			这都可以用'$.map()'来方便的建立。
			callback:给每个元素执行的函数
not(expr)	删除与指定表达式匹配的元素

?

<div id="one">1</div>  
<div class="div" id="two"><span>2</span></div> 
<br/ 
<div>unknown</div> 
<br/> 
<div class="div" id="three"><label><span>3</span></label></div> 
<br/>
<div id="four"><a href="http://www.baidu.com">4</a></div>  
<p>Hello</p><p class="selected">And Again</p><p class="selected">Hello Againaaaaaaaaaa</p> 
<input type="text" name="name" value="zhangsan"/>
<img/>
<select name="gift" id="id_gift" multiple>
	<option value="gift001">礼物001</option>
	<option value="gift002">礼物002</option>
	<option value="gift003">礼物003</option>
	<option value="gift004">礼物004</option>
	<option value="gift005">礼物005</option>
</select>

?

$(document).ready(function(){ 
	$("#id_but").click(function(){
		//eq(index)
			$("tr").eq(0).children().each(function(){
				alert($(this).text());		//姓名 性别 年龄
			});
		//hasClass(class)
			if($("#one").hasClass(".div")){
				alert("hasClass(.div)");
			} else {
				alert("not hasClass(.div)");
			}	
		//filter(expr)
			$("div").filter(".div").each(function(){
				alert($(this).text());			//带有类div的div元素集合
			});
			alert($("div").filter(".div").html()); //只显示<span>2</span>
			alert($("div").filter(".div").text()); //显示23，不知为何
			//另外对于API中给出的示例，若有两个元素都是用了相同的css类的话，如下：
			//<p>Hello</p><p class="selected">And Again</p><p class="selected">Hello Againaaaaaaaaaa</p> 
			//按照	alert($("p").filter(".selected,:first").html());
			//		alert($("p").filter(".selected").html())；
			//则显示的内容是错误的，而alert($("p").filter(".selected").text())；可以正常显示
			$("p").filter(".selected").css("color","red");
			$("div").filter("#four").css("color","red");
			//当filter(expr)--expr为子元素(比如span)时查找不成功
		//filter(fn)
			alert($("div").filter(function(){
				return $(this).attr("id") == "two";	
			}).html());			//<span>2</span>
		//is(expr)
			alert($("input[name='name']").is(":text"));		//true
			alert($("img").is(":empty"));					//true
			alert($("table").parent().is("form"));			//true
			alert($("form").is("table"));					//false
			alert($("form").children().is("table"));		//true
			alert($("div").children().is("span"));			//true
			alert($("#two").children().is("span"));			//true
			$("div").each(function(){
				if($(this).is("#two")) {
					alert($(this).text());			
				} 
			});
		//map(callback)
			$("option").map(function(){
				alert($(this).val());	//gift001 gift002 gift003 gift004 gift005
			});
		//not(expr)
			$("div").not("animated").animate({left:"+=300px"},"slow");
			//2 3会移动 1 4由于没有使用相应的css样式不会移动
		//slice(start[,end])
			//开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起。
			//end结束的位置
			$("div").slice(0).wrapInner("<b></b>");	//将所有div中的文本加粗
			//等效于$("div").slice().wrapInner("<b></b>");
			$("div").slice(0,1).wrapInner("<b></b>");	//在第一个位置结束
			$("div").slice(0,2).wrapInner("<b></b>");	//在第二个位置结束，第二个也会被加粗
			$("div").slice(1,2).wrapInner("<b></b>");	//从第一个开始，到第二个结束
	});
});

?

2.查找

?

children([expr])	
				取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
				可以通过可选的表达式来过滤所匹配的子元素。
				注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。
closest(expr[,context])	
				jQuery 1.3新增。从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素。
				closest对于处理事件委派非常有用。
				expr:用以过滤元素的表达式。jQuery 1.4开始，也可以传递一个字符串数组，用于查找多个元素。
				context:作为待查找的 DOM 元素集、文档或 jQuery 对象。
find(expr)		搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
next([expr])	
				取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
				这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。
				可以用一个可选的表达式进行筛选。
nextAll([expr])	查找当前元素之后所有的同辈元素。可以用表达式过滤。
offsetParant()	
				回第一个匹配元素用于定位的父节点。
				这返回父元素中第一个其position设为relative或者absolute的元素。
				此方法仅对可见元素有效。
parent([expr])	取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents([expr])	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。
prev([expr])	
				取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
				可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。
prevAll([expr])	查找当前元素之前所有的同辈元素
siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

?

.div{   
	border:2px solid green;   
	width:18px;   
	height:18px;    
	background-color:red;   
	position:absolute   
}   

<div>
	<div id="one">1</div>  
	<div class="div" id="two"><span>2</span></div>  
	<br/>
	<div class="div" id="three"><span><a href="mailto:luchunli@163.com">3</a></span></div> 
	<br/>
	<div class="div" id="four"><a href="http://www.baidu.com">4</a></div>  
<div>
<p>china</p><label>hello</label><div>luchunli</div><span>tom</span>
礼物<!-- 多选 -->
<select name="gift" id="id_gift" multiple>
	<option id="id_op1" value="gift001">礼物001</option>
	<option id="id_op2" value="gift002">礼物002</option>
	<option class="op" value="gift003">礼物003</option>
	<option value="gift004">礼物004</option>
	<option value="gift005">礼物005</option>
</select>
<table align="center" width="600px" height="100px" border="2px" style="border-color:green">
	<tr id="tr_tb">
		<th>备注</th>
		<td class="op">信息</td>
		<td id="td_001">
			<table width="100%" border="1px" style="border-color:skyblue">
				<tr id="tr_td001">
					<td id="td_002">zhang<a href="#">san</a></td>
				</tr>
				<tr>
					<td>lisi</td>
				</tr>
			</table>
		</td>
	<tr>
</table>		
<iframe name="ifn" id="id_ifn" src="test.html" width="800" height="400></iframe>		
	
test.html
<body>
	<button id="start">启动</button>
	<button id="stop">停止</button></p>
	<div id="box"></div> 
</body>

?

$(document).ready(function(){ 
	$("#id_but").click(function(){		
		//chidren([expr])
			$("#id_gift").children().each(function(){
				alert($(this).val());	//gift001 gift002 gift003 gift004 gift005
			});
			//expr用于过滤(只能为id class)
			$("#id_gift").children(".op").each(function(){
				alert($(this).val());	//gift003
			});
			$("#id_gift").children("#id_op1").each(function(){
				alert($(this).val());	//gift001
			});
		//closest(expr[,context])
			alert($("a[href^='mailto']").closest("div").html());	//从a开始找最近的div
			//<span><a href="mailto:luchunli@163.com">3</a></span>
			//context指定找的范围，如body即在body里面找
		//find(expr)
			alert($("#tr_tb").find("td").size());	//5
			alert($("#tr_tb").find("th").eq(0).text());	//备注
		//next(expr)  后面紧邻的同级元素
			alert($("#tr_td001").next().html());	//<td>lisi</td>
			alert($("#tr_td001").next().find("td").html());	//lisi
			alert($("p").next().html());	//hello
		//nextAll(expr)
			$("p").nextAll().each(function(){
				alert($(this).text());		//hello luchunli tom
			});	
		//nextUntil([expr])
			$("p").nextUntil("div").each(function(){
				alert($(this).text());		//hello	
			});	
		//offsetParent()
			alert($("a[href*='baidu']").offsetParent().html());		//<a href="http://www.baidu.com">4</a>
		//parent([expr])
			alert($("a[href*='baidu']").parent().html());		//<a href="http://www.baidu.com">4</a>
			alert($("a[href*='baidu']").parent().attr("nodeName"));	//DIV
			alert($("a[href*='baidu']").parent()[0].nodeName);		//DIV
		//parents([expr])
			alert($("a[href$='@163.com']").parents().length);	//5
			$("a[href$='@163.com']").parents().each(function(){
				alert($(this).attr("nodeName"));	//SPAN DIV DIV BODY HTML
			});	
		//parentsUntil([expr])
			$("a[href$='@163.com']").parentsUntil("body").each(function(){
				alert($(this).attr("nodeName"));	//SPAN DIV DIV
			});	
		//prev([expr])
			alert($("#td_001").prev().html());		//信息
			//当备注处使用class="op"时通过
			alert($("#td_001").prev(".op").html());		//null
			//当信息处使用class="op"时通过
			alert($("#td_001").prev(".op").html());		//信息
		//prevAll([expr])
			$("#td_001").prevAll().each(function(){
				alert($(this).text());		//信息 备注
			});
		//prevUntil([expr])
			$('#td_001').prevUntil('th').css('background-color', 'red');
			//从#td_001开始到th直接的部分背景被设置成红色(即"信息"列)
		//siblings([expr])
			$('#one').siblings().css('font-size', '20px');	//2 3 4字体设置为20px
	});
});

?

3.串联

add(expr[,context])
		把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
		jQuery 1.4 中,.add()方法返回的结果将始终以元素在HTML文档中出现的顺序来排序，而不再是简单的添加。
		expr:用于匹配元素并添加的表达式字符串，或者用于动态生成的HTML代码，如果是一个字符串数组则返回多个元素
		context:作为待查找的 DOM 元素集、文档或 jQuery 对象。
contents()	//查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容	
andSelf()	加入先前所选的加入当前元素中
			对于筛选或查找后的元素，要加入先前所选元素时将会很有用。
end()		回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。

?

$(document).ready(function(){ 
	$("#id_but").click(function(){
		//add
			alert($("p").add("<span>hello</span>").text());	//chinahello
			alert($("p").add("label").text());				//chinahello
			//该方法将两个jQuery结果集连接起来形成一个新的结果集，不会影响页面显示
		//contents	
			$("p").contents().wrap("<b/>");	//china加粗
			$("#id_ifn").contents().find("body").append("<div>Hello China</div>");
		//addSelf
			$("#td_002").find("a").andSelf().css("color","red");	//zhang和san都会变成red
			$("#td_002").find("a[href*='#']").andSelf().css("color","red");	//等效
		//end()
			$("#td_002").find("a").click(function(){
				alert("This is super link");	
				return false;
			}).end().css("color","red");
	});
});

?