jquery常用方法及使用示例汇总

2020-05-19 07:32:40易采站长站整理

.empty():这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本。因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点。

.remove( [selector ] ):将元素从DOM中移除,同时移除元素上的事件及 jQuery 数据

empty()的例子:


 <ul class=”one”>
    <li class=”two”>item 1</li>
    <li>item 2</li>
    <li class=”three”>item 3</li>
</ul>

<script type=”text/javascript”>
    $(“.two”).empty();//item 1 文本节点被移除,li的小圆点还在,证明li没有被移除
</script>

看下面一个remove()例子:

描述:从DOM中把所有段落删除

HTML 代码:


<p>Hello</p> how are <p>you?</p>

jQuery 代码:


$(“p”).remove();

结果:

how are
val()方法

val():获得匹配元素的当前值。
描述:获取文本框中的值

jQuery 代码:


$(“input”).val();

jQuery 代码:


$(“input”).val(“hello world!”);

each()和map()

each()和map()方法:each返回的是原来的数组,并不会新创建一个数组。而map方法会返回一个
新的数组。如果在没有必要的情况下使用map,则有可能造成内存浪费。
each方法:

定义一个空数组,通过each方法,往数组添加ID值;最后将数组转换成字符串后,alert这个值;


$(function(){
    var arr = [];
    $(“:checkbox”).each(function(index){
        arr.push(this.id);
    });
    var str = arr.join(“,”);
    alert(str);
})

map方法:

将每个:checkbox执行return this.id;并将这些返回值,自动的保存为jQuery对象,然后用get方法将其转换成原生Javascript数组,再使用join方法转换成字符串,最后alert这个值;


$(function(){
    var str = $(“:checkbox”).map(function() {
        return this.id;
    }).get().join();   
    alert(str);
})

当有需一个数组的值的时候,用map方法,很方便。

更加详细的讨论,请点击我的另一篇文章:详解jQuery内置函数map()和each()的使用

$.each()

jQuery的$(selector).each()函数可以遍历循环选中的子元素,而jQuery的$.each()函数则可以遍历任何集合,包括对象和数组,它接收要遍历的集合以及一个回调函数,回调函数每次传递一个数组的下标和这个下标所对应的数组的值。