jQuery 总结 转Word下载.docx
- 文档编号:3914250
- 上传时间:2023-05-02
- 格式:DOCX
- 页数:66
- 大小:347.37KB
jQuery 总结 转Word下载.docx
《jQuery 总结 转Word下载.docx》由会员分享,可在线阅读,更多相关《jQuery 总结 转Word下载.docx(66页珍藏版)》请在冰点文库上搜索。
System程序集"
是类库,而"
ASP.NETMVC"
是框架.jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事.
脚本库能够帮助我们完成编码逻辑,实现业务功能.使用jQuery将极大的提高编写javascript代码的效率,让写出来的代码更加优雅,更加健壮.同时网络上丰富的jQuery插件也让我们的工作变成了"
有了jQuery,天天喝茶水"
--因为我们已经站在巨人的肩膀上了.
创建一个ASP.NETMVC项目时,会发现已经自动引入了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.太多了!
等待我们一一去发现.
四.HelloWorldjQuery
按照惯例,我们来编写jQuery的HelloWorld程序,来迈出使用jQuery的第一步.
在本文最后可以下本章的完整源代码.
1.下载jQuery类库
jQuery的项目下载放在了GoogleCode上,下载地址:
上面的地址是总下载列表,里面有很多版本和类型的jQuery库,主要分为如下几类:
min:
压缩后的jQuery类库,
在正式环境上使用.如:
jquery-1.3.2.min.js
vsdoc:
在VisualStudio中需要引入此版本的jquery类库才能启用智能感知.如:
jquery-1.3.2-vsdoc2.js
release包:
里面有没有压缩的jquery代码,以及文档和示例程序.如:
jquery-1.3.2-release.zip
2.编写程序
创建一个HTML页面,引入jQuery类库并且编写如下代码:
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
<
title>
HelloWorldjQuery!
/title>
scripttype="
text/javascript"
src="
scripts/jquery-1.3.2-vsdoc2.js"
/script>
/head>
body>
divid="
divMsg"
HelloWorld!
/div>
inputid="
btnShow"
type="
button"
value="
显示"
/>
btnHide"
隐藏"
br/>
btnChange"
修改内容为HelloWorld,too!
"
>
$("
#btnShow"
).bind("
click"
function(event){$("
#divMsg"
).show();
});
#btnHide"
).hide();
#btnChange"
).html("
HelloWorld,too!
);
/body>
/html>
效果如下:
页面上有三个按钮,分别用来控制HelloWorld的显示,隐藏和修改其内容.
此示例使用了:
(1)jQuery的Id选择器:
)
(2)事件绑定函数bind()
(3)显示和隐藏函数.show()和hide()
(4)修改元素内部html的函数html()
在接下来的教程中我们将深入这些内容的学习.
五.启用VisualStudio对jQuery的智能感知
首先看一下VisualStudio带给我们的智能感知惊喜.要让VisualStudio支持智能感知,需要下列条件:
∙安装VS2008SP1
下载地址:
∙安装VS2008PatchKB958502以支持"
-vsdoc.js"
Intellisense文件.
该补丁会导致VisualStudio在一个JavaScript库被引用时,查找是否存在一个可选的"
文件,如果存在的话,就用它来驱动JavaScriptintellisense引擎。
这些加了注释的"
文件可以包含对JavaScript方法提供了帮助文档的XML注释,以及对无法自动推断出的动态JavaScript签名的另外的代码intellisense提示。
你可以在"
这里"
了解该补丁的详情。
免费下载该补丁。
∙必须要引用vsdoc版本的jquery库
在编写脚本的时候,甚至刚刚输入"
$"
的时候,VS可以智能提示:
在使用方法时,还会有更多的提示:
有了智能感知我们编写javascript变得和C#一样快速,便捷,舒服.大部分情况可以一次编写成功而不用再为了一个大小写而查询javascript帮助文件.能够让VisualStudio对jQuery实现智能感知的前提是要引入vsdoc版本的jQuery类库.示例中我们引入了"
jquery-1.3.2-vsdoc2.js"
文件.如果引用其他版本比如min版本的jQuery类库就无法启用智能提示.但是在正式环境下,我们必须要使用"
min"
版本的jquery库文件,以1.3.2版本号为例,各个版本的大小如下:
其中第一个是未压缩的jquery库.如果启用gzip压缩并且使用min版本的jquery.js可以在传输过程中压缩到19KB.
注意,如果我们更新了脚本,可以通过"
Ctrl+Shift+J"
快捷方式更新VisualStudio的智能感知,或者单击编辑->
IntelliSense->
更新JScriptIntellisense:
为了即能在VisualStudio中增加脚本提示,又能在上线的时候使用min版本的脚本库,我们一般是用如下方式引入jQuery库:
1.控制编译结果
scripts/jquery-1.2.6.min.js"
%if(false)
{%>
%}%>
这是网上推荐的方式.编译后的页面上只有min版本的引用,同时在开发时能够享受到智能感知.但是注意这种方式引用的min类库只能是1.2.6或者之前的版本号.最新的1.3.2的所有非vsdoc版本的jquery库引用后都会导致JScriptIntellisense更新出错.这是1.3.2版本的一个bug,期待后续版本中解决.其实大家完全可以使用1.2.6版本的min库,本教程涉及的jquery功能,1.2.6版本基本都支持.
我们使用了if(false)让编译后的页面不包含vsdoc版本jquery库的引用,同样的思路还可以使用比如将脚本引用放入一个PlaceHolder并设置visible=fasle等.
2.使用后端变量
为了能使用1.3.2版本的min库,我们只能通过将脚本引用放在变量里,通过页面输出的方式,此种方式可以正常更新JScriptIntellisense.但是可能有人和我一样不喜欢在前端使用变量:
asp:
PlaceHolderVisible="
false"
runat="
server"
/asp:
PlaceHolder>
%=jQueryScriptBlock%>
后台声明变量:
protectedstringjQueryScriptBlock=@"
scripts/jquery-1.3.2.min.js"
;
六.在独立的.JS文件中启用脚本智能感知
上面我们解决了在页面中智能感知的问题,其实在独立的.js文件中我们同样可以启用脚本的智能感知,在IntellisenseDemo.js文件中,添加如下语句:
///<
referencepath="
更新JScriptIntellisense,会发现在脚本中也启用了智能提示:
注意,本文中讲解的脚本智能感知不仅适用于jQuery类库,还适用于自己编写的javascript代码.
七.总结
本文简单介绍了jQuery,以及如何搭建脚本开发环境.示例程序没有复杂的功能,可能还无法让没有接触过jQuery的人认识到它的强大.但是仅凭借"
多浏览器支持"
这一特性,就足以让我们学习并使用jQuery,因为如今想编写跨浏览器的脚本真的是一件困难的事情!
在后续文章中我们将深入学习jQuery选择器,事件,工具函数,动画,以及插件等.
本文代码下载:
作者:
张子秋
出处:
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
本章讲解jQuery最重要的选择器部分的知识.有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象,可以明显减轻开发人员的工作量.
编写任何javascript程序我们要首先获得对象,jQuery选择器能彻底改变我们平时获取对象的方式,可以获取几乎任何语意的对象,比如"
拥有title属性并且值中包含test的<
a>
元素"
完成这些工作只需要编写一个jQuery选择器字符串.学习jQuery选择器是学习jQuery最重要的一步.
三.Dom对象和jQuery包装集
无论是在写程序还是看API文档,
我们要时刻注意区分Dom对象和jQuery包装集.
1.Dom对象
在传统的javascript开发中,我们都是首先获取Dom对象,比如:
vardiv=document.getElementById("
testDiv"
vardivs=document.getElementsByTagName("
div"
我们经常使用document.getElementById方法根据id获取单个Dom对象,或者使用document.getElementsByTagName方法根据HTML标签名称获取Dom对象集合.
另外在事件函数中,可以通过在方法函数中使用this引用事件触发对象(但是在多播事件函数中IE6存在问题),或者使用event对象的target(FF)或srcElement(iIE6)获取到引发事件的Dom对象.
注意我们这里获取到的都是Dom对象,Dom对象也有不同的类型比如input,div,span等.
Dom对象只有有限的属性和方法:
2.jQuery包装集
jQuery包装集可以说是Dom对象的扩充.在jQuery的世界中将所有的对象,无论是一个还是一组,都封装成一个jQuery包装集,比如获取包含一个元素的jQuery包装集:
varjQueryObject=$("
#testDiv"
jQuery包装集都是作为一个对象一起调用的.jQuery包装集拥有丰富的属性和方法,这些都是jQuery特有的:
3.Dom对象与jQuery对象的转换
(1)Dom转jQuery包装集
如果要使用jQuery提供的函数,
就要首先构造jQuery包装集.
我们可以使用本文即将介绍的jQuery选择器直接构造jQuery包装集,比如:
$("
上面语句构造的包装集只含有一个id是testDiv的元素.
或者我们已经获取了一个Dom元素,比如:
vardiv=document.getElementById("
上面的代码中div是一个Dom元素,我们可以将Dom元素转换成jQuery包装集:
vardomToJQueryObject=$(div);
小窍门:
因为有了智能感知,所以我们可以通过智能感知的方法列表来判断一个对象啊是Dom对象还是jQuery包装集.
(2)jQuery包装集转Dom对象
jQuery包装集是一个集合,所以我们可以通过索引器访问其中的某一个元素:
vardomObject=$("
)[0];
注意,通过索引器返回的不再是jQuery包装集,而是一个Dom对象!
jQuery包装集的某些遍历方法,比如each()中,可以传递遍历函数,在遍历函数中的this也是Dom元素,比如:
).each(function(){alert(this)})
如果我们要使用jQuery的方法操作Dom对象,怎么办?
用上面介绍过的转换方法即可:
).each(function(){$(this).html("
修改内容"
)})
小结:
先让大家明确Dom对象和jQuery包装集的概念,将极大的加快我们的学习速度.我在学习jQuery的过程中就花了很长时间没有领悟到两者的具体差异,因为书上并没有专门讲解两者的区别,所以经常被"
this指针为何不能调用jQuery方法"
等问题迷惑.
直到某一天豁然开朗,发现只要能够区分这两者,就能够在写程序时变得清清楚楚.
四.什么是jQuery选择器
在Dom编程中我们只能使用有限的函数根据id或者TagName获取Dom对象.
在jQuery中则完全不同,jQuery提供了异常强大的选择器用来帮助我们获取页面上的对象,并且将对象以jQuery包装集的形式返回.
首先来看看什么是选择器:
//根据ID获取jQuery包装集
varjQueryObject=$("
上例中使用了ID选择器,选取id为testDiv的Dom对象并将它放入jQuery包装集,最后以jQuery包装集的形式返回.
符号在jQuery中代表对jQuery对象的引用,"
jQuery"
是核心对象,其中包含下列方法:
jQuery(expression,context)
Returns:
jQuery
这个函数接收一个CSS选择器的字符串,然后用这个字符串去匹配一组元素。
ThisfunctionacceptsastringcontainingaCSSselectorwhichisthenusedtomatchasetofelements.
jQuery(html,ownerDocument)
根据HTML原始字符串动态创建Dom元素.
CreateDOMelementson-the-flyfromtheprovidedStringofrawHTML.
jQuery(elements)
将一个或多个Dom对象封装jQuery函数功能(即封装为jQuery包装集)
WrapjQueryfunctionalityaroundasingleormultipleDOMElement(s).
jQuery(callback)
$(document).ready()的简写方式
Ashorthandfor$(document).ready().
上面摘选自jQuery官方手册.Returns的类型为jQuery即表示返回的是jQuery包装集.其中第一个方法有些问题,官方接口写的是CSS选择器,但是实际上这个方法不仅仅支持CSS选择器,而是所有jQuery支持的选择器,有些甚至是jQuery自定义的选择器(在CSS标准中不存在的选择器).为了能让大家理解的更清楚,
我将方法修改如下:
jQuery(selector,context)
jQuery包装集
根据选择器选取匹配的对象,以jQuery包装集的形式返回.context可以是Dom对象集合或jQuery包装集,传入则表示要从context中选择匹配的对象,不传入则表示范围为文档对象(即页面全部对象).
上面这个方法就是我们选择器使用的核心方法.可以用"
代替jQuery让语法更简介,比如下面两句话的效果相同:
//$是jQuery对象的引用:
varjQueryObject=jQuery("
接下来让我们系统的学习jQuery选择器.
五.jQuery选择器全解
通俗的讲,Selector选择器就是"
一个表示特殊语意的字符串"
.只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.
但是如何将jQuery选择器分类让我犯难.因为书上的分类和jQuery官方的分类截然不同.最后我决定以实用为主,暂时不去了解CSS3选择器标准,而按照jQuery官方的分类进行讲解.
jQuery的选择器支持CSS3选择器标准.下面是W3C最新的CSS3选择器标准:
//www.w3.org/TR/css3-selectors/
标准中的选择器都可以在jQuery中使用.
jQuery选择器按照功能主要分为"
选择"
和"
过滤"
.并且是配合使用的.可以同时使用组合成一个选择器字符串.主要的区别是"
作用的选择器是指定条件从前面匹配的内容中筛选,"
选择器也可以单独使用,表示从全部"
*"
中筛选.比如:
$(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jQuery 总结
![提示](https://static.bingdoc.com/images/bang_tan.gif)