jquery学习总结(超级详细).pdf

《jquery学习总结(超级详细).pdf》由会员分享，可在线阅读，更多相关《jquery学习总结(超级详细).pdf（9页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、执行时机window.onloadwindow.onload必须等待网页中所有的内容加载完毕后（包括图片）才能执行不能同时编写多个，以下代码无法正确执编写个数行:window。onload=function（alert（”test1”）;window。onload=function（)alert（”test2”）;结果只会输出”test2简化写法一、选择网页元素jQuery 的基本设计和主要用法,就是”选择某个网页元素,然后对其进行某种操作”.这是它区别于其他函数库的根本特点。使用 jQuery 的第一步，往往就是将一个选择表达式，放进构造函数 jQuery(）（简写为$),然后得到被选中的元

2、素。选择表达式可以是 CSS 选择器:$（document）/选择整个文档对象(myId)/选择 ID 为 myId 的网页元素$(div。myClass)/选择 class 为 myClass 的 div 元素$（inputname=first）/选择 name 属性等于 first 的 input 元素（documentdocument）.ready.ready（）（）网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完能同时编写多个无$(document）.ready(function()；可以简写成$（function(）);也可以是 jQuery 特有的

3、表达式：（a:first)/选择网页中第一个 a 元素$(tr：odd)/选择表格的奇数行（myForm：input)/选择表单中的 input 元素$(div：visible)/选择可见的 div 元素(div:gt(2）)/选择所有的 div 元素，除了前三个$（div:animated）/选择当前处于动画状态的 div 元素二、改变结果集如果选中多个元素，jQuery 提供过滤器，可以缩小结果集:*$（div).has（p)；/选择包含 p 元素的 div 元素$(div）.not（.myClass);/选择 class 不等于 myClass 的 div 元素*$（div）.filte

4、r(.myClass）;/选择 class 等于 myClass 的 div 元素*$(div)。first（)；/选择第 1 个 div 元素*（div）.eq(5）;/选择第 6 个 div 元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery 也提供了在 DOM 树上的移动方法：（div).next（p）;/选择 div 元素后面的第一个 p 元素$（div)。parent()；/选择 div 元素的父元素$(div)。closest（form）;/选择离 div 最近的那个 form 父元素(div）。children(）；/选择 div 的所有子元素$(div）。si

5、blings（);/选择 div 的同级元素三、链式操作选中网页元素以后，就可以对它进行某种操作。jQuery 允许将所有操作连接在一起，以链条的形式写出来,比如：(div）.find(h3）.eq(2).html(Hello）；分解开来，就是下面这样：1。$（div)/找到 div 元素2.find（h3)/选择其中的 h3 元素3。eq（2）/选择第 3 个 h3 元素4。html（Hello)；/将它的内容改为 Hello这是 jQuery 最令人称道、最方便的特点。它的原理在于每一步的 jQuery 操作，返回的都是一个 jQuery 对象，所以不同操作可以连在一起。jQuery 还提

6、供了。end（)方法，使得结果集可以后退一步：1.$（div)2。.find（h3)3。.eq(2)4.html（Hello）5。end（）/退回到选中所有的 h3 元素的那一步6.。eq(0)/选中第一个 h3 元素7.。html（World）；/将它的内容改为 World。end（)：回到最近的一个”破坏性操作之前。如果之前没有破坏性操作，则返回一个空集。所谓的破坏性”就是指任何改变所匹配的jQuery 元素的操作。示例描述：选取所有的p 元素，查找并选取 span 子元素,然后再回过来选取 p 元素HTML 代码:pspanHello/span,how are you?jQuery 代码

7、：（p）.find(”span).end()结果:pspanHelloHello/bI would like to say：jQuery 代码：$(p”）.after($（b”）；结果:pI would like to say:/pHello/b2.insertAfter（）：描述:把所有段落插入到一个元素之后。与$（”foo”).after（”p”)相同HTML 代码：pI would like to say:/pHello/divjQuery 代码:(”p)。insertAfter（”#foo”);结果:Hello/divpI would like to say:I would like

8、to say:bHelloHelloI would like to say:/p4.append（):描述：向所有段落中追加一些HTML 标记。HTML 代码:I would like to say:/pjQuery 代码：$（p）。append（bHello）；结果:pI would like to say:Hello/b/divdiv/divjQuery 代码：（p/”）。appendTo（div”）。addClass(test”）。end(）.addClass（”test2)；结果：p class=”test test2p class=test/p/div6。prepend(）描述:向所

9、有段落中前置一个 jQuery 对象（类似于一个 DOM 元素数组）。HTML 代码:Hello/bjQuery 代码:$（”p”)。prepend（$（”b）)；结果:I would like to say:/p7。prependTo（）描述：把所有段落追加到ID 值为 foo 的元素中。HTML 代码：I would like to say:pI would like to say:/div*六*、元素的操作：复制、删除和创建复制元素使用.clone（)删除元素使用.remove（）和.detach（)。两者的区别在于，前者不保留被删除元素的事件,后者保留，有利于重新插入文档时使用。清空元

