2022年jquery简明教程 .pdf

《2022年jquery简明教程 .pdf》由会员分享，可在线阅读，更多相关《2022年jquery简明教程 .pdf（16页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、前注：jquery 是一个很强大的 js 框架，使用它您可以很方便简洁的获得你想要的效果，本文对其做一简明教程， 在本文的基础上， 推荐更详细的教程Learning jQuery ，可以到 这里下载 PDF版及其源代码对 css 和 XPath 的支持，使我们写 js 变得更加方便！ 如果你不是个 js 高手又想写出优 秀的 js 效果，jQuery 可以帮你达到目的！下载地址： http:/ 下载完成后先加载到文档中，然后我们来看个简单的例子！ $(document).ready(function() $(a).click(function() alert(Hello world!); );

2、 ); 上边的效果是点击文档中所有a 标签时将弹出对话框， $(a) 是一个jQuery 选择器， $本身表示一个 jQuery 类，所有 $() 是构造一个 jQuery 对象，click()是这个对象的方法， 同理$ (document) 也是一个 jQuery 对象，ready(fn)是$(document) 的方法，表示当 document 全部下载完毕时执行函数。在进行下面内容之前我还要说明一点$(p) 和$(#p) 的区别 ,$(p)表示取所有 p 标签() 的元 素,$(#p)表示取 id 为p()的元素 . 我将从以下几个内容来讲解jQuery 的使用 : 1: 核心部分2:D

3、OM 操作3:css 操作4:javascript处理5: 动态效果6:event 事件7:ajax支持8: 插件程序一：核心部分$(expr) 说明：该函数可以通过css 选择器， Xpath 或 html 代码来匹配目标元素，所有的 jQuery 操作都以此为基础参数： expr ：字符串，一个查询表达式或一段html 字符串例子：未执行 jQuery 前：one two 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 1 页，共 16 页 - - - - - - - - - t

4、hree jQuery jQuery 代码及功能：function jq() alert($(div p).html(); 运行：当点击 id 为 test的元素时，弹出对话框文字为two，即 div 标签下 p 元素的内容function jq() $(Hello).appendTo(body); 运行： 当点击 id 为 test 的元素时，向 body中添加“ Hello”$(elem) 说明：限制 jQuery 作用于一个特定的dom元素，这个函数也接受xml 文档和windows对象参数： elem ：通过 jQuery 对象压缩的 DOM 元素例子：未执行 jQuery 前：one

5、 two three jQuery jQuery 代码及功能：function jq() alert($(document).find(div p).html(); 运行：当点击 id 为 test的元素时，弹出对话框文字为two，即 div 标签下 p 元素的内容function jq() $(document.body).background(black); 运行：当点击 id 为 test的元素时，背景色变成黑色$(elems) 说明：限制 jQuery 作用于一组特定的DOM 元素参数： elem ：一组通过 jQuery 对象压缩的 DOM 元素例子：未执行 jQuery 前： 名师

6、资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 2 页，共 16 页 - - - - - - - - - jQuery jQuery 代码及功能：function jq() $(form1.elements ).hide(); 运行：当点击 id 为 test的元素时，隐藏 form1 表单中的所有元素。$(fn) 说明： $(document).ready()的一个速记方式，当文档全部载入时执行函数。可以有多个 $(fn) 当文档载入时，同时执行所有函数！参数： fn (Functio

7、n):当文档载入时执行的函数！例子：$( function() $(document.body).background(black); ) 运行：当文档载入时背景变成黑色，相当于onLoad。$(obj) 说明：复制一个 jQuery 对象，参数： obj (jQuery): 要复制的 jQuery 对象例子：未执行 jQuery 前：one two three jQuery jQuery 代码及功能：function jq() var f = $(div); alert($(f).find(p).html() 运行：当点击 id 为 test的元素时，弹出对话框文字为two，即 div 标签

8、下 p 元素的内容。each(fn) 说明：将函数作用于所有匹配的对象上参数： fn (Function): 需要执行的函数例子：未执行 jQuery 前： 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 3 页，共 16 页 - - - - - - - - - jQueryjQuery代码及功能：function jq() $(img).each(function() this.src = 2.jpg; ); 运行：当点击 id 为 test的元素时， img 标签的 src 都变

9、成了 2.jpg 。eq(pos) 说明：减少匹配对象到一个单独得dom元素参数： pos (Number): 期望限制的索引，从0 开始例子：未执行 jQuery 前：This is just a test. So is this jQueryjQuery代码及功能：function jq() alert($(p).eq(1).html() 运行：当点击 id 为 test的元素时， alert对话框显示： So is this，即第二个标签的内容get() get(num) 说明：获取匹配元素， get(num) 返回匹配元素中的某一个元素参数： get (Number): 期望限制的索引

10、，从0 开始例子：未执行 jQuery 前：This is just a test. So is this jQuery jQuery 代码及功能：function jq() alert($(p).get(1).innerHTML); 运行：当点击 id 为 test的元素时， alert对话框显示： So is this，即第二个标签的内容注意 get 和 eq 的区别， eq 返回的是 jQuery 对象，get 返回的是所匹配的dom对象， 所有取 $(p).eq(1)对象的内容用 jQuery 方法 html() ， 而取$(p).get(1)的内容用 innerHTML index(

11、obj) 说明：返回对象索引参数： obj (Object): 要查找的对象名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 4 页，共 16 页 - - - - - - - - - 例子：未执行 jQuery 前： jQuery jQuery 代码及功能：function jq() alert($(div).index(document.getElementById(test1); alert($(div).index(document.getElementById(test2);

12、运行：当点击 id 为 test的元素时，两次弹出alert对话框分别显示 0，1 size() Length 说明：当前匹配对象的数量，两者等价例子：未执行 jQuery 前： jQuery jQuery 代码及功能：function jq() alert($(img).length); 运行：当点击 id 为 test的元素时，弹出 alert对话框显示 2，表示找到两个匹配对象二：DOM 操作属性我们以 为例，在原始的javascript里面可以用 var o=document.getElementById(a)取的 id 为 a 的节点对象，在用o.src来取得或修改该节点的 scr

13、属性，在 jQuery 里$(#a) 将得到 jQuery 对象 ，然后可以用 jQuery 提供的很多方法来进行操作，如$(#a).scr()将得到 5.jpg,$(#a).scr(1.jpg)将该对 象 src 属性改为1,jpg 。下面我们来讲 jQuery 提供的众多 jQuery 方法，方便大家快速对DOM 对象进行操作herf() herf(val) 说明：对 jQuery 对象属性 herf 的操作。例子：未执行 jQuery 前 jQuery jQuery 代码及功能：function jq() alert($(#test).href(); $(#test).href(2.ht

14、ml); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 5 页，共 16 页 - - - - - - - - - 运行：先弹出对话框显示id 为 test 的连接 url ，在将其 url 改为 2.html ，当弹出对话框后会看到转向到2.html 同理， jQuery 还提供类似的其他方法，大家可以分别试验一下：herf() herf(val) html() html(val) id() id (val) name() name (val) rel() rel (val) sr

15、c() src (val) title() title (val) val() val(val) 操作after(html) 在匹配元素后插入一段html jQuery jQuery 代码及功能：function jq() $(#test).after(Hello); 执行后相当于： jQueryHello after(elem) after(elems) 将指定对象 elem或对象组 elems插入到在匹配元素后afterjQuery jQuery 代码及功能function jq() $(a).after($(#test); 执行后相当于 jQueryafter append(html)

16、在匹配元素内部，且末尾插入指定html jQuery jQuery 代码及功能：function jq() $(#test).append(Hello); 执行后相当于 jQueryHello 同理还有 append(elem) append(elems) before(html) before(elem) before(elems)请执行参照 append和 after的方来测试、理解！appendTo(expr) 与 append(elem) 相反afterjQuery jQuery 代码及功能function jq() $(a). appendTo ($(#test); 名师资料总结 -

17、 - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 6 页，共 16 页 - - - - - - - - - 执行后相当于 afterjQuery clone() 复制一个 jQuery 对象afterjQuery jQuery 代码及功能：function jq() $(#test).clone().appendTo($(a); 复制$(#test)然后插入到 后, 执行后相当于afterjQueryafter empty() 删除匹配对象的所有子节点 span after jQuery jQuery

18、 代码及功能：function jq() $(#test).empty(); 执行后相当于 jQuery insertAfter(expr) insertBefore(expr) 按照官方的解释和我的几个简单测试insertAfter(expr)相当于before(elem),insertBefore(expr)相当于 after (elem) prepend (html) prepend (elem) prepend (elems) 在匹配元素的内部且开始出插入通过下面例子区分append(elem) appendTo(expr) prepend (elem) p div 执行$(#a).a

19、ppend($(div) 后相当于 P div 执行$(#a).appendTo($(div) 后 相当于 div p 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 7 页，共 16 页 - - - - - - - - - 执行$(#a).prepend ($(div) 后 相当于 div P remove() 删除匹配对象注意区分 empty() ，empty() 移出匹配对象的子节点，remove() ，移出匹配对象wrap(htm) 将匹配对象包含在给出的html 代码内Te

20、st Paragraph. jQuery jQuery 代码及功能：function jq() $(p).wrap(); 执行后相当于 Test Paragraph. wrap(elem) 将匹配对象包含在给出的对象内Test Paragraph. jQuery jQuery 代码及功能：function jq() $(p).wrap( document.getElementById(content) ); 执行后相当于 Test Paragraph. 遍历、组合add(expr) 在原对象的基础上在附加符合指定表达式的jquery对象HelloHello Again jQuery jQuer

21、y 代码及功能：function jq() var f=$(p).add(span); for(var i=0;i $(f).size();i+) alert($(f).eq(i).html(); 执行$(p) 得到匹配 的对象，有两个， add(span) 是在(p) 的基础上加上匹配的对象，所有一共有3 个，从上面的函数运行结果可以看到$(p).add(span)是 3 个对象的集合，分别是 Hello，Hello Again，Hello Again。add(el) 在匹配对象的基础上在附加指定的dom元素。 $(p).add(document.getElementById(a); 名师资

22、料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 8 页，共 16 页 - - - - - - - - - add(els) 在匹配对象的基础上在附加指定的一组对象，els 是一个数组。HelloHello Again jQuery 代码及功能：function jq() var f=$(p).add(document.getElementById(a), document.getElementById(b) for(var i=0;i $(f).size();i+) alert($(f).

23、eq(i).html(); 注意 els 是一个数组，这里的 不能漏掉。ancestors () 一依次以匹配结点的父节点的内容为对象, 根节点除外 （有点不好理解，看看下面例子就明白了） one two jQuery 代码及功能：function jq() var f= $(u).ancestors(); for(var i=0;i $(f).size();i+) alert($(f).eq(i).html(); 第一个对象是以 的父节点的内容为对象， two 第一个对象是以 的父节点的父节点（ div ）的内容为对象，onetwo 一般一个文档还有 和，依次类推下去。ancestors (

24、expr) 在 ancestors （）的基础上之取符合表达式的对象如上各例子讲 var f改为 var f= $(u).ancestors(“div ”), 则只返回一个对象： onetwo children() 返回匹配对象的子接点one two jQuery 代码及功能：function jq() alert($(#ch).children().html(); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 9 页，共 16 页 - - - - - - - - - $(#ch)

25、.children()得到对象 two .所以.html()的结果是”two”children(expr) 返回匹配对象的子介点中符合表达式的节点 two three jQuery 代码及功能function jq() alert($(#ch).children(“#sp”).html(); $(#ch).children()得到对象 twothree . $( #ch).children(“#sp”)过滤得到 three parent () parent (expr)取匹配对象父节点的。参照children帮助理解contains(str) 返回匹配对象中包含字符串str 的对象This i

26、s just a test.So is this jQuery 代码及功能：function jq() alert($(p).contains(test).html(); $(p) 得到两个对象，而包含字符串”test ”只有一个。所有$(p).contains(test)返回 This is just a test. end() 结束操作 , 返回到匹配元素清单上操作前的状态. filter(expr) filter(exprs) 过滤现实匹配符合表达式的对象 exprs为数组，注意添加“ ”HelloHello AgainAnd Again jQuery 代码及功能：function jq

27、() alert($(p).filter(.selected).html() $(p) 得到三个对象，$(p).contains(test)只返回 class 为 selected的对象。color=LimeGreenfind(expr) 在匹配的对象中继续查找符合表达式的对象/color HelloHello AgainAnd Again jQuery 代码及功能：名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 10 页，共 16 页 - - - - - - - - - funct

28、ion jq() alert($(p).find(#a).html() 在$(p) 对象中查找 id 为 a 的对象。is(expr) 判断对象是否符合表达式 , 返回 boolen 值HelloHello AgainAnd Again jQuery 代码及功能：function jq() alert($(#a).is(p); 在$(#a )是否符合 jquery表达式。大家可以用 $(#a).is(div); (#a).is(#a)多来测试一下next() next(expr) 返回匹配对象剩余的兄弟节点HelloHello AgainAnd Again jQuery 代码及功能functi

29、on jq() alert($(p).next().html(); alert($(p).next(.selected).html(); $(p).next()返回 Hello Again , And Again 两个对象$(p).next(.selected)只返回 And Again 一个对象prev () prev (expr) 参照 next 理解not(el) not(expr) 从 jQuery 对象中移出匹配的对象， el 为 dom元素， expr为 jQuery 表达式。onetwo jQuery jQuery 代码及功能：function js() alert($(p).n

30、ot(document.getElementById(a).html(); alert($(p).not(“#a”).html(); $(p) 由两个对象，排除后的对象为one siblings () siblings (expr) jquery匹配对象中其它兄弟级别的对象one two 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 11 页，共 16 页 - - - - - - - - - jQuery jQuery 代码及功能：function js() alert($(div

31、).siblings().eq(1).html(); $(div).siblings()的结果实返回两个对象 one ，jQuery alert($(div).siblings(“a”)返回一个对象 jQuery 其他addClass(class) 为匹配对象添加一个class 样式removeClass (class) 将第一个匹配对象的某个class 样式移出attr (name) 获取第一个匹配对象的属性jQuery jQuery 代码及功能：function js() alert($(img).attr(src); 返回 test.jpg attr (prop) 为第一个匹配对象的设置

32、属性，prop 为 hash 对象，用于为某对象批量添加众多属性jQuery jQuery 代码及功能：function js() $(img).attr( src: test.jpg, alt: Test Image ); 运行结果相当于 attr (key,value) 为第一个匹配对象的设置属性，key 为属性名， value 为属性值jQuery jQuery 代码及功能function js() $(img).attr(“src ”, ”test.jpg”); 运行结果相当于 removeAttr (name) 将第一个匹配对象的某个属性移出jQuery jQuery 代码及功能：f

33、unction js() 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 12 页，共 16 页 - - - - - - - - - $(img). removeAttr(alt); 运行结果相当于 toggleClass (class) 将当前对象添加一个样式，不是当前对象则移出此样式，返回的是处理后的对象HelloHello AgainjQuery $(p) 的结果是返回对象 Hello,Hello Again $(p).toggleClass(selected)的结果是实返回对

34、象 Hello, Hello Again 三：CSS 操作传统 javascript对 css 的操作相当繁琐，比如 css取它的 background 语法是document.getElementById(a).style.background， 而 jQuery 对 css 更方便的操作， $(#a). background()，$(#a).background(“red”)$(#a) 得到 jQuery 对象 $(#a).background()将取出该对象的 background 样式。$(#a).background(“red”)将该对象的 background 样式设为 red j

35、Query 提供了以下方法，来操作css background () background (val) color() color(val) css(name) css(prop) css(key, value) float() float(val) height() height(val) width() width(val) left() left(val) overflow() overflow(val) position() position(val) top() top(val) 这里需要讲解一下css(name) css(prop) css(key, value) ，其他的看名字都

36、知道什么作用了！csstest css(name) 获取样式名为 name的样式$(#a).css(color) 将得到样式中 color值 red， (#a).css(background )将得到 blue css(prop) prop是一个 hash 对象，用于设置大量的css 样式$(#b).css( color: red, background: blue ); 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 13 页，共 16 页 - - - - - - - - - 最终

37、效果是 test, color: red, background: blue ，hash 对象， color为 key，red 为 value ，css(key, value) 用于设置一个单独得css 样式$(#b).css(color,red);最终效果是 test 四：JavaScript处理$.browser() 判断浏览器类型，返回boolen 值$(function() if($.browser.msie) alert(这是一个 IE 浏览器 ); else if($.browser.opera) alert(这是一个 opera 浏览器 ); ) 当页面载入式判断浏览器类型，可判

38、断的类型有 msie、mozilla 、opera、safari $.each(obj, fn) obj为对象或数组， fn 为在 obj 上依次执行的函数，注意区分$().each() $.each( 0,1,2, function(i) alert( Item # + i + : + this ); ); 分别将 0，1，2 为参数，传入到 function(i)中$.each( name: John, lang: JS , function(i) alert( Name: + i + , Value: + this ); name: John, lang: JS 为一个 hash 对象，

39、依次将 hash 中每组对象传入到函数中$.extend(obj, prop) 用第二个对象扩展第一个对象var settings = validate: false, limit: 5, name: foo ; var options = validate: true, name: bar ; $.extend(settings, options); 执行后 settings对象为 validate: true, limit: 5, name: bar 可以用下面函数来测试$(function() var settings = validate: false, limit: 5, name:

40、 foo ; var options = validate: true, name: bar ; $.extend(settings, options); $.each(settings, function(i) alert( i + = + this ); ); ) $.grep(array,fn) 通过函数 fn 来过滤 array ， 将 array 中的元素依次传给 fn ，fn 必须返回一个 boolen ，如 fn 返回 true ，将被过滤$(function() var arr= $.grep( 0,1,2,3,4, function(i) return i 2; ); 名师资

41、料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 14 页，共 16 页 - - - - - - - - - $.each(arr, function(i) alert(i); ); ) 我们可以看待执行 $.grep 后数组 0,1,2,3,4变成0 ，1 $.merge(first, second) 两个参数都是数组，排出第二个数组中与第一个相同的，再将两个数组合并$(function() var arr = $.merge( 0,1,2, 2,3,4 ) $.each(arr, fun

42、ction(i) alert(i); ); ) 可以看出 arr 的结果为 0,1,2,3,4 $.trim(str) 移出字符串两端的空格$.trim( hello, how are you? )的结果是 hello, how are you? 五：动态效果在将这部分之前我们先看个例子， 相信做网页的朋友都遇到n 级菜单的情景，但点击某菜单按钮时，如果它的子菜单是显示的，则隐藏子菜单，如果子菜单隐藏，则显示出来，传统的javascript做法是先用 getElementById 取出子菜单所在容器的id ，在判断该容器的style.display是否 等于 none，如果等于则设为 bloc

43、k, 如果不等于这设为none，如果在将效果设置复杂一点，当点击按钮时，不是忽然隐藏和显示子菜单，而是高度平滑的转变，这时就要通过setTimeout 来设置子菜单的 height 了， 再复杂一点透明度也平滑的消失和显现，这时显现下来需要编写很多代码，如果 js 基础不好的朋友可能只能从别人写好的代码拿过来修改了！ jQuery 实现上面效果只需要1 句话就行，$(#a).toggle(slow),学 完 jQuery 后还需要抄袭修改别人的代码吗？下面我们逐个介绍 jQuery 用于效果处理的方法。hide() 隐藏匹配对象Hello AgainjQuery当点击连接时 ,id 为 a 的

44、对象的 display变为 none。show() 显示匹配对象hide(speed) 以一定的速度隐藏匹配对象， 其大小（长宽）和透明度都逐渐变化到 0，speed 有 3 级(slow, normal, fast)，也可以是自定义的速度。show(speed) 以一定的速度显示匹配对象，其大小（长宽）和透明度都由0逐渐变化到正常hide(speed, callback) show(speed, callback) 当显示和隐藏变化结束后执行函数 callback 名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理

45、- - - - - - - 第 15 页，共 16 页 - - - - - - - - - toggle() toggle(speed) 如果当前匹配对象隐藏，则显示他们，如果当前是显示的，就隐藏， toggle(speed),其大小（长宽）和透明度都随之逐渐变化。 jQuery fadeIn(speeds) fadeOut(speeds) 根据速度调整透明度来显示或隐藏匹配对象，注意有别于hide(speed) 和 show(speed)，fadeIn 和 fadeOut 都只调整透明度，不调整大小 jQuery fadeIn(speed, callback) fadeOut(speed,

46、callback) callback为函数，先通过调整透明度来显示或隐藏匹配对象，当调整结束后执行callback函数 jQuery 点击连接后可以看到图片逐渐显示, 显示完全后弹出对话框fadeTo(speed, opacity, callback) 将匹配对象以 speed 速度调整倒透明度opacity ，然后执行函数 callback 。Opacity 为最终显示的透明度 (0-1). jQuery 大家可以看一下自己看看效果，如果不用jQuery ，编写原始 javascript脚本可能很多代码！slideDown(speeds) 将匹配对象的高度由0 以指定速率平滑的变化到正常！ jQuery slideDown(speeds,callback) 将匹配对象的高度由0 变化到正常！变化结束后执行函数 callback slideUp(slow) slideUp(speed, callback) 匹配对象的高度由正常变化到0 slideToggle(slow) 如果匹配对象的高度正常则逐渐变化到0，若为 0，则逐渐变化到正常名师资料总结 - - -精品资料欢迎下载 - - - - - - - - - - - - - - - - - - 名师精心整理 - - - - - - - 第 16 页，共 16 页 - - - - - - - - -