jquery学习总结超级详细.docx

**六**、元素的操作：

复制、删除和创建

　　复制元素使用.clone（）

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

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

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

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

*$（'

Hello

*$（'newlistitem'）;

*$（'ul'）.append（'

七、工具方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

八、事件操作

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

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

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

alert（'Hello'）;

}）;

目前，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（）可以更灵活地控制事件，比如为多个事件绑定同一个函数：

$（'input'）.bind（

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

function（）{

alert（'Hello'）;

}

）;

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

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

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

}）;

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

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

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

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

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

}）;

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

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

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

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

event.which按下了哪一个键　　

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

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

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

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

　　在事件处理函数中，可以用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标题

常用的特殊效果如下：

.fadeIn（）淡入

.fadeOut（）淡出

.fadeTo（）调整透明度

.hide（）隐藏元素

.show（）显示元素

.slideDown（）向下展开

.slideUp（）向上卷起

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

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

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

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

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

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

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

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

$（'div'）.animate（

{

left:

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

opacity:

0.25//指定透明度

},

300,//持续时间

function（）{alert（'done!

'）;}//回调函数

）;

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

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

几个常见的筛选选择器：

filter（）：

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

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

用逗号分隔多个表达式

描述：

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

HTML代码:

1. Hello

Howareyou?

jQuery代码:

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

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

}）;

结果:

Howareyou?

silce（）：

选取一个匹配的子集

描述：

选择第一个p元素

HTML代码:

Hello

cruel

World

jQuery代码:

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

结果:

Hello

后续更新……