太原做网站

网站维护托管

DOM对象与jQuery对象的区别及互相转换的方法

一、什么是DOM对象?


简单的理解:html标签中有很多节点,凡是用document.getElementById或者是document.getElementsByTagName等原生javascript方法选中的对象都是DOM对象。


二、什么是JQuery对象?


凡是用$符号选中的html标签都是JQuery对象。


本文html代码如下:


<div class="box">

<input type="checkbox" checked="checked" value="A" name="test" class="test" />

<input type="checkbox" value="B" name="test" />

<input type="checkbox" value="C" name="test" />

<input type="checkbox" value="D" name="test" />

</div>

打印结果如下:


console.log($('input')[0].value);//A

三、DOM对象转换成JQuery对象的方法,便于使用JQuery定义的方法。


对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象)。


var oInpt = document.getElementsByTagName('input');

console.log($(oInpt).eq(1).val());//B

四、Jquery对象转换成DOM对象的方法。


1、jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。


/*

//如:

var $v =$("#v") ; //jQuery对象。

var v=$v[0]; //DOM对象

*/

var $inpt = $('input').eq(0);

var oInpt = $inpt[0];

console.log(oInpt.className);//test

2、jQuery本身提供,通过.get(index)方法,得到相应的DOM对象。


/*

//如:

var $v=$("#v"); //jQuery对象

var v=$v.get(0); //DOM对象

console.log(v.checked) //检测这个checkbox是否被选中

*/

var $inpt = $('input').eq(0);

var oInpt = $inpt.get(0);

console.log(oInpt.checked);//true

相关推荐:


《判断radio、checkbox单复选框是否被选中(原生js和jquery两种方法》


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«   2020年10月   »
1234
567891011
12131415161718
19202122232425
262728293031
网站分类
搜索
最新留言
    文章归档
    友情链接