jQuery对象和js对象之间的转换

听海边涛声

于 2024-09-05 14:32:19 发布

阅读量486

点赞数 2

文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/panghuangang/article/details/141929014

版权

说明

jQuery虽然本质上也是js，但如果要使用jQuery的属性和方法，那么必须保证对象是jQuery对象，而不是js方式获得的DOM对象。
二者的API方法不能混用，若要使用对方的API，需要进行对象的转换。

使用js方式获得的是DOM对象，使用jQuery方式获得的是jQuery对象，两者的转换格式如下：

js的DOM对象转换成jQuery对象：$(js的DOM对象)
jQuery对象转换成js对象：jQuery对象[索引] 或者 jQuery对象.get(索引)

jQuery的本质是一个数组，数组中包含了多个DOM对象（document对象）。

示例

使用dom对象获取标签

在这里插入图片描述

使用jQuery对象获取标签体

在这里插入图片描述

dom对象转换成jQuery对象

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <script>
    $(function () {
      // 使用DOM对象获取id是myDiv的标签
      const myDivEle = document.getElementById('myDiv')

	  // 将dom对象转换成jQuery对象
      const $mm = $(myDivEle)
      $mm.html('这真的是一个div标签元素')
    })
  </script>
</head>

<body>
  <div id="myDiv">这是一个div元素</div>
</body>

</html>

在这里插入图片描述

把jQuery对象转换成dom对象：方式一

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <script>
    $(function () {
      const $myDivEle = $('#myDiv')

      // 把jQuery对象转换成dom对象
      const d1 = $myDivEle[0]
      d1.innerHTML = '是挺简单的'
    })
  </script>
</head>

<body>
  <div id="myDiv">这是一个div元素</div>
</body>

</html>

在这里插入图片描述

把jQuery对象转换成dom对象：方式二

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="js/jquery-3.7.1.js"></script>
  <script>
    $(function () {
      // 使用jQuery对象获取id是myDiv的标签
      const $myDivEle = $('#myDiv')

      const d2 = $myDivEle.get(0)
      d2.innerHTML = '也不算复杂'
    })
  </script>
</head>

<body>
  <div id="myDiv">这是一个div元素</div>
</body>

</html>

在这里插入图片描述