本文主要是介绍jQuery常见函数方法（对比JavaScript原生相似函数），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目录

$()

jQuery中新增css选择器

$('div:empty')

$("div:contains('str')")

$("div:has('span')")

$('div:parent')

$('div:gt(1)')

静态方法

$.noConflict()

$.each(arr,function(index,value){})

$.map（arr,function(index,value){return}）

js原生数组方法forEach、map、isArray

$.trim(str)

js原生字符串实例方法trim

$.isWindow(obj)

$.isArray(arr)

$.isFunction(fun)

$.holdReady(boolean)

发送ajax请求

$.ajax(obj)

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

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

其它jQuery中ajax使用介绍

实例方法

属性操作

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

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

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

$().removeProp

$('div').eq(0)

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

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

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

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

$('div').html(str)

$('div).text(str)

$('div').val(str)

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

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

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

$('div').offset(obj)

$('div').position()

$('div').scrollTop（100）

jQery事件操作方法链接

jQuery动画操作方法

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

$('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(){})

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

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

$('div').finish()

$('div').delay(1000)

jQuery.fx.off=true

jQery.fx.interval=100

jQuery节点操作方法

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

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

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

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

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

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

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

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

$(a).remove()

$(a).detach()

$(a).empty()

$(a).replaceWith(b)

$(a).replaceAll(b)

$(a).clone(true)

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

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

jQuery1.12速查表链接

---

总结一些自己使用过jQuery的函数方法，会简单对比js原生函数中相似的方法，会不断更新，以下$都是可以直接用jQuery直接替换的，然后括号中的都是dom上原生的函数方法。

$()

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

 

jQuery中新增css选择器

$('div:empty')

选择div中内容为空的标签。

$("div:contains('str')")

选择div中包含str文本内容的标签。

$("div:has('span')")

选择div中包含子元素（标签）span的标签。

$('div:parent')

选择div中有文本内容或有子元素的标签。

$('div:gt(1)')

选择$('div')中索引大于1的元素（从0开始）。

 

静态方法

$.noConflict()

用于解决$符号重名问题。

调用该函数表示释放$符号的使用权，即之后不能使用$符号来代替jQuery了，只能使用jQuery的写法调用函数。如果还想使用其他符号代替jQuery，则申明一个变量接收它的返回值，例如var sod = $.noConflict()这样以后就能通过sod来代替jQuery调用函数。

$.each(arr,function(index,value){})

arr代表遍历的数组，index、value代表当前遍历的索引和值，与数组实例方法与forEach不同点在于，该方法可以遍历伪数组，且最后返回原数组。

$.map（arr,function(index,value){return}）

arr代表遍历的数组，index、value代表当前遍历的索引和值，与数组实例方法map的不同点在于，该方法可以遍历伪数组，在未定义返回值的情况下返回空数组。

js原生数组方法forEach、map、isArray

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

$.trim(str)

去除str字符串两端的空格，同字符串实例的trim方法。

js原生字符串实例方法trim

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

$.isWindow(obj)

判断obj是否是window对象，返回true或false。

$.isArray(arr)

判断arr是否是数组（可以区别伪数组），返回true或false，同Array.isArray()。

$.isFunction(fun)

判断arr是否是函数，返回true或false。

$.holdReady(boolean)

当boolean=false时，暂停入口函数$(function(){})的内容执行(会跳过该函数，执行下面的内容）；当为true时，开启入口函数的执行。

发送ajax请求

$.ajax(obj)

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

$.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

这篇关于jQuery常见函数方法（对比JavaScript原生相似函数）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！