10、素内容（但是不删除该元素）使用。empty（）。创建新元素的方法非常简单,只要把新元素直接传入jQuery 的构造函数就行了：(pHello/p)；*（li class=newnew list item/li）;（ul).append(lilist item);七、工具方法除了对选中的元素进行操作以外，jQuery 还提供一些工具方法（utility），不必选中元素,就可以直接使用。常用的工具方法有以下几种:$.trim（）去除字符串两端的空格。$.each（)遍历一个数组或对象。$.inArray（)返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。.grep（）返回数组中符合某

11、种标准的元素。.extend（)将多个对象，合并到第一个对象。.makeArray(）将对象转化为数组。$.type（)判断对象的类别（函数对象、日期对象、数组对象、正则对象等等)。$。isArray（）判断某个参数是否为数组。isEmptyObject（）判断某个对象是否为空（不含有任何属性）。.isFunction（）判断某个参数是否为函数。$.isPlainObject（）判断某个参数是否为用或”new Object”建立的对象。support（）判断浏览器是否支持某个特性.八、事件操作 jQuery 可以对网页元素绑定事件。根据不同的事件,运行相应的函数。(p）。click（funct

12、ion（)alert（Hello）;);目前,jQuery 主要支持以下事件:。blur（)表单元素失去焦点。change()表单元素的值发生变化.click（）鼠标单击。dblclick（）鼠标双击。focus（)表单元素获得焦点。focusin（)子元素获得焦点.focusout（）子元素失去焦点。hover（）同时为 mouseenter 和 mouseleave 事件指定处理函数。keydown(）按下键盘（长时间按键，只返回一个事件)。keypress()按下键盘（长时间按键，将返回多个事件）.keyup（）松开键盘.load()元素加载完毕.mousedown()按下鼠标。mous

13、eenter（）鼠标进入（进入子元素不触发）.mouseleave（)鼠标离开（离开子元素不触发)。mousemove()鼠标在元素内部移动。mouseout（）鼠标离开（离开子元素也触发）.mouseover()鼠标进入（进入子元素也触发).mouseup(）松开鼠标。ready(）DOM 加载完成.resize（)浏览器窗口的大小发生改变.scroll(）滚动条的位置发生变化.select()用户选中文本框中的内容。submit（）用户递交表单.toggle()根据鼠标点击的次数，依次运行多个函数。unload()用户离开页面以上这些事件在 jQuery 内部,都是.bind(）的便捷方式

14、。使用。bind（)可以更灵活地控制事件，比如为多个事件绑定同一个函数：$(input)。bind(click change，/同时绑定 click 和 change 事件 function()alert(Hello);）；有时，你只想让事件运行一次，这时可以使用.one()方法。$（p)。one（click”，function()alert(”Hello”）；/只运行一次，以后的点击不会运行);unbind（)用来解除事件绑定。$(p).unbind（click);所有的事件处理函数,都可以接受一个事件对象（event object）作为参数，比如下面例子中的 e：（p）.click（fun

15、ction(e）alert（e。type)；/click）；这个事件对象有一些很有用的属性和方法：event。pageX 事件发生时,鼠标距离网页左上角的水平距离event.pageY 事件发生时，鼠标距离网页左上角的垂直距离event。type 事件的类型（比如 click）event.which 按下了哪一个键event。data 在事件对象上绑定数据，然后传入事件处理函数event。target 事件针对的网页元素event.preventDefault（）阻止事件的默认行为（比如点击链接,会自动打开新页面）event。stopPropagation（)停止事件向上层元素冒泡在事件处理函

16、数中，可以用this 关键字,返回事件针对的 DOM 元素：$(a）。click(function（)if（(this).attr(href）。match（evil)/如果确认为有害链接e。preventDefault（）；/阻止打开(this）。addClass(evil）；/加上表示有害的 class);有两种方法,可以自动触发一个事件.一种是直接使用事件函数，另一种是使用。trigger（）或。triggerHandler()。$（a)。click(）；(a).trigger（click);九、特殊效果jQuery 允许对象呈现某些特殊效果.（h1）。show（)；/展现一个 h1 标题

17、常用的特殊效果如下：.fadeIn（)淡入.fadeOut（）淡出.fadeTo（)调整透明度。hide(）隐藏元素。show（)显示元素。slideDown（）向下展开。slideUp（)向上卷起.slideToggle（）依次展开或卷起某个元素.toggle()依次展示或隐藏某个元素除了.show(）和.hide（），所有其他特效的默认执行时间都是 400ms（毫秒），但是你可以改变这个设置。$(h1).fadeIn(300);/300 毫秒内淡入$(h1）.fadeOut（slow);/缓慢地淡出在特效结束后，可以指定执行某个函数。$（p)。fadeOut（300，function（)$

18、(this)。remove(）;)；更复杂的特效，可以用.animate（）自定义。$(div）。animate（left:+=50”，/不断右移 opacity:0。25/指定透明度,300，/持续时间 function（）alert（done！)；/回调函数）；.stop（)和.delay(）用来停止或延缓特效的执行。.fx.off 如果设置为 true，则关闭所有网页特效。几个常见的筛选选择器：filter（)：筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式描述：保留子元素中不含有ol 的元素。HTML 代码:pHello/li/ol/ppHow are you?jQuery 代码：$(p).filter（function(index）return$（ol，this）。length=0;）；结果:silce（）：选取一个匹配的子集描述:选择第一个 p 元素HTML 代码:Hello/pcruel/ppWorld/pjQuery 代码：$（”p).slice（0,1).wrapInner(”b/b”）；结果:p/p后续更新