像写css选择器一样写jQuery选择器（一）【jQuery入门四】

时间：2009年07月05日作者：愚人码头查看次数:6,718 views评论次数：2

jQuery选择器有很大一部分的写法和css选择器的写法非常相识，

我们先来看看css选择器的写法;这些对于你应该不是很陌生，呵呵。那么我们开始学习jQuery选择器。

一、简单的jQuery选择器

首先看看最简单的jQuery选择器,再次说明jQuery选择器获取的DOM元素返回的是一个数组，及时他只返回一个元素：

查看上一篇jQuery选择器入门【jQuery入门三】中的$(”div”)：标签名，$(”#nickName”)：ID属性，$(”.user”)：样式名及例子，

$(”div”)：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合，$(”.user”)：样式名：
$(”#nickName”)：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；
$(”.user”)：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；

这里再补充1个通配符，即*：

$(“*”):通配符，取得DOM文档中所有节点元素；例如：$(“*”).css(“color”,”#FF3300″);则整个文档的文字颜色都会显示红色。至于.css(“color”,”#FF3300″)给元素加上color:#FF3300的css样式，我们会在后面再给大家详细解释。

大家可以看看这个我们写的css选择器非常的相似，下面的例子也是一样，这样我们就非常容易理解jQuery选择器的含义了

二、jQuery的组合选择器：

$(“selector1,selector2,selectorN”)：多元素组合选择器，将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。例如：$(“h1,div,li#nickName”)，并查看一下代码：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery简单的选择器</title> <script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery简单的选择器</h1> <div>大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素</div> <ol> <li>$("div")：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合；</li> <li id="nickName">$("#nickName")：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；</li> <li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li> <li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li> </ol> <script type="text/javascript"> $(document).ready(function(){ $("h1,div,li#nickName").css("color","#FF3300") }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

三、JQuery的层级选择器：

$(“ancestor descendant”):在给定的祖先元素下匹配所有的后代元素，即子孙元素,例如：$(“div span.num”);

$(“parent > child”):在给定的父元素下匹配所有的子元素,例如：$(“div>span”);

$(“prev + next”):匹配所有紧接在 prev 元素后的 next 元素，即第一个跟屁虫的兄弟元素,例如：$(“p+span”);

$(“prev ~ siblings”):匹配 prev 元素之后的所有 siblings 元素，即一群跟屁虫的兄弟元素（当然也有可能是一个屁虫的兄弟元素，那就和$(“prev + next”)等价了）,例如：$(“p~span”);

关于层级选择器的示例：

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery简单的选择器</title> <script type="text/javascript" src="http://www.css88.com/jquery-1.3.2/jquery-1.3.2.min.js"></script> </head> <body> <h1>jQuery简单的选择器</h1> <div>javascript森林群规有<span class="num">120</span>个会员,其中管理员<span class="num">120</span>个；</div> <div>javascript森林群博客目前有<span>30</span>作者,<span>10</span>篇文章；</div> <p>我是愚人码头</p> <span>你叫什么名字呢？</span> <span>我爱javascript森林；</span> <span>以为森林里有我好好多的朋友；</span> <span>欢迎你加入我们；</span> <div> <input type="submit" name="button" id="button1" value="测试$('div span.num')" /> <input type="submit" name="button" id="button2" value="测试$('div/>span')" /> <input type="submit" name="button" id="button3" value="$('p+span')" /> <input type="submit" name="button" id="button4" value="测试$('p~span')" /> </div> <script type="text/javascript"> $(document).ready(function(){ $("#button1").click(function(){ $("div span.num").css("color","#FF0033") }); $("#button2").click(function(){ $("div>span").css("color","#FF0033") }); $("#button3").click(function(){ $("p+span").css("color","#FF0033") }); $("#button4").click(function(){ $("p~span").css("color","#FF0033") }); }); </script> </body> </html>

提示：你可以先修改部分代码再运行。

声明: 本文采用 BY-NC-SA 协议进行授权 | WEB前端开发
转载请注明转自《像写css选择器一样写jQuery选择器（一）【jQuery入门四】》

如果你读了我的文章，觉得有帮助：