jQuery中的DOM操作

举报
编程 小白 发表于 2022/05/12 16:35:28 2022/05/12
【摘要】 jQuery中的DOM操作DOM是一种与浏览器平台、语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件。 1.属性操作每个HTML元素都可以转换为一个DOM对象,而每个DOM对象都有一组属性,通过这些属性可以设置HTML元素的外观和特性。在标准 JavaScript 中,可以使用document.getElementsById (“对象ID”)方法获取对应的DOM对象。在jQue...

jQuery中的DOM操作

在这里插入图片描述
DOM是一种与浏览器平台、语言无关的接口,使用该接口可以轻松地访问页面中所有的标准组件。

1.属性操作

每个HTML元素都可以转换为一个DOM对象,而每个DOM对象都有一组属性,通过这些属性可以设置HTML元素的外观和特性。在标准 JavaScript 中,可以使用document.getElementsById (“对象ID”)方法获取对应的DOM对象。在jQuery中,可以通过选择器选中多个HTML元素,再使用get()方法获取其中某个HTML元素对应的对象,其语法格式如下所示:

var 对象名=$("选择器").get(索引值)

索引值是从0开始的整数,如果要得到第一个HTML元素,则索引值使用0;如果要得到第二个HTML元素,则索引值使用1;依次类推。
另外,可以使用each()方法遍历jQuery选择器匹配的所有元素,并对每个元素执行指定的回调函数,这个回调函数有一个可选的整数参数表示遍历元素的索引值。

例1定义了一个数组,数组的内容是颜色字符串的定义。网页中在显示列表<li>时,会根据列表<li>的位置值作为数组下标值,取出相应的颜色数组数据,并把<li>内的文字显示成相对应的颜色,在浏览器中的显示结果如图1所示。
【例1】

<!doctype html>
<html>
  <head>
  <title>jQuery遍历元素</title>
  <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
     $(document).ready(function(){
      var colorArr=new Array("blue","red","pink","green");
      $("li"). each(function(index){//遍历本网页中的所有1i元素
        this.style.color=colorArr[index];//改变当前1i元素的前景色
      });
     });
   </script>
   </head>
 <body>
  <ul>
     <li>音乐</li>
     <li>羽毛球</li>
     <li>足球</li>
     <li>篮球</li>
  </ul>
 </body>
</html>

在这里插入图片描述

图1 遍历元素

2.获取或设置HTML元素的内容

在jQuery中可以使用表1所示的方法返回或设置元素的内容,通过这些方法可以动态修改网页显示的内容。

表1 获取或设置HTML元素的内容
方法 说明
$(selector).text() 用于返回或设置元素的文本内容
$(selector).html() 用于返回或设置元素的内容(包括HTML标记在内)
$(selector).val() 用于返回或设置表单字段的值

以html()方法为例,如果要获取HTML元素的内容,其语法格式如下:

var htmlStr=$(selector).html();

如果要设置HTML元素的内容,其语法格式如下:

$(selector).html("修改字符串")

例2中用用户在文本框中输入的数据修改<li>列表的第一个元素和最后一个元素的内容。在浏览器的文本框中输入“乒乓球”,并单击“修改HTML元素内容”按钮,在浏览器中的显示结果如图2所示。
【例2】

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery修改元素内容</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
       $("button").click(function(){
        var  newContent =$("#userInput"). val();//va1()获取表单元素的内容
		$("u1li:first").html(newContent);//html()设置选中元素的内容
        $("ul li:last").text(newContent);//text()设置选中元素的内容
        });
      });
    </script>
  </head>
 <body>
    <input type="text"id="userInput">
    <button>修改HTML元素内容</button>
    <ul>
      <li>音乐</li>
      <li>羽毛球</li>
      <li>足球</li>
      <li>篮球</li>
    </ul>
 </body>
</html>

在这里插入图片描述

图2 获取并设置元素内容

3.获取或设置HTML元素的属性

在jQuery中获取或设置HTML元素的属性使用attr()方法,删除元素的某个指定属性使用 removeAttr ()方法。当为attr()方法传递一个参数时,即为获取某元素的指定属性;当为该方法传递两个参数时,即为设置某元素指定属性的值。

例3在div块中显示一个图片,当鼠标指针移入这个div块时,改变图片元素的src属性,把其属性值进行字符串拼接,在0. jpg~3. jpg中选取一个,从而达到改变显示不同图片的目的。该例还使用 setInterval ()函数完成定时改变图片。
【例3】

<!doctype html>
<html>
   <head>
   <meta charset="utf-8">
   <title>jQuery获取元素属性</title>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
   <script>
     $(document).ready(function(){
      var index=0;
      setInterval(imgChange,1000);//定时1秒调用imgChange()函数,改变一次图片
	  function imgChange(){
        index=(index+1)%4;//让索引值在0~3之间变化
        $("#box img").attr("src","images/"+index+".jpeg");//修改img元素的src属性
		}
      });
   </script>
   </head>
 <body>
    <div id="box">
      <img src="images/0.jpg">
    </div>
 </body>
</html>

4.利用jQuery管理页面元素

