使用jQuery操作DOM

最新推荐文章于 2024-07-05 14:21:58 发布

yananye

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量1.8k

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/yananye/article/details/114101894

版权

这篇博客详细介绍了jQuery中的DOM操作，包括样式操作、内容操作、节点与属性操作等。重点讲解了如何设置和获取样式值、添加和移除样式、切换样式、判断是否包含指定样式，以及HTML代码、标签内容和属性值的处理。此外，还涵盖了节点查找、创建、插入、删除、替换和复制，以及属性操作、节点遍历和CSS-DOM操作的相关方法和示例。

摘要由CSDN通过智能技术生成

DOM操作

在jQuery中，DOM操作是一个非常重要的组成部分。jQuery中提供了一系列操作DOM强有力的方法，它们不仅简化了传统javascript操作DOM时繁冗的代码，更加解决了令开发者故不堪言的跨平台浏览器兼容性。
在这里插入图片描述

jQuery中的DOM操作

jQuery中的DOM操作主要可分为样式操作，文本和value属性值操作，节点操作，节点操作中又包含属性操作，节点遍历和CSS-DOM操作。其中最核心的部分是节点操作和节点遍历。
在这里插入图片描述

样式操作

jQuery不仅对CSS样式表有着良好的支持，而且对浏览器也有着良好的支持。
在jQuery中，对元素的样式操作主要有直接设置样式值，获取样式值，追加样式，移除样式和切换样式。

1.设置和获取样式值
在这里插入图片描述
参数说明

参数	描述
name	必需。规定css属性的名称。该参数可以是任何CSS属性
values	必需。规定css属性的值。该参数可以是任何css属性值

获取css属性值语法：

$(selector).css(name);//获取属性

2.追加样式和移除样式
在这里插入图片描述其中calss为类样式的名称，也可以增加多个类样式，各个类样式之间用空格隔开即可。

注意：使用addclass（）方法仅是追加类样式，即它依旧保存原有的类样式，在此基础上追加新样式。

通常为元素添加CSS样式时，addCalss（）比CSS（）更加常用，因为使用addClass（）添加样式，更加复合W3C的规范 “结构和样式分离” 的准则。

移除样式
在这里插入图片描述
参数为类样式名称，该名称是可选的，当选某类样式名称时，则移除该类样式，要移除多个样式时，和addclass一样，每个类样式之间用空格隔开。

3.切换样式
在JQuery中使用toggle(）方法可以切换元素的可见状态，使用toggleClass()方法可以切换不同的类样式，语法如下：
在这里插入图片描述
其中，参数class为类样式的名称，其功能是当元素中含有名称为class的CSS样式时，删除该类样式，否则添加一个该名称的类样式。

toggleClass（）方法模拟了addClass()方法与removeCalss（）方法实现样式切换功能的过程，它与toggle()方法有着异曲同工之妙，减少了代码量，提高了代码运行效率。

注意：toggleClass()方法可以实现有类样式之间的切换，而css()方法或addClass()方法仅是增加新的元素样式，并不能实现切换功能。

4.判断是否包含指定样式
在jQuery中提供了hasClass()方法来判断是否包含指定样式，语法如下：
在这里插入图片描述
参数class是类名，该名称是必选的，规定指定元素中查找的类名，返回值为布尔值，如果包含则返回true，不包含返回false。

示例：当鼠标指针移至标题上时，增加样式content，离开时移除content 代码如下：

<body>

 <h2 class="title" >jQuery操作CSS</h2>
 <p class="text">
	 css()设置或返回样式属性<br>
	 addClass()增加一个或多个类<br>
	 removeClass()移除一个或多个类
 </p>
 <script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
   
	$("h2").mouseover(function(){
   
		if(!$("p").hasClass("content")){
   
			$("p").addClass("content");
		}
	});
	$("h2").mouseout(function(){
   
		if($("p").hasClass("content")){
   
			$("p").removeClass("content");
		}
	});
});
</script>
</body>

内容操作

jQuery提供了对元素内容操作的方法，即对HTML代码(包括标签和标签内容)，标签内容和属性值内容三者的操作。

1.HTML代码操作
在jQuery中可以使用html（）方法对HTML代码进行操作，该方法类似于传统javascript中的innerHTML,通常用于动态的新增页面内容。
在这里插入图片描述

参数	描述
content	可选。规定被选元素的新内容。改参数可以包含HTML标签。无参数时，表示获取被选元素的文本内容

示例：下面制作单击标题“常见问题”，使用html（）方法在页面上增加问题列表，点击“x”按钮，使用html（）方法取消问题列表，代码如下所示：

<body>
<section>
    <span>×</span>
    <h1>常见问题</h1>
    <div class="proList"></div>
<div class="img"><img src="images/boy.png"></div>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function(){
   
//    $("h1").click(function(){
   
//        var str="<ul><li>买了商品后查不到物流信息怎么办？</li><li>申请退款后，交易退款钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的事件条件是什么？</li><li>如何申请淘宝客服介入？</li></ul>";
//        $(".proList").html(str);
//    });
//    $("span").click(function(){
   
//        $(".proList").html("");
//    });
    $("h1").click(function(){
   
        var str="<ul><li>买了商品后查不到物流信息怎么办？</li><li>申请退款后ÿ