2--Jquery对象与JS的DOM对象的相互转换

Jquery对象与JS的DOM对象的相互转换

DOM对象转换成Jquery对象
对于已经是一个DOM对象，只需要使用$ ()把该DOM对象包装起来，就可以获得一个Jquery对象了：$ (DOM对象)
实例1：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>DOM对象转换为Jquery对象</title>
    <!--导入Jquery框架-->
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    username:<input id="username" value="admin"><br>
    <script>
        /*通过原生态JS获取一个DOM对象*/
        var e_input=document.getElementById("username");
        /*将DOM对象装换为Jquery对象*/
        var $_input = $(e_input);
        /*转换成功后就可以使用Jquery对象中的属性和方法了*/
        alert($_input.val())
    </script>
</body>
</html>

Jquery对象转换为DOM对象
将Jquery对象转换为DOM对象有两种方法：Jquery对象[index]和Jquery对象.get(index)。
实例2：Jquery对象本质是一个数组对象，可以通过[index]的方法，来得到相应的DOM对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用数组的形式将Jquery对象转换为DOM对象</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    username:<input id="username" value="admin"><br>
    <script>
        /*根据Id获取一个Jquery对象*/
        var $_input=$("#username");
        /*使用数组的形式将Jquery对象转换为DOM对象*/
        var e_input=$_input[0];
        /*调用DOM中的属性和方法*/
        var val=e_input.value;
        alert(val);
    </script>
</body>
</html>

实例3：使用get(index)方式将JQuery对象转换成DOM对象

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用get(index)方式将JQuery对象转换成DOM对象</title>
    <script src="jquery-1.11.3.js"></script>
</head>
<body>
    username:<input id="username" value="admin123"><br>
    <script>
        /*根据Id获取一个Jquery对象*/
        var $_input=$("#username");
        /*使用get(index)方式将JQuery对象转换成DOM对象*/
        var e_input=$_input.get(0);
        /*调用DOM中的属性和方法*/
        var val=e_input.value;
        alert(val);
    </script>
</body>
</html>

原创不易，请多多指教。

2--Jquery对象与JS的DOM对象的相互转换

Jquery对象与JS的DOM对象的相互转换

猜你喜欢