提示:个人理解的,看着理解吧。应该可以有点小帮助吧orz。大家要好好学习喔!有问题请联系我,感谢。
节点包括查找,创建,插入,删除,复制,替换
一.全文可用代码【贯穿全文】
代码如下(示例):
1.log后台弹出 请移步去后台查看(开发者模式)
<style>
.ne {
color: red;
}
.pr {
color: blue;
}
</style>
</head>
<body>
<h2> 今日动漫排行榜</h2>
<ul class="an">
<li>名侦探柯南</li>
<li>火影</忍者li>
<li>海贼王</li>
<li>夏日重现</li>
</ul>
1.查找节点
查找ul 里面 所有的 li 元素 (开发者工具里面看 ):
$(function () {
console.log($("ul li"));
})
这里的截图就不放出来了.(3个li)。
2.创建节点
2.1 语法:$(html)
代码(创建 li1/2 两个节点 ):
$(function () {
var li1 = $("<li>迪迦奥特曼</li>");
var li2 = $("<li>约会大作战</li>");
})
3.插入节点
节点的插入分 内部插入 和 外部插入
代码(插入 上面2.创建的 li1/2 两个节点 ):
$("ul").append(li1);
$("ul").prepend(li2);
可以写在以2.创建节点里面(列如:)
$(function () {
// 创建节点
var li1 = $("<li>迪迦奥特曼</li>");
var li2 = $("<li>约会大作战</li>");
// 插入节点
$("ul").append(li1);
$("ul").prepend(li2);
})
-----------------------------------------------------------------------
一:内部插入
append(content): 在匹配元素pp插入指定内容
appendTo(content): 把选择元素追加到另一个指定元素集合内部prepend (content): 在匹配元素开始的位置插入指定内容
prependTo (content): 将所有匹配元素前置到指定的元素集合内部二:外部插入
after(content): 在匹配元素之后插入内容
before(content): 将匹配的元素插入另一个指定的元素集合后面
insertBefore(content): 在匹配元素之前插入内容
insertAfter (content): 将匹配元素插入到另一个指定的元素集合的前面------------------------------------------------------------------------
然后 网页打开页面 结果 是:
今日动漫排行榜
- 约会大作战
- 名侦探柯南
- 火影
- 海贼王
- 夏日重现
- 迪迦奥特曼
3.删除节点
三个 方法 和 【使用场景】:
3.1 remove() 方法 【移除元素及数据和事件】
3.2 detach() 方法 【只是移除元素,但是保留数据和事件】
3.3 empty() 方法 【不移出元素本身,仅仅只清空元素及 所有子元素 的内容】
ps:实例代码:
(节选 remove():
删除 ul 后代 li 标签 里 下标为2 eq(下标从零开始) 的:)
注意:真相只有一个(删除掉 【....柯南】)
$(function () {
//省略部分代码
//删除节点
$("ul li:eq(1)").remove();
})
4. 复制节点
语法:clone([includeEvents])
【includeEvents】:可选参数 布尔类型 默认值:false 知否复制匹配元素的所有事件处理
ps:实例
$(function () {
$("ul li:eq(0)").clone(true).appendTo(".an");
$("ul li:eq(0)").clone(false).appendTo(".an");
})
输出结果:
今日动漫排行榜
- 约会大作战
- 火影
- 海贼王
- 夏日重现
- 迪迦奥特曼
- 约会大作战
- 约会大作战
5.替换节点
方法 和 【语法】
5.1 replaceWith() 将所有匹配的元素替换成指定的HTML或DOM元素。
$(selector).replaceWith(content)
5.2 replacceAll() 用匹配的元素替换掉所有 selector匹配到的元素。
$(content).replacceAll(selector)
ps:实例 【换了前两项】
$(function () {
$("ul li:eq(0)").replaceWith("<li>1.约会大作战</li>");
$("<li>2. 火影</li>").replaceAll("ul li:eq(1)");
})
look 原先的 前两项 已经更改 :
今日动漫排行榜
- 1.约会大作战
- 2. 火影
- 海贼王
- 夏日重现
- 迪迦奥特曼
- 约会大作战
- 约会大作战