jQuery选择器入门【jQuery入门三】

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

jQuery选择器是我们学jQuery的真正的开始也是我们必须做的第一件事情，jQuery选择能让我们取得我们想要的几乎所有的页面DOM对象（如果你不知道什么是DOM元素，google一下“什么是DOM”）。确切的说我们获取的应该是jQuery对象，这在上面的章节中我已经说过两者的区别和转换。

大家知道javascript变成中很大一块是对DOM的操作，当我们获取了DOM元素后，我们就可以对改元素绑定事件，增删属性等操作，通过这些操作可以实现很多绚丽的页面效果和富因特网的应用，但是我们在做这些事情之前首相要通过DOM元素的钩子找到该DOM元素，javascript是非常灵活的语言，查找DOM元素和DOM元素的钩子方法非常多，再者由于各个浏览器对js dom属性解析的少许区别，也给我们带来了不少麻烦。jQuery的选择器就解决了这些问题，而且功能非常强大。

jQuery选择器函数–$()

大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素，所以$()函数获取的DOM元素其实是一个DOM元素组成的数组。

简单的$()

这些是最常用的几个例子：

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

我们来看一个简单的例子：


< !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="jquery-1.3.2/jquery-1.3.2.min.js"></script>
<style type="text/css">
.txt-color1{ color:#FF0000}
.txt-color2{ color:#666600}
.txt-color3{ color:#000066}
</style>
</head>
<body>
<h1>jQuery简单的选择器</h1>
<div>大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素</div>
<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>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("h1").addClass("txt-color1");//给标签为h1的加上txt-color1样式
$(".user").addClass("txt-color2");
$("#nickName").addClass("txt-color3");
});
</script>
</body>
</html>

$(“h1″).addClass(“txt-color1″);表示给标签为h1的加上txt-color1样式，

这里你要注意jQuer库的引用路径。我这里使用的是本地的。

尽情期待下一篇《像写css选择器一样写jQuery选择器》

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

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

说明

标签：jQuery入门分类：JS

0条评论

发表评论

WEB前端开发