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

最新推荐文章于 2021-02-20 14:57:52 发布

萌宅鹿同学

最新推荐文章于 2021-02-20 14:57:52 发布

阅读量258

点赞数

分类专栏： # jQuery笔记文章标签： jQuery对象和JS对象的转换 jQueryu JS

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100054120

版权

jQuery笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery对象与js对象转换

概念
为什么要转换
转化方法

jQuery笔记目录

概念

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 对象。
在这里插入图片描述

萌宅鹿同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
【jQuery笔记Part1】06-jQuery对象与js对象转换

06-jQuery对象与js对象转换概念为什么要转换转化方法JS对象 -> jQuery对象jQuery对象 -> JS对象原理图概念jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。js 对象就是 DOM 对象。为什么要转换jQuery 库提供的方法，只能 jQuery 对象来调用，而 JS 对象的一些方法，只能是 JS 对象调用。两者不可以互相调用对...
复制链接

扫一扫