一、本课目标

掌握节点操作
掌握属性操作

二、节点操作

jQuery中节点操作：

查找节点
创建节点
插入节点
删除节点
替换节点
复制节点

2.1创建节点

工厂函数$()用于获取或创建节点。

$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点

下面这几个都是创建节点：

image.png

2.2插入节点

1、元素内部插入子节点

image.png

2、元素外部插入同辈节点

image.png

示例代码：
html文件：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>仿冬奥列表内容</title>
     <link rel="stylesheet" href="css/games.css">
 </head>
 <body>
    <div class="contain">
        <h2>祝福冬奥</h2>
        <ul class="gameList">
            <li> 贝克汉姆：衷心希望北京能够申办成功！</li>
            <li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
            <li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
            <li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
        </ul>
    </div>
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/games.js"></script>
 </body>
</html>

css文件：

*{padding:0;margin:0;}
html,body{font-family:"微软雅黑";}
.contain{width:320px;margin:5px auto; border: 1px solid #2a65ba;}
.gameList{list-style:none;}
.gameList li{padding-left:15px;line-height:40px; height:40px;font-size:12px;color:#000;border-bottom:1px #aaaaaa dashed;}
h2{font-size:16px;padding-left:20px;line-height:40px;}

js文件：

$(document).ready(function () {
    //用过滤选择器给h2设置背景颜色和字体颜色
     $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
     // 创建li节点并添加到ul标签中
     var $newNode = $("<li>你喜欢哪些冬季运动项目？</li>");
     $("ul").append($newNode);
     // 创建li节点并前置插入ul标签中
     var $newNode2 = $("<li>我有一句mmp</li>");
     $("ul").prepend($newNode2);
    // 创建节点并插入ul之后，跟ul平级
     var $newNode3 = "<li>我还有一句mmp</li>";
     $("ul").after($newNode3);
    // 创建节点并插入ul之前，跟ul平级
     var $newNode4 = "<li>我的第三句mmp</li>"
     $("ul").before($newNode4);
})

2.3删除节点

jQuery提供了三种删除节点的方法

remove()：删除整个节点：$(selector).remove([expr]);
empty()：清空节点内容（清空内容，但是位置保留）:$(selector).empty();
detach()：删除整个节点，保留元素的绑定事件、附加的数据（跟empty方法一样，但是是在特定情况下使用）
示例代码：
html文件和css文件跟上面示例相同，js文件如下：

$(document).ready(function () {
    //用过滤选择器给h2设置背景颜色和字体颜色
     $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
     // 创建li节点并添加到ul标签中
     var $newNode = $("<li>你喜欢哪些冬季运动项目？</li>");
     $("ul").append($newNode);
     // 创建li节点并前置插入ul标签中
     var $newNode2 = $("<li>我有一句mmp</li>");
     $("ul").prepend($newNode2);
    // 创建节点并插入ul之后，跟ul平级
     var $newNode3 = "<li>我还有一句mmp</li>";
     $("ul").after($newNode3);
    // 创建节点并插入ul之前，跟ul平级
     var $newNode4 = "<li>我的第三句mmp</li>"
     $("ul").before($newNode4);
    // 调用remove方法来删除整个节点
    //$(".gameList li:eq(1)").remove();
    // 调用empty方法清空节点内容
    $("ul li:nth-of-type(2)").empty();
})

2.4替换节点

replaceWith()和replaceAll()用于替换某个节点

image.png

示例代码：

$(document).ready(function () {
    //用过滤选择器给h2设置背景颜色和字体颜色
     $(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
     // 创建li节点并添加到ul标签中
     var $newNode = $("<li>你喜欢哪些冬季运动项目？</li>");
     $("ul").append($newNode);
     // 创建li节点并前置插入ul标签中
     var $newNode2 = $("<li>我有一句mmp</li>");
     $("ul").prepend($newNode2);
    // 创建节点并插入ul之后，跟ul平级
     var $newNode3 = "<li>我还有一句mmp</li>";
     $("ul").after($newNode3);
    // 创建节点并插入ul之前，跟ul平级
     var $newNode4 = "<li>我的第三句mmp</li>"
     $("ul").before($newNode4);
    // 调用remove方法来删除整个节点
    //$(".gameList li:eq(1)").remove();
    // 调用empty方法清空节点内容
    $("ul li:nth-of-type(2)").empty();
   // 使用replaceWith方法替换第三个li节点
    var $node1 = "<li>娘子，啊哈</li>"
    $("ul li:eq(2)").replaceWith($node1);
    // 使用replaceAll方法替换第四个li节点
    var $node2 = "<li>你为什么在流眼泪？</li>"
    $($node2).replaceAll("ul li:eq(3)");
})

六、节点操作

六、节点操作

一、本课目标

二、节点操作

2.1创建节点

2.2插入节点

1、元素内部插入子节点

2、元素外部插入同辈节点

2.3删除节点

2.4替换节点