在接下来的时间里,我们将一起学习 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:获取表单中的单选,多选,下拉框
想要更多的案例可以私信关注我,咱就是说全程免费 ,日常更新哦~~