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

jQuery对象与js对象转换

  • 概念
  • 为什么要转换
  • 转化方法
    • JS对象 -> jQuery对象
    • 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 的操作:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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对象就是标签。
【jQuery笔记Part1】06-jQuery对象与js对象转换_第1张图片
以下为 jq 的操作:

<script type="text/javascript">
    $(function () {
     
        var $div = $('box');
        console.log($div);
    });
</script>

运行结果:
【jQuery笔记Part1】06-jQuery对象与js对象转换_第2张图片
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笔记,jQueryu,JS)