一、本课目标
- 掌握节点操作
- 掌握属性操作
- 查找节点
- 创建节点
- 插入节点
- 删除节点
- 替换节点
- 复制节点
$(selector)：通过选择器获取节点
$(element)：把DOM节点转化成jQuery节点
$(html)：使用HTML字符串创建jQuery节点
下面这几个都是创建节点：
文章图片
image.png 2.2插入节点 1、元素内部插入子节点
文章图片
image.png 2、元素外部插入同辈节点
文章图片
image.png 示例代码：
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 = $("你喜欢哪些冬季运动项目？ ");
$("ul").append($newNode);
// 创建li节点并前置插入ul标签中
var $newNode2 = $("我有一句mmp ");
$("ul").prepend($newNode2);
// 创建节点并插入ul之后，跟ul平级
var $newNode3 = "我还有一句mmp ";
$("ul").after($newNode3);
// 创建节点并插入ul之前，跟ul平级
var $newNode4 = "我的第三句mmp "
$("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 = $("你喜欢哪些冬季运动项目？ ");
$("ul").append($newNode);
// 创建li节点并前置插入ul标签中
var $newNode2 = $("我有一句mmp ");
$("ul").prepend($newNode2);
// 创建节点并插入ul之后，跟ul平级
var $newNode3 = "我还有一句mmp ";
$("ul").after($newNode3);
// 创建节点并插入ul之前，跟ul平级
var $newNode4 = "我的第三句mmp "
$("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 = $("你喜欢哪些冬季运动项目？ ");
$("ul").append($newNode);
// 创建li节点并前置插入ul标签中
var $newNode2 = $("我有一句mmp ");
$("ul").prepend($newNode2);
// 创建节点并插入ul之后，跟ul平级
var $newNode3 = "我还有一句mmp ";
$("ul").after($newNode3);
// 创建节点并插入ul之前，跟ul平级
var $newNode4 = "我的第三句mmp "
$("ul").before($newNode4);
// 调用remove方法来删除整个节点
//$(".gameList li:eq(1)").remove();
// 调用empty方法清空节点内容
$("ul li:nth-of-type(2)").empty();
// 使用replaceWith方法替换第三个li节点
var $node1 = "娘子，啊哈 "
$("ul li:eq(2)").replaceWith($node1);
// 使用replaceAll方法替换第四个li节点
var $node2 = "你为什么在流眼泪？ "
$($node2).replaceAll("ul li:eq(3)");
})
