Jquery从头学起第四讲 jquery入门教程

下面是基于Jquery从头学起第四讲的完整攻略：

简介

这一讲主要介绍了如何利用Jquery操作DOM。DOM（Document Object Model）即文档对象模型，是一种用于表示和操作HTML、XML等文档对象的标准模型。利用Jquery可以方便地选中DOM元素，并对其进行添加、删除、修改等操作。

选中DOM元素

在Jquery中，可以使用选择器选中DOM元素，类似于CSS选择器的语法。例如，选中id为"test"的元素可以使用$("#test")；选中class为"test"的元素可以使用$(".test")。需要注意的是，Jquery返回的对象是一个Jquery对象，而非原生的DOM对象，可以使用Jquery提供的方法对其进行操作。

操作DOM

添加元素

使用Jquery添加元素可以使用.append()、.prepend()、.after()、.before()等方法。例如，下面的代码会在id为"test"的元素后面插入一个<p>元素：

$("#test").after("<p>inserted paragraph</p>");

同样地，.append()会在元素内部末尾添加元素，.prepend()会在元素内部开头添加元素。需要注意的是，添加的元素必须是标准的HTML字符串。

删除元素

使用Jquery删除元素可以使用.remove()方法。例如，下面的代码会删除id为"test"的元素及其所有子元素：

$("#test").remove();

修改元素

使用Jquery修改元素可以使用.html()、.text()、.attr()等方法。例如，下面的代码会将id为"test"的元素的文本内容修改为"new text"：

$("#test").text("new text");

同样地，.html()可以修改元素内部的HTML字符串，.attr()可以修改元素的属性。

示例说明

示例一：添加元素

下面的例子中，我们使用Jquery检测到浏览器窗口大小发生变化的事件，并在其后添加一个<p>元素，显示当前窗口大小。

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function(){
      $(window).resize(function(){
        var width = $(this).width();
        var height = $(this).height();
        $('h1').after('<p>Window size: ' + width + ' x ' + height + '</p>');
      });
    });
  </script>
</head>
<body>
  <h1>Example</h1>
</body>
</html>

示例二：修改元素

下面的例子中，我们使用Jquery实现点击按钮，将图片替换为另一张图片。需要注意的是，我们在代码中给图片添加了id属性，以便于使用Jquery选中该元素。

<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script>
    $(document).ready(function(){
      $('button').click(function(){
        $('#myImage').attr('src', 'https://via.placeholder.com/150');
      });
    });
  </script>
</head>
<body>
  <img id="myImage" src="https://via.placeholder.com/250"/>
  <br/>
  <button>Change Image</button>
</body>
</html>

以上就是Jquery从头学起第四讲的完整攻略，希望对您有帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Jquery从头学起第四讲 jquery入门教程 - Python技术站