JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】

最新推荐文章于 2022-11-13 16:00:06 发布

明金同学

最新推荐文章于 2022-11-13 16:00:06 发布

阅读量10w+

点赞数 46

分类专栏： JavaScript交互式知识文章标签：列表 html css js java

本文链接： https://blog.csdn.net/weixin_44893902/article/details/109639994

版权

JavaScript交互式知识专栏收录该内容

9 篇文章 14 订阅

订阅专栏

全部章节 >>>>

本章目录

7.1 DOM 对象和 jQuery 对象

7.1.1 DOM 对象

7.1.2 jQuery 对象

7.1.3 jQuery 对象和 DOM 对象的相互转换

7.1.4 实践练习

7.2 jQuery 中使用 DOM 操作元素

7.2.1 元素样式的操作

7.2.2 元素内容和值的操作

7.2.3 元素属性的操作

7.2.4 实践练习

7.3 jQuery 中使用 DOM 操作节点

7.3.1 创建节点元素

7.3.2 插入节点

7.3.3 替换节点

7.3.4 复制节点

7.3.5 删除节点

7.3.6 实践练习

7.4 遍历元素

7.4.1 jQuery 中元素的遍历

7.4.2 实践练习

总结：

7.1 DOM 对象和 jQuery 对象

7.1.1 DOM 对象

通过传统的 JavaScript 方法访问 DOM 中的元素，可生成 DOM 对象。如：

 var obj=document.getElementById("content")

使用JavaScript中的getElementById ()方法，在文档中选择id="content"的匹配元素，最后将生成的DOM对象储存在obj变量中

7.1.2 jQuery 对象

使用 jQuery 选择器选择页面中的元素，是为了生成 jQuery 对象，jQuery 对象具有特有的方法和属性，完全能够实现传统 DOM 对象的所有功能

使用jQuery操作元素

使用选择器获取某个元素
使用jQuery对象的方法操作元素

7.1.3 jQuery 对象和 DOM 对象的相互转换

jQuery 对象转换成 DOM 对象

使用 jQuery 中的 get() 方法，其语法结构为：get([index])
如果get()方法不带参数，get()方法会返回所有匹配元素的DOM对象，并将它们包含在一个数组中

DOM 对象转换成 jQuery 对象

对于一个 DOM 对象，只需要用 $() 将它包装起来就可以获得对应的 jQuery 对象，其语法结构为：$(DOM 对象 )

示例：使用 DOM 对象更改页面中文本字体的颜色

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  $(function() {
      $("h3").click(function() {
        this.style.color="red";//DOM 对象
      });
   });
</script>
<body>
  <h3> 全部商品分类 </h3>
</body>

示例：使用 jQuery对象更改页面中文本字体的颜色

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  $(function() {
      $("h3").click(function() {
        $(this).css("color","red");//jQuery 对象
      });
   });
</script>
<body>
  <h3> 全部商品分类 </h3>
</body>

7.1.4 实践练习

7.2 jQuery 中使用 DOM 操作元素

7.2.1 元素样式的操作

1、直接设置元素样式值：在 jQuery 中，可以通过 css() 方法为某个指定的元素设置样式值

设置单个属性：

jQuery 对象.css(name,value);  //其中name为样式名称，value为样式的值

同时设置多个属性：

jQuery 对象.css({name:value,name:value,name:value…});

示例：在 jQuery 中使用 DOM 设置元素的样式值

<script type="text/javascript">
   $(function() {
      $("#content").click(function() {
        $(this).css("font-weight","bold");
        $(this).css("font-style","italic");
        $(this).css("background-color","#eee");
      });
   });
</script>
<body>
  <p id="content">Write Less, Do More.</p>
</body>

2、增加类：通过 jQuery 对象的 addClass() 方法增加元素类

增加单个类：

 jQuery 对象.addClass(class);

同时增加多个类，以空格隔开类名：

 jQuery 对象.addClass(class0 class1…);

示例：在 jQuery 中使用 addClass(class) 方法，给<p>标签动态添加样式

