进入jQuery的精彩世界

一.摘要

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.

本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.

转载请注明子秋出品!博客园首发!

二.前言

在写作的同时我参考了网上jQuery的系列教程文章, 在博客园和Google上并没有找到让我满意的系列教程. 我喜欢将知识系统的,深入浅出的讲解.不喜欢写那种"学习笔记"式的文章. 同时本系列将很快全部写完(有工作压力就是有动力), 随后如果时间允许我会继续更新MVC系列文章.再一次对等待MVC文章的朋友们说声抱歉!

另外本系列文章的大部分知识点来源于图灵出版社的"jQuery实战"一书. 推荐大家购买此书, 是jQuery书籍中的经典之作.

下面让我们开始jQuery之旅.

三.什么是jQuery

jQuery是一套Javascript脚本库. 在我的博客中可以找到"Javascript轻量级脚本库"系列文章. Javascript脚本库类似于.NET的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用.

注意jQuery是脚本库, 而不是脚本框架. "库"不等于"框架", 比如"System程序集"是类库,而"ASP.NET MVC"是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事.

脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的jQuery插件也让我们的工作变成了"有了jQuery,天天喝茶水"--因为我们已经站在巨人的肩膀上了.

创建一个ASP.NET MVC项目时, 会发现已经自动引入了jQuery类库. jQuery几乎是微软的御用脚本库了!完美的集成度和智能感知的支持,让.NET和jQuery天衣无缝结合在一起!所以用.NET就要选用jQuery而非Dojo,ExtJS等.

jQuery有如下特点:

1.提供了强大的功能函数

使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.

2.解决浏览器兼容性问题

javascript 脚本在不同浏览器的兼容性一直是Web开发人员的噩梦, 常常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了jQuery我们将从这个噩梦中醒来, 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的, 从前要根据event获取事件触发者, 在ie下是event.srcElements 而ff等标准浏览器下下是event.target. jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象.

3.实现丰富的UI

jQuery 可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我自己写了一个可以兼容ie和ff的渐变动画, 使用大量javascript代码实现, 费心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力. 如今使用jQuery就可以帮助我们快速完成此类应用.

4.纠正错误的脚本知识

这一条是我提出的, 原因就是大部分开发人员对于javascript存在错误的认识. 比如在页面中编写加载时即执行的操作DOM的语句, 在HTML元素或者document对象上直接添加"onclick"属性, 不知道onclick其实是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成所有的开发工作, 但是这样的程序是不健壮的. 比如"在页面中编写加载时即执行的操作DOM的语句", 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器"终止操作"的错误.jQuery提供了很多简便的方法帮助我们解决这些问题, 一旦使用jQuery你就将纠正这些错误的知识--因为我们都是用标准的正确的jQuery脚本编写方法!

5.太多了! 等待我们一一去发现.

四.Hello World jQuery

按照惯例, 我们来编写jQuery的Hello World程序, 来迈出使用jQuery的第一步.

在本文最后可以下本章的完整源代码.

1.下载jQuery类库

jQuery的项目下载放在了Google Code上, 下载地址:

http://code.google.com/p/jqueryjs/downloads/list

上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类：

min: 压缩后的jQuery类库, 在正式环境上使用.如:jquery-1.3.2.min.js

vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如：jquery-1.3.2-vsdoc2.js

release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip

主机网全新上线，买空间、服务器就上主机网，安全有保障！CNIDC.COM

2.编写程序

创建一个HTML页面, 引入jQuery类库并且编写如下代码：

以下为引用的内容：

<!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>    <title>Hello World jQuery!</title>    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script></head><body>    <div id="divMsg">Hello World!</div>    <input id="btnShow" type="button"
                        value="显示" />    <input id="btnHide" type="button"
                        value="隐藏" /><br />    <input id="btnChange" type="button"
                        value="修改内容为 Hello World, too!" />    <script type="text/javascript" >        $("#btnShow").bind("click", function(event) { $("#divMsg").show(); });        $("#btnHide").bind("click", function(event) { $("#divMsg").hide(); });        $("#btnChange").bind("click", function(event) { $("#divMsg").html("Hello World, too!"); });          </script></body></html>

效果如下:
image

页面上有三个按钮, 分别用来控制Hello World的显示,隐藏和修改其内容.

