jQuery常用方法以及实例总结(需要记忆)

我们都知道,程序员如果一直重复同样的工作,在很多地方都会用到重复的代码,就会想是不是可以把一些共同的代码单独提取出来,经过进一步的改造,让它可以放之四海而皆准,去解决绝大部分的重复代码编写工作。可以转换一下思维,jquery就是用JS写的,方便编程的一个方法集合。还可以这样通俗的理解,js是语言,JQuery是建立在这个语言上的一个基本库,利用可以更简单的使用js。这分别就像是木头和做好的木板,木头是基本的原材料,利用木头你可以做各种家具。但是利用做好的木板你可以更简单的做各种家具。今天就让我来为大家具体介绍一下jQuery常用方法总结,并且都是基础性的,需要记忆性的东西,只有熟知才能运用到相关的开发问题上。

jQuery常用方法以及实例总结(需要记忆)

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();

})

jQuery常用方法总结(需要记忆)

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('titledata');

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

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

10.Extend()方法

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

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

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

实例:

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

以上就是关于jQuery常用方法总结的十点方法以及实例的详细说明,感兴趣的朋友可以关注我哦!我们可以分享不一样的知识点,共同进步!

相关推荐