1.本章我们学习jquery，先对jquery做一个简单的概述，jquery与我们之前学习的js类似，jquery不是一门语言，是js的框架也可以说是js的简化版
2.jquery的用途：简单来说jquery是用来简化JavaScript的开发，用于中大型网页开发
先来看看js与jquery的对比
注：1.在使用jquery前要用script标签的src属性来引入jquery
2.jquery-3.5.1.js是需要下载的，官网:http://jquery.com/
3.我们需要将下载的jquery-3.5.1.js，复制在js下面
4.<script src="js/jquery-3.5.1.js"></script>
5.可用$符号调用jquery
从案例可以看出函数fn01()是传统的js函数fn02()是jquery函数两个函数达到的效果都是使div背景颜色改变，显而易见当我们使用jquery是代码变得简单化了
<style>
.container{
width: 100px;
height: 100px;
background: red;
}
</style>
<!--引入jquery-->
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<button onclick="fn02()">点我改变颜色</button>
<script>
//jquery 不是一门语言
//jquery 是js的框架（是js的升级+简化）
function fn01() {
let ds=document.getElementsByClassName("container")
//多个元素
for(let d of ds){
d.style.background="blue"
}
}
console.log($) //输出jquery
function fn02() {
//$就是jquery
let div=$(".container")
//修改样式
div.css("background","blue")
}
</script>
</body>用css修改样式时：往往会遇到一个问题，当你只需要修改某一个div样式时由于jquery的特性会将其他的同时修改，我们将学习以下选择器：#，.，elemet，*
1.#id id选择器 .class class选择器 element元素选择器 *通配符：拿到所有标签
$("#aa")：指定id为aa的div
$(".dd")：指定class为bb的div
往往id是唯一的，则class是可重复的，那么问题又来了，$(".bb")指定的是哪个class为bb的div
方法一：可用类似于强转$($(".bb")[0])，$(".bb")拿到的是一个数组，可通过坐标拿到想要的div，但$(".bb")[0]不是jquery元素不能调用css方法，那么将它放入一个$()中变成jquery元素。
方法二：有个单词可直接实现这一操作eq()
$(".bb").eq(0)
2.很多时候我们需要拿到标签下某个元素，有两种情景：
情景一：$("div p")
拿到div中的所有p标签
情景二：$("div>p")
拿到div下的第一级子标签中的p标签
<script src="js/jquery-3.5.1.js"></script>
<style>
div{
width: 100px;
height: 100px;
display: inline-block;
background: red;
}
</style>
</head>
<body>
<p>后天啊积极</p>
<div id="aa">
<p>今天啊哈哈</p>
<p>明天啊喜喜</p>
</div>
<div class="bb"></div>
<div class="bb"></div>
<script>
//jquery本身支持css选择器
console.log($("#aa"))
console.log($(".bb").eq(0))
//css是jquery的方法 只有jquery对象才才能调用
//$(".bb")[0]拿出来的js中的正常对象
//如何将js对象变成jquery: $(xx)
// $(".bb")[0].css("background","blue")
//$(...)[0].css is not a function
console.log($("div"))
console.log($("*"))
//div中所有的p标签
$("div p").css("color","white")
//div中的第一级p标签（子标签）
$("div>p").css("color","white")
</script>
</div>
</body>完成表单隔行换色
1.首先接触到几个单词
first 获得第一个元素
last 获得最后一个元素
even 获得偶数下标的元素
odd 获得奇数下标的元素
add.class 增加class元素
:gt 大于
:lt 小于
$("tr:gt(0):odd").addclass("aa")
定义.aa的背景
从大于0行开始奇数行增加class为aa
$("tr:lt(0):even").addclass("bb")
定义.bb的背景
从小于0行开始偶数行增加class为bb
<style>
.aa{
background: blue;
color: white;
}
.bb{
background: green;
color: orange;
}
</style>
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<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>$99.0</td>
<td>10001</td>
<td>无敌好吃，无敌棒棒的大西瓜</td>
</tr>
<tr>
<td>无敌大苹果🍍</td>
<td>$99.0</td>
<td>10001</td>
<td>无敌好吃，无敌棒棒的大西瓜</td>
</tr>
<tr>
<td>无敌大苹果🍍</td>
<td>$99.0</td>
<td>10001</td>
<td>无敌好吃，无敌棒棒的大西瓜</td>
</tr>
<tr>
<td>无敌大苹果🍍</td>
<td>$99.0</td>
<td>10001</td>
<td>无敌好吃，无敌棒棒的大西瓜</td>
</tr>
<tr>
<td>无敌大苹果🍍</td>
<td>$99.0</td>
<td>10001</td>
<td>无敌好吃，无敌棒棒的大西瓜</td>
</tr>
</table>
<script>
//第一个
//$("tr").first().addClass("aa");
//最后一个
//$("tr").last().addClass("aa");
//奇数
$("tr:gt(0):odd").addClass("aa")
//偶数
$("tr:gt(0):even").addClass("bb")
// $("tr:gt(1):lt(3)").addClass("bb")
</script>
</body>表单选择器
checkbox 复选框
radio 单选框
select 下拉框
option 往下拉框中添值
<body>
<form>
<p><input type="text"></p>
<p><input type="checkbox"></p>
<p><input type="radio"></p>
<p><input type="text"></p>
</form>
<select>
<option value="">1</option>
<option value="" selected="selected">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<script src="./jquery-3.5.1.js"></script>
<script>
console.log($(":checkbox"))
console.log($(":radio"))
console.log($("select option:selected"))
console.log($("*"))
</script>
</body>
