06-jQuery的文档操作***
之前JS中我们学习了JS的DOM操作 , 也就是所谓的增删改查DOM操作, 通过JS的DOM的操作 , 大家也能发现,大量的繁琐代码实现我们想要的效果 , 那么jQuery的文档操作的API提供了遍历的方法供我们操作我们的文档 .
看一下 之前我们JS 操作DOM的例子:
var oUl = document.getElementsByTagName("ul")[0]; // 获取ul var oLi = document.createElement("li) // 创建一个li oLi.innerHTML = "赵云"; // 在li里面添加文本 oUl.appendChild(oLi); // 将创建的li 添加到父元素ul 中
一.插入操作
知识点1：
语法:
父元素.append(子元素)
解释 : 追加某元素 , 在父元素中添加新的子元素 , 子元素可以为 : string , element(js对象) , jQuery 元素
代码如下 :
var oli = document.createElement("li") ; oli.innerHTML ="哈哈哈"; $("ul").append("<li>123</li>"); $("ul").append(oli); $("ul").append($("#app"));
注意 : 如果追加的是jQuery对象那么这些元素将从原位置上消失 , 简言之 , 就是一个移动操作 ,
知识点2：
语法 :
子元素.append(父元素)
解释 : 追加到某元素 子元素添加到父元素
$("<li>天王盖地府</li>").appendTo($("ul")).addClass("active")
注意 : 要添加的元素同样既可以是 string , element(JS对象) , jquery元素
知识点3：
语法 :
父元素.append(子元素 );
解释 : 前置添加 , 添加到父元素的第一个位置
$("ul").append("<li>我是第一个</li>")
知识点4：
语法 :
子元素.prependTo(父元素);
解释 : 前置添加 , 添加到父元素的第一个位置
$("<a href="#">百度一下</a>").prependTo("ul");
知识点5：
语法 :
兄弟元素.after(要插入的兄弟元素);
要插入的兄弟元素.inserAfter(兄弟元素);
解释 : 在匹配的元素之后插入内容
$("ul").after("<h2>标题</h2>");
$("<h3>标题</h3>").insertAfter("ul");
知识点6：
语法 :
兄弟元素.before(要插入的兄弟元素);
要插入的兄弟元素.insertBere(兄弟元素)
解释 : 在匹配的元素之后插入内容
$("ul").before("<h2>标题</h2>");
$("<h1>标题</h1>").insertBefore("ul")
二、克隆操作
语法 :
$(选择器).clone();
解释 : 克隆匹配的DOM元素
1 clone() : 克隆匹配的DOM元素
2 clone(true) : 元素以及其所有的时间处理比并且选中这些克隆的副本 ,(副本具有与真身一样的时间处理能力)
$("button").click(function(){
// 1 clone() : 克隆匹配的DOM元素
// 2 clone(true) : 元素以及其所有的时间处理比并且选中这些克隆的副本 ,(副本具有与真身一样的时间处理能力)
$(this).clone(true).insertAfter(this);
})
三、修改操作
知识点1：
语法 :
$(selector).replaceWith(content);
将所有的匹配的元素替换成指定的 string , JS对象 , jQuery对象
// 将所有的h5 标签替换成a标签 $("h5").repalceWith("<a href="#">你好</a>"); // 将所有的h5 标签替换成id为app的dom元素 $("h5").replaceWith($("#app"));
知识点2：
语法 :
$("<p>哈哈</p>").replaceAll("h2");
解释 : 替换所有 , 将所有的h2标签替换成p标签
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
4、删除操作
知识点1：
语法 :
$(selector).remove();
解释 : 删除节点后 ,事件也会删除 ( 就是删除整个标签)
$("ul").remove();
知识点2：
语法 :
$(selector).detach();
解释 : 删除节点后 , 事件会保留
var btn = $("button").detach() // 此时按钮能追加到ul中 $("ul").append(btn)
知识点3：
语法 :
$(selector).empty();
解释 : 清空选中元素中的所有后代节点
// 清空ul中的子元素 , 保留ul $("ul").empty()
知识点4：
jQuery的遍历方法 siblings()
语法:
$("给定元素").siblings("可选的")
其作用是筛选给定的同胞同类元素(不包括给定元素本身)
可以做 网页上的选项卡操作
