2021-03-02

最新推荐文章于 2024-01-07 07:45:00 发布

qq_50890325

最新推荐文章于 2024-01-07 07:45:00 发布

阅读量130

点赞数

本文链接：https://blog.csdn.net/qq_50890325/article/details/114278525

版权

Jquery第八章

一。DOM操作
1.DOM操作的分类
javaScript操作DOM时分为三类——DOM Core(核心),HTM-DOM和CSS-DOM.
jquery与javaScript操作DOM同样分三类。
2.jquery中的DOM操作。
jquery中的DOM操作主要可以分为样式操作，文本和value属性操作，节点操作，节点操作中又包含属性操作，节点遍历，CSS-DOM操作。
最核心的是节点操作和节点遍历。
在这里插入图片描述
样式操作
1.设置和获取样式
$(selector).css(name,value)//设置单个属性。
$(selector).css(name:value，name:value,name"value)//设置多个属性；
参数说明：
name:必须，规定CSS属性名称，该参数可以是任何CSS属性。
value:必需，规定CSS属性值，该参数可以是任何CSS属性值。
语法：
$(selector).css(name)//获取属性。
$(".textDown").css(“background-color”)
2.追加样式和删除样式。
1）追加样式。
$(selector).addClass(class)
语法：
$(selector).addClass(class classs2…classN);
2)删除样式。
语法：
$(selector).removeClass(class)//删除单个样式，
$(selector).removeClass(class1,class2…classN)//删除多个样式
3.切换样式。
语法：
$(selector).toggeClass(class);
4.判断是否是指定样式：
$(selectot).hasCalss(class);
内容操作
1.HTML代码操作
语法：
html([content]);
content:可选。规定被选中元素的新内容。该参数可以包含HTML标签。无参数时，表示获取被选中的元素文本内容。
2.标签内容操作
text([content]);
3.html()方法和text()方法的区别。
html属性中有两个方法，一个有参，一个无参。
无参html()：取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档，返回的是一个string
例子：

html页面代码：

Hello

JQuery代码：$(“div”).html();

结果：Hello

有参html（val）：设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。返回一个JQuery对象
例子：
html页面代码：

JQuery代码：$(“div”).html(“

Nice to meet you

”);

结果：

Nice to meet you

（html标签会被浏览器识别）

text属性中有两个方法，一个有参，一个无参
无参text()：取得所有匹配元素的内容。结果是由所有匹配元素包含的文本内容组合起来的文本。返回的是一个string。
例子：

html页面代码：

Hello

fine

JQuery代码：$(“p”).text();

结果：Hello fine

有参text(val)：设置所有匹配元素的文本内容,与 html() 类似, 但将编码 HTML (将 “<” 和 “>” 替换成相应的HTML实体).返回一个JQuery对象。
例子：
html页面代码：

Paragraph.

JQuery代码：$(“div”).text(“Some new text.”);

结果:

Some new text.

（html标签不会被浏览器识别，而是当作字符串来输出）
4.属性值的操作。
语法：
val([value])
value:可选。
节点与属性操作
节点操作、
一查找节点
1.查找或操作属性节点：通过jQuery选择器完成
查找到所需要的元素后可以调用jQuery对象的attr()方法来获取它的各种属性值
注：若直接操作value属性值可以使用更便捷的val()方法

2.查找或操作文本节点：通过text()方法
二。创建节点
在这里插入图片描述
语法：
$(s e l e c t o r);$ (element);$(html);
三。插入节点。

$(" d i v ") . a p p e n d ($ (“

我爱你

”));

(" < p > 我 爱 你 < / p > ") . a p p e n d T o (

(“div”));
//$(“

我爱你

”)就是直接创建了个

我爱你

节点
//以上两种方式都是将

我爱你

插入到div内部的结尾处
//只是主语与宾语位置不同

$(" d i v ") . p r e p e n d ($ (“

我爱你

”));

(" < p > 我 爱 你 < / p > ") . p r e p e n d T o (

(“div”));
//以上两种方式都是将

我爱你

插入到div内部的开始处
//只是主语与宾语位置不同
在这里插入图片描述

四，删除节点。

语法：
$(selector).remove([expr])
五。替换节点。
在这里插入图片描述

$(“p[class=‘p1’]”).clone().insertBefore(“div”);
//复制class='p1’的p节点并放到div的前边
六，复制节点。
语法：
$(selector).clone([includeEvents]);
在这里插入图片描述

属性操作
一，获取与设置元素属性。
语法：
$(selector).attr([name])//获取属性值
在这里插入图片描述

二。删除元素属性
$(selector).removeAttr(“alt”);
三，设置和获取HTML，文本和值
在这里插入图片描述

四，样式操作

节点遍历
1.遍历子元素。
语法：
$(selector).children([expr]);
2.常用的遍历节点的方法。
1、children()
取得匹配元素的所有子元素组成的集合，该方法只考虑子元素而不考虑任何后代元素。

2、next()
取得匹配元素后面紧邻的同辈元素的集合。
$(“li:eq(1)”).next().addClass(“orange”);
3、prev()
取得匹配元素前面紧邻的同辈元素的集合。
$(“li:eq(2)”).prev().addClass(“orange”);
4、siblings()
取得匹配元素前后所有的同辈元素。
$(“li:eq(1)”).siblings().addClass(“orange”);
三。遍历前辈元素。
1.遍历祖先

祖先是父、祖父或曾祖父等等。

通过 jQuery，能够向上遍历 DOM 树，以查找元素的祖先。

向上遍历 DOM 树，这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

parent()
parents()
parentsUntil()
.parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象。

.parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找

.parentsUntil() 方法会找遍所有这些元素的前辈元素，直到遇到了跟参数匹配的元素才会停止。返回的jQuery对象中包含了所有找到的前辈元素，除了与 .parentsUntil() 选择器匹配的那个元素。

2.遍历同胞

同胞就是拥有相同的父元素。

通过jQuery能够在DOM树中遍历元素的同胞元素。

其中nextAll、prevAll、nextUntil、prevUntil其实与遍历祖先的的查找处理是非常类似。

nextAll（）获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。

nextUntil()获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。