<style type="text/css">
    .cls1{
      font-weight:bold;
      font-style:italic;
      background-color:#eee;
    }
</style>

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function() {
      $("#content").click(function() {
        $(this).addClass("cls1");
      });
   });
</script>
<p id="content">Write Less, Do More.</p>

3、删除类：与增加 css 类的 addClass() 方法相反，removeClass() 方法则用于删除类

jQuery 对象.removeClass([class]);

示例：点击按钮后，删除添加的 <p> 标签样式类

<style type="text/css">
    .cls1{
      font-weight:bold;
      font-style:italic;
      background-color:#eee;
    }
</style>

4、类切换 toggleClass() 模拟了 addClass() 与 removeClass() 实现样式切换的过程通过 toggleClass() 方法可以为元素切换不同的类

jQuery 对象.toggleClass(class);

示例：使用toggleClass(class) 方法，实现增加类样式和删除类样式的切换

<style type="text/css">
    .cls1{
      font-weight:bold;
      font-style:italic;
      background-color:#eee;
    }
</style>

<script type="text/javascript">
    $(function() {
	添加类样式的代码略
      $("#content").click(function() {
        $(this).toggleClass("cls1");
      });
   });
</script>
<p id="content">Write Less, Do More.</p>

7.2.2 元素内容和值的操作

设置或获取元素的内容:

操作元素内容的方法包括 html() 和 text()

语法格式	参数说明	功能描述
html()	无参数	用于获取第一个匹配元素的 HTML 内容或文本内容
html(content)	content 参数为元素的HTML内容	用于设置所有匹配元素的 HTML 内容或文本内容
text()	无参数	用于获取所有匹配元素的文本内容
text(content)	content 参数为元素的文本内容	用于设置所有匹配元素的文本内容

示例：在页面中点击“增加图像”按钮后，在 <p> 标签中增加一幅图像

<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
   $(function() {
      $("input[type='button']").click(function() {
        // 设置页面中所有 <p> 元素内部的 HTML 代码
        $("p").html("<img src='../img/frozen.jpg'/>");
      });
   });
</script>
<body>
       <p></p>
     <input type="button" value=" 增加图像 "/>
</body>

获取或设置元素值：要获取元素的值，可以通过 val() 方法来实现

jQuery 对象.val([val]);

如果 val() 方法不带参数，表示获取某元素的值

如果 val() 方法带有参数，则表示将参数赋给指定的元素，即设置元素的值

示例：制作页面登录框水印特效

<script type="text/javascript">
    $(function() {
      $("#userEmail").focus(function(){    // 邮箱输入框获得焦点
        var text_value = $(this).val();   // 获取当前文本框的值                	    if(text_value == "xxx@163.com") {
           $(this).val(""); // 如果符合条件，则清空文本框内容
        }
      });
      $("#userEmail").blur(function() {    // 邮箱输入框失去焦点
        var text_value = $(this).val();  // 获取当前文本框的值
        if(text_value=="") {
            $(this).val("xxx@163.com"); } // 如果符合条件，则设置内容
      });
    });
</script>

7.2.3 元素属性的操作

1、获取或设置元素的属性值：通过 attr() 方法可以获取或设置元素的属性值

//获取属性值，参数name表示属性的名称
jQuery 对象.attr(name); 
//设置属性值，参数value表示属性的值
jQuery 对象.attr(name,value);
//同时设置多个属性
jQuery 对象.attr({name0:value0,name1:value1…});
//绑定函数，将函数返回值作为元素的属性值
jQuery 对象.attr(name,function(index){});

示例：在页面中创建一个 <img> 标签，当页面加载完毕后，随机展示图片

<script type="text/javascript">
   $(function() {
      var imgs = new Array();
      imgs[0]="../img/img_1.jpg";
      imgs[1]="../img/img_2.jpg";
      imgs[2]="../img/img_3.jpg";
      imgs[3]="../img/img_4.jpg";
      $("img").attr("src",function(){
        // 随机产生 0 到 3 之间的数，即随机产生数组的下标
        var i = Math.ceil(Math.random()*3);
        // 函数的返回值作为 src 的属性值
        return imgs[i];});});
