jQuery与DOM区别以及$的作用

ゝ一纸荒年。 2022-09-06 00:17 137阅读 0赞

### 文章目录 ###

*  前言
 *  一. $ 的作用
 *   *  1. $(函数)
     *  2. $(HTML字符串)
     *  3. $(选择器字符串)
     *  4. $(DOM对象)
 *  二. jQuery与DOM的区别与联系

--------------------

# 前言 #

JQuery 是一个javaScript库，是一个轻量级的"写的少，做的多"的JavaScript库，其极大的简化了javaScript编程。

# 一. $ 的作用 #

$是jQuery的核心函数，具有许多的功能，下面就一 一举例说明

## 1. $(函数) ##

$(function(){
        
    })

这个相当于DOM的`window.onload=function（）{}`，页面加载完成后执行这个函数。

## 2. $(HTML字符串) ##

例如：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="jquery-3.5.1.js"></script>  //导入jquery文件
        <script type="text/javascript">
          $(function (){
        
            $(
                "<div>" +
                    "<span>你好</span>"+
                    "<span>我是小明</span>"+
                "</div>"
                ).appendTo("body")
            })
        </script>
    </head>
    <body>
    </body>
    </html>

可以看出运用`$`可以快速便捷的创建添加标签，所以`$(HTML字符串)`可以快捷高效的执行HTML语句

## 3. $(选择器字符串) ##

$("#id 属性名")		//id选择器，根据id查询标签对象
    $("标签名")			//根据标签名查询标签对象
    $(".class 属性名" )	//根据class属性名查询标签对象

这里同样可以输入多个选择器字符串  
例如

$("div,span,p.myclass,p#myid")

分别筛选出 div标签，span标签，p标签且class=’myclass‘，p标签且id=’myid‘。

## 4. $(DOM对象) ##

将DOM对象转换为jQuery对象，从而使用jQuery中的方法  
转换过程示例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="jquery-3.5.1.js"></script>
        <script type="text/javascript">
                $(function (){
        
                var btn = document.getElementById('btn')
                var bttn = $("#id btn")			//此处用了选择器字符，同时将查询到的对象转换为jQuery对象
                alert(btn)
                alert(bttn)
            })
        </script>
    </head>
    <body>
        <button id="btn" >hello</button>
    </body>
    </html>

DOM对象  
![在这里插入图片描述][07a066f783354e6884bb5e53bbfc30f1.png]  
jQuery对象  
![在这里插入图片描述][70a11dd5e16b45a79cd451e8f45bee8c.png]

# 二. jQuery与DOM的区别与联系 #

jQuery对象与DOM对象的功能有些相似，那么二者到底有着怎样的关系呢？

1.  DOM对象可以通过对jQuery进行遍历得到，总体来说jQuery对象更像是DOM对象的数组。
2.  jQuery对象和DOM对象都包含有一些独有的功能函数，不能交互使用。
3.  DOM对象和jQuery对象可以相互转换  
    下面举一个栗子来解释 回答1：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="jquery-3.5.1.js"></script>
        <script type="text/javascript">
                $(function (){
        
                var btn = $("button")     //这个是jQuery对象
                for (var i=0;i<btn.length;i++){
        
                    alert(btn[i])        //当遍历jQuery对象把其中的元素按照下标逐个取出，便都变成了DOM对象
                }
            })
        </script>
    </head>
    <body>
        <button id="btn1" >hello</button>
        <button id="btn2" >hello</button>
        <button id="btn3" >hello</button>
    </body>
    </html>

**运行结果**  
遍历得到的三次结果都是DOM对象  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbTE5Nw_size_16_color_FFFFFF_t_70]

[07a066f783354e6884bb5e53bbfc30f1.png]: /images/20220829/f6977e7036e14673b7f76893018fbee3.png
[70a11dd5e16b45a79cd451e8f45bee8c.png]: /images/20220829/c591ccccc6794a4e854d34fe5dca64db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbTE5Nw_size_16_color_FFFFFF_t_70]: /images/20220829/2398abf44dbc439480a97702113bd964.png