jQuery网络教程Word文件下载.docx

1、jQuery速成 - 内部插入第十六节：jQuery速成 - 外部插入第十七节：jQuery速成 - 包裹第十八节：jQuery速成 -替换，删除和复制第十九节：jQuery速成 - 元素的赋值第四章：样式篇 - 层叠样式表的处理第二十节：jQuery速成- 样式的设置与定义第五章：提高篇 - jQuery中的事件机制第二十一节：jQuery速成- 页面的载入事件与事件处理第二十二节：jQuery速成- 鼠标事件与交互第二十三节：jQuery速成- 焦点事件第二十四节：jQuery速成- 键盘事件第二十五节：jQuery速成- 其他事件第六章：效果篇 - jQuery中的动画效果第二十六节：j

2、Query速成- 动画实现的基本方法第二十七节：jQuery速成- 元素的渐隐渐显第二十八节：jQuery速成- 元素的滑动第二十九节：jQuery速成- 自定义动画第七章：工具篇 - jQuery中的工具使用第三十节：jQuery速成- 浏览器种类及其特性的检测第三十一节：jQuery速成- 数组和对象的操作第三十二节：jQuery速成- 工具杂项第八章：高级篇 - Ajax异步请求及调用实战第三十三节：jQuery速成- Ajax请求 （讲解篇）第三十四节：jQuery速成- Ajax请求 （实战篇） 初学jQuery的朋友，基本上都会问同一个问题“什么是jQuery？”等类似的问题，理解

3、这个问题对于后面的学习会起到促进作用。以下是我整理出的大家常问的几个问题：1、 什么是jQuery？2、 什么是类库？3、 jQuery与JavaScript有什么关系？4、 JavaScript与java又有什么关系？5、 JavaScript、jQuery、Ajax、Json等又是什么？区别又是什么？6、 不会JS能不能学jQuery？我相信，很多人对这些技术有着似懂非懂的感觉，不是很了解，以上问题肯定是初学者都会产生的问题，如果你对它有兴趣或者想去驾驭它。那么请跟KwooShung来，向jQuery进军！lets GO！Q:什么是jQuery？A:jQuery是JavaScript的类库

4、，它由John Resig（美国人） 创建，至今已经吸引了来自世界各地的众多JavaScript高手加入该团队。什么是类库？这是程序中的一个基本概念。所谓类，可以理解为是一组语句的集合，用来描述一组具有共同属性和功能的对象。字面理解也就是说类库就是类的集合。Java和.net的类库意思类似。但是在jQuery中，只是集合了许多的方法功能集合，使我们可以通过简单的代码就能实现复杂的效果。jQuery与JavaScript有什么关系？jQuery是使用JavaScript编写的，也就是说JavaScript可以任意调用，其他程序并不能很轻易的调用。就好比JavaScript是鸡，jQuery是鸡蛋

5、，鸡只能生鸡蛋。再说的明白些，jQuery是使用JavaScript编写的，就好比鸡蛋是鸡生的。如果你还不明白再看看另一个例子： 我们可以把JavaScript比喻成文字，假如使用文字写了两本菜谱 西餐菜谱大全 和 中餐菜谱大全，前者是prototype（在jQuery之前也是一种类库）后者是jQuery。菜谱里面都集合了很多做菜的方法也可以叫做菜的类库。在程序里面呢就叫做类库，方法库，函数库等。JavaScript与Java又有什么关系？乍眼一看，它们有关系或者是同一家公司的产品，其实它们俩既不是兄弟姐妹也不是同一家公司所开发的，前者是Netscape网景公司开发，后者是Sun公司开发，20

