jquery心得技巧总结Word文件下载.docx

1、first-child每个父元素的第一个子元素last-child每个父元素的最后一个子元素 nly-child每个父元素中只有一个子元素的子元素表单对象属性过滤选择器enabled 所有可用元素disabled 所有不可用元素checked 所有选中元素（单选、复选）selected 所有选中元素（下拉列表）表单选择器input 所有imput，textarea，select，buttontext 所有单行文本框password 所有密码框radio 所有单选框checkbox 所有多选框submit 所有提交按钮image 所有图像按钮reset 所有重置按钮button 所有按钮file

2、 所有上传域2 Object.filter（exp）筛选出与exp匹配的元素集合。exp可以是多个选择器的组合交互处理: 两个function中来回切换调用Object.hover（enter,leave）:鼠标移上，移出事件Object.toggle（fn1,fn2,fnN）:多次点击事件例如：Object.toggle（function（）/显示元素代码,function（）/隐藏元素代码）3 交互使用class样式：Object.toggleClass（“className”）重复交替使用classObject.show（time） time ms时间显示Object对应的元素（宽高和透

3、明度同时）Object.hide（time） time ms时间隐藏Ojbect对应的元素（宽高和透明度同时）若无时间则瞬间Object.fadeIn（）;增加不透明度使显示，只改变元素的不透明度Object.fadeOut（）;降低不透明度Object.slideUp（）;元素由下到上缩短隐藏Object.slideDown（）;元素由上至下延伸显示都可以指定三种参数：”slow”,”normal”,”fast”分别是600,400,200ms，都可以设定一个回调函数自定义动画：Object.animate（params,speed,callback）;params:key/val的键值对，

4、speed:速度，callback:动画完成执行函数.例如：$（“div”）.animate（left:”+=500px”,3000）;3s内向右移动500px.其中的值可以是数字，+=代码原来基础上向右500，也可以-=，也可500px控制滚动条用scrollTop属性停止动画：stop（clearQueue,gotoEnd）,两参数都可选同为boolean值，第一个代表是否清空未执行完的动画队列，第二个代表是否直接将正在执行的动画跳转到末状态。默认都为false判断元素是否正处于动画状态：Object.is（“:animated”）Object.toggle（）;交替显示/隐藏元素（可见性

5、）。Object.slideToggle（）;交替显示/隐藏元素（元素高度）。Object.fadeTo（）;交替显示/隐藏元素（元素不透明度）。可含参数：时间，不透明度var $XXX = jQuery对象 var XXX=DOM对象13. jQuery对象和DOM对象间方法不可混用，可将jQuery对象转换成DOM对象后使用原本DOM对象的方法：$XXX0或者$XXX.get（0）;将DOM对象转换成jQuery对象：var $XXX = $（XXX），可将XXX的DOM对象转换成jQuery对象14. 判断复选框是否选中：$XXX.is（“:checked”）解决和其他js框架的冲突：

6、后导入jQuery库一开始调用方法：jQuery.noConflict（）;使用：其他的可以用$，jQuery的只能用jQuery（“”）或者开始定义：var $j = jQuery.noConflict（）;然后其他的用$，jQuery的用$j（“”）共同使用$：（function（$）$（function（）/jQuery代码可以使用$（“”）;）（jQuery）;/其他js框架使用$（“”） 先导入jQuery库：不需要调用jQuery.noConflict（）;其他一样使用判断元素是否存在：if（$（“#id”）.length 0） 或者if（$（“#id”）0） 而不能用if（$（“

7、#id”）获取对象的属性：Object.attr（“属性的key”）设置对象的属性：Object.attr（“属性的key”,”属性的val”）或者Object.attr（key:val,key:val）删除对象的属性：Object.removeAttr（“属性的key”）追加样式：Object.addClass（）;修改样式：可用attr来做移除样式：Object.removeClass（）;多个之间用空格分隔4 创建HTML,DOM：$（“HTML标签”）例创建一个li：var $li1=$（“”）添加节点：Object.append（Object2）;在Object中追加Object2。

8、例$（“ul”）.append（$li1）;Object.appendTo（Object2）; 与上一个相反，将Object追加到Object2中。$li1.appendTo（“ul”）Object.prepend（Object2）;在Object前追加Object2。Object.prependTo（Object2）;与上一个相反Object.after（Object2）;在Object后增加Object节点。Object.insertAfter（Object2）; 与上一个相反Object.before（Object2）; 在Object前增加Object节点。Object.insertB

