DOM与jQuery对象转换

最新推荐文章于 2021-09-07 17:55:29 发布

原创最新推荐文章于 2021-09-07 17:55:29 发布 · 381 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#DOM和jQuery对象转换

本文介绍了如何在JavaScript中实现DOM对象与jQuery对象之间的相互转换。包括将DOM对象转换为jQuery对象的方法，以及如何将jQuery对象转换回原生DOM对象。这对于在使用jQuery库时与其他JavaScript代码交互非常有用。

DOM和jQuery对象的转换

本地运行html需要另外下载jquery-1.11.0.min.js

一、DOM转为jQuery对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Insert title here</title>
    <script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
    <input type="text" id="username" value="yimt"/>
</body>
<script>
    //1.获取dom对象
    var obj=document.getElementById("username");
    //2.转化
    var $user=$(obj);
    console.log($user.val());
</script>
</html>

二、jQuery转为DOM对象

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Insert title here</title>
    <script src="js/jquery-1.11.0.min.js"></script>
</head>
<body>
    <input type="text" id="username" value="yimt"/>
</body>
<script>
    //1.获取jquery独享
    var $u=$("#username");
    //2.转换
    //2.1 方式1
    var obj1 = $u.get(0);
    console.log(obj1.value);

    //2.2 方式2
    var obj2 = $u[0];
    console.log(obj2.value);
</script>
</html>