龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > Javascript编程 >

jquery常用方法及使用示例汇总(4)

时间:2014-11-09 03:05来源:网络整理 作者:网络 点击:
分享到:
复制代码 代码如下: div class="container" div class="inner" div class="Hello"Hello/div /div div class="inner" div class="Goodbye"Goodbye/div /div /div detach、empty和remove方法 .detach( [se

复制代码 代码如下:

<div class="container">
  <div class="inner">
    <div class="Hello">Hello</div>
  </div>
  <div class="inner">
    <div class="Goodbye">Goodbye</div>
  </div>
</div>

detach、empty和remove方法

.detach( [selector ] ):从DOM中去掉所有匹配的元素。当需要移走一个元素,不久又将该元素插入DOM时,就需要用到detach方法。

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

精彩图集

赞助商链接