jQuery与DOM区别以及$的作用
Posted 汤米先生
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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对象
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区别以及$的作用的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段