使用jQuery操作DOM

最新推荐文章于 2024-09-07 14:03:31 发布

原创最新推荐文章于 2024-09-07 14:03:31 发布 · 2.2k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #js

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

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>申请退款后，交易退款钱到哪里？</li><li>卖家拒绝退款，怎么办？</li><li>投诉发生的事件条件是什么？</li><li>如何申请淘宝客服介入？</li></ul>";
        $(".proList").html(str);
    });
    $("span").click(function(){
        $(".proList").html("");
    });
});
</script>
</body>

2.标签内容操作
在JQuery中，可以使用text()方法获取或设置元素的文本内容，不含HTML标签。
在这里插入图片描述

参数	描述
content	可选。规定被选元素的新文本内容。注释：特殊字符会被编码，无参数时，表示获取被选元素的文本内容。

在jQuery中，html（）和text（）都可以用来获取元素内容和动态改变元素内容，但两者也存在一些区别，如下所示：
在这里插入图片描述
此外，还需注意的是，html（）方法仅支持(X)HTML文档，不能用于XML文档，而text（）方法既支持HTML文档，也支持XML文档。

虽然html（）和text（）方法在操作文本内容时，区别不是很大，但是由于html()方法不仅能获取和设置文本内容，还能设置HTML内容，因此在实际应用中，html（）方法比text（）方法更常用。

3.属性值操作
在jQuery中，除了可以使用html（）方法和text（）方法获取与设置元素内容外，还提供了获取元素value属性值的方法val（），该方法非常常用，多用于操作表单的input元素。
在这里插入图片描述

参数	描述
value	可选。规定被选元素的新内容无参数时，返回值为第一个被选元素的values属性的值

示例：当文本框获得焦点时，初始值“电风扇 ” 消失，失去焦点时如果文本框内容为空则该初始值出现，代码如下所示：

<body> 
  <input name="" type="text" class="search_txt" value="电风扇" id="searchtxt" />
  <input type="button" class="search_btn" />
<script src="js/jquery-1.12.4.js"></script>
 <script>
$(function(){
	$("#searchtxt").focus(function(){
		var txt_value=$(this).val();
		if(txt_value=="电风扇"){
			$(this).val("");
		}
	});
	$("#searchtxt").blur(function(){
		var txt_value=$(this).val();
		if(txt_value==""){
			$(this).val("电风扇");
		}
	});
});
 </script>
</body>

节点与属性操作

jQuery对于节点的操作主要分为两种类型，一种是对节点本身的操作，另一种是对节点中属性节点的操作。

节点操作

在jQuery中，节点操作主要分为查找，创建，插入，删除，替换和复制六种操作方式。其中查找，创建，删除和替换节点是日常开发中使用最多，也是最为重要的。

1.查找节点
查找节点就是用选择器获取节点。

2.创建节点
语法
在这里插入图片描述

2.插入节点
在jQuery中，要想实现动态的新增节点，必须对创建的节点执行插入或追加操作，而jQuery提供了多种方法实现节点的插入。从插入方式上主要分为两大类；内部插入节点和外部插入节点，如下表所示：
在这里插入图片描述

示例：

 <body>
	<div class="contain">
		<h2>祝福冬奥</h2>
		<ul class="gameList">
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $(".contain :header").css({background:"#2a65ba",color:"#ffffff"});
            //$(".gameList li:last").css("border","none");
            //新建节点
            var $newNode=$("<li></li>");
            var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
            var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");
            var $newNode3=$("<li>北京冬残会筹备工作在京举行</li>");
            var $newNode4=$("<li>北京奥匹克塔奥运五环标志落成！</li>");
            //插入节点
            $("ul").append($newNode1);
            $("ul").prepend($newNode2);
            $("ul").after($newNode3);
            $("ul").before($newNode4)
            //删除指定节点
            $(".gameList li:eq(1)").remove();
        })
    </script>
 </body>

4.删除节点
在这里插入图片描述
其参数expr为可选项，如果接受参数，则该参数为筛选元素的jQUery表达式，通过该表达式获取指定元素，并进行删除。

在上面示例的基础上实现删除“贝克汉姆”所在的节点被删除

  $(".gameList li:eq(1)").remove();

注意remove()方法与detach（）方法都能将匹配的元素从DOM文档中删除。两者相同之处是都能将匹配的元素从DOM中删除，而且删除后该元素在jQuery对象中依然存在。

两者不同的地方在于detach（）可以在删除元素后，在jQuery对象中保留元素的绑定事件，附加的数据，而remove（）方法没有这种作用。

empty（）方法，他能清空元素中所有后代节点

remove()与empty()方法的区别就在于，前者删除了整个节点，后者仅删除了节点中的内容。

5.替换节点

在这里插入图片描述
replaceWith（）方法的作用是将所有匹配的元素都替换成指定HTML元素或者DOM元素。

示例：

 <body>
	<div class="contain">
		<h2>祝福冬奥</h2>
		<ul class="gameList">
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
 <script>
     $(function(){
         var $new1=$("<li>你喜欢哪些冬季运动项目？</li>");
         //$(".gameList li:eq(2)").replaceWith($new1);
         
     })
 </script>
 </body>

