jQuery常见函数方法（新增css选择器、noConfilict等静态方法、ajax请求、实例方法、动画操作方法、事件操作方法、节点操作方法等对比JavaScript原生相似函数）

其中obj为一个对象，对象中属性包含设置ajax的内容。常见属性有type：请求方法包括POST和GET；data：指向一个对象，该对象包括需要发送的数据，以属性为key，值为value的方式；error：表示请求失败调用该函数；success：表示成功调用该函数，同时第一个参数接收data数据；timeout：设置最长请求时长，单位毫秒；url：发送请求地址；context：函数中this指向。

$('div').load(url,data,function(responseText,status,xml){})

将加载的数据内容替换$('div').innerHTML。不传data时是get请求，传入data时是post请求；url中可以添加新的选择器（以空格隔开），代表在加载的内容中用新的选择器选取内容后再加载入$('div')，function为回调函数，responseText为url不传新的选择器时会替换$('div').innerHTML的内容，statue有'succsss'和'error'两值，代表请求成功和失败，xml为返回对象，xml.responseText就为function中的第一个参数。

$.get(url,data,function(){},type)

发送get请求，url为请求地址，data为对象包括需要发送的数据，以属性为key，值为value的方式，function为成功后调用的函数，type为返回值包括xml, html, script, json, text, _default。

$.post(url,data,function(){},type)

同上。

其它jQuery中ajax使用介绍

http://hemin.cn/jq/jQuery.ajax.html

实例方法

属性操作

$('div').attr('name','value')

传入一个参数时，获取第一个符合要求的元素指定的属性节点的值（获取属性，存在会返回属性名，不存在返回undefined，例如checked、selected、disabled）。

传入两个参数时，设置所有符合要求的元素指定的属性节点的值为value（设置的属性节点不存在，那么会新增）。

$('div').removeAttr('name1 name2 ... namen')

删除所有div标签中为name1、name2、...、namen的的属性节点。

$('div').prop（'name','value'）

同$('div').attr('name','value')，不同在于获取例如checked、selected、disabled属性会返回true或false。

$().removeProp

同$('div').removeAttr('name1 name2 ... namen')。

$('div').eq(0)

选择div标签类数组中的第一个，封装为jQuery对象。

$('ul').index('li')

$('li')中第一个元素在$('ul')中的索引位（从0开始），如果不传'li'则表示$('ul')首个元素在兄弟节点中的序号（从0开始）。

$('div').addClass('name1 name2 ... namen')

给div标签添加类名，多个以空格隔开，如果重名直接覆盖，不会出现多个重名的。

$('div').removeClass('name1 name2 ... namen')

删除div标签中的类名，多个以空格隔开。

$('div').toggleClass('name1 name2 ... namen')

切换类名，有类名就删除，没有就添加。

$('div').html(str)

设置div标签的innerHTML值，不传时为获取。

