ImageVerifierCode 换一换
你正在下载:

JQuery.docx

[预览]
格式:DOCX , 页数:20 ,大小:86.20KB ,
资源ID:5771505      下载积分:3 金币
快捷下载
登录下载
邮箱/手机:
温馨提示:
快捷下载时,用户名和密码都是您填写的邮箱或者手机号,方便查询和重复下载(系统自动生成)。 如填写123,账号就是123,密码也是123。
特别说明:
请自助下载,系统不会自动发送文件的哦; 如果您已付费,想二次下载,请登录后访问:我的下载记录
支付方式: 支付宝    微信支付   
验证码:   换一换

加入VIP,免费下载
 

温馨提示:由于个人手机设置不同,如果发现不能下载,请复制以下地址【https://www.bdocx.com/down/5771505.html】到电脑端继续下载(重复下载不扣费)。

已注册用户请登录:
账号:
密码:
验证码:   换一换
  忘记密码?
三方登录: 微信登录   QQ登录  

下载须知

1: 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。
2: 试题试卷类文档,如果标题没有明确说明有答案则都视为没有答案,请知晓。
3: 文件的所有权益归上传用户所有。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 本站仅提供交流平台,并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

版权提示 | 免责声明

本文(JQuery.docx)为本站会员(b****5)主动上传,冰豆网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对上载内容本身不做任何修改或编辑。 若此文所含内容侵犯了您的版权或隐私,请立即通知冰豆网(发送邮件至service@bdocx.com或直接QQ联系客服),我们立即给予删除!

JQuery.docx

1、JQuery前言 贝壳(就是本文作者了)也属于刚刚会用点JQuery的那一类型, 在学习过程中也遇到挺多问题,特别是在开始入门的时候.一直准备写些有关JQuery的文章,但又恐自己文笔及表达能力有限而误人子弟,最终还是鼓起勇气. 如在文章中有错误或者不合适的理解望广大朋友直接指出批评. 本文的宗旨, 授人鱼不如授人渔. 我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过. 但当我们已经会渔了还用担心鱼吗!? BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识. JQuery是什么 JQuery只是一个JS文件 人对新

2、鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时候也一样. 想掌握又怕自己学不会. 其实JQuery很简单. JQuery其实就是一个工具包,很多常用的功能已经被好心人封装好,我们真要直接调用就可以了(有点类似SDK),具体内部原理和实现我们现在不去讨论. 记住JQuery很简单,很方便. 目前jQuery最新Release版本为1.32,官方下载地址为: 本系列教程基于1.32版进行讲解. JQuery有两种版本: 一种为uncompressed版(未压缩版)主要用在开发中. 另一种为Minified(迷您版)当开发完毕了,就可以改用这个版本. 两种版本的区别 文件大小不一样, 最终用户在浏

3、览时可以减少下载JS时的等待时间. Uncompressed版文件大小为118KB Minified版文件大小为56KB JQuery能带给我们什么 一, 站在巨人的肩上 别人已经发明了轮子,我们没必要自己再去造一个. 二, 强大的BOM,DOM,CSS,事件 的操作能力 我最常用的是CSS及DOM的操作,真的太方便了. 三, 更加简洁的代码 自己的亲身经历,比如表格(Table)中的TR奇偶为两种颜色的代码如果自己用JavaScript去编号得用几十行代码,JQuery只需要2行就可以了. 四, 与浏览器无关性 做过JavaScript开发的就知道JavaScript在不同的浏览器下行为表现

4、有时不一样,我们不得不为不同的浏览器编写相应的代码. JQuery在这方法已经内部处理,我们只管去用就是了. 五, 不错的性能 我自己有自知之明, 至少我写的JavaScript代码的运行效率不如JQuery的高. 如何使用JQuery 万年开头难,我在第一次使用JQuery时被吓到过,不知道怎么使用,其实很简单,下面我们用一个例子来说明. : ) 建立一个html文件,比如index.html 并与JQuery库文件jquery-1.3.2.js放到同目录下(其实放那都可以) 首先我们解决JQuery的引用. 代码如下: JQuery测试 红色的那一行代码就完成了JQuery的引用,简单吧!

