目录
1.查找节点
查找属性节点: 通过 jQuery 选择器完成
操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值
操作文本节点：通过 text() 方法
2.创建节点
使用 jQuery 的工厂函数 (html); 会根据传入的 html 标记字符串创建一个 DOM 对象, 并把这个 DOM 对象包装成一个 jQuery 对象返回
注意
动态创建的新元素节点不会被自动添加到文档中, 而是需要使用其他方法将其插入到文档中
当创建单个元素时, 需注意闭合标签和使用标准的 XHTML 格式. 例如创建一个<p>元素, 可以使用 或(“<p></p>”), 但不能使用 或(“<P>”)
创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建
3.插入节点
以上方法不但能将新创建的 DOM 元素插入到文档中, 也能对原有的 DOM 元素进行移动
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
<!-- 将太原的节点插入到city标签内部的结尾处 -->
$("<li id='ty'>太原</li>").appendTo($("#city"));
<!-- $("#city").append("<li id='ty'>太原</li>"); -->
<!-- 将成都的节点插入到city标签内部的开始处 -->
$("<li id='cd'>成都</li>").appendTo($("#city"));
<!-- $("#city").prepend("<li id='cd'>成都</li>"); -->
}
</script>4.案例一
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
//需求: 点击 submit 按钮时, 检查是否选择 type, 若没有选择给出提示: "请选择类型";
// 检查文本框中是否有输入(可以去除前后空格), 若没有输入,则给出提示: "请输入内容";
//若检查都通过, 则在相应的 ul 节点中添加对应的 li 节点
//需求2: 使包括新增的 li 都能响应 onclick 事件: 弹出 li 的文本值.
$(function(){
<!-- 弹出对应标签的文本内容 -->
function showContent(li){
alert($(li).text());
}
<!-- 给现有的li标签赋onclick事件 -->
$("li").click(function(){
showContent(this);
})
$(function(){
$(":submit").click(function () {
<!-- 检查是否选择type -->
var $type=$(":radio[name='type']:checked");
if($type.length==0){
alert("请选择类型");
return false;
}
<!-- 检查是否有输入(去除前后空格) -->
var text=$(":text").val();
text=$.trim(text);
if(text==""){
alert("请输入内容");
return false;
}
<!-- 在相应的 ul 节点中添加对应的 li 节点，并添加click事件 -->
$("<li>"+text+"</li>").appendTo("#"+$type.val()).click(function(){showContent(this)});
return false;
})
})
})
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
<form action="ex-3.html" name="myform">
<input type="radio" name="type" value="city">城市
<input type="radio" name="type" value="game">游戏
name: <input type="text" name="name"/>
<input type="submit" value="Submit" id="submit"/>
</form>
</body>4.删除元素
<!-- 删除bj节点及其所有子节点 -->
$("bj").remove();
<!-- 删除city节点的所有子节点，city节点不会被删除 -->
$("#city li").empty();
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>5.复制节点
6.替换节点
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj" name="BeiJing">北京</li>
<li>上海</li>
<li id="dj">东京</li>
<li id="se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!-- 替换北京节点和红警节点
注意：replaceWith , replaceAll有移动节点的功能，节点互换需要先克隆节点
-->
$(function(){
<!-- 复制北京节点 -->
var $bj=$("#bj").clone(true);
<!-- 将红警节点替换为北京节点，返回红警节点 -->
var $rl=$("#rl").replaceWith($bj);
<!-- 将北京节点替换为红警节点 -->
$("#bj").replaceWith($rl);
})
</script>7.包裹节点
8.HTML代码/文本/值
9.样式操作
10.CSS-DOM操作