前言

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

二. jQuery与DOM的区别与联系

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

DOM对象可以通过对jQuery进行遍历得到，总体来说jQuery对象更像是DOM对象的数组。
jQuery对象和DOM对象都包含有一些独有的功能函数，不能交互使用。
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对象
在这里插入图片描述

jQuery与DOM区别以及$的作用

文章目录

前言