1.Jquery介绍
1.1jquery带来的改变
隔行变色效果 传统js需要很多行代码 通过jquery 只需要一行
$(“tr:even”).not(“:first”).css(“background-color”,”#eee”);
前端技术发展中，javascript作为基本技术，出现越来越多这样繁琐的问题，故，出现了各种js的扩展库。不同的扩展库语法区别很大，换一个就相当于学习新语言。（故，前端技术学的很多），后面还要学vue。
1.2jquery介绍
随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的js库-----扩展库(一堆写好的js文件)
如jquery extjs等
Jquery特点：（j宽瑞）
1.流行的JavaScript程序库
2.它是对JavaScript对象和函数的封装
3.它的设计思想是write less，do more
案例：用js写table隔行变色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table id="mytable" border="1">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
<tr>
<td>1</td>
<td>xiaoming</td>
<td>15</td>
</tr>
<tr>
<td>1</td>
<td>xiaoming</td>
<td>15</td>
</tr>
<tr>
<td>1</td>
<td>xiaoming</td>
<td>15</td>
</tr>
<tr>
<td>1</td>
<td>xiaoming</td>
<td>15</td>
</tr>
<tr>
<td>1</td>
<td>xiaoming</td>
<td>15</td>
</tr>
</table>
</body>
<script>
/* //以前的写法，先找到table，拿到所有行，再隔行遍历
var allRow = document.getElementById("mytable").rows;
for(var i = 0;i<allRow.length;i++){
if(i%2==0){
document.getElementById("mytable").rows[i].style.background ="gray";
}
} */
//若用jquery去写，先将库文件导入，再用如下代码：
$("tr:even").not(":first").css("background-color","#eee");
</script>
</html>
1.3jquery下载使用
jQuery官网：jQuery
jQuery库分开发版和发布版：
Jquery-x.x.js 开发版
Jquery-x.x.min.js 发布版 代码经过压缩 容量更小
Download the compressed, production jQuery 3.6.0 （生产版本）
Download the uncompressed, development jQuery 3.6.0 （开发版本）
二者区别：使用起来无区别。但开发版有详细的注释， 和完整地变量名。生产版本做了代码压缩（空格，回车等都没有，代码只有一行，分析代码很麻烦，但文件小了狠多）。
在页面引入jQuery
<script src="jquery-x.x.min.js" ></script>
2.Jquery基本语法
2.1基本语法结构与常用方法
右下角可勾选jquery的语法提示
Jquery基本语法结构 ：
$(选择器).jquery方法()；
（两部分：选择器和方法。原生js有的地方方法，有的地方属性。jquery里全是方法。故学习时先看有哪些选择器，再看有哪些方法）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 class="myp">静夜思--李白</h1>
<p class="myp">床前明月光</p>
<p id="mytest">疑是地上霜</p>
<p class="myp">举头望明月</p>
<p id="mytest">低头鞋一双</p>
</body>
<script>
/* jquery基本语法结构： $(选择器).jquery的方法
选择器（借鉴了css的选择器）
三个基本选择器：
1.元素（标签）选择器 p div
2.class选择器 .class值
3.id选择器 #id值
常用方法
.css() 相当于之前的style属性
（还是有些区别，.css（）的key带横线，如：background-color;但js里不带横线，是驼峰形式。）
（juqery里修改样式用的）
*/
/*
使用元素（标签）选择器
$("h1").css("color","red"); //修改标题颜色
$("h1").css("background-color","lightgreen") //修改标题背景颜色
//让所有段落的颜色改变
//jquery有一个特性：隐式循环(如果对元素的操作做相同，即改变的效果相同，可以直接改，让jquery自动循环）
$("p").css("color","blue"); //所有的段落都改为蓝色 */
/*class选择器
$(".myp").css("color","blue"); 同样有隐式循环效果，相同的class值都被选中改变效果*/
/*id选择器
即使有两个相同id。也只会选到一个元素（基本规则同js）
$("#mytest").css("color","red"); */
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 class="myp">静夜思--李白</h1>
<p class="myp">床前明月光</p>
<p id="mytest">疑是地上霜</p>
<p class="myp">举头望明月</p>
<p id="mytest">低头鞋一双</p>
<h1 id="mytitle">静夜思--李白</h1>
<div id="aimdiv">
<div>
<p>床前明月光</p>
<p>疑是地上霜</p>
</div>
<p>举头望明月</p>
<p>低头鞋一双</p>
</div>
<input id="mytext" type="text" value="123" />
<input type="button" value="123" />
</body>
<script>
/* jquery基本语法结构： $(选择器).jquery的方法
4.交集选择器 选择器选择器 先元素再其他
5.并集选择器 选择器,选择器
6.后代选择器 选择器 选择器 查找元素内部的元素
7.子代选择器 选择器>选择器 查找子元素
8.属性选项器 ["属性"] ["属性"="属性值"]
常用方法
.css() style属性
*/
/* 交集选择器 先加元素，再加其它
$("h1.map").css("color","blue"); */
/* 并集选择器
$("h1,p").css("color","blue"); */
/*还可以根据层次结构选择元素，最简单的方法，加div。比如第二首诗
这里还结合了子代选择器
$("#aimdiv>p").css("color","blue"); 将第二首诗前两句修改 */
/* 属性选项器
$("input[type='button']").css("color","red"); 让按钮颜色变红*/
</script>
</html>
jquery其它常用样式属性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<h1 class="myp">静夜思--李白</h1>
<p class="myp">床前明月光</p>
<p id="mytest">疑是地上霜</p>
<p class="myp">举头望明月</p>
<p id="mytest">低头鞋一双</p>
<h1 id="mytitle">静夜思--李白</h1>
<div id="aimdiv">
<div>
<p>床前明月光</p>
<p>疑是地上霜</p>
</div>
<p>举头望明月</p>
<p>低头鞋一双</p>
</div>
<input id="mytext" type="text" value="123" />
<input type="button" value="123" />
</body>
<script>
/* jquery基本语法结构： $(选择器).jquery的方法
常用方法
.css() 类似style属性 （元素样式）
.html() 类似innerHTML属性 (双标签中的内容)
.val() 类似value属性 (表单元素的value)
使用jquery选择器获取的对象 是jquery对象 可以调用jquery方法
使用document.getElementxxxx 获取的对象 是原生js对象 可以调用原生的属性和方法
故，对象类型不同，方法不能乱用。
原生js对象 转成jquery对象 $(原生对象)，也叫jquery里的工厂函数
（this是原生对象，故在jquery里用this要转， $(this)）
jquery对象转成原生对象 法一：jquery对象.get(idx) 法二：jquery对象[idx]
(jquery对象实际是个数组。用get方法或取下标转成原生对象)
*/
//.html()
//$("#mytitle").html("新标题"); 将第二首诗标题改为新标题（写操作）
//console.log($("#mytitle").html()); 不传值就是读
//.val()
//console.log($("#mytext").val()); 不传值就是读
//$("#mytext").val("new value"); 改变文本框的值
//$("#mytext").value="abc"; 这样不行，$("#mytext").value获得的元素不是原生的js对象，是jquery对象（jquery封装后的数组）。
console.log($("#mytext")); //jquery对象
console.log(document.getElementById("mytext")); //原生对象
//$(document.getElementById("mytext")).val("abc"); js转jquery $()
//$("#mytext").get(0).value="abc"; jquery转js
//$("#mytext")[0].value="abc"; jquery转js,也可直接用索引下标去取。
</script>
</html>
练习一：梅兰竹菊，春夏秋冬
2.2Jquery对象与原生js对象
3.Jquery选择器
3.1常见选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul id="myul">
<li>新闻1</li>
<li>新闻2</li>
<li>新闻3</li>
<li>新闻4</li>
<li>新闻5</li>
<li>新闻6</li>
</ul>
</body>
<script>
/*
选择器(css选择器)
1.元素（标签）选择器 p div
2.class选择器 .class值
3.id选择器 #id值
4.交集选择器 选择器选择器 先元素再其他
5.并集选择器 选择器,选择器
6.后代选择器 选择器 选择器 查找元素内部的元素
7.子代选择器 选择器>选择器 查找子元素
8.属性选项器 ["属性"] ["属性"="属性值"]
筛选元素
:first 第一个
:last 最后一个
:even 偶数
:odd 奇数
:eq(idx) 指定索引
:lt(idx) 小于指定索引
:gt(idx) 大于指定索引
*/
//console.log($("#myul li")); 拿到的是juqery元素集合，包含6个li元素
//console.log($("#myul li:first")); 拿到的还是数组，但只包含第一个li
//其它类似
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<form id="myform">
<input type="text" value="文本框" />
<input type="text" value="文本框"/>
<input type="button" value="按钮"/>
<input type="button" value="按钮"/>
<input type="checkbox" />
<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<select id="mysel" multiple="multiple">
<option value="010" selected="selected">北京</option>
<option value="021">上海</option>
<option value="035" selected="selected">深圳</option>
</select>
</form>
</body>
<script>
/*
选取表单元素（都是选择器，前面有冒号）
:input 表单元素
:text 文本框
:password 密码框
:radio 单选按钮
:checkbox 多选框
:button 普通按钮
:submit 提交按钮
:image 图片
比较特殊的两个：
:checked 选中的选项（被选中的checkbox）
:selected 选中的option（下拉列表中被选中的option）
*/
//css里对表单元素都是标签加属性去选取，jquery将常见的表单元素直接封装好，变成选择器
//console.log($("#myform :checked")); 注意空格是后代选择器，不加空格是交集选择器
//console.log($("#mysel :selected"));
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
<style>
.innerdiv{
display: none;
}
</style>
</head>
<body>
<div id="testdiv">
<div id="div1" class="innerdiv">div1</div>
<div id="div2" class="innerdiv">div2</div>
<div id="div3" class="innerdiv">div3</div>
<div id="div4" class="innerdiv2">div4</div>
<div id="div5" class="innerdiv2">div5</div>
</div>
</body>
<script>
/*
可见性选择器（就是样式里的显示和隐藏）
:hidden 隐藏的元素
:visible 显示的元素
*/
console.log($("#testdiv :hidden")); //选取隐藏的元素
</script>
</html>
3.2辅助筛选元素的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul id="myul">
<li>xxx</li>
<li class="mycls">xxx</li>
<li>xxx</li>
</ul>
</body>
<script>
/* 若想修饰ul，还想修饰li，下面这样写太啰嗦：
$("#myul").xxxx;
$("#myul li").xxxx;
.find("选择器") 内部查找元素（注意参数是选择器）
.eq(idx) 集合中取某个元素（索引从0开始）
.not("选择器") 排除某个特征的元素
.prev() 向前查找同级元素
.next() 向后查找同级元素
*/
//推荐这样写：
var myele = $("#myul");
//myele.xxxx; 先对ul进行想要的操作
//再操作ul内部的li元素
console.log(myele.find("li").not(".mycls").eq(1).prev().prev().next().next());
</script>
</html>
4.练习中会使用到的方法
<body>
<div id="mydiv">div1</div>
<div>div2</div>
<div>div3</div>
</body>
<script>
/*
.css() style属性
.val() value属性
.html() innerHTML属性
.addClass() 追加样式
.removeClass() 去除指定样式
*/
//document.getElementById("mydiv").className += " mycls3"; 原生js中加class属性，还要自己加空格。
//若原生js中去除class属性，还要splist截取掉，再取值赋值，很麻烦
$("#mydiv").addClass("mycls3"); //增加class属性
$("#mydiv").addClass("mycls2");
$("#mydiv").removeClass("mycls1")
</script>
遍历元素集合：
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
<script>
//隐式循环 在统一赋值时适用
$("div").html("aaa"); //以上三个div块都会被改成aaa文本
//隐式循环不适用的情况：
//1.取值 只会返回集合中第一个元素的值
console.log($("div").html();); //一组元素有多个，只会返回第一个元素的值
//2.赋值时 赋的值不同
//隐式循环无法满足需求时，需要遍历元素集合，使用.each(function(){ })
/* 遍历过程允许在匿名函数里加形参index，表示遍历的索引
$("div").each(function(i){
//遍历时执行的代码
//this表示被遍历到的元素
console.log(i);
console.log($(this).html());
$(this).html("div"+(i+4)); //将文本改成div4 div5 div6
}) */
</script>
事件绑定写法：
之前的写法：
<body>
<div>div1</div>
<div>div2</div>
<div οnclick="myTest()">div3</div>
</body>
<script>
//事件绑定 js中在元素上直接加事件
/* function myTest(){
console.log(1);
} */
</script>
jquery中事件绑定的写法：
<body>
<div>div1</div>
<div>div2</div>
<div id="mydiv">div3</div>
</body>
<script>
//先定位元素，先用原生写法：
/* document.getElementById("mydiv").οnclick=function(){
console.log(123);
} */
//用jquery里的方法写：注：将点击事件的on去掉了
$("#mydiv").click(function(){
console.log(456);
})
</script>
jquery中事件绑定也支持隐式循环：
<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
</body>
<script>
//事件绑定方法 隐式循环也生效
//this 指针 ,若不改变任何指向，表示当前窗口对象（windows）。但在不同的扩展库和方法中，this的指向会发生改变。
//在遍历代码中,this表示被遍历到的元素
//绑定事件里，this表示事件发生的元素
//想点击不同的div块，输出对应的文本
$("div").click(function(){
console.log( $(this).html());
})
</script>
</html>
课堂练习2：事件绑定案例
<body>
<div id="spans">
<span id="sea">海边</span>
<span id="garss">草原</span>
<span id="mount">爬山</span>
</div>
<hr />
<div id="spans2">
<span class="mount">五台山</span>
<span class="sea">三亚</span>
<span class="garss">张北草原</span>
<span class="sea">海口</span>
<span class="mount">华山</span>
<span class="sea">日照</span>
<span class="mount">呼伦贝尔</span>
<span class="garss">青青草原</span>
<span class="mount">喜马拉雅山</span>
</div>
</body>
<script>
//希望点击不同的景点可使对应景点高亮显示----------事件绑定案例
$("#spans span").click(function(){
//console.log($(this).html()); 点击输出文本
//console.log($(this).prop("id")) 点击输出id属性值
var myClsName = $(this).prop("id");
$("#spans2 span").css("background-color","white"); //状态还原
$("."+myClsName).css("background-color","#15E");
})
</script>
事件绑定案例优化：
<body>
<div id="spans">
<span id="seaBtnblue">海边</span>
<span id="garssBtngreen">草原</span>
<span id="mountBtnyellow">爬山</span>
</div>
<hr />
<div id="spans2">
<span class="mount">五台山</span>
<span class="sea">三亚</span>
<span class="garss">张北草原</span>
<span class="sea">海口</span>
<span class="mount">华山</span>
<span class="sea">日照</span>
<span class="mount">呼伦贝尔</span>
<span class="garss">青青草原</span>
<span class="mount">喜马拉雅山</span>
</div>
</body>
<script>
//点击不同的景点，对应具体景点被选中，且颜色不同
//事件绑定常用。 事件绑定支持隐式循环，传参方式使用元素属性传参。
$("#spans span").click(function(){
var myClsName = $(this).prop("id").split("Btn")[0];
var myColor = $(this).prop("id").split("Btn")[1];
$("#spans2 span").css("background-color","white"); //状态还原
$("."+myClsName).css("background-color",myColor);
})
</script>
案例3：全选和反选：
<body>
<input id="checkAllBtn" type="checkbox" />全选
<input id="checkRecvBtn" type="checkbox" />反选
<hr />
<div id="cbs">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</body>
<script>
//想要效果：点击全选，下面四个选项全部被选中;再点击全选，四个选项都取消选中。
$("#checkAllBtn").click(function(){
//console.log($(this).prop("checked")); 可读出全选对应按钮的选中状态
$("#cbs :checkbox").prop("checked",$(this).prop("checked"));
})
//点击反选，下面四个选项反选
//给四个选项赋值，赋的值不一样。选中改成未选中，未选中改成选中。将之前的值取出，再取反。
//赋的值不同，隐式循环用不了.
$("#checkRecvBtn").click(function(){
$("#cbs :checkbox").each(function(){
console.log($(this).prop("checked")); //取自己元素的checked值。
$(this).prop("checked",!$(this).prop("checked")); //将相反状态赋值
})
})
</script>
5.jquery里的两个特殊用法：
$(document).ready(function(){}) 等同于$(function(){}) 页面加载结束后执行
(相当于之前在body上加onload事件)
<script>
//若jquery里想将script写在前面，可这样：
$document.ready(function(){
$("#checkAllBtn").click(function(){
$("#cbs :checkbox").prop("checked",$(this).prop("checked"));
})
$("#checkRecvBtn").click(function(){
$("#cbs :checkbox").each(function(){
console.log($(this).prop("checked"));
$(this).prop("checked",!$(this).prop("checked"));
})
})
})
//$(document).ready(function(){})的一个简化写法：$(function(){})
</script>
</head>
<body>
<input id="checkAllBtn" type="checkbox" />全选
<input id="checkRecvBtn" type="checkbox" />反选
<hr />
<div id="cbs">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
</body>
扫一扫
2744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
