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

阅读() @2019-03-17 16:05:08

一、什么是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两种方法

微信二维码