jQuery 1.2之Selectors(选择器)层次篇

Posted by linyupark :: 2007,September 17th,18:56 pm

jQuery的选择器使用非常方便,以下就将最新的1.2版本的选择器使用做个简单举例.

*举例的代码在IE7需要刷新一下才能生效(直接放在实体页上不会出现这样的情况，弹窗比较特殊)

ancestor descendant （祖孙层次）

只要页面为合格的层次文档(XML和XHTML)在层次上就应该有祖孙关系

<html> <head> <title>jQuery实验用页</title> <script type="text/javascript" src="http://www.netvtm.com/files/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //准备工作完毕 //直接选中p下的所有孙层次small(p为祖，small为孙)，颜色变为红色 //不论small在p下多少层，都是包含在内的 $("p small").css("color","#CC0033"); }); </script> </head> <body> <p>段落外部<b>段落粗体<small>小写粗体</small></b></p> <p>段落外部<i>段落斜体<b>粗体<small>小写粗体</small></b></i></p> </body> </html>

parent > child （父子层次）

这个和祖孙层次的区别就是不能无限制地向下匹配，只能是往下一层

<html> <head> <title>jQuery实验用页</title> <script type="text/javascript" src="/files/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //准备工作完毕 //p的儿子small是不存在的，所以颜色将不会有所改变 $("p > small").css("color","red"); //p的儿子i是存在的，我们将其颜色改为绿色 $("p > i").css("color","#669900"); }); </script> </head> <body> <p>段落外部<b>段落粗体<small>小写粗体</small></b></p> <p>段落外部<i>段落斜体<b>粗体<small>小写粗体</small></b></i></p> </body> </html>

prev + next （匹配指定元素的下一个元素）

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实验用页</title> <script type="text/javascript" src="/files/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //准备工作完毕 //b后面的第一个div元素的文字颜色改成红色 $("b + div").css("color","#c03"); }); </script> </head> <body> <b>start</b><div>第一个</div><div>第二个</div><div>第三个</div><div>第四个</div> </body> </html>

prev ~ siblings （所有兄弟元素）

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery实验用页</title> <script type="text/javascript" src="/files/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //准备工作完毕 //b的所有兄弟div元素的字体颜色都变为红色 $("b ~ div").css("color","#c03"); }); </script> </head> <body> <b>start</b><div>第一个</div><div>第二个</div><div>第三个</div><div>第四个</div> </body> </html>

第一到第四的div都变红色，因为他们都是兄弟层

Filed under: jQuery / Js

« jQuery 1.2之Selectors(选择器)基础篇 :: IBM公司将提供免费的办公软件来挑战微软 »

M	T	W	T	F	S	S
« Jan
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

文档分类

最近发表

ALA

连接集合