jQuery对象&DOM对象的获取方式&互相转换

最新推荐文章于 2024-07-05 14:21:58 发布

花繁柳密处

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量418

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/m0_52613676/article/details/110005955

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

DOM对象

使用JavaScript中的DOM API操作获得的元素对象叫DOM对象。文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。
使用举例：

<body>
    <p id="p1">P1</p>
    <p id="p2">P2</p>
    <button onclick="fun1()">Btn1</button>
    <button onclick="fun2()">Btn2</button>
</div>
<script>
   function fun1(){
       //获取指定id的DOM对象
       var p1=document.getElementById("p1");
       //将DOM对象的HTML修改为Fun1
       p1.innerHTML="Fun1";
   }
   function fun2(){
       //获取所有p标签元素
       var ps=document.getElementsByTagName("p");
       // 遍历
       $.each(ps, function(index,item){
           item.innerHTML="Fun2,"+index+","+ps.length;
       })
   }
</script>
</body>

示例中，p1是一个DOM对象，ps是一个DOM数组，innerHTML、length是DOM的属性。
获取DOM对象的方式总结：

document.getElementById();//通过id获取
document.getElementsByClassName();//通过Class名获取
document.getElementsByName();//通过name属性获取
document.getElementsByTagName();//通过标签名称获取

（如果定义了多个同名的id元素，则只有最初出现的同名id有效；jQuery同理）

jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的。无论选择器匹配了0个或者多个元素，jQuery对象都不再是null，意味着只能用jQuery对象的length属性（$("#h2").length）判断选择器是否选中了元素（因为jQuery对象是一个集合，包含了0个~多个DOM对象）。
DOM方法在jQuery中的替代方法（四种方法获取到的都是一个jQuery对象）：

document.getElementById()——$("#id")
document.getElementsByClassName()——$(".class")
document.getElementsByName()——$("[name='zhangsan']")，限定在input标签范围内：$("input[name='lisi']")
document.getElementsByTagName()——$("p")

DOM对象转为jQuery对象

<h2 id="h2">h2_Test</h2>
<script type="text/javascript">
    $(function () {
        var hd = document.getElementById("h2");// 获取DOM对象
        jQuery(hd).html("DOM->jquery");// jQuery(DOM对象)方式
        $(hd).html("Dom->jQuery");// 简写的$(DOM对象)方式
    })
</script>

jQuery对象转为DOM对象

<h2 id="h2">h2_Test</h2>
<script type="text/javascript">
    $(function () {
        var hj = $("#h2");// 获取jQuery对象
        hj[0].innerHTML="jQuery->Dom";//使用[num]从jQuery集合中获取DOM对象
        hj.get(0).innerHTML="jquery->DOM";//使用get(num)从jQuery集合中获取DOM对象
    })
</script>

（使用以上两种方式从jQuery集合中获取DOM对象后，便只能调用DOM方法、属性与事件，不要误以为以上两种方式的结果依然为jQuery对象；
若想继续对DOM对象结果使用jQuery的方法、属性与事件，可以使用$(DOM对象)的方式）

DOM对象与jQuery对象的区别

DOM对象是jQuery对象的组成部分，jQuery对象是对DOM对象的包装升级，每一个jQuery对象都是一个集合，每个集合中可以包含0到N个DOM元素。
(1) DOM对象只能调用DOM方法、属性与事件；
(2) jQuery对象只能调用jQuery方法、属性与事件；
(3) jQuery对象与DOM对象之间可以相互转换；
(4) $只是jQuery的别名形式；
(5) 每个jQuery对象都是DOM对象的集合。