dom对象和jQuery对象简介

使用原生js代码创建出来的对象叫做dom对象，也可以看做js对象，如：
var domObj=document.getElementById(“totalSpan”);

而使用jQuery库的函数创建出来的对象就叫做jQuery，为了区分dom对象，通常在对象名前面加上一个“$”符号以示区分（但这并不是强制要求的），使用$(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象，转换为jQuery 对象才可以使用 jQuery 中的提供的方法，操作 DOM 对象。如：
var domObj=document.getElementById(“contentText”);
var $jqBObj=$(domObj);

dom对象转jQuery对象

如果要使用jQuery库中的函数，必须使dom对象转化为jQuery对象，dom对象是无法调用dom对象中的函数的，转化语法：var jq对象=$(dom对象)，如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="static/js/jquery.js"></script>
    <script>
        var domObj=document.getElementById("btn");
        var $jqBObj=$(domObj);
        function f1(){
          //调用jQuery库中的函数，获取jq对象的属性值
            alert($jqBObj.val());
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="按钮" onclick="f1()"/>
</body>
</html>

jQuery对象转dom对象

jQuery 对象本身为数组对象，该数组中的第 0 个元素即为该 jQuery 对象对应的 DOM对象。所以有两种方式可以获取到 DOM 对象：get(0) 方式与下标[0]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html"; charset="utf-8">
    <title>Title</title>
    <script type="text/javascript" src="static/js/jquery.js"></script>
    <script>
        function fun(){
            var obj=$("#text1");
            var domObj=obj[0];//或者 $obj.get(0)
            let num=domObj.value;
            domObj.value=num*num;
            alert("计算机结果："+domObj.value);
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="计算平方" onclick="fun()"/>
<br><br>
<input type="text" id="text1" value="请输入整数"/>
</body>
</html>