DOM 对象与jQuery对象之间的转换-CFANZ编程社区

DOM 对象与jQuery对象之间的转换

DOM对象：也就是JS对象，是使用JavaScript语法创建的对象。
jQuery对象：使用jQuery表示的对象叫做jQuery对象，jQuery对象表示的都i是数组。

1.DOM对象转换为jQuery对象

使用$() 可以把DOM对象转换成jQuery对象。

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM和jQuery对象之间的转换</title>
    <script src="../jQuery/jQuery3.5.1.js"></script>
    <script src="./test02.js"></script>
</head>
<body>
    <input type="button" id="btn" value="点击" onclick="btnClick()">
</body>
</html>

js文件:

function btnClick(){
    // 使用JS方法获取DOM对象
    var domBtn = document.getElementById("btn");
    alert("使用DOM对象：" + domBtn.value);
    // 使用$() 把DOM对象转换成jQuery对象
    var $btn = $(domBtn);
    alert("使用jQuery对象：" + $btn.val());
}

2.jQuery对象转换为DOM对象

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

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM和jQuery对象之间的转换</title>
    <script src="../jQuery/jQuery3.5.1.js"></script>
    <script src="./test02.js"></script>
</head>
<body>
    <input type="button" id="btn" value="计算整数平方" onclick="btnClick()"> 
    <input type="text" id="txt" placeholder="整数" />
</body>
</html>

js文件：

function btnClick(){
    // 使用jquery语法获取dom对象
    var obj = $("#txt");

    // 转换成DOM对象并且获取文本框中的数据
    var num = obj.get(0).value;
    obj.get(0).value = num*num
}

0 条评论