jQuery中的DOM操作（考前总结）

最新推荐文章于 2024-05-06 23:28:29 发布

寂静花开

最新推荐文章于 2024-05-06 23:28:29 发布

阅读量436

点赞数

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qq_45884783/article/details/114968789

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、操作样式

1. css（）方法

专门用来设置css属性的。

<script>
$("div").css("color");      //读取div元素的color属性值
$("div").css("color", "red");   //设置div元素的color属性值

//设置多个属性值
$("div").css("color", "red").css("width", "300").css("height", "200").css("background-color", "pink");

$("div").css({color:"red", width: 300, height: 200,"background-color": "pink"});    //效果和上面链式写法一样

 $("div").css({
color: “red”, 
width: 300, 
height: 200,
"background-color": "pink"
});                 //推荐写法  
</script>

注意：属性名中带 “ - ” 的属性要放在双引号里。

2. 类样式方法

专门用来操作元素的class属性。
addClass(): 追加样式。$(selector).addClass(class1 class2 … classN);
removeClass(): 移除样式。$(selector).removeClass("class1 class2 … classN ") ;
hasClass(): 判断样式。$(selector). hasClass(class);
toggleClass(): 切换样式。$(selector).toggleClass(class) ;

二、操作内容

text()：设置元素中的文本内容，等同于原生JS中的innerText属性。
html()：设置元素中html代码，等同于原生JS中的innerHTML属性。
val()：可以获取或设置元素的value属性值，等同于原生JS中的value属性。

三、操作尺寸

width()、height(): 获取的是 content 区域大小
innerWidth()、innerHeight():获取的是 content + padding 区域大小
outerWidth()、outerHeight():获取的是 content + padding + border 区域大小
outerWidth(true)、outerHeight(true):获取的是 content + padding + border + margin 区域大小

四、操作属性

attr():设置或获取元素标签上的属性
prop():设置或获取元素标签上的属性
removeAttr():删除元素的一个或多个属性，如需移除若干个属性，使用空格分隔属性名称。
提醒：一般在添加属性名称时该属性就会生效或属性只有true和false两个属性值时尽量使用prop()方法进行设置与获取，其他属性则使用attr()方法。

五、操作节点

1.获取节点：

通过各种选择器或选择器的组合来获取想要的网页元素。
$(“选择器”)

2.创建节点：

元素节点通过工厂函数$()直接创建，文本节点和属性节点可以随着元素节点创建时一起创建，也可以通过先创建元素节点，再使用操作内容和属性的方法产生。

3.插入节点：

内部插入节点：
append()、prepend():父元素的方法，把方法后部分的内容插入其前部分的内容中；
appendTo()、prependTo():要插入的节点的方法，把方法前部分的内容插入其后部分的内容中

外部插入节点：
before()、after():要插入的节点的同辈节点的方法，把方法后部分的内容插入其前部分的内容（before是之前after是之后）。
insertBefore()、insertAfter():要插入的节点的方法，把方法前部分的内容插入其后部分的内容（before是之前after是之后）。

4.删除节点：

remove():节点及所有的后代、节点上绑定的事件都被删除
detach():绑定的事件会被保留下来
empty():清空节点，清除所有后代

5.复制节点：

clone():参数为true，复制元素的同时也复制元素绑定的事件

6.替换节点：

replaceWith():被替换的在前面。
replaceAll():被替换的在自己的括号里。

<script>
$("#one").replaceWith("<p><strong>你喜欢的是?</strong></p>");
$("<strong>你喜欢的是?</strong>").replaceAll("#two");
</script>

<body>
<p id="one" title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
<p id="two"   title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
</body>

7.包裹节点：

wrap()：括号内填“想要在外层添加元素”，在每个匹配的元素外层包裹上一个html元素。
wrapAll()：给选中的所有标签统一添加一个父级
wrapInner()：在元素里包裹一层标签
unwrap()：将元素集合的父级元素删除

8.遍历节点：

children():取得匹配元素的所有子元素组成的集合，该方法只考虑子元素而不考虑任何后代元素。
find():返回被选元素的后代元素，一路向下直到最后一个后代。
next():取得匹配元素后面紧邻的同辈元素的集合。
prev():取得匹配元素前面紧邻的同辈元素的集合
siblings():取得匹配元素前后所有的同辈元素。
closet():获取最近匹配的祖先元素
parent():返回被选元素的直接父元素。
parents():获取所有祖先元素

寂静花开

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery中的DOM操作（考前总结）

目录一、操作样式1. css（）方法2. 类样式方法二、操作内容三、操作尺寸四、操作属性五、操作节点1.获取节点：一、操作样式1. css（）方法专门用来设置css属性的。<script>$("div").css("color"); //读取div元素的color属性值$("div").css("color", "red"); //设置div元素的color属性值//设置多个属性值$(“div”).css(“color”, “red”).css(“width”,
复制链接

扫一扫