9、efore（Object2）;删除节点：Object.remove（）;删除Object匹配的节点（包括其子孙后代），返回值为该被删除的ObjectObject.empty（）;删除Object的子孙后代节点并将自身的内容清空复制节点：Object.clone（）;得到一个Object节点Object.clone（true）;得到一个Object节点且该节点（包含原有绑定的所有事件）替换节点：Object.replaceWith（Object2）;用Object2替换所有Object匹配的节点Object.replaceAll（Object2）;注：原来节点所绑定的事件都没有了，需要重新绑定。

10、包裹节点：Object.wrap（Object2）;用Object2把Object元素包裹起来。例$（“li”）.wrap（“/ul”）结果为：Object.wrapAll（Object2）;将Object2所有元素用一个Object包裹起来。例$（“li”）.wrapAll（“ li”）11 文档中ID为list下的最后一个列表项：$（“#list li:last”）12 获取对象的HTML代码：Object.html（）;设置对象的HTML代码：Object.html（“HTML代码”）13 获取对象的文本内容：Object.text（）;设置对象的文本内容：Object.text（“文本

11、内容”）;获取/设置对象的值：Object.val（）;若对象是下拉框/单复选框：单复选框只匹配valueO.val（“值”）：从最后一个选项倒着读取选项，选项中value或text任意一个匹配则选中多选：O.val（“值1”,”值2”,）14 当前对象的默认值：Object.defaultValue;遍历节点：匹配元素的子元素集合：Objecet.children（）;匹配元素后面紧邻的同辈元素：Object.next（）;匹配元素前面紧邻的同辈元素：Object.prev（）;匹配元素的所有同辈元素：Object.siblings（）;Object.closest（）:匹配最近的匹配元素：

12、若当前元素匹配则返回当前元素，否则向上查找父元素，逐级向上知道找到匹配元素，若全无则返回一个空jQuery对象获取对象的CSS：Object.css（“css的key”）设置对象的CSS：Object.css（“css的key”,”css的val”）多个用json数组获取元素在当前视窗的相对偏移量（只对可见元素有效）：Object.offset（）;返回的对象含有top和left两属性获取元素相对于最近一个position样式属性设置为relative或absolute的祖父节点的相对偏移：Object.position（）;获取元素的滚动条距顶端和左侧的距离：Object.scrollTop

13、（）;Object.scrollLeft（）;若有int型参数则控制滚动条到指定位置对象绑定事件：Object.bind（type,data,fn）;第一个为事件类型（如click等，就是js的事件去了on）也可以自定义类型，第二个作为event.data属性值传递给事件对象的额外数据对象，第三个为处理函数。等价于Object.事件类型（function（）;取消事件绑定：Object.unbind（type,data）;第一个为事件类型，第二个是将要移除的函数，若无参数则删除所有事件只执行一次就删除的事件：Object.one（type,data,fn）;模拟触发事件：Object.trig

14、ger（type,data）;系统定义事件可以：Object.事件（）;例：$（“#btn”）.click（）;data是数组的参数，赋值给事件的fn:function（event,data）.若是流量器默认事件则用Object.triggerHandler（type,data）则只触发绑定的事件停止事件的冒泡处理：event.stopPropagation（）;绑定事件时的fn需要一个参数event阻止元素的默认行为（如表单提交，连接跳转）：event.preventDefault（）;也可以用return false来取代上面两个或一个得到事件类型:event.type;触发事件的元素：e

15、vent.target;触发事件的相关元素：event.relatedTarget;获取光标相对于页面的x/y坐标：event.pageX/event.pageY获取鼠标的左中右键：event.which;（1/2/3?左/中/右）键盘中Ctrl按键：event.metaKey;指向原始事件对象：event.originalEvent事件命名空间：事件名.命名空间名;click.a同名不同命名空间下的方法trigger时事件名后加！则代表匹配所有不包含命名空间中的事件，不加！则匹配所有绑定的事件15 Object.slice（n）;截取Object，n为负数则是从倒数第|n|个开始截取$（“#

16、list”）.find（“li”）.each（function（i） $（this）.html（ $（this）.html（） + ” BAM! ” + i ）;$（“#list）.find（“li”） = $（“#list li”）16 ID为form1的表单reset：$（“#form1）0.reset（）17 所有表单reset：$（“form”）.each（function（） this.reset（）;18 设置css：Object.css（“border”,”1px solid black”）;19 选择了所有的li元素，然后去除了有ul子元素的li元素:$（“li”）.not（“

