今天小编要给大家介绍一个新的知识点——jQuery，那什么是jQuery呢？我们为什么要学习jQuery呢？今天小编就给大家简单介绍一下
目录
一、了解jQuery
二、jQuery库的下载和引用
1.jQuery的下载
2.jQuery的引用
三、jQuery选择器
1.基本选择器
2.层次选择器
3.过滤选择器
一、了解jQuery
1.jQuery是什
jQuery 不是一门言，jQuery 是js的框架（是js的升级+简化），jQuery相当于JavaScript库，封装了很多JS代码。官方地址：http://jquery.com/
2.为什么要学习jQuery
为了简化JavaScript开发，可以减少代码，实现同等的效果
下面小编用一个小小的案例进入我们今天的正题
<style>.container{width: 100px;height: 100px;background: orangered;display: inline-block;margin: 0px 20px;}
</style><div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<button onclick="fun02()">点我更改颜色</button>JavaScript的写法
<script>function fun01(){let ds=document.getElementsByClassName("container")for(let d of ds){d.style.background="aqua"}}
</script>
jQuery写法
<!-- 引入jQuery -->
<script src="js/jquery-3.5.1.js"></script><script>function fun02(){//$就是jQuerylet div=$(".container")//修改样式div.css("background","aqua")}
</script>
对比起来，是不是觉得jQuery简化了一些我们记不住的单词呢？话不多说，接下来我们就来学习jQuery
二、jQuery库的下载和引用
1.jQuery的下载
官方地址：http://jquery.com/
进入jQuery的官网，我们可以看到下面那个圈起来那，jQueryLOGO：write less，do more。然后可以点击框框那的下载。
点击下载进来是以下这个界面，看红色圈起来的jQuery，下面有两条用黄色框框框起来的链接。
点击链接我们将可以看到一大段的代码，点击Ctrl+s保存。
在电脑中建一个文件夹保存起来
保存好之后文件夹内就有我们所需要的jQuery库了
2.jQuery的引用
在项目中新建一个目录，命名为英文都可以，然后把你刚刚保存的jQuery库复制粘贴到你建的目录中就可以了
以下是引入jQuery库的代码，需在JavaScript执行前引入
<script src="js/jquery-3.5.1.js"></script>三、jQuery选择器
1.基本选择器
| ID选择器 | #ID |
| 元素选择器 | element |
| 类选择器 | .class |
| 通配符 | * |
以下为选择器运用展示
<style>div{width: 100px;height: 100px;display: inline-block;background: red;}
</style><p>hhhh</p>
<div id="aa"><p>hhhh</p><i><p>hhhh</p></i>
</div>
<div class="bb"></div>
<div class="bb"></div>
//id选择器
console.log($("#aa")//class选择器
console.log($(".bb"))//元素选择器
console.log($("div"))//通配符
console.log($("*"))id选择器和class选择器拿出来的值
元素选择器拿出来的值
通配符拿出来的值
2.层次选择器
查询所有元素，查询子元素
<style>div{width: 100px;height: 100px;display: inline-block;background: red;}
</style><p>hhhh</p>
<div id="aa"><p>hhhh</p><i><p>hhhh</p></i>
</div>
<div class="bb"></div>
<div class="bb"></div>
//所有p标签的颜色
$("p").css("color","yellow")//div中所有的p标签
$("div p").css("color","black")//div中的第一级p标签（子标签）
$("div>p").css("color","white")
所有p标签变成黄色
div中的p标签变成黑色
div中的第一级p标签（子标签）变成白色
3.过滤选择器
| 获取第一个元素 | first |
| 最后一个元素 | last |
| 获取偶数下标的元素 | even |
| 获取奇数下标的元素 | odd |
| 获取某一范围元素—大于 | gt |
| 获取某一范围元素—小于 | lt |
过滤选择器的使用
//第一种
$("tr").first().addClass("aa");//第二种
$("tr:first()").addClass("aa");下面我们使用过滤选择器完成表格隔行换色这个案例
<style>.aa{background: lemonchiffon;color: black;}.bb{background: aliceblue;color: brown;}
</style><table border><tr><td>商品名字</td><td>商品价格</td><td>商品编号</td><td>商品描述</td></tr><tr><td>🍍🍍🍍</td><td>$99.0</td><td>10001</td><td>无敌好吃的大菠萝</td></tr><tr><td>🍌🍌🍌</td><td>$90.0</td><td>10002</td><td>无敌好吃的大香蕉</td></tr><tr><td>🍉🍉🍉</td><td>$99.0</td><td>10003</td><td>无敌好吃的大西瓜</td><tr><td>🍍🍍🍍</td><td>$99.0</td><td>10001</td><td>无敌好吃的大菠萝</td></tr><tr><td>🍌🍌🍌</td><td>$90.0</td><td>10002</td><td>无敌好吃的大香蕉</td></tr><tr><td>🍉🍉🍉</td><td>$99.0</td><td>10003</td><td>无敌好吃的大西瓜</td><tr>
</table>
<script src="js/jquery-3.5.1.js"></script><script>//奇数$("tr:gt(0):odd").addClass("aa")//偶数$("tr:gt(0):even").addClass("bb")</script>
执行效果
