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

上一篇:0607-参数初始化策略


下一篇:css3 地球自转公转