jQuery的DOM常用功能

最新推荐文章于 2025-06-25 11:16:11 发布

原创最新推荐文章于 2025-06-25 11:16:11 发布 · 168 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #jQueryDOM

jQuery 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了使用 jQuery 对 DOM 进行操作的方法，包括文本和值的读取与修改、属性的获取与设置、CSS 样式的操作、元素的移动与删除等。通过实例展示了如何轻松地操纵网页元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery的DOM常用功能

一、对标签的文本和值的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //使用text()函数，等同于javascript的innerText属性
            alert($("div").text());

            //使用html()函数，等同于javascript的innerHtml属性
            alert($("div").html());

            //使用val()函数，等同于javascript的value属性
            alert($("input").val());

        })
    </script>
</head>
<body>
    <div id="div">
        <input type="button" value="测试按钮">
        <span>我是文本</span>
    </div>
</body>
</html>

二、对标签属性的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = "../js/jquery-3.3.1.js"></script>
<body>

    <ul>
        <li id="bj" name="beijing" xxx="yyy" >北京</li>
        <li id="tj" name="tianjin">天津</li>
    </ul>
    
    <input type="checkbox" id="hobby"/>

</body>

<script type="text/javascript">
    /*
    
    针对属性值非boolean类型的属性
        attr(参1，参2):只写参数1代表获取属性的值，写参1和参2代表设置属性值
        removeAttr(参1):删除属性
        
    针对属性值boolean类型的属性
        prop(参1，参2):只写参数1代表获取属性的值，写参1和参2代表设置属性值
        removeProp(参1):删除属性
     */
    
    
    //获取北京节点的name属性值
    alert($("#bj").attr("name"));

    //设置北京节点的name属性的值为dabeijing
    $("#bj").attr("name","dabeijing");

    //新增北京节点的discription属性 属性值是didu
    $("#bj").attr("discription","wudu");

    //删除北京节点的name属性并检验name属性是否存在
    $("#bj").removeAttr("name");

    //获得hobby的的选中状态
    alert($("#hobby").prop("checked"));

</script>
</html>

三、对CSS样式的操作

/*
	针对内部及外部CSS样式操作，等同于javascript的	对象.className = "class";
*/
//<input type="button" value=" addClass"  id="b2"/>
$("#b2").click(function(){
  $("#one").addClass("second");
});

//<input type="button" value="removeClass"  id="b3"/>
$("#b3").click(function(){
  $("#one").removeClass("second");
});

//<input type="button" value=" 切换样式"  id="b5"/>
$("#b4").click(function(){
  $("#one").toggleClass("second");
});

/*
	针对内联CSS样式操作，等同于javascript的	对象.style.backgroundColor = "red";
*/

//<input type="button" value=" 通过css()获得id为one背景颜色"  id="b5"/>
$("#b5").click(function(){
  alert($("#one").css("background-color"));
});

// <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
$("#b6").click(function(){
  $("#one").css("background-color","green");
});

四、移动元素对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-3.3.1.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div .mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	</head>
	 
	<body>
		 <ul id="city">
		 	 <li id="bj" name="beijing">北京</li>
			 <li id="tj" name="tianjin">天津</li>
			 <li id="cq" name="chongqing">重庆</li>
		 </ul>
		 
		 
		  <ul id="love">
		 	 <li id="fk" name="fankong">反恐</li>
			 <li id="xj" name="xingji">星际</li>
		 </ul>
		
		<div id="foo1">Hello1</div> 
       
	</body>
	
	<script type="text/javascript">

        /**将反恐放置到city的后面*/
        // $("#city").append($("#fk"));

        /**将反恐放置到city的最前面*/
        // $("#city").prepend($("#fk"));


        //将div放到两个ul的中间
        // $("#city").after($("#foo1"));
        //$("#love").before($("#foo1"));

		//将div复制并放到两个ul的中间
		$("#love").before($("#foo1").clone());
	</script>
   
</html>

五、删除元素对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>删除元素对象</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-3.3.1.js"></script>
	</head>

  <body>
  <ul id="city">
	  <li id="bj" name="beijing">北京</li>
	  <li id="tj" name="tianjin">天津</li>
	  <li id="cq" name="chongqing">重庆</li>
  </ul>
  <p class="hello">Hello</p> how are <p>you?</p>
  </body>

  <script type="text/javascript">

      //删除<li id="bj" name="beijing">北京</li>
      $("#bj").remove();

      //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).
      $("#city").empty();

  </script>
   
</html>