jQuery对象和DOM对象之间的转换
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象和DOM对象不能互相调用对方的方法或属性,但它们之间可以进行转换。
两者都无法使用对方的任何方法 非要使用也可以(会报错)
将DOM对象转换为jQuery对象的装换方式:
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> $(function(){
var divDom = document.getElementById("myDiv");//这是一个DOM对象
var divjQ = $(divDom);//转换为jQuery对象只需套上$()
console.log(divjQ.html());//在控制台输出转为jQuery对象的DOM对象
})
</script>
</head>
<body>
<div id="myDiv">
这是一句话。
</div>
</body>
</html>
成为jQuery对象必须要使用jQuery方法.html()而不是.innerHTML,不然会报错
将jQuery对象转换为DOM对象的装换方式有2种:
第一种获取数组中的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> $(function(){
//jQuery对象实际上是一个数组,这里数组中只包含一个元素
var divJquery = $("#myDiv");//直接获取到jQuery对象, var divDom = divJquery[0]//取出后变为DOM对象
console.log(divDom.innerHTML);//用DOM的方法可以在控制台成功输出,证明已经转换
})
</script>
</head>
<body>
<div id="myDiv">
这是一句话。
</div>
</body>
</html>
jQuery对象实际上是一个数组,这里数组中只包含一个元素,所以使用[0]取出jQuery对象中的元素
第二种通过.get()方法 得到相应DOM对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript"> $(function(){
//jQuery对象实际上是一个数组,这里数组中只包含一个元素
var divJquery = $("#myDiv");//和上面一样 获取到jQuery对象
var divDom = divJquery.get(0);//jQuery本身提供的get()方法,得到相应DOM对象
console.log(divDom.innerHTML);//DOM方法在控制台输出
})
</script>
</head>
<body>
<div id="myDiv">
这是一句话。
</div>
</body>
</html>
转换成功正常输出
如有错误请指正:D