jQuery实用教程总结

JQueryjQuery是一个“写的更少，但做的更多”的轻量级JavaScript库。通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。基础语法是：$(selector).action()美元符号定义jQuery选择符（selector）“查询”和“查找”HTML元素jQueryaction()执行对元素的操作如：$(document).ready(function(){$("p").click(function(){$(this).hide();});});<p>Ifyouclickonme,Iwilldisappear.</p>$(document).ready()等同于jQuery(document).ready()等同于js中的onload()方法JQuery选择器JQuery选择器完全继承了CSS风格，可以非常快捷的找出特定DOM元素，然后添加相应行为。JQuery选择器获取的永远是对象，即使没有此元素也不会报错，因此当要用JQuery检查某个元素在网页是否存在时，要用长度或转换为DOM对象进行判断，如：错误：If($(“#tt“)){}应该这样：if($(“#tt”).length>0){….}或者if($(“#tt”)[0]){…}基本选择器选择器描述返回示例#id选择匹配ID的元素单个元素$(“test”)取Id为test的元素.class选择给定类名的元素集合元素$(“.test”)取所有class为test的元素Element选择给定元素名的元素集合元素$(“P”)取所有<p>元素*匹配所有元素集合元素略Selector1,selector2,…,selectorN将每个选择器匹配的元素合并后一起返回集合元素$(“div,span,p.myclass“)选择所有<div>,<span>和拥有class为myclass的<p>标签的一组元素层级选择器选择器描述返回示例$(“ancestordescendant”)选择ancestor元素里的所有descendant（后代）元素集合元素$(“divspan”)选择div里的所有span元素$(“parent>child”)选择parent元素下的child元素集合元素$(“div>span”)取div下元素名是<span>的子元素$(“prev+next“)或$(“prev”).next()取prev元素后的next元素集合元素$(“.one+div”)或$(“.one”).next(“div”)取class为one的下一个div元素$(“prev~siblings”)或$(“prev”).nextAll();取prev元素后的所有siblings元素集合元素$(“#two~div”)取id为two元素后面的所有div兄弟元素$(“prev”).nextAll(“div”)$(“prev”).siblings()取prev元素的所有同辈元素集合元素$(“#prev”).siblings(“div”)取所有与prev同辈的元素，无论前后位置过滤选择器基本选择器描述返回示例Element:first选择第一个元素单个元素$(“div:first”)取所有div中第1个div元素Element:last选择最后一个元素单个元素$(“div:last”)所有div中最后一个div元素Element:not(selector)去除与给定选择器匹配的元素集合元素$(“input:not(.myclass)”)选取class不是myclass的input元素Element:even取索引是偶数的元素集合元素$(“input:even”)取索引是偶数的input元素Element:odd选择索引是奇数的元素集合元素$(“input:odd”)Element:eq(index)取索引等于index的元素单个元素$(“input:eq(1)”)索引等于1的元素Element:gt(index)取索引大于index的元素索引都从0开始计算集合元素$(“input:gt(1)”)取索引大于1而不包括1的元素Element:lt(index)取索引小于index的元素集合元素$(“input:lt(1)”):header取所有标题元素集合元素$(“:header”)Element:animated取当前正在执行动画的所有元素集合元素$(“div:animated”)取正在执行动画的div元素内容过滤Element:contains(text)取内容为text的元素集合元素$(“div:contains(‘我’)”)Element:empty取不包含子元素或文本的空元素集合元素$(“div:empty”)Element:has(selector)取含有选择器所匹配的元素的元素集合元素$(“div:has(p)”)取含有<p>元素的<div>元素Element:parent取含有子元素或文本的元素，与empty相反集合元素$(“div:parent”)注意与parent()方法的区别可见过滤Element:hidden取所有不可见元素集合元素$(“:hidden”)包括hiden和noneElement:visible取所有可见元素集合元素$(“div:visible”)属性过滤器描述返回示例Element[attribute]取有此属性的元素集合元素$(“div[id]”)取有id属性的元素Element[attribute=value]取属性值为value的元素集合元素$(“div[title=test]”)Element[attribute!=value]取值不等于value的元素集合元素$(“div[title!=test]”)Element[attribute^=value]取值以value开始的元素集合元素$(“div[title^=test]”)Element[attribute$=value]取值以value结束的元素集合元素略Element[attribute*=value]取值含有value的元素集合元素略Element[slector1][selector2]…..用属性选择器合并成一个复合属性选择器集合元素$(“div[id][title$=’test’]取有属性id且属性title以test结束的<div>元素子元素过滤$("Element:nth-child(index)")取每个父元素下第index个子元素或奇偶元素，index从1开始,而eq函数eq（index）从0开始集合元素┣━:nth-child(even)偶数┣━:nth-child(odd)奇数┣━:nth-child(3n)表达式┣━:nth-child(2)索引┣━:nth-child(3n+1)表达式┗━:nth-child(3n+2)表达式Element:first-child取父元素下第1个子元素集合元素注意与:first的区别Element:last-child取每个父元素的最后一个子元素集合元素注意与:last的区别Element:only-child如果某个元素是它父元素的中的惟一子元素，则匹配集合元素$(“ulli:only-child”)选择<ul>中是惟一子元素的<li>表单属性过滤Element:enabled取所有可用元素集合元素$(“#form1:enabled”)取id为form1的表单内的所有可用元素Element:disabled取所有不可用元素集合元素略Element:checked取所有被选中的元素集合元素$(“input:checked”)Element:selected取所有被选中的选项元素（下拉列表）集合元素$(“select:selected”)表单选择器选择器描述返回示例:input所有的<input><textarea><select>和<button>元素集合元素$(“:input”):text取所有单行文本框集合元素$(“:text”):password取所有密码框集合元素略:radio取所有单选框集合元素略:checkbox取所有多选框集合元素略:submit取所有提交按钮集合元素:image取所有图像按钮集合元素:reset取所有按钮集合元素:file取所有上传域集合元素:hidden取所有不可见元素集合元素DOM操作对象操作jQuery遍历函数包括了用于筛选、查找和串联元素的方法。函数描述\o"jQuery遍历-add()方法".add()将元素添加到匹配元素的集合中。\o"jQuery遍历-andSelf()方法".andSelf()把堆栈中之前的元素集添加到当前集合中。\o"jQuery遍历-children()方法".children()获得匹配元素集合中每个元素的所有子元素。\o"jQuery遍历-closest()方法".closest()从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。\o"jQuery遍历-contents()方法".contents()获得匹配元素集合中每个元素的子元素，包括文本和注释节点。\o"jQuery遍历-each()方法".each()对jQuery对象进行迭代，为每个匹配元素执行函数。\o"jQuery遍历-end()方法".end()结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。\o"jQuery遍历-eq()方法".eq()将匹配元素集合缩减为位于指定索引的新元素。\o"jQuery遍历-filter()方法".filter()将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。\o"jQuery遍历-find()方法".find()获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。\o"jQuery遍历-first()方法".first()将匹配元素集合缩减为集合中的第一个元素。\o"jQuery遍历-has()方法".has()将匹配元素集合缩减为包含特定元素的后代的集合。\o"jQuery遍历-is()方法".is()根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回true。\o"jQuery遍历-last()方法".last()将匹配元素集合缩减为集合中的最后一个元素。\o"jQuery遍历-map()方法".map()把当前匹配集合中的每个元素传递给函数，产生包含返回值的新jQuery对象。\o"jQuery遍历-next()方法".next()获得匹配元素集合中每个元素紧邻的同辈元素。\o"jQuery遍历-nextAll()方法".nextAll()获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。\o"jQuery遍历-nextUntil()方法".nextUntil()获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。\o"jQuery遍历-not()方法".not()从匹配元素集合中删除元素。\o"jQuery遍历-offsetParent()方法".offsetParent()获得用于定位的第一个父元素。\o"jQuery遍历-parent()方法".parent()获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。\o"jQuery遍历-parents()方法".parents()获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。\o"jQuery遍历-parentsUntil()方法".parentsUntil()获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。\o"jQuery遍历-prev()方法".prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。\o"jQuery遍历-prevAll()方法".prevAll()获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。\o"jQuery遍历-prevUntil()方法".prevUntil()获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。\o"jQuery遍历-siblings()方法".siblings()获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。\o"jQuery遍历-slice()方法".slice()将匹配元素集合缩减为指定范围的子集。属性操作下面列出的这些方法获得或设置元素的DOM属性。这些方法对于XML文档和HTML文档均是适用的，除了：html()。方法描述\o"jQueryHTML-attr()方法"attr()设置或返回匹配元素的属性和值。\o"jQueryHTML-removeAttr()方法"removeAttr()从所有匹配的元素中移除指定的属性。\o"jQueryHTML-html()方法"html()设置或返回匹配的元素集合中的HTML内容。\o"jQueryHTML-text()方法"text()设置或返回匹配元素的内容。\o"jQueryHTML-val()方法"val()设置或返回匹配元素的值。文本操作方法描述\o"jQueryHTML-after()方法"after()在匹配的元素之后插入内容。\o"jQueryHTML-append()方法"append()向匹配元素集合中的每个元素结尾插入由参数指定的内容。\o"jQueryHTML-appendTo()方法"appendTo()向目标结尾插入匹配元素集合中的每个元素。\o"jQueryHTML-before()方法"before()在每个匹配的元素之前插入内容。\o"jQueryHTML-clone()方法"clone()创建匹配元素集合的副本。\o"jQueryHTML-detach()方法"detach()从DOM中移除匹配元素集合。\o"jQueryHTML-empty()方法"empty()删除匹配的元素集合中所有的子节点。\o"jQueryHTML-insertAfter()方法"insertAfter()把匹配的元素插入到另一个指定的元素集合的后面。\o"jQueryHTML-insertBefore()方法"insertBefore()把匹配的元素插入到另一个指定的元素集合的前面。\o"jQueryHTML-prepend()方法"prepend()向匹配元素集合中的每个元素开头插入由参数指定的内容。\o"jQueryHTML-prependTo()方法"prependTo()向目标开头插入匹配元素集合中的每个元素。\o"jQueryHTML-remove()方法"remove()移除所有匹配的元素。\o"jQueryHTML-replaceAll()方法"replaceAll()用匹配的元素替换所有匹配到的元素。\o"jQueryHTML-replaceWith()方法"replaceWith()用新内容替换匹配的元素。\o"jQueryHTML-unwrap()方法"unwrap()移除并替换指定元素的父元素。\o"jQueryHTML-wrap()方法"wrap()把匹配的元素用指定的内容或元素包裹起来。\o"jQueryHTML-wrapAll()方法"wrapAll()把所有匹配的元素用指定的内容或元素包裹起来。\o"jQueryHTML-wrapinner()方法"wrapinner()将每一个匹配的元素的子内容用指定的内容或元素包裹起来。样式操作面列出的这些方法设置或返回元素的CSS相关属性。CSS属性描述\o"jQueryCSS操作-css()方法"css()设置或返回匹配元素的样式属性。\o"jQueryHTML-addClass()方法"addClass()向匹配的元素添加指定的类名。\o"jQueryHTML-hasClass()方法"hasClass()检查匹配的元素是否拥有指定的类。\o"jQueryHTML-removeClass()方法"removeClass()从所有匹配的元素中删除全部或者指定的类。\o"jQueryHTML-toggleClass()方法"toggleClass()从匹配的元素中添加或删除一个类。\o"jQueryCSS操作-height()方法"height()设置或返回匹配元素的高度。\o"jQueryCSS操作-offset()方法"offset()返回第一个匹配元素相对于文档的位置。\o"jQueryCSS操作-offsetParent()方法"offsetParent()返回最近的定位祖先元素。\o"jQueryCSS操作-position()方法"position()返回第一个匹配元素相对于父元素的位置。\o"jQueryCSS操作-scrollLeft()方法"scrollLeft()设置或返回匹配元素相对滚动条左侧的偏移。\o"jQueryCSS操作-scrollTop()方法"scrollTop()设置或返回匹配元素相对滚动条顶部的偏移。\o"jQueryCSS操作-width()方法"width()设置或返回匹配元素的宽度。动画操作方法描述\o"jQuery效果-animate()方法"animate()对被选元素应用“自定义”的动画\o"jQuery效果-clearQueue()方法"clearQueue()对被选元素移除所有排队的函数（仍未运行的）delay()对被选元素的所有排队函数（仍未运行）设置延迟dequeue()运行被选元素的下一个排队函数\o"jQuery效果-fadeIn()方法"fadeIn()逐渐改变被选元素的不透明度，从隐藏到可见\o"jQuery效果-fadeOut()方法"fadeOut()逐渐改变被选元素的不透明度，从可见到隐藏\o"jQuery效果-fadeTo()方法"fadeTo()把被选元素逐渐改变至给定的不透明度\o"jQuery效果-hide()方法"hide()隐藏被选的元素queue()显示被选元素的排队函数\o"jQuery效果-show()方法"show()显示被选的元素\o"jQuery效果-slideDown()方法"slideDown()通过调整高度来滑动显示被选元素\o"jQuery效果-slideToggle()方法"slideToggle()对被选元素进行滑动隐藏和滑动显示的切换\o"jQuery效果-slideUp()方法"slideUp()通过调整高度来滑动隐藏被选元素\o"jQuery效果-stop()方法"stop()停止在被选元素上运行动画\o"jQuery效果-toggle()方法"toggle()对被选元素进行隐藏和显示的切换对象数组操作$.each(object,function)object填写数组对象，function是遍历后的回调函数$.eachnd(boolean,object1,object2,[objectN])boolean布尔值(true/false)。object与function为必填项，此方法主要用于合并两个数组，相同的下标将有第二个数组对象中的值替换第一个数组对象中相同位置的内容$.grep(array,function,boolean)array填写数组，function是遍历后的回调函数,boolean设置为true则从数组中排除function中符合条件的选项。$.makeArray(object)将【类】数组对象转换为数组对象$.map(array,function(i))将array:数组通过function:回调函数根据条件转换为一个新数组$.inArray(value,array)value:用于在数组中查找是否存在的条件，array待查找的数组$.toArray()把jQuery集合中所有的DOM元素转换成一个数组$.merge(object1,object2)此方法主要用于合并两个数组，相同的下标不会被替换$.unique(array)删除数组中重复元素。只处理删除DOM元素数组，而不能处理字符串或者数字数组。$.parseJSON(json)解析一个【标准的】JSON字符串，详见案例。事件绑定事件$("Element").bind("type",[data],function)表示为某一个元素绑定特定的事件

type:事件类型

data：返回类型（可选）

function:普通的js方法或者jQuery方法

$("Element").live("type",function)表示为某一个元素绑定特定的事件,推荐使用此方法代替上面的bind$("Element").unbind([type],function)与bind方法相反，删除匹配的元素所绑定的某个特定的事件

type:事件类型（可选）

function：反绑定的事件处理函数（可选）

如果以上参数均无，则表示将所匹配元素的所有事件取消绑定

$("Element").die("type",function)

[quote]表示为某一个元素解除特定的事件,推荐使用此方法代替上面的unbind$("Element").one("type",[data],function)表示为某一个元素绑定一次性的特定事件

type:事件类型

data：返回类型（可选）

function:普通的js方法或者jQuery方法

此方法看似与bind相似，使用方法亦是如此，但是功能差距很大，因为这个事件是一次性的，如果在一个页面中不刷新，绑定的这个事件只能使用一次。$("Element").trigger("type",[data])在每个匹配的元素上绑定某类事件

type:事件类型

data：附加参数（可选）

比如

$("form:first").trigger("submit")表示页面中的第一个form表单提交。我们知道一般将按钮放在form中，点击此按钮才会提交他所在的form表单，如果使用此方法，即使按钮在表单区域之外，也同样会使其提交。另外如果这个按钮有浏览器默认的事件，它也会执行，你设置的事件也会执行。如果要阻止默认事件，那么此方法返回false或者使用下面的的方法都可。$("Element").triggerHandler("type",[data])在每个匹配的元素上绑定某类事件,但不会执行浏览器默认的事件

type:事件类型

data：返回类型（可选）

使用方法如上，不同的是不会执行浏览器默认事件鼠标键盘事件$("Element").hover(over,out)模拟鼠标悬停的事件，当鼠标移入移出选定元素的时候分别触发over和out事件。

参数：over：functionout：function$("Element").toggle(function,function)与上面的方法雷同，当鼠标第一次点击的时候触发前者，当鼠标第二次点击的时候触发后者。

鼠标单击：$("Element").click(function)当鼠标点击的时候触发，具体的应用方法我想不用具体讲解了。因为大家看了我过去的所写的案例就已经有数了。鼠标双击：

$("Element").dblclick(function)与鼠标单击一样，只不过这个是鼠标双击事件。也就是说只有鼠标在选定的元素上双击才会触发此事件。dbl是Double的缩写。

鼠标点击前后：

$("Element").mousedown(function)当鼠标点击后触发，从表面上看类似click事件，其实有本质上的区别。$("Element").mouseup(function)当鼠标点击释放的时候触发。就是鼠标点击了元素当你松开鼠标按键的时候触发。

鼠标的移动：

$("Element").mousemove(function)当鼠标在选定的元素上来回移动的时候触发。$("Element").mouseover(function)当鼠标在移入选定的元素范围的时候触发。

$("Element").mouseenter(function)当鼠标在移入选定的元素范围的时候触发。与mouseover有很大的区别就是它不冒泡的事件，点击子元素的时候不会触发父级元素

$("Element").mouseout(function)当鼠标移出选定的元素范围的时候触发。

$("Element").mouseleave(function)当鼠标移出选定的元素范围的时候触发。与mouseenter一样，不是冒泡事件键盘按下：

$("Element").keydown(function)当键盘按下的时候触发此事件，并绑定一个处理方法。键盘敲击：

$("Element").keypress(function)当键盘按下的时候触发此事件，并绑定一个处理方法。

注：虽然从表面上理解keypress与keydown是一个意思，但二者的本质区别是：系统由keydown返回键盘的代码,然后由TranslateMessage函数翻译成字符,由keypress返回字符值.因此在keydown中返回的是键盘的代码,而keypress返回的是ASCII字符.所以根据你的目的,如果只想读取字符,用keypress,如果想读各键的状态,用keydown。

键盘弹起：

$("Element").keyup(function)当键盘按键释放的时候触发并绑定一个处理方法。焦点事件触发焦点：

$("Element").focus(function)事件会在获得焦点的时候触发，既可以是鼠标行为，也可以是按tab键导航触发的行为，并且绑定一个处理方法。失去焦点：

$("Element").blur(function)事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的行为，并且绑定一个处理方法。改变焦点：

$("Element").change(function)在每一个匹配元素的change事件中绑定一个处理函数。其他事件$("Element").load(type,function)在元素后面绑定一个处理函数，当元素内容加载完毕后自动调用。就如同每次写jQuery的时候都写jQuery，$(document).reday()或者$的方式差不多。

$("Element").unload(function)与上面的函数相反，在每一个匹配元素的卸载事件中绑定一个处理函数。比如页面卸载的时候弹出一个警告框。$(document).unload(function(){alert("Byenow!");});$("Element").resize(function)当窗口大小发生改变的时候触发,比如$(window).resize(function(){alert("你正在试图改变窗口的大小");});$("Element").scroll(function)当滚动条发生改变的时候触发$(window).scroll(function(){alert("你正在试图改变滚动条");});$("Element").select()触发每一个匹配元素的select事件，这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。比如触发所有input元素的select事件，$("input").select();$("Element").select(function)当用户在文本框(包括input和textarea)中选中某段文本时会触发select事件。$("Element").submit()函数会调用执行绑定到submit事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。$("form:first").submit();表示第一个form提交的时候触发。$("Element").submit(function)在每一个匹配元素的submit事件中绑定一个处理函数。$("Element").error()这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。$("Element").error(function)对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。Ajax

（1）$.load(url,[data],[callback])方法说明：载入远程HTML文件代码并插入至DOM中。

url:待装入HTML网页地址。data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。过去并没有对回调函数进行说明，今天稍微的说一下，jQuery中的回调函数意思是指当某个操作执行完毕后要执行的函数。

举例：要求：1、随便建立两个页面，假设为A.html和B.html

2、在B中随便写几个DIV

3、推荐在A.html中定义B中的DIV样式，因为$("html").load()只载入HTML不会载入【外链】样式。

写法：

function（）

{

$("html").load("B.html");

}（2）$.get(url,[data],[callback])方法说明：简单的Get的请求。url:请求HTML网页地址。

data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。（3）$.post(url,[data],[callback])方法说明：简单的Post请求，

url:请求HTML网页地址

data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。

（4）$.getJSON(url,[data],[callback])方法说明：简单的GET请求载入JSON数据

url:请求HTML网页地址。

data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。

（5）$.getScript(url,[callback])方法说明：简单的GET请求载入script脚本数据并执行

url:请求HTML网页地址

data:(可选)发送至服务器的key/value(键值对)数据。

callback:(可选)载入成功时回调函数。

（6）$.Ajax(options)//此方法只要用于返回创建的XMLHttpRequest对象。大家如果看了jQueryAPI对Ajax的参数的讲解，肯定会觉得此方法

的内容较多，其实此方法只有一个值，是key/value(也就是我们常说的“键值对”)，下面将对此方法的参数进行逐一讲解。

注意：参