此示例使用了:

(1) jQuery的Id选择器: $("#btnShow")

1. 控制编译结果

(2) 事件绑定函数 bind()

(3) 显示和隐藏函数. show()和hide()

(4) 修改元素内部html的函数html()

在接下来的教程中我们将深入这些内容的学习.

五.启用Visual Studio 对jQuery的智能感知

首先看一下Visual Studio带给我们的智能感知惊喜. 要让Visual Studio支持智能感知, 需要下列条件:

安装了 VS2008 SP1

com/en-us/vstudio/cc533448.aspx

安装VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.

该补丁会导致Visual Studio在一个JavaScript库被引用时，查找是否存在一个可选的"-vsdoc.js"文件，如果存在的话，就用它来驱动 JavaScript intellisense引擎。这些加了注释的"-vsdoc.js"文件可以包含对JavaScript方法提供了帮助文档的XML注释，以及对无法自动推断出的动态JavaScript签名的另外的代码intellisense提示。你可以在"这里"了解该补丁的详情。你可以在"这里"免费下载该补丁。

必须要引用vsdoc版本的jquery库

以下为引用的内容：

<script
                        type="text/javascript"
                        src="scripts/jquery-1.3.2-vsdoc2.js"></script>

主机网全新上线，买空间、服务器就上主机网，安全有保障！CNIDC.COM

在编写脚本的时候, 甚至刚刚输入"$"的时候,VS可以智能提示:
image

在使用方法时, 还会有更多的提示:
image

有了智能感知我们编写javascript变得和C#一样快速,便捷,舒服.大部分情况可以一次编写成功而不用再为了一个大小写而查询javascript 帮助文件.能够让Visual Studio对jQuery实现智能感知的前提是要引入vsdoc版本的jQuery类库. 示例中我们引入了"jquery-1.3.2-vsdoc2.js"文件. 如果引用其他版本比如min版本的jQuery类库就无法启用智能提示.但是在正式环境下, 我们必须要使用"min"版本的jquery库文件, 以1.3.2版本号为例,各个版本的大小如下:
image

其中第一个是未压缩的jquery库. 如果启用gzip压缩并且使用min版本的jquery.js可以在传输过程中压缩到19KB.

注意,如果我们更新了脚本, 可以通过"Ctrl+Shift+J"快捷方式更新Visual Studio的智能感知,或者单击编辑->IntelliSense->更新JScript Intellisense:
image

为了即能在Visual Studio中增加脚本提示, 又能在上线的时候使用min版本的脚本库, 我们一般是用如下方式引入jQuery库:

以下为引用的内容：
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
    <%if (false)
      { %>
    <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
    asp"><%} asp">%>

这是网上推荐的方式. 编译后的页面上只有min版本的引用, 同时在开发时能够享受到智能感知.但是注意这种方式引用的min类库只能是1.2.6或者之前的版本号. 最新的1.3.2的所有非vsdoc版本的jquery库引用后都会导致JScript Intellisense更新出错. 这是1.3.2版本的一个bug, 期待后续版本中解决. 其实大家完全可以使用1.2.6版本的min库, 本教程涉及的jquery功能, 1.2.6版本基本都支持.

我们使用了if(false)让编译后的页面不包含vsdoc版本jquery库的引用, 同样的思路还可以使用比如将脚本引用放入一个PlaceHolder并设置visible=fasle等.

主机网全新上线，买空间、服务器就上主机网，安全有保障！CNIDC.COM

2. 使用后端变量

为了能使用 1.3.2 版本的min库, 我们只能通过将脚本引用放在变量里, 通过页面输出的方式, 此种方式可以正常更新JScript Intellisense.但是可能有人和我一样不喜欢在前端使用变量:

以下为引用的内容：
<asp:PlaceHolder Visible="false" runat="server">
        <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js"></script>
    </asp:PlaceHolder>
    asp"><% =jQueryScriptBlock asp">%>

后台声明变量:

以下为引用的内容：
protectedstringjQueryScriptBlock =@"<script type=""text/javascript"" src=""scripts/jquery-1.3.2.min.js""></script>"; .csharpcode, .csharpcode pre{ font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/}.csharpcode pre { margin: 0em; }.csharpcode .rem { color: #008000; }.csharpcode .kwrd { color: #0000ff; }.csharpcode .str { color: #006080; }.csharpcode .op { color: #0000c0; }.csharpcode .preproc { color: #cc6633; }.csharpcode .asp { background-color: #ffff00; }.csharpcode .html { color: #800000; }.csharpcode .attr { color: #ff0000; }.csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em;}.csharpcode .lnum { color: #606060; }

六.在独立的.JS文件中启用脚本智能感知

上面我们解决了在页面中智能感知的问题, 其实在独立的.js文件中我们同样可以启用脚本的智能感知, 在IntellisenseDemo.js文件中,添加如下语句:

以下为引用的内容：
/// <reference path="jquery-1.3.2-vsdoc2.js" />

更新JScript Intellisense, 会发现在脚本中也启用了智能提示:
image

注意,本文中讲解的脚本智能感知不仅适用于jQuery类库, 还适用于自己编写的javascript代码.

七.总结

本文简单介绍了jQuery, 以及如何搭建脚本开发环境. 示例程序没有复杂的功能, 可能还无法让没有接触过jQuery的人认识到它的强大.但是仅凭借"多浏览器支持"这一特性, 就足以让我们学习并使用jQuery, 因为如今想编写跨浏览器的脚本真的是一件困难的事情!

在后续文章中我们将深入学习jQuery选择器, 事件, 工具函数, 动画, 以及插件等.

本文代码下载:

http://files.cnblogs.com/zhangziqiu/Code-jQueryStudy-1.rar

|seektanjQuery是最近比较火的一个JavaScript库，从del.icio.us/上相关的收藏可见一斑。

到目前为之jQuery已经发布到1.2.1版本，而在这之前的一个星期他们刚发布1.2版本，看看他的各个版本的发布时间，不难发现他的飞速发展，每个月都在更新版本；而且不断有人开发出新的 jQuery插件，最近又推出了 jQuery UI 库

jQuery于2006年一月十四号在BarCamp NYC (New York City)面世。主将 John Resig ，写有《Pro JavaScript Techniques》一书，因为效力于mozolla，据说firefox 3将包含Jquery，现在的 Jquery团队有主要开发人员，推广人员，UI，插件开发，网站设计维护，其中3个主要开发人员分别是：两个美国人John Resig/Brandon Aaron，一个德国人Jorn Zaefferer)

下面简单介绍一下jQuery的一些特性和用法：

1、精准简单的选择对象(dom)：

以下为引用的内容：
$('#element');// 相当于document.getElementById("element")

$('.element');//Class
$('p');//html标签
$("form > input");//子对象
$("div,span,p.myClass");//同时选择多种对象
$("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景
$(":input");//表单对象
$("input[name='newsletter']");//特定的表单对象

2、对象函数的应用简单和不限制：

element.function(par)；

$(”p.surprise”).addClass(”ohmy”).show(”slow”)...

3、对已选择对象的操作（包括样式）：

以下为引用的内容：
$("#element").addClass("selected");//给对象添加样式
$('#element').css({ "background-color":"yellow", "font-weight":"bolder" });//改变对象样式
$("p").text("Some new text.");//改变对象文本
$("img").attr({ src: "test.jpg", alt: "Test Image" });//改变对象文本
$("p").add("span");//给对象增加标签
$("p").find("span");//查找对象内部的对应元素
$("p").parent();//对象的父级元素
$("p").append("<b>Hello</b>");//给对象添加内容
4、支持aJax，支持文件格式：xml/html/script/json/jsonp

以下为引用的内容：
$("#feeds").load("feeds.html");//相应区域导入静态页内容
$("#feeds").load("feeds.php", {limit: 25}, function(){alert("The last 25 entries in the feed have been loaded");});//导入动态内容

4、对事件的支持：

以下为引用的内容：
$("p").hover(function () {
      $(this).addClass("hilite");//鼠标放上去时
    }, function () {
      $(this).removeClass("hilite");//移开鼠标
    });//鼠标放上去和移开的不同效果（自动循环所有p对象）

5、动画：

以下为引用的内容：
$("p").show("slow");//隐藏对象(慢速渐变)
$("#go").click(function(){
$("#block").animate({
    width: "90%",
    height: "100%",
    fontSize: "10em"
}, 1000 );
});//鼠标点击后宽、高、字体的动态变化

6、扩展：

以下为引用的内容：
$.fn.background = function(bg){
    return this.css('background', bg);
};
$(#element).background("red");

如果要为每一个jQuery 对象添加一个函数，必须把该函数指派给 $.fn，同时这个函数必须要返回一个 this（jQuery 对象）

jQuery相关

《Learning jQuery:Better Interaction Design and Web Development with Simple JavaScript Techniques》第一本由jQuery的开发人员写的关于如何学习jQuery的书已经于七月面世，同时还有三本相关的书在问世当中。

jQueryCamp 2007，一个jQuery开发人员的见面会也将于10月27日在Boston召开。

VisualJquery是一个Jquery的学习和查询网站，也跟着更新到了1.1.2版本。

jQuery官网介绍翻译：

jQuery是一个以前未曾有过的JavaScript库。

他快速、简洁，能够很轻易地处理HTML文档、控制事件、给页面添加动画和Ajax效果。

jQuery是为了改变JavaScript的编写方式而设计的。

他适合所有人：设计师、开发人员、极客、商业应用...

体积小：26.5KB（1.2.1压缩版），45.3KB（1.2.1精简版），78.6KB（1.2.1完整版）...20.7KB（1.1.2压缩版），57.9KB（1.1.2完整版）

兼容性：支持CSS 1-3和基本的XPath

跨浏览器：IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+（向后兼容）

jQuery插件：

以下为引用的内容：
Ajax (25)/Animation and Effects (26)/Browser Tweaks (6)/Data (17)/DOM (21)/Drag-and-Drop (6)/Events (19)/Forms (39)/Integration (12)/JavaScript (20)/jQuery Extensions (37)/Layout (23)/Media (13)/Menus (13)/Navigation (23)/Tables (11)/User Interface (84)/Utilities (27)/Widgets (41)/Windows and Overlays (4)

jQueryUI库：

基本的鼠标互动：拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)

各种互动效果：手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(magnifier)、阴影效果(shadow)
()
jQuery对象和DOM对象；这是我第一个碰到的问题。

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如：

$(”#img”).attr(”src”,”test.jpg”); 这里的$(”#img”)就是获取jQuery对象；

DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。例如：

document.getElementById(”img”).src=”test.jpg”;这里的document.getElementById(”img”)就是DOM对象；

$(”#img”).attr(”src”,”test.jpg”); 和document.getElementById(”img”).src=”test.jpg”;是等价的，是正确的，但是$(”#img”).src=”test.jpg”;或者document.getElementById(”img”).attr(”src”,”test.jpg”); 都是错误的。

再说一个例子：就是this，我在写jQuery的时候经常这样写：

this.attr(”src”,”test.jpg”);

可是就是出错。其实this是DOM对象，而

.attr(”src”,”test.jpg”)

是jQuery方法，所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象，例如：

$(this).attr(”src”,”test.jpg”);

1.DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

如：var v=document.getElementById(”v”); //DOM对象

var $v=$(v);    //jQuery对象

转换后，就可以任意使用jQuery的方法了。

2.jQuery对象转成DOM对象:

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：

var $v =$(”#v”) ; //jQuery对象

var v=$v[0];    //DOM对象

alert(v.checked)   //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $v=$(”#v”); //jQuery对象

var v=$v.get(0);   //DOM对象

alert(v.checked) //检测这个checkbox是否被选中

通过以上方法，可以任意的相互转换jQuery对象和DOM对象。需要再强调注意的是：DOM对象才能使用
()
体积小（v1.2.3 15kb）
?丰富的DOM选择器(CSS1-3 + XPath) ?跨浏览器（IE6,FF,Safari,Opera）
?链式代码
?强大的事件、样式支持
?强大的AJAX功能
?易于扩展，插件丰富
jQuery的构造函数接收四种类型的参数：
1. jQuery(expression,context)
2. jQuery(html)
3. jQuery(elements)
4. jQuery(fn)
第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。
DEMO:
<!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>
<title>jQuery basic</title>
<style type="text/css">
.selected
{
background-color:Yellow;
}
</style>
<script src="../scripts/jquery-1.2.3.intellisense.js" type="text/javascript"></script>
</head>
<body>
<h3>jQuery构造函数</h3>
<ul>
<li>jQuery(expression,context)</li>
<li>jQuery(html)</li>
<li>jQuery(elements)</li>
<li>jQuery(fn)</li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>
将以下jQuery代码加入文末的脚本块中：
jQuery('ul>li:first').addClass("selected");
其中jQuery()可替换为快捷方式$()，如果$被其它对象占用，可使用jQuery.noConflict()函数取消快捷方式。
"ul>li:first" 中ul>li表示所有位于ul下的li元素（为CSS表达式，XPath方式可用ul/li），:first表示其中的第一个。 addClass()为jQuery对象用来添加CSS样式类的函数，相反的函数为removeClass()。
再加入以下代码：
$('ul').append($('<li>new item</li>'));
其中$('<li>new item</li>')将其中的字符串转换为DOM对象，然后通过append()函数加入ul对象的最后。
接下来：
$(document).ready(function(){
$('ul').css('color','red');
});
jQuery构造函数中还可以真接传入DOM对象，如document，或jQuery对象（当然就没什么意义）。ready()函数为document添加事件处理函数，将ul的颜色设为红色。
$(document).ready()由于应用场景众多，所以可以直接用$(fn)来代替，fn表示处理函数。（ready处理函数貌似在文档内容载入完成后执行，无需等待相关其它图片等资源载入完成，所以比load事件要更早执行。
$(function(){
alert('welcome to jQuery');
});
以上代码的效果是页面一载入，就弹出一个对

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元素组成的数组。

简单的$()

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

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

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

view source
print?
01.< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>jQuery简单的选择器</title>
06.<script type="text/javascript" src="jquery-1.3.2/jquery-1.3.2.min.js"></script>
07.<style type="text/css">
08..txt-color1{ color:#FF0000}
09..txt-color2{ color:#666600}
10..txt-color3{ color:#000066}
11.</style>
12.</head>
13.<body>
14.<h1>jQuery简单的选择器</h1>
15.<div>大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素</div>
16.<div>
17.<ol>
18.<li>$("div")：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合；</li>
19.<li id="nickName">$("#nickName")：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；</li>
20.<li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li>
21.<li class="user">$(".user")：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；</li>
22.</ol>
23.</div>
24.<script type="text/javascript">
25.$(document).ready(function(){
26.$("h1").addClass("txt-color1");//给标签为h1的加上txt-color1样式
27.$(".user").addClass("txt-color2");
28.$("#nickName").addClass("txt-color3");
29.});
30.</script>
31.</body>
32.</html>

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

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

尽情期待下一篇《像写css选择器一样写jQuery选择器》
()
Query选择器有很大一部分的写法和css选择器的写法非常相识，

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

一、简单的jQuery选择器

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

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

   1. $(”div”)：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合，$(”.user”)：样式名：
   2. $(”#nickName”)：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；
   3. $(”.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>
()< !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>
()
四：简单的过滤选择器

   1. :animated：匹配所有正在执行动画效果的元素集合；
   2. :eq(index)：匹配索引为 index 的一个元素，例如：$(”div:eq(0)”)//第一个div；
   3. :even：匹配索引为偶数（双数）的元素集合，例如：$(”div:even”)；
   4. :o dd：匹配索引为奇数（单数）的元素集合，例如：$(”div:odd”)；
   5. :first：匹配找到的第一个元素，等价于:eq(0)，例如：$(”div:first”)；
   6. :gt(index) ：匹配索引大于 index 的元素集合，例如：$(”div:gt(0)”)//除了第一个div外的所以div；
   7. :lt(index)：匹配索引小于于 index 的元素集合，例如：$(”div:lt(0)”)；
   8. :header：匹配h1-h6的所有元素集合；
   9. :last：匹配找到的最后一个元素，例如：$(”div:last”)//最后一个div；
10. :not(selector)：去除所有与给定选择器匹配的元素，例如：$(”input:not(:checked)”)//除了被选中的所有input；

示例代码：

< !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> <div class="txt"><span>你叫什么名字呢？</span> <span>我爱javascript森林；</span> <span>以为森林里有我好好多的朋友；</span> <span>欢迎你加入我们；</span><div> <div> <input type="submit" name="button" id="button1" value="测试$('div:eq(1)')" /> <input type="submit" name="button" id="button2" value="测试$('.txt span:even')" /> <input type="submit" name="button" id="button3" value="测试$('.txt span:odd')" /> <input type="submit" name="button" id="button4" value="测试$('span:first')" /> <input type="submit" name="button" id="button5" value="测试$('span:gt(0)')" /> <input type="submit" name="button" id="button6" value="测试$('div:not(:last)')" /> </div> <script type="text/javascript"> $(document).ready(function(){ $("#button1").click(function(){ $("div:eq(1)").css("color","#FF0033") }); $("#button2").click(function(){ $(".txt span:even").css("color","#EE5533") }); $("#button3").click(function(){ $(".txt span:odd").css("color","#66ff33") }); $("#button4").click(function(){ $("span:first").css("color","#3300ff") }); $("#button5").click(function(){ $("span:gt(0)").css("color","#990099") }); $("#button6").click(function(){ $("div:not(:last)").css("color","#ff0099") }); }); </script> </div></div></body> </html>

提示：你可以先修改部分代码再运行。
< !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>
<div class="txt"><span>你叫什么名字呢？</span>
<span>我爱javascript森林；</span>
<span>以为森林里有我好好多的朋友；</span>
<span>欢迎你加入我们；</span><div>
<div>
<input type="submit" name="button" id="button1" value="测试$('div:eq(1)')" />
<input type="submit" name="button" id="button2" value="测试$('.txt span:even')" />
<input type="submit" name="button" id="button3" value="测试$('.txt span:odd')" />
<input type="submit" name="button" id="button4" value="测试$('span:first')" />
<input type="submit" name="button" id="button5" value="测试$('span:gt(0)')" />
<input type="submit" name="button" id="button6" value="测试$('div:not(:last)')" />
</div>
<script type="text/javascript">
$(document).ready(function(){
    $("#button1").click(function(){
        $("div:eq(1)").css("color","#FF0033")
    });
    $("#button2").click(function(){
        $(".txt span:even").css("color","#EE5533")
    });
    $("#button3").click(function(){
        $(".txt span:odd").css("color","#66ff33")
    });
    $("#button4").click(function(){
        $("span:first").css("color","#3300ff")
    });
    $("#button5").click(function(){
        $("span:gt(0)").css("color","#990099")
    });
    $("#button6").click(function(){
        $("div:not(:last)").css("color","#ff0099")
    });
});
</script>
</div></div></body>
</html>

()
五、Jquery的子元素选择器

   1. :first-child ：匹配每个父元素的第一个子元素，相当于E:nth-child(0)，例如：$(”ul li:first-child”)；
   2. :last-child ：匹配每个父元素的最后一个子元素，例如：$(”ul li: last -child”)；
   3. :nth-child(index/even/odd/equation)：匹配每一个父元素的第N个子或奇偶元素，例如：$(”ul li:nth-child(2)”)；
   4. :o nly-child ：如果某个元素是父元素中唯一的子元素，那将会被匹配$(”ul li:only-child”)；

六、子元素选择器和过滤性选择器的一些区别

:first-child和:first：

:first只匹配一个元素，而:first-child将为每个父元素匹配一个子元素，所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素，而:first永远只能匹配到一个元素。

:last-child和:last的区别道理也是一样的；

看示例：
view source
print?
01.< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>无标题文档</title>
06.<script type="text/javascript" src="http://www.css88.com/jquery1.3.2/jquery-1.3.2.min.js"></script>
07.</head>
08.
09.<body>
10.    <h3>我正在学习并且应用的技术</h3>
11.    <ul>
12.        <li>javascript</li>
13.        <li>css2.1</li>
14.        <li>html4</li>
15.        <li>MXML</li>
16.    </ul>
17.    <h3>我想学习的技术</h3>
18.    <ul>
19.        <li>actionscript</li>
20.        <li>css 3</li>
21.        <li>html 5</li>
22.        <li>PHP</li>
23.    </ul>
24.    <h3>我精通的技术</h3>
25.    <ul>
26.        <li>群里吹水</li>
27.        <li>忽悠新人</li>
28.    </ul>
29.    <div><input type="submit" name="button" id="button1" value="测试$('li:first')" />
30. <input type="submit" name="button" id="button2" value="测试$('li:first-child')" /></div>
31.    <script type="text/javascript">
32.        $(document).ready(function(){
33.            $("#button1").click(function(){
34.                $("li:first").css("color","#FF3300");//这里匹配了<li>javascript</li>
35.            });
36.            $("#button2").click(function(){
37.                $("li:first-child").css("color","#0071db");//这里匹配了<li>javascript</li>、<li>actionscript</li>、<li>群里吹水</li>
38.            });
39.        });
40.    </script>
41.</body>
42.</html>

:nth-child(index/even/odd/equation)和:eq(index)

:eq(index) 只匹配一个元素，索引值从0开始；

:nth-child(index/even/odd/equation) 匹配每一个父元素的第N个子或奇偶元素, 索引值从1开始,并且提供更丰富的参数及表达式；

:nth-child(even)// 匹配每一个父元素的偶数元素；

:nth-child(odd) // 匹配每一个父元素的奇数元素；

:nth-child(3n) // 匹配每一个父元素的索引值能被3整除的元素；

:nth-child(2) // 匹配每一个父元素的第2个元素；

:nth-child(3n+1) // 匹配每一个父元素的索引值被3整除后余1的元素

:nth-child(3n+2) // 匹配每一个父元素的索引值被3整除后余2的元素

所以:nth-child(index/even/odd/equation)匹配出来的是一个集合当然也有可能只匹配一个元素，而:eq(index)永远只能匹配到一个元素。

看示例（顺带:only-child也在这里测试一下）：
view source
print?
01.< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>无标题文档</title>
06.<script type="text/javascript" src="jquery1.3.2/jquery-1.3.2.min.js"></script>
07.</head>
08.
09.<body>
10.    <h3>我正在学习并且应用的技术</h3>
11.    <ul>
12.        <li>javascript</li>
13.        <li>css2.1</li>
14.        <li>html4</li>
15.        <li>MXML</li>
16.    </ul>
17.    <h3>我想学习的技术</h3>
18.    <ul>
19.        <li>actionscript</li>
20.        <li>css 3</li>
21.        <li>html 5</li>
22.        <li>PHP</li>
23.    </ul>
24.    <h3>我精通的技术</h3>
25.    <ul>
26.        <li>群里吹水</li>
27.    </ul>
28.    <div><input type="submit" name="button" id="button1" value="测试$('li:eq(2)')" />
29. <input type="submit" name="button" id="button2" value="测试$('li:nth(2)')" />
30. <input type="submit" name="button" id="button3" value="测试$('li:nth-child(even)')" />
31. <input type="submit" name="button" id="button4" value="测试$('li:nth-child(3n)')" />
32. <input type="submit" name="button" id="button5" value="测试$('li:only-child')" /></div>
33.    <script type="text/javascript">
34.        $(document).ready(function(){
35.            $("#button1").click(function(){
36.                $("li:eq(2)").css("color","#FF3300");//这里匹配了<li>html4</li>
37.            });
38.            $("#button2").click(function(){
39.                $("li:nth-child(1)").css("color","#0071db");//这里匹配了<li>javascript</li>、<li>actionscript</li>、<li>群里吹水</li>
40.            });
41.            $("#button3").click(function(){
42.                $("li:nth-child(even)").css("color","#185309");//这里匹配了<li>css2.1</li>、<li>MXML</li>、<li>css 3</li>、<li>PHP</li>
43.            });
44.            $("#button4").click(function(){
45.                $("li:nth-child(3n)").css("color","#185309");//这里匹配了<li>html4</li>、<li>html 5</li>
46.            });
47.            $("#button5").click(function(){
48.                $("li:only-child").css("color","#4C1F68");//这里匹配了<li>html4</li>、<li>html 5</li>
49.            });
50.        });
51.    </script>
52.</body>
53.</html>

进入jQuery的精彩世界

相关文章

日志（系统消息）

时间序列模型简介

struts2之constant介绍

spring2.5+jpa(hibernate)+struts2

如何在商品采购中考虑不确定性

struts2之constant介绍(二)

洛谷 2574 XOR的艺术

报童问题 (The Newsvendor Problem)