jQuery网络教程Word文件下载.docx
《jQuery网络教程Word文件下载.docx》由会员分享，可在线阅读，更多相关《jQuery网络教程Word文件下载.docx（70页珍藏版）》请在冰豆网上搜索。
jQuery速成-内部插入
第十六节：
jQuery速成-外部插入
第十七节：
jQuery速成-包裹
第十八节：
jQuery速成-
替换，删除和复制
第十九节：
jQuery速成-元素的赋值
第四章：
样式篇-层叠样式表的处理
第二十节：
jQuery速成-样式的设置与定义
第五章：
提高篇-jQuery中的事件机制
第二十一节：
jQuery速成-页面的载入事件与事件处理
第二十二节：
jQuery速成-鼠标事件与交互
第二十三节：
jQuery速成-焦点事件
第二十四节：
jQuery速成-键盘事件
第二十五节：
jQuery速成-其他事件
第六章：
效果篇-jQuery中的动画效果
第二十六节：
jQuery速成-动画实现的基本方法
第二十七节：
jQuery速成-元素的渐隐渐显
第二十八节：
jQuery速成-元素的滑动
第二十九节：
jQuery速成-自定义动画
第七章：
工具篇-jQuery中的工具使用
第三十节：
jQuery速成-浏览器种类及其特性的检测
第三十一节：
jQuery速成-数组和对象的操作
第三十二节：
jQuery速成-工具杂项
第八章：
高级篇-Ajax异步请求及调用实战
第三十三节：
jQuery速成-Ajax请求（讲解篇）
第三十四节：
jQuery速成-Ajax请求（实战篇）
初学jQuery的朋友，基本上都会问同一个问题“什么是jQuery？
”等类似的问题，理解这个问题对于后面的学习会起到促进作用。
以下是我整理出的大家常问的几个问题：
1、什么是jQuery？
2、什么是类库？
3、jQuery与JavaScript有什么关系？
4、JavaScript与java又有什么关系？
5、JavaScript、jQuery、Ajax、Json等又是什么？
区别又是什么？
6、不会JS能不能学jQuery？
我相信，很多人对这些技术有着似懂非懂的感觉，不是很了解，以上问题肯定是初学者都会产生的问题，如果你对它有兴趣或者想去驾驭它。
那么请跟KwooShung来，向jQuery进军！
let'
sGO！
Q:
什么是jQuery？
A:
jQuery是JavaScript的类库，它由JohnResig（美国人）创建，至今已经吸引了来自世界各地的众多JavaScript高手加入该团队。
什么是类库？
这是程序中的一个基本概念。
所谓类，可以理解为是一组语句的集合，用来描述一组具有共同属性和功能的对象。
字面理解也就是说类库就是类的集合。
Java和.net的类库意思类似。
但是在jQuery中，只是集合了许多的方法功能集合，使我们可以通过简单的代码就能实现复杂的效果。
jQuery与JavaScript有什么关系？
jQuery是使用JavaScript编写的，也就是说JavaScript可以任意调用，其他程序并不能很轻易的调用。
就好比JavaScript是鸡，jQuery是鸡蛋，鸡只能生鸡蛋。
再说的明白些，jQuery是使用JavaScript编写的，就好比鸡蛋是鸡生的。
如果你还不明白再看看另一个例子：
我们可以把JavaScript比喻成文字，假如使用文字写了两本菜谱《西餐菜谱大全》和《中餐菜谱大全》，前者是prototype（在jQuery之前也是一种类库）后者是jQuery。
菜谱里面都集合了很多做菜的方法也可以叫做菜的类库。
在程序里面呢就叫做类库，方法库，函数库等。
JavaScript与Java又有什么关系？
乍眼一看，它们有关系或者是同一家公司的产品，其实它们俩既不是兄弟姐妹也不是同一家公司所开发的，前者是Netscape网景公司开发，后者是Sun公司开发，2009年04月20日，Oracle（甲骨文）宣布以74亿美元收购Sun。
（详细的资料可以到网上搜一下）
JavaScript、jQuery、Ajax、Json等又是什么？
读到这里，我想不用再讲JS和jQuery了吧？
如果你还认为需要讲解，那你再读读前面的几个问题，肯定就明白了，直接切入正题。
Ajax：
全称为“AsynchronousJavaScriptandXML”（异步JavaScript和XML），它是由JavaScript+CSS+DOM+XMLHttpRequest的四种技术的结合,并且JS是Ajax的核心。
jQuery将Ajax的实现变得更加轻松容易。
Ajax就是咱们常说的局部刷新。
JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式。
易于人阅读和编写的同时也易于机器解析和生成。
它基于JavaScript的一个子集。
Json采用完全独立于语言的文本格式，可以简单的理解为数据存储的一种格式或交换方式。
不会JS能不能学jQuery？
我不知道大家所指的不会JS是什么程度，但我认为如果你一点都不懂JS那是很难学懂的，因为jQuery是JS的类库。
另外如果你懂得其他语言，也可以很快的理解的。
如果什么都不会我可以给大家一个快速掌握JS基础的方法，先去看JS的数据类型、变量的定义、函数方法的定义、函数方法的调用以及循环和判断，只要知道上面这几种非常容易学会。
看着内容挺多其实很简单，最慢一天就能搞懂。
注：
下节课我们还是延续《跟KwooJan学习CSS》的风格，以实例为主的通俗易懂的教程，请大家做好准备！
目前大家只需要准备好记事本、类库和您的键盘鼠标就可以啦~不过还是建议大家用编辑器进行开发，便于提高开发效率以及正确率，这里KwooShung建议大家使用DreamweaverCS4，版本一定要是CS4，因为以后我们用到它的地方还很多。
【第二节】jQuery速成-核心！
jQuery的核心是大家必须要学习的内容，我写了一个简单的例子，大家先不要看我的源代码，看看使用js是否能够做得出。
【例子】
要求：
1）页面上一个按钮；
2）点击后弹出窗口，我被点击了；
如下图：
JavaScript代码如下：
1.<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Transitional//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
2.<
htmlxmlns="
//www.w3.org/1999/xhtml"
3.<
head>
4.<
metahttp-equiv="
Content-Type"
content="
text/html;
charset=utf-8"
/>
5.<
title>
实例1<
/title>
6.<
script>
7.functionmyClick（）
8.{
9.alert（"
我被点击了！
"
）;
10.}
11.<
/script>
12.<
/head>
13.<
body>
14.<
inputtype="
submit"
value="
请点击我"
onclick="
myClick（）;
15.<
/body>
16.<
/html>
复制代码
然而jQuery与此类似，但是在HTML页中不必填写onclick="
事件调用myClick（）方法，只需要引入jQuery类库以及自己编写的jQuery代码即可。
下面是我的jQuery代码实现的上图方法
看完上面的jQuery例子以后，可以发现其实我们什么都不用在HTML页面中写，只需引入相关的js文件即可，这样做的优点可以使我们的HTML页面更加简单，不需要穿插复杂的js代码，从而使页面与脚本完美分离，是不是很神奇？
例题中的<
scriptlanguage="
javascript"
charset="
GB2312"
src="
js/demo1.js"
<
加入了charset="
是为了使其能够正确的显示中文，因为jQuery是utf-8编码。
同学们可能会问demo1.js中的“$”符号表示什么呢？
KwooShung建议大家不要小看了它哟~~~因为jQuery的核心功能都是通过这个函数实现的，以后编写的jQuery代码都是构建在这个函数上的，简单的说，就是都以某种方式在使用它。
不过它为什么是个函数呢，明明就一个符号而已啊？
在此案例中，我简写了代码，他们的关系如下，区分大小写：
$等同于jQuery
$（document）.ready（）等同于jQuery（document）.ready（）
他们在例题中的意思都等同于js中的
onload（）方法
click（）表示鼠标点击事件，此事件日后会在详细讲解
本节课，只需要你明白“$”符号是什么就OK了，在后面的学习中你会对他逐渐的熟悉~
怎么样，是不是很有意思？
【作业】
1、在页面中使用css定义一个长宽均为100pxDIV红色区域
2、鼠标点击此红色区域，弹出对话框，至于对话框什么内容随便。
【第三节】jQuery速成-核心方法的使用
jQuery对象访问：
each（callback）
根据我的理解，each是jQuery中的一种循环机制。
一般与this关键字配合使用。
学过程序的朋友都知道程序中的循环方式有以下几种do...while（）、while（）、for（expression1,expression2,expression3）以及C#和javaEE中JSTL标签中独有的forEach循环。
jQuery中的each循环与forEach循环类似。
具体使用方法在本节案例中讲述。
$（"
Element"
）.length
表示某个对象在HTML页面中的数量，与size用法一致，此方法不带有（）。
）.size（）
表示某个对象在HTML页面中的数量，与length用法一致。
）.get（）
表示获得某个元素在HTML页面中的集合，以数组方式构建。
）.get（index）
作用同上，如果get方法里面带有数字则表示获得数组中的第几个元素，索引从0开始。
）.get（）.reverse（）
表示将获取到得dom元素集合构建成的数组进行反向。
比如默认排序是1,2,3使用了此方法则为3,2,1
）.index（$（"
））
搜索index中所获得的元素在所匹配对象元素中的索引值（从0开始计数），若没有找到则返回-1。
比如有5个div，其中第4个标签的ID是#bar那么$（"
div"
#bar"
））所返回的索引值就是3。
jQuery插件机制：
$.extend
（{
max:
function（num1,num2）{returnnum1>
num2?
num1:
num2;
}
min:
function（num1,num2）{returnnum1<
num2?
}）
$.extend等同于jQuery.extend在这里面的max和min是两个自定义的函数，并且都有2个参数，在方法体内进行比较。
方法体内使用的是条件表达式，与if条件判断差不多。
此条件表达式的意思是：
如果num1>
num2相比较后如果num1大于num2那么返回“true”,那么此方法返回“？
”之后“：
”之前的内容也就是num1，反之是num2。
调用的时候只要使用$.max（2,3）传入任意的两个参数，那么将返回num2也就是数字3;
$.min（7,8）则返回num1因为num1比num2小。
$替换成jQuery完全没有问题。
$.fn.extend
check:
function（）
{
returnthis.each（function（）{this.checked=true;
}）;
uncheck:
returnthis.each（function（）{this.checked=false;
此方法也是一种插件的实现方法，其中this表示是调用者当前所指dom对象，比如$（"
#abc"
）.click（function（）{this}）这里的this指的就是#abc这个dom对象。
each在上面已经讲解过了。
在此插件方法extend中定义了两个方法分别是check和uncheck。
比如：
input[@type=checkbox]"
）.check（）表示将input标签的type属性设置为选中，其中，中括号中的内容表示如果input的type属性是checkbox的话，再设置为选中。
input[@type=radio]"
）.uncheck（）表示将input标签的type属性设置为未选中，其中，中括号中的内容表示如果input的type属性是radio的话，再设置为未选中。
多库共存：
有的时候我们可能在同一个页面内调用多种js库，比如即使用jQuery类库又使用ProToType类库，按理说没有问题，但是他们都用到了“$”符号，因此为了避免与其他库产生冲突，可以使用以下两种方法将其区别开来。
jQuery.noConflict（）
使用方法，varj=noConflict（）;
表示j在jQuery中将代替"
$"
符号。
jQuery.noConflict（true）
使用方法，dom.query=jQuery.noConflict（true）则表示将$和jQuery的控制权都交还给原来的库。
比如你想要将jQuery嵌入一个高度冲突的环境。
注意:
调用此方法后极有可能导致插件失效。
因此用的时候一定要考虑清楚。
dom.query将代表"
【第四节】jQuery速成-基本对象获取
向jQuery进军中的战友们，通过前面两章的学习，大家肯定对jQuery中的“$”函数不明不白，没关系，只要大家挺得住，咱们定能得到最终胜利。
言归正传，通过下面几章的学习，一定能明白“$”函数，trustme！
现在大家想一下在CSS中有哪几种选择器？
通用选择器：
*
id选择器：
#element
类选择器：
.element
标签选择器：
element
如果你对这几种选择器不太了解，建议您到这个页面继续学习
jQuery对象的获取也是如此，方法如下：
*"
）
表示获取所有的对象
#element"
等同于document.getElementById（"
element"
.abc"
表示获得HTML中所有使用了abc这个样式的元素
表示获得HTML中所有的div元素
以下两种是层级对象的获取，属于下节课的内容，下节课不再着重讲解
#a,.b,p"
表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素
#a.bp"
表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素
【第五节】jQuery速成-层级对象获取
层级对象的获取
Element1Element2Element3Element..."
css定义层级元素方式一样,只需要不同的元素之间有空格表示，前者父级后者子级以此类推。
div>
input"
表示获取div下所有的input。
您如果记不清到底是用“>
”符号还是“<
”符号，可以这么理解。
如果你选择的元素有父子关系，那么是父亲辈儿长还是儿子辈儿长？
当然是父亲辈儿长喽，因此使用“>
”，那么选择的时候就是：
父亲>
儿子>
..."
），这下明白了吧？
^_^
div+p"
表示匹配紧跟在div元素后的p一个元素
这个可以这么记忆，既然紧跟着，当然就得使用“+”紧密的连在一起嘛。
div~p"
表示匹配跟在div元素后的所有p元素
这个也好记忆，你可以把“~”符号想象成一条林荫小道，既然是林荫小道当然是路漫漫兮修远，当然要使用“~”符号嘛，两边的树也是排排站，如果“~”符号是路，p是树的话，那么就表示选择div后面这条路上的所有的树。
本课案例：
第5课.rar
2009-12-2213:
14上传
下载（34.25KB）
跟KwooShung学习jQuery第四课
售价:
学习币1枚
[记录]
[购买]
案例结构如下：
js/jquery-1.3.2.js"
7.<
8.<
9.<
10.<
inputid="
bt1"
type="
button"
获取div下所有的p标签"
/>
bt2"
匹配紧跟在div元素后的p一个元素"
bt3"
匹配跟在div元素后的所有p元素"
div>
p>
1<
/p>
2<
3<
17.<
4<
18.<
/div>
19.<
5<
20.<
6<
21.<
7<
22.<
8<
23.<
24.<
本课只需要大家记住这四种选择方式即可，同学们下课！
【第六节】jQuery速成-简单对象获取
本节课主要学习对对象的另外一种获取方法，没有什么好方法，属于死记的东西，因此大家要加油咯。
Element:
first"
获得在HTML页面中某种元素的第一个，比如$（"
div:
）表示获得第一个div
last"
获得在HTML页面中某种元素的最后一个，比如$（"
）表示获得最后一个div
not（selector）"
去除所有与给定选择器匹配的元素，比如$（"
input:
not（:
checked）"
）表示选择所有没有选中的复选框
even"
获得偶数行，从0开始计数
odd"
获得奇数行，从0开始计数
eq（index）"
匹配一个给定索引值的元素，从0开始计数，比如$（"
eq（3）"
）表示获得HTML中的第4个div
gt（index）"
匹配所有大于给定索引值的元素，从0开始计数，比如$（"
p:
gt（3）"
）表示获得比索引3也就是第4个p开始，之【后】所有的p
lt（index）"
匹配所有小于给定索引值的元素，从0开始计数，比如$（"
lt（3）"
）表示获得比索引3也就是第2个p开始，之【前】所有的p
如果上面两个方法的大于号小于号记不清，就想想HTML标记中的[&
gt;
]和[&
lt;
]
升级会员 