jQuery与Dom对象相互转换

最新推荐文章于 2023-06-15 00:39:03 发布

lanqilin5186

最新推荐文章于 2023-06-15 00:39:03 发布

阅读量80

点赞数

分类专栏： JQuery 文章标签： jQuery JavaScript HTML C C++ ViewUI

本文链接：https://blog.csdn.net/lanqilin5186/article/details/83937915

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <script type="text/javascript" src="jquery-1.6.1.js">
        </script>
        <script type="text/javascript">
            
            $(document).ready(function(){
                $("#bt1").click(function(){
					/*.DOM对象转成jQuery对象: 
					对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 
                    */
					
                    var domObj = document.getElementById("tx1");
                    var text = domObj.value;
                    alert(text);
                    var JQueryObj = $(domObj);
                    alert(JQueryObj.attr("value"));
                    
                    
                });
                $("#bt2").click(function(){
					/*
					jQuery对象转成DOM对象: 
					两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); 
					(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。 
					(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象 

					*/
                    alert(this);// c此时 this 代表的是 #bt2 这个Dom对象
                    alert(this.value);
					
                    alert($(this));//$(this)  代表的是 #bt2 这个JQuery对象
                    
                    var JQueryObj = $("#tx1"); //JQuery对象
                    //	alert(JQueryObj.value); // 报错
                    alert(JQueryObj.attr("value"));//JQuery对象 得到属性值的方法
                    
//                    var domObj = $(JQueryObj)[0];
                    var domObj = $(JQueryObj).get(0);
                    //	var domObj =JQueryObj[0];  //JQuery对象--->Dom对象
                    alert("domObj"+domObj.value);
                });
                
                
            });
        </script>
    </head>
    <body>
        <p align="center">
            用户注册
        </p>
        <input type="text" id="tx1">
        <br>
        <input type="button" value="Dom-->JQuery" id="bt1">
        <br>
        <input type="button" value="JQuery-->Dom" id="bt2">
    </body>
</html>