</script>
<body><img/></body>

2、删除元素的属性 可使用 removeAttr() 方法将元素的属性删除

jQuery 对象.removeAttr(name);

7.2.4 实践练习

7.3 jQuery 中使用 DOM 操作节点

7.3.1 创建节点元素

通过函数 $(html) 完成元素的创建

调用新元素的上级或者同辈的相关方法，把新元素添加到 DOM 树中

$(html);

7.3.2 插入节点

动态创建新元素后，需要执行插入或追加操作

按照元素的层次关系来分，可以分为内部和外部两种方法

1、元素内部插入子节点

语法格式	功能描述
append(content)	$(A).append(B) 表示将 B 追加到 A 中，如 $("ul").append($li);
appendTo(content)	$(A).appendTo(B) 表示把 A 追加到 B 中，如 $li.appendTo("ul")
prepend(content)	$(A).prepend(B) 表示将 B 前置插入到 A 中，如 $("ul").prepend($li)
prependTo(content)	$(A).prependTo(B) 表示将 A 前置插入到 B 中，如 $li.prependTo("ul")

示例：在页面的文本框中输入流行的歌曲名和歌手后，将其添加到列表的最前面

<script type="text/javascript">
   $(function() {
      $("#song").blur(function() {
        // 输入框中的内容不为空
        if($(this).val()!="") {
          // 创建 li 节点，节点的文本内容是在文本框中输入的
          var $li=$("<li>"+$(this).val()+"</li>");
          // 将 $li 对象前置插入到 <ul> 元素中
          $li.prependTo($("ul"));
          // 清空输入框中的内容
          $(this).val("");
        }
      });
     });
</script>

2、元素外部插入同辈节点

语法格式	功能描述
after(content)	$(A).after(B) 表示将 B 插入到 A 之后，如 $("ul").after($div);
insertAfter(content)	$(A).insertAfter(B) 表示将 A 插入到 B 之后，如 $div.insertAfter("ul")
before(content)	$(A).before(B) 表示将 B 插入至 A 之前，如 $("ul").before($div)
insertBefore(content)	$(A).insertBefore(B) 表示将 A 插入到 B 之前，如 $div.insertBefore("ul")

示例：在页面中点击“流行歌曲”标题，自动添加歌曲列表项

<script type="text/javascript">
   $(function() {
      $("h3").click(function() {
        var $ul=$("<ul></ul>");
        var $li1=$("<li> 想起————韩雪 </li>");
        var $li2=$("<li> 没那么简单————黄小琥 </li>");
        var $li3=$("<li> 指望————郁可唯 </li>");
        // 将创建的 <ul> 元素作为 <h3> 元素的同辈元素，插入到 <h3> 元素之后
        $(this).after($ul);
        $ul.append($li1); // 追加 $ul 对象的子节点
        $ul.append($li2);
        $ul.append($li3); });});
</script>
<body> <h3> 流行歌曲 </h3> </body>

7.3.3 替换节点

在 jQuery 中，如果要替换元素中的节点，可以使用 replaceWith() 和 replaceAll() 这两种方法

jQuery 对象.replaceWith(content);
jQuery 对象.replaceAll(selector);

replaceWith() 方法的功能是将所有选择的元素替换成指定的 HTML 页面元素

replaceAll() 方法的功能是用所选择的元素替换指定的 <selector> 元素

示例：在页面中点击“替换”按钮，将歌曲列表中的最后一首歌曲替换成其他歌曲

<script type="text/javascript">
   $(function() {
      $("input[type='button']").click(function() {
        var $li = $("<li> 也许明天————姚贝娜 </li>");
        $("ul li:last").replaceWith($li);
      });
     });
</script>

<body> <h3> 流行歌曲 </h3> 
       <ul>
    	<li> 想起————韩雪 </li>
    	<li> 没那么简单————黄小琥 </li>
    	<li> 指望————郁可唯 </li>
     </ul>
     <input type="button" value=" 替换 "/>
