本文介绍了jQuery，一个流行的JavaScript库，强调其简洁高效的特点，包括其兼容性、轻量级和丰富的选择器。讲解了使用jQuery的前提，以及如何下载和在HTML中引入库文件，重点详细解析了基本选择器和层次选择器的用法。
jQuery简介
jQuery，也就是JavaScript和查询（Query），即辅助JavaScript开发的一个库。jQuery是全球最流行的JavaScript库，没有之一。在世界访问量前10000的网站中，有超过55%在使用jQuery
jQuery是简化JavaScript代码的插件，它的优点有：
- 代码简洁
- 完美兼容
- 轻量级
- 强大的选择器
- 完善的AJAX
- 丰富的插件
“简洁与高效”是jQuery最大的特点。有一句话说得好：每多学一点知识，就少写一行代码。实际上jQuery的理念亦是如此：“write less, do more.”
使用jQuery的条件
在学习jQuery之前，你必须要有HTML、CSS和JavaScript的基础才行，否则你会看不懂jQuery的代码，更别说使用了
jQuery的用法
下载
在使用jQuery的之前，你必须先下载jQuery，我们可以到jQuery官网下载，jQuery共有两个版本选择：
| 类型 | 说明 |
|---|---|
| jquery.js（开发版） | 没有压缩，用于学习源码 |
| jquery.min.js（压缩版） | 高度压缩，用于实际开发 |
使用
说白了就是引入一个“外部JavaScript文件”使用方法很简单只需在HTML文件的html标签中添加以下代码即可
<script src="你下载的文件的路径"></script>
<script>
//在这里写你的jQuery代码
</script>
<script src="你下载的文件的地址"></script>
<script>
//在这里书写你的jQuery语言
</script>正式内容
选择器
jQuery具有两大类选择器——基础选择器和伪类选择器：
而基础选择器包含基本选择器、层次选择器和属性选择器；伪类选择器包含“位置”伪类选择器、“子元素”伪类选择器、“可见性”伪类选择器等……
基本选择器包含id选择器、类（class）选择器和元素选择器；
层次选择器包含后代选择器、子代选择器、兄弟选择器和相邻选择器；
属性选择器包含许多选择器，接下来我会逐一介绍它们的用法
选择器的用法
基本选择器
元素选择器
$("元素名")示例：
$("p").css("color","red")//设置网页上所有的p元素的颜色为红色id选择器
$("id名")示例：
$("#id").css("color","red")//设置网页上id名为id的元素颜色为红色类（class）选择器
$("类名")示例：
$(".class").css("color","red")//设置网页上所有类名为class的元素颜色为红色层次选择器
后代选择器
$("父元素 子元素")示例：
html元素排列：
<body>
<div>
<p>hello<p>
<p>hello<p>
<p>hello<p>
</div>
</body>$("div p").css("color","red")//设置网页上所有div元素里的p元素的颜色为红色子代选择器
$("父元素>子元素")示例：
html元素排列：
<body>
<div id="div">
<p>hello<p>
<p>hello<p>
<p>hello<p>
</div>
<div>
<p>hello</p>
<p>hello</p>
<p>hello</p>
</div>
</body>$("#div>p").css("color","red")//设置网页上id名为div元素里的p元素的颜色为红色兄弟选择器
$("父元素~子元素")示例：
html元素排列：
<body>
<div id="div">
<p>hello<p>
<p>hello<p>
<p>hello<p>
</div>
<h1>hello</h1>
</body>$("div~h1").css("color","red")//设置网页上id名为div的元素后面的所有h1元素的颜色为红色相邻选择器
$("父元素+子元素")示例：
html元素排列：
<body>
<div id="div">
<p>hello<p>
<p>hello<p>
<p>hello<p>
</div>
<h1>hello</h1>
<h1>hello</h1>
</body>$("div+h1").css("color","red")//设置网页上id名为div的元素后面的第一个h1元素的颜色为红色此文章的原文在jQuery插件预习笔记 · 语雀，更多的笔记请先转到jQuery插件预习笔记 · 语雀阅读，谢谢
作者创作不易，如果你觉得有用的话，请点一个赞
扫一扫
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
