需要知道的jQuery对象和DOM对象之间的转换
程序员文章站
2022-07-04 23:37:32
jQuery对象和DOM对象之间的转换 jQuery对象就是通过jQuery包装DOM对象后产生的对象。 jQuery对象和DOM对象不能互相调用对方的方法或属性，但它们之间可以进行转换。 两者都无法使用对方的任何方法 非要使用也可以（会报错） 将DOM对象转换为jQuery对象的装换方式： 例如： ......
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
上一篇： 中高级前端面试秘籍，助你直通大厂(一)
下一篇： 选项卡