17、:has（ul）”）$（“li”）.not（“ul“）20 选择所有的带有name属性的链接: $（“aname“）21 选择一个有特点href属性的链接: $（“ahref*=“）问答模式（点击收缩）：$（/”#faq/”）.find（/”dd/”）.hide（）.end（）.find（/”dt/”）.click（function（） var answer = $（this）.next（）;if （answer.is（/”:visible/”） answer.slideUp（）; else answer.slideDown（）;dl id=”faq”dtq1.?/dtdda1.q2.?a2.

18、每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后执行一次:$（function（） var addClickHandlers = function（） $（“a.clickMeToLoadContent”）.click（function（） $（“#target”）.load（this.href, addClickHandlers）;addClickHandlers（）;22 得到复选框：$（/”input:checkbox/”）23 $each（数组/对象,function（key/index,value）遍历数组或对象,return false即可退出

19、循环Ajax23 Object.load（url,data,callback）:载入远程HTML代码并插入DOM中，并且当前DOM中定义的文档样式可直接应用到载入的HTML代码上url:String,请求的URL，同时可以指定选择器加载其中的部分内容。格式为：url selectordata:Object,发送至服务器的key/value数据callback:Function,回调函数，无论请求是否成功:function（responseText, textStatus,XMLHttpRequest）参数分别为：请求返回的内容，请求状态（success,error,notmodified,ti

20、meout），XMLHttpRequest对象23 $.get（url,data,callback,type）String,请求的URLFunction,回调函数，只当成功时回调:function（data,textStatus）参数分别为：请求返回的内容，请求状态（同上）type:String,服务器返回内容的格式（xml,html,script,json,text,_default）23 $.post（url,data,callback,type）同$.get（）23 $.getScript（js_url,function（）加载js文件并且自动执行23 $.getJSON（json_ur

21、l,function（data）加载json文件，data为返回的数据23 $.ajax（options）:options是以key/value形式的一串参数String,默认为当前页地址，发送请求的地址String,请求方式（GET/POST,默认为GET。PUT/Delete也可以使用，但不一定支持）timeout:Number,请求超时时间（ms）.将覆盖$.ajaxSetup（）方法的全局设置Object/String,参数数据（url形式或Object形式）dataType:String,预期服务器返回的数据类型（xml/html/script/json/jsonp/text）。be

22、foreSend:Function,发送请求前处理函数。function（XMLHttpRequest）this;/调用本次请求的options参数complete:Function,请求完成后回调函数（无论成功失败）。function（XMLHttpRequest,textStatus） this;success:Function,请求成功后回调函数。function（data,textStatus）this; /调用本次请求的options参数error:Function,请求失败后回调函数。function（XMLHttpRequest,textStatus,errorThrown）/通

23、常后两个参数只有一个含有信息。this;global:Boolean,是否触发全局Ajax事件（true/false:触发/不触发，默认为true）.24 Object.serialize（）;将对象的值序列化成字符串，表单中可以$（“#form1”）.serialize（）;即可作为$.get（）的data参数传递值25 Object.serializeArray（）;将对象的值序列化成json格式的数据26 $.param（Object/Array）;将对象或数组按照key/value进行序列化Ajax全局事件：1） ajaxStart（）:Ajax请求开始时触发2） ajaxStop（）

24、:Ajax请求结束后触发3） ajaxComplete（）:Ajax请求完成时执行的函数4） ajaxError（）:Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递5） ajaxSend（）:Ajax请求发送前执行的函数6） ajaxSuccess（）:Ajax请求成功时执行的函数$（“#loading”）.ajaxStart（function（）$（this）.show（）;）.ajaxStop（function（）$（this）.hide（）;/所有Ajax请求在请求阶段都会显示id为loading的元素27 $（“status”,xml）:在xml文档中查找sta

25、tus标签。.text（）获取标签的值jQuery插件：27 Validation表单验证（提示信息全是英文，若要中文则引入脚本库：jquery.validate.messages_cn.js）方法一：1. 引入jquery.validate.js脚本库2. $（“#form1”）.validate（）;3. 字段设置class=”.（为验证规则如：required/email/url等）4. 长度验证设置字段的minlength,maxlength属性方法二：1. 引入jquery.validate.js及jquery.metadata.js脚本库2. $（“#form1”）.validate（meta:”validate”）;3. 字段设置class=”validate:”.（为key:value对，多个用”,”分隔）方法三：2. 字段都定义一个name属性3. $（“#form1”）.validate（rules:name1:required:true,minlength:2,name2:自定义提示消息：class=”