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

最新推荐文章于 2024-01-19 20:42:22 发布

CodePoorFish

最新推荐文章于 2024-01-19 20:42:22 发布

阅读量2.8k

点赞数 1

分类专栏：前端笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_43350001/article/details/123147470

版权

前端笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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

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

1.DOM对象转换为jQuery对象

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

语法：var name = $(DOM对象)

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]

语法：var name = $("")[0]; 或者 $("").get(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
}

CodePoorFish

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
DOM 对象与jQuery对象之间的转换

DOM 对象与jQuery对象之间的转换DOM对象：也就是JS对象，是使用JavaScript语法创建的对象。jQuery对象：使用jQuery表示的对象叫做jQuery对象，jQuery对象表示的都i是数组。1.DOM对象转换为jQuery对象使用$() 可以把DOM对象转换成jQuery对象。语法：var name = $(DOM对象)html文件：<!DOCTYPE html><html lang="en"><head> <m
复制链接

扫一扫