jQuery对象与js对象转换
概念
jQuery对象 是通过 jQuery 包装 DOM 对象后产生的对象。
js对象 就是 DOM 对象。
DOM(DOM—Document Object Model) 是W3C国际组织的一套Web标准。它定义了访问HTML文档对象的一套属性、方法和事件。
为什么要转换
jQuery 库提供的方法,只能 jQuery 对象来调用,而 JS 对象的一些方法,只能是 JS 对象调用。两者不可以互相调用对方的方法。
jQuery 就是 JS 的一个扩展库,工具库,提供很多方便快捷的方法,所以将JS对象转换为jQuery对象后,能更方便地操作这个对象。但是 jQuery 对象也不是万能的,有一些 JS 对象有的功能,jQuery 对象并没有提供,所以需要转换回 JS 对象,才能进行操作。
另外一种情况可能是,使用某些第三方库,接口函数只能接受JS对象或者jQuery对象,那么你就需要在这两者之间进行转换。
以下为 js 的操作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="box">我想要个对象</div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script>
$(function () {
//1. js操作
var div = document.getElementById('box');
console.log(div);
});
</script>
</body>
</html>
运行结果:由此可见,js对象就是标签。
以下为 jq 的操作:
<script type="text/javascript">
$(function () {
var $div = $('box');
console.log($div);
});
</script>
运行结果:
js 对象和 jq 对象不可以互相调用对方的方法:
console.log(div.innerHTML);
//console.log($div.innerHTML); // jq 对象调用 js 方法,会出错
console.log($div.html());
//console.log(div.html()); // js 对象调用 jq 方法,会出错
转化方法
JS对象 -> jQuery对象
转换方法:
// JS对象 -> jQuery对象 转换公式
$(JS对象)
实例:
// js -> jq
var $divChange = $(div); // js 对象转为 jq 对象
console.log($divChange.html()); // 转换后的 jq 对象可以调用 jq 方法
jQuery对象 -> JS对象
转换方法:
// jQuery对象 -> JS对象 转换公式
jQuery对象.get(0)
jQuery对象[0]
实例:
// jq -> js
// var divChange = $div.get(0) // jq 对象 转为 js 对象 方法一
var divChange = $div[0] // jq 对象 转为 js 对象 方法二
console.log(divChange.innerHTML); // 转换后的 js 对象可以调用 js 方法
原理图
jQuery对象 是通过 jQuery 包装 DOM 对象后产生的对象。
js对象 就是 DOM 对象。