一.摘要
本系列文章将带您进入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的精彩世界
最新推荐文章于 2024-09-14 18:52:56 发布