jQuery实用技巧大全(必背)

发表时间: 2018-01-31 08:32

1.each():遍历函数

用法:它是一个通用的迭代函数,可以用来无缝迭代对象和数组。jQuery.each(collection, callback(indexInArray, valueOfElement) )

实例:

$("button").click(function(){

$("li").each(function(){

alert($(this).text())

});

});

2.data():存储数据

用法:存储任意数据到指定的元素并且/或者返回设置的值,jQuery.data( element, key, value )。

属性:element:Element 要关联数据的DOM对象key: String 存储的数据名;value:Object 新数据值

实例:$.data(document.body, 'foo', 52);console.log($.data( document.body, 'foo'));//52

3.type():检查类型

用法:type()方法用于检测javascript对象的类型如果对象是undefined或null,则返回相应的“undefined”或“null”

4.append():插入节点

用法:使用append(content[,content])方法在每个匹配元素里面的末尾处插入参数内容,参数可以是DOM元素,DOM元素数组,HTML字符串,或者jQuery对象

实例:

$('#btn').click(function(){

$('#box').append('<spanid="test">测试内容</span>');

$('.inner').append($('#box'));

})

5.remove():删除节点

用法:remove()方法会将元素自身移除,同时也移除元素内部的一切,包括绑定事件及与该元素相关的jQuery数据

实例:

$('#btn1').click(function(){

$div = $('.inner').remove();

})

6.replaceWith():替换节点

用法:replaceWith()方法用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

实例:

$('#btn').click(function(){

alert($('.inner').replaceWith('<div>div</div>').html())

})

7.attr(attributeName):增加和获取属性

用法:attr(传入特性名):获取特性的值,相当于DOM中的getAttribute(),这个方法既可以设置属性也可以取出某个属性。

实例:

取出属性:console.log($('#test').attr('id'));

增加属性:$('#test').attr('title','123');

8.removeAttr(attributeName):删除属性

用法:removeAttr()方法使用原生的removeAttribute()函数,但是它的优点是可以直接在一个jQuery 对象上调用该方法。

实例:$('#ele1').removeAttr('title data');

9.find():获取后代元素

用法:find()方法通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代,匹配的元素将构造一个新的jQuery对象

10.Extend()方法

用法:这个方法运用有点难度:jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型。

extend(dest,src1,src2,src3...);它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。

实例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}那么合并后的结果result={name:"Jerry",age:21,sex:"Boy"}也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

喜欢的话关注一下吧,我会继续分享总结和学习经验。