5、 现在我们再扩充一个功能,使 index.html显示一个表格,并且表格内各行的颜色奇偶不同.也就是奇数行是一种颜色,偶数行又是另一种颜色. index.html代码结构: JQuery测试 /*table中偶数行*/ .tabEven background: #ff0000; /*table中奇数行*/ .tabOdd background: #00ff00; / 快购利众网_1 1 快购利众网_2 1 快购利众网_3 1 快购利众网_4 1 快购利众网_5 1 效果如下: 代码解析: $(document).ready(function() $(#tabTest tr:even).addC

6、lass(tabEven); $(#tabTest tr:odd).addClass(tabOdd); ); $(document).ready 的作用很简单,就是等待网页全部内部载入后再执行JavaScript代码(别忘了JQuery也是JavaScript代码哟), 这个函数几乎在所有使用JQuery的代码中都用到. 因为如果我们的Javascript代码中如果有DOM操作,在网页还没完全读取完时整个DOM框架还没有真正建立起来,在这之前的DOM操作都是无效的. $(#tabTest tr:even).addClass(tabEven); 为id为tabTest的表格的偶数行增加名为tab

7、Even的CSS样式 $(#tabTest tr:odd).addClass(tabOdd); 为id为tabTest的表格的奇数行增加名为tabEven的CSS样式 最后, 初学者千万不要为陌生的代码而感到不知所措,记住JQuery很简单. 就进入实战?是不是太快了?我还不知道怎么用JQuery! . 我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : ) 在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址 今天的教程有

8、些复杂(只是概念多点而已),但过了这一关,JQuery的学习可谓是一马平川. 好了,进入正题. 再次申明JQuery很简单,take easy! 从那开始呢? 最好的切入地方就从JQuery的最基本的一个函数 ready 开始! 该函数的作用可以看做和onLoad,至少现在可以这么看待. 定义 ready(fn); 功能 这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度。 简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需

9、要在那一刻执行。 有一个参数对jQuery函数的引用会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。 请确保在 元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照(代码中的)先后顺序依次执行。 通过上面所述,我们可以把ready看做onLoad的替代方法. 这时有的朋友就会问了,有onLoad方法我们干什么还要用ready方法? 我个人的体会及看法是 onLoad缺点是以后维护起来麻烦,到处

10、都是JavaScript代码,很容易出问题的哟! 在 中,ppk针对这个问题的看法也是如此,尽量不要在标签中直接编写JavaScript代码. 实例 两种编写方式 一 $(document).ready(function()alert(Hello World!);); 二 var myFun = function()alert(Hello World!); $(document).ready(myFun); 到这儿我想大家对ready的用法应该是明白了,但对前面的 $(document)应该很迷惑. 这是什么东东?别急. 现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函

11、数就够了. 看完下面的代码我们就明白了$()的用法. index.html代码结构如下: JQuery测试 .p1 background: #ff0000; .p2 background: #00ff00; .p3 background: #0000ff; .myPCss font-size:36px; / p).addClass(p3); $(div+p).addClass(p3); $(divp).addClass(p3); var aP = document.getElementById(myP); $(aP).addClass(p2); ); / 快购利众网1 快购利众网2 快购利众网

12、3 快购利众网4 快购利众网5 快购利众网6 快购利众网7 代码解析: $(p).addClass(p1); $(p).removeClass(p1); $(#myP).addClass(p2); $(.myPCss).addClass(p3); $(#myDiv p).addClass(p3); $(#myDivp).addClass(p3); $(div+p).addClass(p3); $(divp).addClass(p3); var aP = document.getElementById(myP); $(aP).addClass(p2); $(p).addClass(p1); $(

13、p).removeClass(p1); 选择文档里全部的 元素对象,不论 在文档中所处的层次结构如何, 最后选到了7个 元素对象 快购利众网1 快购利众网2 快购利众网3 快购利众网4 快购利众网5 快购利众网6 快购利众网7 addClass(css name)函数很简单,就是为前面$()选择到的元素对象增加CSS样式. removeClass(css name)函数也很简单,就是去掉前面$()选择到的元素对象的指定的样式. 在这儿,这两段代码功能抵消,相当什么也没做. $(#myP).addClass(p2); 选择文档里id为myP的指定元素对象,并为该元素对象增加名称为p2的样式. 最

14、后选到了1个 元素对象 快购利众网2 知识点: 如果要选择指定ID号的元素对象,记得前面用# $(.myPCss).addClass(p3); 选择文档里样式名为myPCss的指定元素对象,并为该元素对象增加名称为p3的样式. 最后选到了1个 元素对象 快购利众网3 知识点: 如果要选择指定样式的元素对象,记得前面用. 现在可以为大家正式介绍$(),在JQuery里,我们称她为选择器函数,里面的内容称为选择器. 现在大家自己试试,记住选择器选择出的对象有可能是多个哟. 上面的内容是不是挺简单的! 嗯,革命才刚刚开始,下面的内容稍稍复杂些因为牵涉到层次的概念,但大家别急,只要记住选择器选择出的元

15、素对象可能是多个这点就不用怕了. $(#myDiv p).addClass(p3); 功能:在给定的祖先元素下匹配所有的后代元素 分成两部分来分析 一,$(#myDiv) 根据上面所学的知识,选择出1个 元素对象, 二,$(#myDiv p) 在上面2个 元素对象中的任意层中选择 元素对象. 几个? 3个 快购利众网4 快购利众网5 快购利众网6 其中 快购利众网4 快购利众网5 快购利众网6 都是在 内部定义的 虽然 快购利众网4 是在id为myDivInner的div内部定义的.但因为id为myDivInner的div 也是id为myDiv的下层,所以 快购利众网5 也属于id为myDiv

16、的下层. 有些绕口,记住一点就行. A,B操作器中如果是用空格连接,那么表示B属于A的下层(可以为任意层)之中 最后为这3个 元素对象增加名为p3的样式 知识点: 对于这类有层次的选择表达式$(A B),A选择器和B选择器可以是标签名,#id,.css三种中的任意一种,中间用空格分开,空格表示任意层次. 右边的B选择器是在左边A选择器选择的结果上进行内部任意层中选择, 记住是在左边选择出的元素对象(可能是多个)的内部进行再次选择(可能是多个). p).addClass(p3); 功能:在给定的父元素下匹配所有的子元素 代表#myDiv下的子元素对象(多个并只是下一层),最后选择出2个 元素对象

17、, 快购利众网5 快购利众网6 ,并为该 对象增加名为p3的样式 $(div+p).addClass(p3); 功能:匹配所有紧接在 div 元素后的 第一个同辈p 元素 +代表紧接着div同层的第一个子元素对象. id为myDivInner同层后面第一个因为是 ,所以后没有紧接着的 id为myDiv同层后面正好是一个 最后选择出1个 元素对象, 快购利众网7 ,并为该 对象增加名为p3的样式 知识点: 是紧接着,如果A与B之间有其它元素都无法匹配. $(divp).addClass(p3); 功能:匹配 #myDiv 元素之后的所有同辈p 元素 该功能与 + 类似,不同的有两处. 一, +为

18、同辈并且紧跟, 为同辈不需要一定紧跟 二, +为同辈并且第一个, 为同辈多个. var aP = document.getElementById(myP); $(aP).addClass(p2); $(aP).addClass(p2) 其实就是$(#myP).addClass(p2) 的另一种形式. $()中处了可以用字符串的表达式选择器,还可以使用DOM对象 当你能看到这句话,我想对你说辛苦了. 学习的过程本来就是艰辛难耐的,唯为坚持才能战胜一切. 到现在我们应该明白之前的$(document)代表什么意思了吧. 好了, 今天先讲到这儿. 要快速熟悉选择器的用法只有多加练习.更多的高级应用我相信大家都能自己学会,掌握.在实战篇上发布后很多朋友建议用真正的“实战”例子。 好吧,我尽量用我自己的项目中的例子来讲解,但如果开篇说的那样,我自己也是刚刚开始学JQuery,所以自己项目中的例子也许是很简单的。 有些朋友希望我讲解一些有关JavaScript,CSS方面的知识,说实话我本没有准备在本套教程里讨论与此有关的知识, 但挺多

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1