jquery学习总结.docx

六、元素的操作：

复制、删除和创建

　　复制元素使用.clone（）

　　删除元素使用.remove（）和.detach（）。

两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。

　　清空元素内容（但是不删除该元素）使用.empty（）。

　　创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：

[js]

1.* $（'

Hello

2.* $（'new list item'）;   

3.* $（'ul'）.append（'

七、工具方法

　　除了对选中的元素进行操作以外，jQuery还提供一些工具方法（utility），不必选中元素，就可以直接使用。

常用的工具方法有以下几种：

 $.trim（）去除字符串两端的空格。

 $.each（）遍历一个数组或对象。

 $.inArray（）返回一个值在数组中的索引位置。

如果该值不在数组中，则返回-1。

 $.grep（）返回数组中符合某种标准的元素。

 $.extend（）将多个对象，合并到第一个对象。

 $.makeArray（）将对象转化为数组。

 $.type（）判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。

 $.isArray（）判断某个参数是否为数组。

 $.isEmptyObject（）判断某个对象是否为空（不含有任何属性）。

 $.isFunction（）判断某个参数是否为函数。

 $.isPlainObject（）判断某个参数是否为用"{}"或"newObject"建立的对象。

 $.support（）判断浏览器是否支持某个特性。

八、事件操作

　jQuery可以对网页元素绑定事件。

根据不同的事件，运行相应的函数。

[js]

1.$（'p'）.click（function（）{   

2.alert（'Hello'）;   

3.}）;   

目前，jQuery主要支持以下事件：

 .blur（）表单元素失去焦点。

 .change（）表单元素的值发生变化  

 .click（）鼠标单击  

 .dblclick（）鼠标双击  

 .focus（）表单元素获得焦点  

 .focusin（）子元素获得焦点  

 .focusout（）子元素失去焦点  

 .hover（）同时为mouseenter和mouseleave事件指定处理函数  

 .keydown（）按下键盘（长时间按键，只返回一个事件）  

 .keypress（）按下键盘（长时间按键，将返回多个事件）  

 .keyup（）松开键盘  

 .load（）元素加载完毕  

 .mousedown（）按下鼠标  

 .mouseenter（）鼠标进入（进入子元素不触发）  

 .mouseleave（）鼠标离开（离开子元素不触发）  

 .mousemove（）鼠标在元素内部移动  

 .mouseout（）鼠标离开（离开子元素也触发）  

 .mouseover（）鼠标进入（进入子元素也触发）  

 .mouseup（）松开鼠标  

 .ready（）DOM加载完成  

 .resize（）浏览器窗口的大小发生改变  

 .scroll（）滚动条的位置发生变化  

 .select（）用户选中文本框中的内容  

 .submit（）用户递交表单  

 .toggle（）根据鼠标点击的次数，依次运行多个函数  

 .unload（）  

 用户离开页面  

　　以上这些事件在jQuery内部，都是.bind（）的便捷方式。

使用.bind（）可以更灵活地控制事件，比如为多个事件绑定同一个函数：

[js]

1.$（'input'）.bind（   

2.'click change'， //同时绑定click和change事件   

3.function（）{   

4.alert（'Hello'）;   

5.}   

6.）;   

有时，你只想让事件运行一次，这时可以使用.one（）方法。

[js]

1.$（"p"）.one（"click"， function（）{   

2.alert（"Hello"）; //只运行一次，以后的点击不会运行   

3.}）;   

unbind（）用来解除事件绑定。

[js]

1.$（'p'）.unbind（'click'）;   

所有的事件处理函数，都可以接受一个事件对象（eventobject）作为参数，比如下面例子中的e：

[js]

1.$（"p"）.click（function（e）{   

2.alert（e.type）; //"click"   

3.}）;  

　　这个事件对象有一些很有用的属性和方法：

 event.pageX事件发生时，鼠标距离网页左上角的水平距离　　

event.pageY事件发生时，鼠标距离网页左上角的垂直距离

event.type事件的类型（比如click）　　

event.which按下了哪一个键　　

event.data在事件对象上绑定数据，然后传入事件处理函数　　

event.target事件针对的网页元素

event.preventDefault（）阻止事件的默认行为（比如点击链接，会自动打开新页面）

event.stopPropagation（）停止事件向上层元素冒泡

　　在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：

[js]

1.$（'a'）.click（function（）{   

2.if （$（this）.attr（'href'）.match（'evil'））{//如果确认为有害链接   

3.e.preventDefault（）; //阻止打开   

4.$（this）.addClass（'evil'）; //加上表示有害的class   

5.}   

6.}）;   

　　有两种方法，可以自动触发一个事件。

一种是直接使用事件函数，另一种是使用.trigger（）或.triggerHandler（）。

[js]

1.$（'a'）.click（）;  

2.$（'a'）.trigger（'click'）;  

九、特殊效果

　　jQuery允许对象呈现某些特殊效果。

$（'h1'）.show（）;//展现一个h1标题

常用的特殊效果如下：

.fadeIn（）淡入

.fadeOut（）淡出

.fadeTo（）调整透明度

.hide（）隐藏元素

.show（）显示元素

.slideDown（）向下展开

.slideUp（）向上卷起

.slideToggle（）依次展开或卷起某个元素

.toggle（）依次展示或隐藏某个元素

除了.show（）和.hide（），所有其他特效的默认执行时间都是400ms（毫秒），但是你可以改变这个设置。

*$（'h1'）.fadeIn（300）;//300毫秒内淡入  

*$（'h1'）.fadeOut（'slow'）;//缓慢地淡出 

　　在特效结束后，可以指定执行某个函数。

[js]

1.$（'p'）.fadeOut（300, function（）{$（this）.remove（）; }）;   

　更复杂的特效，可以用.animate（）自定义。

[js]

1.$（'div'）.animate（   

2.{   

3.left :

 "+=50"，//不断右移   

4.opacity :

 0.25 //指定透明度   

5.},  

6.300,// 持续时间   

7.function（）{ alert（'done!

'）; }//回调函数   

8.）;   

　　.stop（）和.delay（）用来停止或延缓特效的执行。

　　$.fx.off如果设置为true，则关闭所有网页特效。

几个常见的筛选选择器：

filter（）：

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。

用逗号分隔多个表达式

描述：

保留子元素中不含有ol的元素。

HTML代码:

[xhtml]

1.

1. Hello

How are you?

jQuery代码:

[js]

1.$（"p"）.filter（function（index） {  

2. return $（"ol", this）.length == 0;  

3.}）;  

结果:

[xhtml]

1.

How are you?

silce（）：

选取一个匹配的子集

描述：

选择第一个p元素

HTML代码:

[xhtml]

1.

Hello

cruel

World

jQuery代码:

[js]

1.$（"p"）.slice（0, 1）.wrapInner（""）;  

结果:

[xhtml]

1.

Hello

后续更新……

如何使用JQueryCDN？

推荐使用官方的CDN节点，使用代码如下：

[xhtml]

1.   

2.