Jquery对象、Jquery选择器、Jquery Dom操作及事件

本文链接：https://blog.youkuaiyun.com/m0_59897687/article/details/123138894

本文详细介绍了jQuery的核心概念，包括Jquery对象、DOM对象与jQuery包装集对象的转换、jQuery选择器以及DOM操作。讨论了jQuery的下载安装、版本选择、优点，特别是其丰富的选择器和便捷的DOM操作。此外，文章还讲解了jQuery事件处理，如ready()加载事件和bind()绑定事件，展示了如何使用jQuery简化JavaScript开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery 是一套兼容多浏览器的 javascript 脚本库。核心理念是写得更少，做得更多，使用 jQuery 将极大的提高编写 javascript代码的效率，帮助开发者节省了大量的工作，让写出来的代码更加优雅，更加健壮，“如虎添翼”。同时网络上丰富的 jQuery 插件也让我们的工作变成了“有了 jQuery，一切 so easy。”

jQuery 在 2006 年1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，jQuery已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

一、Jquery的下载与安装

1.下载及其版本

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

2.安装

在页面中引入：

<head>
<script src="jquery.js"></script>
</head>

如果不想下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

谷歌和微软的服务器都存有 jQuery 。
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
或：
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>

3.优点

(1).提供了强大的功能函数

(2).解决了浏览器兼容性问题

(3).实现丰富的UI和插件

(4).纠正错误的脚本知识

二、Jquery核心

$符号在jQuery中代表对jQuery对象的引用，“jQuery”是核心对象。

通过该对象可以获取jQuery对象，调用jQuery提供的方法等。只有jQuery对象才能调用jQuery提供的方法。

三、DOM对象与Jquery包装集对象

原始的DOM对象只有DOM接口提供的方法和属性，通过JS代码获取的对象都是DOM对象。而通过jquery获取的对象是jquery包装集对象，简称jquery对象。只有jquery对象才能使用jquery提供的方法。

1.DOM对象

JavaScript中获取DOM对象，DOM对象只有有限的属性和方法：

    let div = document.getElementById("testDiv")
    let div = document.getElementsByTagName("div")[0]

2.Jquery包装集对象

可以说是DOM对象的扩充。在jQuery的世界中将所有的对象，无论是一个还是一组，都封装成一个jQuery包装集，比如获取一个包含元素的jQuery包装集：

    let jqueryObject = $("#testDiv")
    let j = jqueryObject[0]

3.DOM对象转jQuery对象

DOM对象转为jQuery对象，只需要利用$()方法进行包装即可

    let div = document.getElementById("testDiv")
    let jqueryDiv = $(div)

4.jQuery对象转DOM对象

jQuery对象转DOM对象，只需要取元素中的数组即可

//第一种方式 获取jQuery对象
let jqueryDiv = jQuery("#testDiv")
//第二种方式 获取jQuery对象
jqueryDiv = $("testDiv")

//将已经获取的jQuery对象转为DOM对象
let dom = jqueryDiv[0]

通过遍历jQuery对象数组得到的对象是DOM对象，可以通过$()转为jQuery对象

四、jQuery选择器

和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在iQuery中提供了简便的方式供我们查找定位元素，称为jQuery选择器，通俗的讲，Selector 选择器就是“一个表示特殊语意的字符串”。只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以jQuery 包装集的形式返回。

jQuery 选择器按照功能主要分为“选择”和“过滤”。并且是配合使用的，具体分类如下。