目录
上午：
下午：
JS库，别人写好的JS文件，我们拿来直接用，在开发中，会引入很多的.js文件
目前市面上有几个：
JQuery.js------濒临淘汰，经典。10%以下
React.js-------30%市场
Angular.js-----10%以下，最难
Vue.js---------50%以上，简单。最主流。（中国人的骄傲：尤雨溪编写的）
有人说啦，jquery都快淘汰了，学他干嘛。我想说：首先他是快淘汰了，还没淘汰，其次，经典的东西你不得看一看，了解了解。
jQuery库包含的特性：
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- 特效+动画
- DOM遍历+修改
- AJAX
- Utilities
你要使用必须先导入库：
<script src="js/jquery-1.9.1.js"></script>选择器：
| 基本选择器 | id选择器 | 返回值是固定的一个 |
| class选择器 | 返回值是一堆 | |
| 标签选择器 | 返回值是一堆 | |
| *号选择器 | 返回值是所有标签 | |
| 层级选择器 | div p | div里的p--后代 |
| div>p | 直接子元素 | |
| div+p | 相邻子元素 | |
| 过滤选择器 | :first | 获取第一个元素 |
| :last | 获取最后一个元素 | |
| :eq(index) | 给定位置的元素 | |
| :gt(index) | 大于给定位置 | |
| :lt(index) | 小于给定位置 | |
| :not(selector) | 除了selector以外的所有选择器 | |
| 内容选择器 | :empty | 匹配所有不包含子元素的选择器 |
| :parent | 含有子元素的父元素 | |
| 属性选择器 | [name] | 包含name属性的元素 |
| input[type=text] | 所有文本框 | |
| input[type!=text] | 除了文本框之外的input标签 |
事件（函数）：
什么时候触发
1、JQuery文档就绪函数在页面加载完毕之后触发。浏览器解析完HTML标签，window.onload，除了解析完HTML标签之外，等到浏览器创建好DOM对象
2、JQuery文档就绪函数可以执行多次，window.onload只能执行一次
文档就绪函数：
当页面的文档部分加载完毕之后，要执行的函数
$(document).ready(function(){
alert("文档就绪函数");
});
//简写
$(function(){
alert("111");
});
//箭头函数：
$(()=>{
alert("箭头函数");
});窗口加载：
window.onload=function(){
alert("3");
}jQuery把事件都变成了函数
| click() | 单机事件 |
| mouseover() | 鼠标悬停 |
| blur() | 失去焦点 |
| change() | 改变事件 |
| live() | 它可以来绑定选择器匹配的元素的事件，哪怕这个元素是后面动态创建出来的 |
HTML获取：
- text()----设置或返回所选元素的文本内容
- html()----设置或返回所选元素的内容（包括HTML标记）
- val()------设置或返回表单字段的值,可以操作文本框,单选框,复选框,下拉菜单的选中状态等
- attr()------获取属性值，传入参数为属性
$(".a").text();
$(".a").html();
$(".a").val();
$(".a").attr("href");//获取class为a的href元素的属性值赋值的话直接在括号里赋值或者添加回调函数,attr例外，attr可以传第二个参数给元素赋值,attr也可以给多个元素赋值:
$(".a").text("aaa");
$(".a").html("aaa");
$(".a").val("aaa");
$(".a").attr("href","www.baidu.com");
$(".a").attr({"href":"www.baidu.com"
,"type":"text"
});回调函数：
$(".a").text(function(){
alert("aaa");
});
//箭头函数：
$(".a").text(()=>{
alert("aaa");
});attr的回调函数
$("#a").attr("href",function(){
alert("");
});HTML添加:
——append()--- 谁的结尾插入什么内容
——appendTo()-内容添加在谁的结尾
——prepend()-- 谁的开头插入什么内容
——prependTo()-内容添加在谁的结尾
——after()------- 被选元素之后插入什么内容
——insertAfter()-内容在谁的后面添加
——before()----- 被选元素之前插入什么内容
——insertBefore()-内容在谁的之前插入
——replaceWith() --谁替换成什么
——replaceAll()------把后面所选元素替换成前面的xx
举个案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 200px;
border: 1px solid;
}
p {
background-color: yellow;
}
</style>
</head>
<body>
<div id="container">
<h1 id="p123">123</h1>
<h1>333</h1>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
$(() => {
$("<p>111</p>").appendTo($("#container"));
$("<p>222</p>").prependTo($("#container"));
$("<p>333</p>").insertAfter($("#container"));
$("<p>444</p>").insertBefore($("#container"));
$("#container").append($("<p>1000</p>"));
$("#container").prepend($("<p>2000</p>"));
$("#container").after($("<p>3000</p>"));
$("#container").before($("<p>4000</p>"));
//替换
$("#p123").replaceWith($("<p>666</p>"));
//全部替换
$("<span>000</span>").replaceAll($("h1"));
})
</script>
</body>
</html>
删除：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
- remove()可以接收一个参数下面例子例意思为删除class="a"的所有<div>元素
$("#div1").remove();
$("#div1").empty();
$("div").remove(".a");prop()方法+复选框案例
prop()方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
//选中所有复选框选中
alert($("input[type=checkbox]").prop("checked",true));
//给id=sheng的添加属性：selected
alert($("#sheng").prop("selected"));复选框案例：
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
您爱好的运动是？
<input type="checkbox" id="xx">全选/全不选
<br>
<br>
<br>
<input type="checkbox" id="a" value="zu">足球
<input type="checkbox" id="a" value="lan">篮球
<input type="checkbox" id="a" value="yu">羽毛球
<input type="checkbox" id="a" value="ping">乒乓球
<br>
<br>
<br>
<input type="button" id="all" value="全选">
<input type="button" id="noAll" value="全不选">
<input type="button" id="fan" value="反选">
<script src="js/jquery-1.9.1.js"></script>
<script>
//多选框全选
$("#xx").click(()=>{
$("input").prop("checked",$("#xx").prop("checked"));
});
//按钮全选
$("#all").click(()=>{
$("input").prop("checked",true);
});
//按钮全不选
$("#noAll").click(()=>{
$("input").prop("checked",false);
});
//反选:
$("#fan").click(()=>{
$("input[id=a]").each((index,item)=>{
item.checked=!item.checked;
let x=$("input[id=a]:checked").length;
let y=$("input[id=a]").length;
$("#xx").prop("checked",x==y);
});
});
//选择四个复选框全选择了，全选的复选框会被选中
$("input[id=a]").click(()=>{
let x=$("input[id=a]:checked").length;
let y=$("input[id=a]").length;
$("#xx").prop("checked",x==y);
});
</script>
</body>
</html>jQuery操作css:
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
定义class样式表：
.a{color:red;}给p标签上添加/删除a样式
$("p").addClass("a");
$("p").addClass("a b");//套多个样式时，中间用空格，重复样式以后面的为准
$("p").removeClass("a");
$("p").toggleClass("a");css属性：
- css("css属性");----返回的是指定的css属性值
- css("css属性","给属性赋值");----给指定元素赋值
- css({"a":"b","a1":"b2",...});--------给多元素赋值
$("p").css("background-color");
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});动画:
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
- hide(speed,callback);--------隐藏元素
- show(speed,callback);-------显示元素
- toggle(speed,callback);------显示被隐藏的元素，隐藏已显示的元素
<button id="cang">隐藏</button>
<button id="xian">显示</button>
<button id="xc">隐藏/显示</button>
<div class="a" id="div1"></div>
=========script=========================
$("#cang").click(()=>{
//隐藏
$("#div1").hide(2000,()=>{
// alert("cang");
});
});
$("#xian").click(()=>{
//显示
$("#div1").show(2000);
});
$("#xc").click(()=>{
//显示/隐藏
$("#div1").toggle(2000);
}); 
- fadeIn(speed,callback);------淡入
- fadeOut(speed,callback);----淡出
- fadeToggle(speed,callback);-切换淡入淡出效果
- fadeTo(speed,opacity,callback);--渐变为给定的不透明度(介于0~1之间)
<button id="b1">隐藏</button>
<button id="b2">显示</button>
<button id="b3">隐藏/显示</button>
<button id="b4">透明</button>
<div class="a" id="div2"></div>
//淡入淡出，所以会有一个透明度的问题
$("#b1").click(()=>{
//出去
$("#div2").fadeOut(2000);
});
$("#b2").click(()=>{
//进来
$("#div2").fadeIn(2000);
});
$("#b3").click(()=>{
//显示/隐藏
$("#div2").fadeToggle();
});
$("#b4").click(()=>{
//透明度(第一个参数事件，第二个参数透明度)
$("#div2").fadeTo(1000,0.2);
}); 
- slideDown(speed,callback);---向下滑动
- slideUp(speed,callback);-------向上滑动
- slideToggle(speed,callback);--切换向上向下效果
<button id="b11">隐藏</button>
<button id="b22">显示</button>
<button id="b33">隐藏/显示</button>
<div class="a" id="div3"></div>
$("#b11").click(()=>{
//上拉
$("#div3").slideUp(2000);
});
$("#b22").click(()=>{
//出来
$("#div3").slideDown(2000);
});
$("#b33").click(()=>{
//显示/隐藏
$("#div3").slideToggle();
}); 
- animate({params},speed,callback);---(params参数定义形成动画的css属性)自定义动画
- ps:默认的HTML元素都有一个静态位置，且无法移动，
- 把元素的css:position属性设置为relative.
- 可以操作多个animate({left:'250px',opacity:'0.5',width:'150px'});
- 使用相对值:animate(left,'250px');
- 使用预定义的值:animate({height:'toggle'});可以把属性的动画值设置为show/hide/toggle。
- 在彼此之后执行不同的动画，需要使用队列：
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});停止动画：
stop() 方法用于停止动画或效果，在它们完成之前
stop(stopAll,goToEnd):
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
尺寸：
- width()-----------方法用来设置或返回元素的宽度（不包括内边距，边框或外边距）
- height()----------方法设置或返回元素的高度（不包括内边距，边框或外边距）
- innerWidth()----返回元素的宽度（包括内边距）
- innerHeight()---返回元素的高度（包括内边距）
- outerWidth()----返回元素的宽度（包括内边距和边框）---属性填true,包括外边距
- outerHeight()---返回元素的高度（包括内边距和边框）---属性填true,包括外边距
父/子/兄弟元素：
父元素：
- parent()------------返回被选元素的直接父元素
- parents()-----------返回被选元素的所有祖先元素,直到html,如果填写参数，会检索指定所有父级的参数
- parentsUntil()------返回介于两个给定元素之间的所有祖先元素。
$("span").parent();
$("span").parents();
$("span").parents("ul");
$("span").parentsUntil("div");子元素：
- children()------------返回被选元素的所有直接子元素
- find()------------------返回被选元素的后代元素，一直向下直到最后一个后代
$("div").children();//所有直接子元素
$("div").children("p.1");//div例所有类名为1的所有<p>元素，并且都是直接子元素
$("div").find("span");//div的所有span子元素
$("div").find("*");//div的所有子元素兄弟元素：
- siblings()--------------返回所有的兄弟元素
- next()-------------------返回下一个兄弟元素
- nextAll()----------------返回之后的所有兄弟元素
- nextUntil()-------------返回两个参数之间的兄弟元素
- prev()-------------------返回上一个兄弟元素
- prevAll()----------------返回之前的所有兄弟元素
- prevUntil()-------------返回两个参数之间的性地元素（顺序不同）
过滤：
- first()--------------------返回首个元素
- last()---------------------返回最后一个元素
- eq()-----------------------返回被选元素中带有指定索引的元素
- filter()---------------------返回带有某种属性的所有元素
- not()-----------------------返回不带有某种属性的所有元素与filter相反
$("div p").first();
$("div p").last();
$("p").eq(1);
$("p").filter(".intro");
$("p").not(".intro");遍历：
each():遍历每个元素
用箭头函数必须传参
参数一：index---遍历的索引
参数二：item---当前正在遍历的项
为什么不能用this，因为this指向的不是DOM，指向的是当前函数的调用者.
$("li").each(function(){
alert($(this).text());//打印所有li的text文本内容
});
$("input[id=a]").each((index,item)=>{
item.checked=!item.checked;//让id=a的input标签选中状态取反
});还有一堆遍历：更多的遍历
总结
JQuery是在JS库，它里面的内容、操作都十分丰富，功能多彩多样，所以说学好JQuery确实能让我们的画面更加美观、灵动
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
