jQuery 的 DOM 操作

查找节点, 修改属性

​ 查找属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取 它的各种属性值

//获取图片的路径、高属性
$("img").attr("src", "../image/1.png");
$("img").attr("height", "200")

创建节点

​ 使用 jQuery 的工厂函数 $(): $(html标签); 会根据传入的 html 标记字符串 创建一个 jQuery 对象,

动态创建的新元素节点不会被自动添加到文档中, 需要使用其他方法将其插入到 文档中; .当创建单个元素时, 必须使用标准的 XHTML 格式，标签一定要闭合. 例：用$("<p/>")或$(“

”).

​ 创建文本节点就是在创建元素节点时直接把文本内容写出来; 创建属性节点也是在创建元素节点时一起创建.

内部插入法

​ 内部插入法是在 元素内插入内容(该内容变成该元素的子元素或节点)

1.append(content) :向每个匹配的元素的内部的结尾处追加内容.

$('#sh').append($myli)// 表示 在 $('#sh')对象内部后面添加一个 $myli 对象

2.appendTo(content) :将每个匹配的元素追加到指定的元素中的内部结尾处.

$myli.appendTo($("#city")); //表示把$myli 添加到 $("#city")对象的内部
后面

3.prepend(content):向每个匹配的元素的内部的开始处插入内容.

//***添加成都 li 到 北京前
$("#b2").click(function () {
//jqury 方法
$myli = $("<li id='cd' name='chengdu'>成都</li>");
$('#city').prepend($myli);
//$myli.prependTo($('#city'));
})

4.prependTo(content) :将每个匹配的元素插入到指定的元素内部的开始处.

$myli.prependTo($('#city'));

外部插入法

​ 外部插入法是在元素的外面插入内容(其内容变成元素的兄弟节点)

1.after(content) :在每个匹配的元素之后插入内容.

//*** 添加成都 li 到 北京和重庆之间
$('#b4').click(function () {
//$("#bj").after("<li id='cd' name='chengdu '>成都</li>");

2.before(content):在每个匹配的元素之前插入内容.

//*** 添加成都 li 到 吉林前面
$('#b5').click(function () {
//使用外部插入, 一步到位
//$("#jl") 对象前面添加 "<li id='cd' name='chengdu '>成都</li>";
var $cd= $("<li id='cd' name='chengdu'>成都</li>");
//$("#jl").before($cd);
})

3.insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面.

$("<li id='cd' name='chengdu '>成都</li>").insertAfter($('#bj'));})

4.insertBefore(content) :把所有匹配的元素插入到另一个、指定的元素元素集合的前面.

$cd.insertBefore($('#jl'));

删除节点

1.remove():

​ 从 DOM 中删除所有匹配的元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同 时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

//*****删除所有 p
$("#b1").click(function () {
$("p").remove();
})

//****删除上海这个 li
$("#b3").click(function (){
$("#sh").remove();
})

2.empty():

​ 清空节点 – 清空元素中的所有后代节点(不包含属性节点)

//***所有 p 清空
$("#b2").click(function () {
$("p").empty();
})

复制节点

1、clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有 任何行为.

//克隆节点，不克隆事件,添加到p元素内部后面
$("button").clone().appendTo("p");

2、clone(true): 复制元素的同时也复制元素中的的事件

//克隆节点，克隆事件,添加到p元素内部后面
$("button").clone(true).appendTo("p");

替换节点

1.replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM/juqery 元素 A.replaceWith(B)

前面的替换到后面

//1. 将 p 替换成 button
//$("p").replaceWith("<input type='button' id='my' value='我的按钮'/>")

2.replaceAll(): 颠倒了的 replaceWith() 方法.A.replaceAll(B）

如果若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元 素一起消失，

后面的替换到前面

//用粗体文本替换每个段落：
$(".b1").click(function(){
   $("p").replaceAll("<b>Hello world!</b>");
});

属性操作

1.attr(): 获取属性和设置属性

2.attr()传递一个参数时, 即为某元素的获取指定属性

3.attr()传递两个参数时, 即为某元素设置指定属性的值

4.jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等, 后面我们还会举例说明.

5.removeAttr(): 删除指定元素的指定属性

样式操作

1.获取 class 和设置 class :

​ class 是元素的一个属性, 所以获取 class 和设置 class 都可 以使用 attr() 方法来完成.

//获取class和设置 class 都可以使用 attr() 方法来完成.(给 id 为 first 添加 .one 样式
$("#b1").click(function (){
$("#first").attr("class", "one");
})

2.追加样式: addClass()

//追加样式: addClass()
$("#b2").click(function (){
$("#first").addClass("one");
})

3.移除样式: removeClass()

​ 从匹配的元素中删除全部或指定的 class

//移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class
$("#b3").click(function (){
$("#first").removeClass();
})

4.切换样式: toggleClass()

​ 控制样式上的重复切换.如果类名存在则删除它, 如果类名 不存在则添加它.

//切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它
$("#b4").click(function (){
$("#first").toggleClass("one");
})

5.判断是否含有某个样式: hasClass()

​ 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 fals

$("#b5").click(function (){
alert($("#first").hasClass("one"));
})

获取 HTML, 文本和值

1、设置或返回所选元素的内容（包括 HTML 标记）: html()

2、读取和设置某个元素中的文本内容: text(). 该方法既可以用于 HTML 也可以用于 XML 文档.

  $(this).text();

3、读取和设置某个元素中的值: val() — 该方法类似 JavaScript 中的 value 属性. 对于文 本框, 下拉列表框, 单选框该方法可返回元素的值

//获取到当前值
var currentVal = $(this).val()

常用遍历节点方法

1、取得匹配元素的所有子元素组成的集合: children().

//**查找所有子元素（class 为 one的 div 的子元素)
var $ div=$("div[class='one']").children()

2、取得匹配元素后面的同辈元素的集合:next()/nextAll();

//***获取后面的同辈 div 元素（class 为 one 的 div 的)
$("div.one").nextAll().filter("div")

3、取得匹配元素前面的同辈元素的集合:prev()/prevAll();

//**获取前面的同辈 div 元素（class 为 one 的 div 的)
$("#b3").click(function () {
//遍历
// $("div.one").prevAll().filter("div").each(function (){
// alert("div 的内容= " + $(this).text());
// })

4、取得匹配元素前后所有的同辈元素: siblings()

//**获取所有的同辈 div 元素（class 为 one 的 div 的)
$("#b4").click(function () {
$("div.one").siblings().filter("div").each(function () {
alert("同辈 div text= " + $(this).text())
})

5、获取指定的第几个元素: nextAll().eq(index)

//指定获取到第几个子元素, eq(1) 表示得到第 2 个子元素
//alert($("div.one").children().eq(1).text());

CSS-DOM 操作

juery CSS操作函数

function () {
$(“div.one”).siblings().filter(“div”).each(function () {
alert("同辈 div text= " + $(this).text())
})

5、获取指定的第几个元素: nextAll().eq(index)

//指定获取到第几个子元素, eq(1) 表示得到第 2 个子元素
//alert($(“div.one”).children().eq(1).text());

####  CSS-DOM 操作

juery CSS操作函数

![在这里插入图片描述](https://img-blog.csdnimg.cn/3931f3da99334c18a4ec2e7e42527f8e.png)