概念

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 对象。

【jQuery笔记Part1】06-jQuery对象与js对象转换相关推荐

java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
day43 JavaWen阶段——JQuery 基础（JQuery相关开发文档，JQuery对象和JS对象区别与转换，JQuery选择器，JQuery中DOM操作，案列【QQ表情选择】【左右移动】）
今日内容 1. JQuery 基础: 概念快速入门 JQuery对象和JS对象区别与转换选择器 DOM操作案例今日源码: 链接:https://pan.baidu.com/s/1KiG0c_V ...
JQuery对象和JS对象区别与转换|| 事件绑定入口函数样式控制
JQuery对象和JS对象区别与转换 1. JQuery对象在操作时,更加方便. 2. JQuery对象和js对象方法不通用的. 3. 两者相互转换 * jq -- ...
java与jquery的选择器区别_java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScrip ...
【JQuery框架】JQuery对象和JS对象的区别和转换
目录 jQuery的概念 jQuery快速入门 1.下载jQuery 2.导入JQuery的js文件 3.jQuery的使用 jQuery对象和JS对象区别与转换 jQuery转为js js转为jQu ...
JSON转JS对象，JS对象转JSON
JSON转JS对象,JS对象转JSON </h1><div class="clear"></div><div class="po ...
java转js_java对象转js对象
在js中直接使用 EL表达式表达java对象时,输出是对象的类名. 没有达到我们要使用该对象的目的. 比如 var user= ${user}; 在页面上查询代码为 var user=com.test ...
【jQuery笔记Part1】05-jQuery解决冲突
jQuery解决冲突当 jQuery 内部的 $ 被其他函数库覆盖解决方案一:将所有 $ 替换为 jQuery 解决方案二:借助匿名函数包裹执行当其他函数库的 $ 被 jQuery 覆盖解决方 ...
【jQuery笔记Part1】01-jQuery简介集成
jQuery简介&集成 JS的问题? jQuery 概念 jQuery 特点 jQuery 功能 jQuery 集成方式本地集成远程集成 jQuery笔记目录 JS的问题? onload ...

【jQuery笔记Part1】06-jQuery对象与js对象转换

jQuery对象与js对象转换

概念

为什么要转换

转化方法

JS对象 -> jQuery对象

jQuery对象 -> JS对象

原理图

【jQuery笔记Part1】06-jQuery对象与js对象转换相关推荐

最新文章

热门文章