在接下来的时间里，我们将一起学习 jQuery ，让我们一起来研究吧！
目录：
一.3W1H（了解）
1.what 是什么？
2.why 为什么要学习？
3.where 哪些情况下可以使用？
4.how 怎么使用？
(案例1：点击按钮获取输入框的值（JS对比Query）)
二.jQuery选择器（重点）
1.基本选择器
（案例2：分别使用基本选择器，改变元素的背景颜色和字体颜色（div，p，span））
2.层次选择器
（案例3：使用层次选择器，选择某个元素下面的所有元素和子元素）
3.过滤选择器
（案例4：使用过滤选择器，选择 li 中的元素）
（案例5：表格隔行换色）
4.表单选择器
（案例6：获取表单中的单选，多选，下拉框）
一.3W1H（了解）
1.what 是什么？
javaScript库：封装了很多js代码
javaScript库: jQuery(90%),Ext JS
官方地址：http://jquery.com/
2.why 为什么要学习？
查看官方jQueryLOGO:write less,do more (写的更少，做的更多)
为了简化JavaScript 开发：选择器，CSS，HTML 事件处理，JS动画，浏览器兼容，丰富插件
3.where 哪些情况下可以使用？
中大型网站开发
是一些前端框架的基础，比如：EasyUI,Bootstrap
4.how 怎么使用？
使用jQuery的步骤：
1.下载 jQuery库
2.引入：将js文件复制到项目中
3.使用
(案例1：点击按钮获取输入框的值（JS对比Query）)
二.jQuery选择器（重点）
1.基本选择器
（常用选择器：1. ID选择器：#ID
2. 类选择器：.class
3. 元素选择器：element
4. 通配符：* ）
小知识点：
1， jquery 不是一门语言
2， jquery 是js的框架（是js的升级+简化）
3， 输出 jquery ($)
案例2：分别使用基本选择器，改变元素的背景颜色和字体颜色（div，p，span）
（ 首先得引入jQuery ）具体代码为：
<script src="js/jquery-3.5.1.js"></script>
(基本使用：如果想要修改元素的背景颜色和字体颜色，那么可以参考以下代码：)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container{
width:100px;
height:100px;
background:red;
}
</style>
<!-- 引入jQuery -->
<!-- <script src="js/jquery-3.5.1.js"></script> -->
<script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
<button type="button" onclick="fn02()">点我改变颜色</button>
<script type="text/javascript">
// 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>
</html>
运行结果如下图：（点击按钮修改背景颜色）
2.层次选择器
1.查询所有元素，查询子元素
案例3：使用层次选择器，选择某个元素下面的所有元素和子元素
小知识点：
1. css 是jquery的方法 只有jquery对象才能调用
2. 将 js对象 变成 jquery对象 ： $(xx)
( $(".bb")[0].css.("background","blue") )
（ 如果想要拿到页面中所有的div，div中的所有p标签，div中第一级或者最后一级p标签，页面中所有的标签等，那么请看以下代码：）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导包 -->
<script src="js/jquery-3.5.1.js"></script>
<style type="text/css">
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 type="text/javascript">
// jquery 本身支持 css 选择器 拿出来的是数组或集合
console.log($("#aa"))
console.log($(".bb").eq(0))
// $(".bb")[0] 拿出来的js是正常对象
// 就让第一个.bb 变色
// css 是jquery的方法 只有jquery对象才能调用
// 如何将js对象变成jquery对象： $(xx)
// $(".bb")[0].css.("background","blue")
// 拿到页面中所有的div
console.log($("div"))
// 通配符
console.log($("*"))
// div中所有的p标签
$("div p").css("color","white")
// div中的第一级 p 标签（子标签）
$("div>p").css("color","white")
</script>
<!-- 表示div中的第一级a标签 -->
<!-- div>a -->
<div>
<a href=""></a>
<p>
<a href=""></a>
</p>
</div>
</body>
</html>
运行结果如下图：
3.过滤选择器
1.参考jQuery文档
2.获取第一个元素:first
3.最后一个元素:last
4.获取偶数下标的元素:even
5.获取奇数下标的元素:odd
6.获取某一范围元素 gt：大于 ：lt小于
案例4：使用过滤选择器，选择 li 中的元素
(具体代码如下：）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导包 -->
<script src="js/jquery-3.5.1.js"></script>
<style type="text/css">
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 type="text/javascript">
// jquery 本身支持 css 选择器 拿出来的是数组或集合
console.log($("#aa"))
console.log($(".bb").eq(0))
// $(".bb")[0] 拿出来的js是正常对象
// 就让第一个.bb 变色
// css 是jquery的方法 只有jquery对象才能调用
// 如何将js对象变成jquery对象： $(xx)
// $(".bb")[0].css.("background","blue")
// 拿到页面中所有的div
console.log($("div"))
// 通配符
console.log($("*"))
// div中所有的p标签
$("div p").css("color","white")
// div中的第一级 p 标签（子标签）
$("div>p").css("color","white")
</script>
<!-- 表示div中的第一级a标签 -->
<!-- div>a -->
<div>
<a href=""></a>
<p>
<a href=""></a>
</p>
</div>
</body>
</html>
运行结果如下：
案例5：表格隔行换色
（如果想要表格出现隔行换色的效果，那么可以参考一下代码：）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.aa{
background: blue;
color: white;
}
.bb{
background: green;
color: yellow;
}
</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 class="aa"> -->
<tr>
<td>草莓</td>
<td>99.9</td>
<td>10001</td>
<td>非常nice</td>
</tr>
<tr>
<td>草莓</td>
<td>99.9</td>
<td>10001</td>
<td>非常nice</td>
</tr>
<tr>
<td>草莓</td>
<td>99.9</td>
<td>10001</td>
<td>非常nice</td>
</tr>
<tr>
<td>草莓</td>
<td>99.9</td>
<td>10001</td>
<td>非常nice</td>
</tr>
<tr>
<td>草莓</td>
<td>99.9</td>
<td>10001</td>
<td>非常nice</td>
</tr>
<tr>
<td>草莓</td>
<td>99.9</td>
<td>10001</td>
<td>非常nice</td>
</tr>
</table>
<script type="text/javascript">
// $("tr:first").addClass("aa")
// 第一个
// $("tr").first.addClass("aa")
// 最后一个
// $("tr").first.addClass("aa")
// 奇数
$("tr:gt(0):odd").addClass("aa")
// 偶数
$("tr:gt(0):even").addClass("bb")
// 获取某一范围的元素
// 大于
// $("tr:gt(3)").addClass("bb")
// 小于
// $("tr:lt(6)").addClass("bb")
// $("tr:gt(1):lt(3)").addClass("bb")
</script>
</body>
</html>
运行结果如下：
4.表单选择器
案例6：获取表单中的单选，多选，下拉框
想要更多的案例可以私信关注我，咱就是说全程免费 ，日常更新哦~~
1364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