6、09年04月20日，Oracle（甲骨文）宣布以74亿美元收购Sun。（详细的资料可以到网上搜一下）JavaScript、jQuery、Ajax、Json等又是什么？读到这里，我想不用再讲JS和jQuery了吧？如果你还认为需要讲解，那你再读读前面的几个问题，肯定就明白了，直接切入正题。Ajax：全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），它是由JavaScript+CSS+DOM+ XMLHttpRequest的四种技术的结合,并且JS是Ajax的核心。jQuery将Ajax的实现变得更加轻松容易。Ajax就是咱们常说的局部刷

7、新。JSON（JavaScript Object Notation） 是一种轻量级的数据交换格式。易于人阅读和编写的同时也易于机器解析和生成。它基于JavaScript的一个子集。 Json采用完全独立于语言的文本格式，可以简单的理解为数据存储的一种格式或交换方式。不会JS能不能学jQuery？我不知道大家所指的不会JS是什么程度，但我认为如果你一点都不懂JS那是很难学懂的，因为jQuery是JS的类库。另外如果你懂得其他语言，也可以很快的理解的。如果什么都不会我可以给大家一个快速掌握JS基础的方法，先去看JS的数据类型、变量的定义、函数方法的定义、函数方法的调用以及循环和判断，只要知道上面这

8、几种非常容易学会。看着内容挺多其实很简单，最慢一天就能搞懂。注：下节课我们还是延续跟KwooJan学习CSS的风格，以实例为主的通俗易懂的教程，请大家做好准备！目前大家只需要准备好记事本、类库和您的键盘鼠标就可以啦不过还是建议大家用编辑器进行开发，便于提高开发效率以及正确率，这里KwooShung建议大家使用Dreamweaver CS4，版本一定要是CS4，因为以后我们用到它的地方还很多。【第二节】jQuery速成 - 核心！jQuery的核心是大家必须要学习的内容，我写了一个简单的例子，大家先不要看我的源代码，看看使用js是否能够做得出。【例子】要求：1）页面上一个按钮；2）点击后弹出窗口

9、，我被点击了；如下图：JavaScript代码如下：1. 2. html xmlns=/www.w3.org/1999/xhtml3. 4. 5. 实例16. 7. function myClick（）8. 9. alert（我被点击了！）;10. 11. 12. 13. 14. input type=submit value=请点击我 onclick=myClick（）;15. 16. 复制代码然而jQuery与此类似，但是在HTML页中不必填写onclick= 事件调用myClick（）方法，只需要引入jQuery类库以及自己编写的jQuery代码即可。下面是我的jQuery代码实现的上图

10、方法看完上面的jQuery例子以后，可以发现其实我们什么都不用在HTML页面中写，只需引入相关的js文件即可，这样做的优点可以使我们的HTML页面更加简单，不需要穿插复杂的js代码，从而使页面与脚本完美分离，是不是很神奇？例题中的script language=javascript charset=GB2312 src=js/demo1.js num2 ? num1:num2; min:function（num1,num2）return num1 num2相比较后如果num1大于num2那么返回“true”,那么此方法返回“？”之后“：”之前的内容也就是num1，反之是num2。调用的时候只要

11、使用$.max（2,3）传入任意的两个参数，那么将返回num2也就是数字3;$.min（7,8）则返回num1因为num1比num2小。$替换成jQuery完全没有问题。$.fn.extendcheck:function（）return this.each（function（） this.checked = true; ）;uncheck:return this.each（function（） this.checked = false;此方法也是一种插件的实现方法，其中this表示是调用者当前所指dom对象，比如$（#abc）.click（function（）this）这里的this指的就是#

12、abc这个dom对象。each在上面已经讲解过了。在此插件方法extend中定义了两个方法分别是check和uncheck。比如：inputtype=checkbox）.check（）表示将input标签的type属性设置为选中，其中，中括号中的内容表示如果input的type属性是checkbox的话，再设置为选中。inputtype=radio）.uncheck（）表示将input标签的type属性设置为未选中，其中，中括号中的内容表示如果input的type属性是radio的话，再设置为未选中。多库共存：有的时候我们可能在同一个页面内调用多种js库，比如即使用jQuery类库又使用Pro

