一.什么是jQuery？
jQuery的官方网址：http://jquery.com./
查看jQueryLOGO：write less,do more
二.我们为什么要学习jQuery？
三.jQuery在哪些情况下使用？
四.jQuery怎么用？
五.jQuery的那些选择器
| ID选择器 | #ID |
|---|---|
| 类选择器 | .class |
| 元素选择器 | element |
| 速配符 | * |
| 获取第一个元素 | first |
|---|---|
| 获取最后一个元素 | last |
| 获取偶数下标的元素 | even |
| 获取奇数下标的元素 | odd |
| 获取某一范围元素 | :gt大于 :lt小于 |
eg：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的那些选择器</title>
<style>
div{
width: 100px;
height: 100px;
display: inline-block;
background: #FFFF00;
}
</style>
<!-- 导入jQuery文件 -->
<script src="index01/jquery-3.5.1.js"></script>
</head>
<body>
<p>昨天超大太阳☀</p>
<!-- jQuery 选择器 -->
<!-- 基本选择器 -->
<div id="aa">
<p>今天天气真好</p>
<p>明天天气不知道好不好</p></div>
<div class="bb"></div>
<div class="bb"></div>
<script>
//jQuery本身支持css选择器
console.log($("#aa")); //id——#
console.log($(".bb")[0]); //class——.
//jQuery拿出来的 类似于数组
//如果我们要调第二个div的颜色
$(".bb").css("background","blue");//直接报错（拿出来的是div）
//报错内容： $(...)[0].css is not a function
//$(".bb")[0]拿出来的是js中的正常对象
//为什么会报错呢，这个非常简单，
//因为：css是jQuery的方法，只有jQuery对象才能调用
//什么是jQuery对象呢？
//只要拿出来的前面包含jQuery，那么它一定是jQuery对象
/*如何将js对象变成jQuery对象*/
/*非常简单！： $(xx)*/
//有一个方法可以直接取出jQuery元素:eq
//1.标签选择器
console.log($("div"));//拿出所有的div元素
//2.通配符 *
console.log($(*));//拿出页面中所有的元素
//3.层次选择器
$("div p").css("color","white");//将上面div中所有的p标签内容颜色变成白色；
//div中的第一级p标签（子标签）
$("div>p").css("color","white");
//4.过滤选择器
/* 获取第一个元素 */
/* frist */
/* 最后一个元素*/
/* last */
/* 获取偶数下标的元素*/
/* even */
/* 获取奇数下标的元素*/
/* odd */
/* 大于 */
/* gt */
/* 小于 */
/* lt */
</script>
</body>
</html>
六.案例（隔行换色 and 表单选择器）
隔行换色就是表单中的上下行的颜色都不一样，比如说：第一行红色，第二行黄色，第三行红色，第四行黄色，第五行红色，第六行黄色，以此类推，表格有多长，它就可以实现多长
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<!-- 导入jQuery文件 -->
<script src="index01/jquery-3.5.1.js"></script>
<style>
.aa{
background: skyblue;
color: white;
}
.bb{
background: saddlebrown;
color: blueviolet;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td>商品名字</td>
<td>商品价格</td>
<td>商品编号</td>
<td>商品描述</td>
</tr>
<tr>
<td>苹果</td>
<td>99.0</td>
<td>1001</td>
<td>超甜</td>
</tr>
<tr>
<td>芒果</td>
<td>89.0</td>
<td>1008</td>
<td>夏日限定</td>
</tr>
<tr>
<td>西瓜</td>
<td>39.0</td>
<td>1005</td>
<td>快乐快乐</td>
</tr>
</table>
<script>
//隔行换色
//第一行
$("tr:first").addClass("aa");//第一种形式
$("tr").first().addClass("aa");//第二种形式
//最后一个
$("tr").last().addClass("aa");
//奇数
$("tr:odd").addClass("aa");
//偶数
$("tr:even").addClass("bb");
//表格是从0开始的
$("tr:lt(3)").addClass("bb");//小于3
$("tr:gt(1):lt(3)").addClass("bb");//在第一行的基础上再分行
</script>
</body>
</html>
好啦~今天的新课堂就分享到这里啦，咱们下期见噢！
