一、本课目标
- 掌握节点操作
- 掌握属性操作
二、节点操作
jQuery中节点操作:
- 查找节点
- 创建节点
- 插入节点
- 删除节点
- 替换节点
- 复制节点
2.1创建节点
工厂函数$()用于获取或创建节点。
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
下面这几个都是创建节点:
2.2插入节点
1、元素内部插入子节点
2、元素外部插入同辈节点
示例代码:
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()用于替换某个节点
示例代码:
$(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)");
})