利用jQuery可以方便地在页面中添加新元素或者删除页面中已有的元素。表2是jQuery管理页面元素的常用方法及其说明。

表2 jQuery管理页面元素的常用方法及其说明
方法 说明
after() 在选择的元素之后插入内容
append() 在选择的元素集合中的元素结尾插入内容
appendTo() 向目标结尾插入选择的元素集合中的元素
before() 在选择的元素之前插入内容
insertAfter () 把选择的元素插入到另一个指定元素集合的后面
insertBefore () 把选择的元素插入到另一个指定元素集合的前面
prepend() 向选择的元素集合中的元素的开头插入内容
prependTo() 向目标开头插入选择的元素集合
replaceAll() 用匹配的元素替换所有匹配到的元素
replaceWith () 用新内容替换匹配的内容
wrap() 把选择的元素用指定的内容包裹起来
wrapAll() 把所有的匹配元素用指定的内容包裹起来
wrapInner() 把每一个匹配元素的子元素使用指定的内容包裹起来
remove() 删除匹配元素及其子元素
empty() 删除匹配元素的子元素

例4是管理页面元素的几个方法的示例。首先在页面上有两个<p>段落元素,单击“DOM操作测试”按钮后,在第一个<p>标记后,使用after()方法增加一个段落元素;然后在原始的第二个段落,使用before()增加一个段落元素;使用 replaceWith()方法对原始的第二个段落的内容进行修改;最后使用empty()方法删除原始的第三个段落元素。例4在浏览器初始页面中的显示结果如图3所示,单击按钮后在浏览器中的显示结果如图4所示。
【例4】

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>DOM操作</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
     $(document).ready(function(){
      $("button").click(function(){
       $("p").eq(0).after("<p>原始第一段落后插入元素</p>");
       $("p").eq(2).before("<p>原始第二段落前插入元素</p>");
       $("p").eq(3).replaceWith("<p>原始第二段内容修改</p>");
       $("p").eq(4).empty();//删除原始第三段落
       });
	 });
    </script>
</head>
<body>
    <button>DOM操作测试</button>
    <p>这是原始第一个段落。</p>
    <p>这是原始第二个段落。</p>
    <p>这是原始第三个段落。</p></body>
</html>

在这里插入图片描述

图3 DOM操作初始页面

在这里插入图片描述

图4 DOM操作单击按钮之后的页面

例4中的eq()方法是在选中元素集合内选择第几个元素。下面通过一个综合实例让读者理解remove()方法。在例5中显示一个邮件列表,在该列表的每一封邮件前面都有一个复选框,并在列表的最后有四个按钮,分别用于全选、取消、反选、删除邮件。用户选择了某些需要删除的邮件之后,单击“删除”按钮,通过remove()方法能把表格中的选中行进行删除。单击“删除”按钮前后在浏览器中的不同显示结果如图5和图6所示。
【例5】

<!doctype html>
<html>
   <head>
   <meta charset="utf-8">
   <title>邮件列表管理</title>
   <style>
     *{margin:0px; padding:0px;}
     #box{width:400px;margin:0px auto;}
   </style>
   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
   <script>
    $(function(){
     $("#selectBtn").click(function(){//全选
      $("input[name=select]").prop("checked", true)
      });
    $("#selectCanc1e").click(function(){//取消选择
     $("input[name=select]").prop("checked", false)
     });
    $("#notSelect").click(function(){//反选
     $("input[name=select]").each(function(index, element){
      $(this).prop("checked",!$(this).prop("checked"))
      })
    });
    $("#delBtn").click(function(){//删除选中邮件项
     $("input[name=select]").each(function(index, element){//判断当前元素是否被选中,如果当前元素被选中,
//则删除当前元素的父元素的父元素的所有子元素,即<tr>的所有子元素
      if($(this).prop("checked"))
     $(this).parent().parent().remove();
     });
    })
   })
   </script>
   </head>
<body>
   <div id="box">
    <p>收件箱</p>
    <table width="400"  border="1">
    <tr>
      <td>状态</td>
      <td>发件人</td>
      <td>主题</td>
    </tr>
    <tr>
      <td><input name="select"  type="checkbox"  value="select"></td>
	  <td>王者归来</td>
      <td>羽毛球服装</td>
    </tr>
    <tr>
      <td><input name="select"  type="checkbox"  value="select"></td>
      <td>天下</td>
      <td>明天会下雨吗?</td>
    </tr>
    <tr>
      <td><input name="select"  type="checkbox"  value="select"></td>
      <td>沧海</td>
      <td>轮椅什么时候还您?</td>
    </tr>
    <tr>
       <td><input name="select"  type="checkbox"  value="select"></td>
       <td>王者归来</td>
       <td>明天约了场比赛</td>
    </tr>
  </table>
    <button id="selectBtn">全选</button>
    <button id="selectCancle">取消</button>
    <button id="notSelect">反选</button>
    <button id="delBtn">删除</button>
 </div>
</body>
</html>

在这里插入图片描述

图5 邮件列表管理

在这里插入图片描述

图6 删除部分邮件后的列表

注:本文通过 CDN(内容分发网络)引用jQuery,用户可以不下载存放 jQuery。

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。