13、ToType类库，按理说没有问题，但是他们都用到了“$”符号，因此为了避免与其他库产生冲突，可以使用以下两种方法将其区别开来。jQuery.noConflict（）使用方法，var j=noConflict（）;表示j在jQuery中将代替$符号。jQuery.noConflict（true）使用方法，dom.query = jQuery.noConflict（true）则表示将$和jQuery的控制权都交还给原来的库。比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。因此用的时候一定要考虑清楚。dom.query将代表【第四节】jQuery速成 - 基本

14、对象获取 向jQuery进军中的战友们，通过前面两章的学习，大家肯定对jQuery中的“$”函数不明不白，没关系，只要大家挺得住，咱们定能得到最终胜利。言归正传，通过下面几章的学习，一定能明白“$”函数，trust me ！现在大家想一下在CSS中有哪几种选择器？通用选择器：*id选择器：#element类选择器：.element标签选择器：element如果你对这几种选择器不太了解，建议您到这个页面继续学习jQuery对象的获取也是如此，方法如下：*）表示获取所有的对象#element等同于document.getElementById（element.abc表示获得HTML中所有使用了ab

15、c这个样式的元素表示获得HTML中所有的div元素以下两种是层级对象的获取，属于下节课的内容，下节课不再着重讲解#a,.b,p表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素#a .b p表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素【第五节】jQuery速成 - 层级对象获取层级对象的获取Element1 Element2 Element3 Element.css定义层级元素方式一样,只需要不同的元素之间有空格表示，前者父级后者子级以此类推。div input表示获取div下所有的input。 您如果记不清到底是用“”符号 还是 “”，那么选择的时候就是：父

16、亲 儿子 .），这下明白了吧？_div + p表示匹配紧跟在 div 元素后的 p 一个元素这个可以这么记忆，既然紧跟着，当然就得使用“+”紧密的连在一起嘛。div p表示匹配跟在 div 元素后的所有 p 元素这个也好记忆，你可以把“”符号想象成一条林荫小道，既然是林荫小道当然是路漫漫兮修远，当然要使用“”符号嘛，两边的树也是排排站，如果“”符号是路，p是树的话，那么就表示选择div后面这条路上的所有的树。本课案例：第5课.rar 2009-12-22 13:14 上传下载 （34.25 KB） 跟KwooShung学习jQuery 第四课 售价: 学习币 1 枚 记录 购买 案例结构如下：

17、js/jquery-1.3.2.js7. 8. 9. 10. bt2匹配紧跟在 div 元素后的 p 一个元素bt3匹配跟在 div 元素后的所有 p 元素divp12317. 418. 19. 520. 621. 722. 823. 24. 本课只需要大家记住这四种选择方式即可，同学们下课！【第六节】jQuery速成 - 简单对象获取本节课主要学习对对象的另外一种获取方法，没有什么好方法，属于死记的东西，因此大家要加油咯。Element:first获得在HTML页面中某种元素的第一个，比如$（div:）表示获得第一个divlast获得在HTML页面中某种元素的最后一个，比如$（）表示获得最后

18、一个divnot（selector）去除所有与给定选择器匹配的元素，比如$（input:not（:checked） 表示选择所有没有选中的复选框even获得偶数行，从0开始计数odd获得奇数行，从0开始计数eq（index）匹配一个给定索引值的元素，从0开始计数，比如$（eq（3）表示获得HTML中的第4个divgt（index）匹配所有大于给定索引值的元素，从0开始计数，比如$（p:gt（3）表示获得比索引3也就是第4个p开始，之【后】所有的plt（index）匹配所有小于给定索引值的元素，从0开始计数，比如$（lt（3）表示获得比索引3也就是第2个p开始，之【前】所有的p如果上面两个方法的大于号小于号记不清，就想想HTML标记中的& gt ;和& lt ;