$('div).text(str)

设置div标签的innerText值，不传时为获取。

$('div').val(str)

设置div标签的value属性值，同dom中的dom.value一样，不传时为获取。

$('div').css('name','value')

设置div标签的css中name为value，可以链式设置即每次返回原来的div标签，只传入一个参数为字符串时为获取该属性值。

还可以只传入一个对象，对象同css中设置相同，不同在于属性值需要用字符串形式。

$('div').height('100px')

设置div的高度为100px，不传为获取高度。

$('div').width('100px')

设置div的宽度为100px，不传为获取宽度。

$('div').offset(obj)

不传参数时，返回一个对象，对象中有left和right属性，代表div元素距离浏览器窗口的左边和右边的偏移位。

传入一个对象时，对象中有left，right属性，对应设置div元素距离浏览器窗口的左边和右边的偏移位。

$('div').position()

只能获取，返回一个对象，对象中有left和right属性，代表div元素距离有相对定位的父集的左边和右边的偏移位。

$('div').scrollTop（100）

设置div元素（有滚动条）的滚动的偏移位（传入数字即可，不累加），初始为0。注意获取和设置网页的偏移位时，因为存在兼容问题所以获取时使用$('body').scrollTop()+$('html').scrollTop()，设置时使用$('html,body').scrollTop(100)

不传参数时是获取。

jQery事件操作方法链接

https://blog.csdn.net/AIWWY/article/details/116238715

jQuery动画操作方法

可以链式编程，会在上个动画完成后调用下一个动画。

$('div').show(1000,'linear',function(){})

div元素以1000毫秒线性的方式显示，显示完后执行function内容，第二个参数默认为'swing'（表示开始慢中间快后慢，'linear'表示匀速），3个参数都为可选参数。

$('div').hide(1000,'linear',function(){})

同上，为隐藏。

$('div').toggle(1000,'linear',function(){})

同上，如果为显示就隐藏，如果为隐藏就显示。

$('div').slideDown(1000,'linear',function(){})

同上，自上而下展开元素。

$('div').slideUp(1000,'linear',function(){})

同上，自下而上收起元素。

$('div').slideToggle(1000,'linear',function(){})

同上，为展开和收起之间切换。

$('div').fadeIn(1000,'linear',function(){})

同上，为淡入。

$('div').fadeOut(1000,'linear',function(){})

同上，为淡出。

$('div').fadeToggle(1000,'linear',function(){})

同上为切换淡入和淡出。

$('div').fadeTo(1000,0.5,'linear',function(){})

除第二个参数其它为可选参数，第二个表示调整透明度到0.5，其它同上。

$('div').animate(obj,1000,'linear',function(){})

自定义动画方法，obj对象中放需要修改$('div')的属性，这些属性会自带动画效果，注意obj有累加属性和关键字，比如obj={width:'+=100'}，这表示动画是在原先宽度的基础上增加100px；obj={width:'hide'}，这表示动画是宽度隐藏即元素横向消失；obj={width:'toggle'}，这表示动画是该元素显示就会隐藏，反之；其它同上。

$('div').stop(true,true)

停止动画执行，第一个参数表示是否清空动画队列，true会清空动画队列。第二个参数表示是否立即完成当前动画，true表示完成动画，false会不完成动画，会返回动画执行前状态。2个参数都默认为false。

$('div').finish()

同$('div').stop(true,true)，不同点在于所有排队的动画属性会直接在$('div')上实现。

$('div').delay(1000)

表示延迟多少毫秒执行动画，例子为1s。

jQuery.fx.off=true

关闭页面的所有动画，默认为false。

jQery.fx.interval=100

动画执行的帧速，越小越流畅，默认为13,单位为毫秒。

jQuery节点操作方法

以下a、b为元素节点。

$(a).append($(b))

将b元素添加到a元素的直接子元素的最后。

$(a).appendTo($(b))

将a元素添加到b元素的直接子元素的最后。

$(a).prepend($(b))

将b元素添加到a元素的直接子元素的最前面。

$(a).prependTo($(b))

将a元素添加到b元素的直接子元素的最前面。

$(a).after($(b))

将b元素添加在a元素之后（a、b紧跟且之间为兄弟节点）。

$(a).insertAfter($(b))

将a元素添加在b元素之后（a、b紧跟且之间为兄弟节点）。

$(a).before($(b))

将b元素添加在a元素之前（a、b紧跟且之间为兄弟节点）。

$(a).insertBefore($(b))

将a元素添加在b元素之前（a、b紧跟且之间为兄弟节点）。

$(a).remove()

将a元素删除，其中remove可以接收参数，表示删除a元素和参数选择的元素中共同的元素（交集）。

$(a).detach()

同上。

$(a).empty()

相当于$(a).html('')和a.innerHTML=''。

$(a).replaceWith(b)

用b元素替换所有的a元素。

$(a).replaceAll(b)

用a元素替换所有的b元素。

$(a).clone(true)

返回一个深复制的a节点（复制了a元素和a元素上绑定的事件），传入false为浅复制，只复制a元素，不复制事件。

js原生DOM对象属性方法链接

https://blog.csdn.net/AIWWY/article/details/115442913

js原生BOM对象属性方法链接

https://blog.csdn.net/AIWWY/article/details/115550641

jQuery1.12速查表链接

http://hemin.cn/jq/index.html

YF-SOD

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery常见函数方法（新增css选择器、noConfilict等静态方法、ajax请求、实例方法、动画操作方法、事件操作方法、节点操作方法等对比JavaScript原生相似函数）

总结一些自己使用过的函数方法，会简单对比doom中相似的函数方法，会不断更新。jQuery（）或$()函数方法
复制链接

扫一扫

专栏目录