</body>

7.3.4 复制节点

在页面中，有时候需要复制某个元素节点。可以通过 clone() 方法实现功能

jQuery 对象.clone();

该方法只是复制元素本身，被复制后的新元素不具有任何元素行为。如果需要将该元素的全部行为也进行复制，那么可以通过 clone(true) 实现

示例：在页面中插入一幅图片，当点击此图片时，将其复制并粘贴在右侧

<script type="text/javascript">
   $(function() {
      $("img").click(function() {
        $(this).clone(true).appendTo($("#p1"));
      });
     });
</script>
<body> 
       <p id="p1">
    	<img src="../img/img_2.jpg"/>
     </p>
</body>

7.3.5 删除节点

在操作页面时，删除多余的或指定的页面元素是非常必要的。jQuery 中提供了 remove() 方法来删除元素

jQuery 对象.remove([expr]);

其中参数 expr 为可选项，该参数为筛选元素的 jQuery 表达式，通过该表达式将获取指定的元素，并进行删除

示例：在页面中插入无序列表和按钮，点击按钮时，将无序列表最后一项删除

<script type="text/javascript">
   $(function() {
      $("input[type='button']").click(function() {
        //$("ul li").remove();     // 删除所有的列表项
        $("ul li").remove("ul li:last"); // 删除最后一项
      });
     });
</script>

<body<h3> 流行歌曲：</h3>
    <ul>
    	<li> 一个像夏天一个像秋天————范玮琪 </li>
    	<li> 想起————韩雪 </li>
    	<li> 没那么简单————黄小琥 </li>
    	<li> 指望———郁可唯 </li>
    </ul>
  <input type="button" value=" 删除 "/></body>

7.3.6 实践练习

7.4 遍历元素

7.4.1 jQuery 中元素的遍历

在 jQuery 中，可以直接使用 each() 方法实现元素的遍历

jQuery 对象.each(callback);

参数 callback 是一个function函数，可以给该函数传递一个index参数，此形参是遍历元素的序号。如果需要在函数体中访问当前遍历到的元素，可以使用 this 关键字

示例：点击“添加边框”按钮后，给页面图片添加边框并设置其 title 属性

<script type="text/javascript">
   $(function() {// 页面加载完毕事件
      $("input[type='button']").click(function() {
        $("img").each(function(index, element) {
          //jQuery 对象
          //$(this).css("border","2px solid red");
          //$(this).attr("title"," 第 "+(index+1)+" 幅风景画 ");
          //DOM 对象
          this.style.border="2px solid red";
          this.title=" 第 "+(index+1)+" 幅风景画 ";});});});
</script>

7.4.2 实践练习

总结：

将 jQuery 对象转换成 DOM 对象，使用 jQuery 中的 get() 方法。DOM对象只需要用 $() 将它包装起来，就可以获得对应的 jQuery 对象

元素样式操作：css()、addClass() 、removeClass() 、toggleClass()

元素内容和值操作：html() 、text() 、val()

元素属性操作：attr(name) ；attr(name,value)

在 jQuery 中操作DOM节点：

创建节点：$(html)
插入节点：append(content)、appendTo(content) 、prepend(content) 、prependTo(content)、after(content) 、insertAfter(content) 、before(content) 、insertBefore(content)
替换节点：replaceWith() 、replaceAll()
复制节点：clone()
删除节点：remove()

明金同学

关注关注

46
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
39
评论
JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】

全部章节 >>>>本章目录7.1 DOM 对象和 jQuery 对象7.1.1 DOM 对象7.1.2 jQuery 对象7.1.3 jQuery 对象和 DOM 对象的相互转换7.1.4 实践练习7.2 jQuery 中使用 DOM 操作元素7.2.1 元素样式的操作7.2.2 元素内容和值的操作7.2.3 元素属性的操作7.2.4 实践练习7.3 jQuery 中使用 DOM 操作节点7.3.1 创建节点元素7.3.2 ..
复制链接

扫一扫