使用replaceAll（）同样可以实现，该方法与replaceWith（）方法的作用相同，它只是颠倒了replaceWith（）方法的操作，使用replaceAll（）方法的代码如下所示：

 <body>
	<div class="contain">
		<h2>祝福冬奥</h2>
		<ul class="gameList">
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
 <script>
     $(function(){
         var $new1=$("<li>你喜欢哪些冬季运动项目？</li>");
         //$(".gameList li:eq(2)").replaceWith($new1);
        $new1.replaceAll($("ul.gameList li:eq(2)"));
     })
 </script>
 </body>

6.复制节点

在jQuery中，若要对节点进行复制，则可以使用clone()方法。该方法能够生成被选元素的副本，包含子节点，文本和属性语法如下：
在这里插入图片描述
示例：实现节点的复制：

 <body>
	<div class="contain">
		<h2>祝福冬奥</h2>
		<ul class="gameList">
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $(".gameList li:eq(1)").click(function(){
                $(this).clone(true).appendTo(".gameList");
            });
            $(".gameList li:eq(2)").click(function(){
                $(this).clone(false).appendTo(".gameList");
            });
        });
    </script>
 </body>

true在复制节点的同时，还复制了它绑定的单击事件，

属性操作

在jQUery中，属性操作的方法有两种，即获取与设置元素属性的attr（）方法和删除元素属性的removeAttr（）方法，这两个方法在日常开发中使用非常频繁。

1.获取与设置元素属性
在这里插入图片描述
其参数name是属性名称，value表示属性的值。

示例：

<div class="contain">
		<div><img src="images/winter.jpg" alt="奥运五环标志" width="320" height="198"></div>
		<h2>祝福冬奥</h2>
		<ul class="gameList">
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
		</ul>
	</div>

现在实现单击图片获取图片alt属性的值，以对话框的方式输出代码如下：

 $(function(){
		 $(".contain img").removeAttr('alt');
		$(".contain img").click(function(){
			alert($(this).attr("alt"));
		});

使用attr（）方法设置图片的宽度和高度的属性值，代码如下：

 $(".contain img").attr({width:"200",height:"80"});

2.删除元素属性
在这里插入图片描述
其中，参数为元素属性的名称。
示例：在上面示例中，删除图片的alt属性，代码如下：

&(".contain img").removeAttr("alt");

节点遍历

jQuery中不仅能够对获取到的元素进行操作，还能通过已获取到的元素，选取与其相邻的兄弟元素，祖先元素等。

遍历子元素
在这里插入图片描述
其参数expr可选，用于过滤子元素的表达式；

遍历同辈元素
jQuery提供了三种遍历同辈元素的方法：
在这里插入图片描述
遍历前辈元素
在jQuery中遍历前辈元素的方法主要右parent()和parents()两种。

其中，两者参数selector都是可选的，表示被匹配元素的选择器表达式。patent（）方法和parents（）方法在使用上非常相似。

其他遍历方法

除了以上的遍历方法外，jQuery中还有许多遍历的方法。

each()方法
each（）放啊规定为每个匹配元素规定运行的函数：
在这里插入图片描述
其中，参数index表示选择器的index位置，element表示当前有元素，当返回值为false时可用于急早停止循环。

示例：

<body>
<section>
	<img src="images/ad.jpg" alt="美梦成真系列抽奖" />
	<ul>
		<li><a href="#">小米的MI 2手机</a><span class="hot">火爆销售中</span></li>
		<li><a href="#">苹果iPad mini</a></li>
		<li><a href="#">三星GALAXY Ⅲ</a></li>
		<li><a href="#">苹果iPhone 5</a></li>
	</ul>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script>
	$(function(){
		$("img").click(function(){
			$("li").each(function(){
				var str=$(this).text()+"<br>";
				$("section").append(str);
			});
		});
	});
</script>
</body>

end（）方法
在这里插入图片描述
示例：

 <body>
	<div class="contain">
		<h2>祝福冬奥</h2>
		<ul class="gameList">
			<li> 贝克汉姆：衷心希望北京能够申办成功！</li>
			<li> 姚明：北京申冬奥是个非常棒的机会！加油！</li>
			<li> 张虹：北京办冬奥，大家的热情定超乎想象！ </li>
			<li> 肖恩怀特：我爱北京，支持北京申办冬奥会！</li>
		</ul>
	</div>
	<script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            $(".contain :header").css({background:"#2a35ba",color:"#ffffff"});
            $(".gameList li").first().css("background","#b8e7f9").end().last().css("background","#d3f4b5");
            $(".gameList li:last").css("border","none");
        });
    </script>
 </body>

CSS-DOM操作

jQuery支持css-DOM操作，除了css（）方法外，还有获取设置元素高度，宽度，相对位置等的css操作方法：
在这里插入图片描述
此外，获取元素的高度除了使用height（）方法外，还能使用css（）方法，其获取高度值的代码为$("#box").css(“height”);。两只区别在于使用css(）方法获取元素高度值与样式设置有关，可能会得到auto，也可能得到60px之类的字符串，而height（）方法获取的高度则是元素在页面中的实际高度，与样式设置无关，且不带单位，获取元素宽度的方式也是同理。