jQuery--DOM对象与jQuery对象

洛小依ovo / 2023-08-02 / 原文

一、dom对象与jquery对象

dom对象，使用js的语法创建的对象叫做dom对象，也就是js对象

var myDiv = document.getElementById("myDiv")

jquery对象，使用jquery语法表示的对象叫做jquery对象，注意：jquery对象都是数组

var myBtn = $("#myBtn") myBtn就是一个jquery语法表示的对象，现在数组中就一个值

dom对象与jquery对象可以相互转换
- dom对象转jquery对象，$(dom对象)
- jquery对象可以转dom对象，从jquery对象数组中获取第一个对象，第一个对象就是dom对象，[0]或者get(0)
- 为什么进行转换：目的是要使用对象的方法，或者属性
  - 当你是dom对象时，可以使用dom对象的属性和方法，但如果想要使用jquery提供的函数，必须是jquery对象才可以

二、dom对象与jquery对象相互转换

1、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>dom对象转换为jquery对象</title>
    <script src="jquery-3.7.0.js"></script>
</head>
<body>
    <script>
        function btnClick(){
            var obj = document.getElementById("btn");
            // 使用dom的value属性获取值
            console.log(obj.value)
            // dom转换为jquery
            var $obj = $(obj)
            console.log($obj)
            console.log($obj.val())
        }
    </script>
    <input type="button" id="btn" value="按钮" onclick="btnClick()">
</body>
</html>

2、jquery对象转换为dom对象

jquery对象本身为数组对象，该数组中的第0个对象即为该jquery对象对应的dom对象

使用get(0)与下标[0]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery对象转dom对象</title>
    <script src="jquery-3.7.0.js"></script>
</head>
<body>

    <script>
        function btnClick(){
            // jquery获取页面元素
            // 从jquery对象数组中获取下标为0的dom对象
            var obj = $("#txt")[0]
            // var obj = $("#txt").get(0)
            var num = obj.value
            obj.value = num * num
            console.log(num)
        }
    </script>

    <div>
        <input type="button" value="计算平方" onclick="btnClick()">
        <br>
        <input type="text" name="" id="txt" value="整数">
    </div>
</body>
</html>