任务视频V2.0

任务视频V1.0

知识点

删除节点

如果文档中某一个元素多余，那么应将其删除。jQuery提供了三种删除节点的方法，即remove()，detach()和empty()。

1.remove()方法

remove()方法作用是从DOM中删除所有匹配元素。参数可有可无。无参数时，直接从DOM中删除remove()方法的调用者。有参数时，参数为JQuery表达式，用来筛选元素。

例如<ul>节点的第1个<li>元素，jQuery代码如下：

$("ul li:eq(0)").remove();    //获取ul下的第一个<li>节点后，删除该节点

2.detach()方法

detach()方法与remove()方法的相同点是，该方法在删除元素节点后，也可以恢复。不同的是detach()方法删除所匹配的元素时，并不会删除该元素所绑定的事件、附加的数据。

3.empty()方法

empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点。jQuery代码如下：

$("ulli:eq(0)").empty();

当运行代码后，第1个<li>元素的内容被清空了，只剩下<li>标签默认的符号“·”.

复制节点

在页面中，有时候需要将某个元素节点复制到另外一个节点。在jQuery中可以通过clone()方法实现。

若单击某个<li>元素后需要再复制一个当前元素，并显示在<ul>节点最后面。代码如下：

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

$(this).clone().appendTo("ul");  //复制当前单击的节点，并将它追加到<ul>中

}) 

替换节点

有时候需要将某个元素节点替换为另外一个节点，可以通过replaceWith()和replaceAll()方法实现。

replaceWith()方法是将匹配的元素全部替换成指定的HTML或者DOM元素。例如：

$("ulli:last").replaceWith("<li>乒乓球</li>");

遍历节点

在jQuery中有很多遍历节点的方法，例如find()、filter()、nextAll()、prevAll()、parent()和parents()等。这些遍历节点有一个共同点，都可以使用jQuery表达式来作为它们的参数来筛选元素，下面简单介绍几种。

1.children()方法

该方法用于取得元素的子元素集合，不考虑其他后代元素。

var $ul =$("ul").children(); //获取<ul>下的所有子元素

2.next()方法

该方法用于取得匹配元素后面紧邻的同辈元素。

var $p =$("p").next(); //获取紧邻p元素的同辈元素

3.prev()方法

该方法用于取得匹配元素前面紧邻的同辈元素。

var $ul =$("ul").prev();

4.siblings()方法

该方法用于取得匹配元素前后所有的同辈元素。

5.parent()与parents()方法

parent(selector) 获得当前匹配元素集合中每个元素的父元素，由括号中的选择器筛选，括号中的参数为可选。

6.each()方法

each() 方法为每个匹配元素规定要运行的函数。

教学课件V2.0

教学课件V1.0

制作邮件删除效果

任务描述

在邮件列表前都有一个复选框，单击可以选中或取消选中。当单击“全选/全不选”按钮，所有复选框都随之选中或取消选中。单击“删除邮件”按钮可删除被选中的邮件。     

任务分析

根据任务描述，需要进行以下几步操作：

1.设计页面HTML结构，应用CSS样式。

2.找到“全选/全不选”按钮，绑定onclick事件。

3.查找所有的复选框，把每个复选框的checked属性值变为true或false，实现全选或全不选。

4.找到“删除邮件”按钮，绑定onclick事件。

5.查找所有checked属性值为true的复选框，删除其所在的行，即删除了该邮件。  

任务实现

        //全选or 全不选

       $("divdiv a:eq(0)").click(function(){

       if($("input[name=Select]").is(":checked"))

       {

          $("input[name=Select]").removeAttr("checked");

       }

       else

       {

          $("input[name=Select]").prop("checked",true);

       }

   });

实现删除行的功能。单击“删除”时，能删除相应行。

参考答案