Jquery有很多方法,苏州网站制作总结了平时常用的一些方法,分享给大家,也顺便加强下记忆。当然这些方法的使用网上都有,甚至总结的比下面的还要详细,不喜勿喷哦。
1.each():遍历函数
用法:它是一个通用的迭代函数,可以用来无缝迭代对象和数组。jQuery.each(collection, callback(indexInArray, valueOfElement) )
<pre>
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
})
</pre>
2.append():插入节点
用法:使用append(content[,content])方法在每个匹配元素里面的末尾处插入参数内容,参数可以是DOM元素,DOM元素数组,HTML字符串,或者jQuery对象
<pre>
$('#btn').click(function(){
$('#box').append('<spanid="test">测试内容</span>');
$('.inner').append($('#box'));
})
</pre>
3.remove():删除节点
用法:remove()方法会将元素自身移除,同时也移除元素内部的一切,包括绑定事件及与该元素相关的jQuery数据
<pre>
$('#btn1').click(function(){
$div = $('.inner').remove();
})
</pre>
4.attr(attributeName):增加和获取属性
用法:attr(传入特性名):获取特性的值,相当于DOM中的getAttribute(),这个方法既可以设置属性也可以取出某个属性。
实例:
取出属性:console.log($('#test').attr('id'));
增加属性:$('#test').attr('title','123');
5.removeAttr(attributeName):删除属性
用法:removeAttr()方法使用原生的removeAttribute()函数,但是它的优点是可以直接在一个jQuery 对象上调用该方法。
实例:$('#ele1').removeAttr('title data');
6.replaceWith():替换节点
用法:replaceWith()方法用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
实例:
<pre>
$('#btn').click(function(){
alert($('.inner').replaceWith('<div>div</div>').html())
})
</pre>
7.type():检查类型
用法:type()方法用于检测javascript对象的类型如果对象是undefined或null,则返回相应的“undefined”或“null”
8.find():获取后代元素
用法:find()方法通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代,匹配的元素将构造一个新的jQuery对象
9.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
10、获得内容 - text()、html() 以及 val()
• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容(包括 HTML 标记)
• val() - 设置或返回表单字段的值
11.Extend()方法
用法:这个方法运用有点难度:jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型。
<pre>extend(dest,src1,src2,src3...);它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:</pre>
<pre>var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。</pre>
实例:
<pre>var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}那么合并后的结果result={name:"Jerry",age:21,sex:"Boy"}也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。</pre>