JQuery
一、jQuery简介
（一）jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API，使得访问dom，时间处理、动画效果、ajax请求变得简单；简化了JS对DOM的操作
（二）jQuery下载官网：https://jquery.com/download/
二、jQuery版本
（一）压缩版：compressed, production jQuery 压缩后的；用于生产环境的版本去掉了所有的 不影响使用的代码和空格、换行等等保证jQuery文件的最小
（二）开发板：项目开发过程中使用的版本，代码是可读的
三、jQuery核心
（一）jQuery核心对象
window.jQuery = window.$ = jQuery;
在window对象中，多了两个属性，叫做jQuery 和 $jQuery属性 和 $可以相互替代
（二）jQuery对象转换
1、使用jQuery获取的元素是jQuery对象，不是DOM对象，不能使用DOM对象方法；DOM对象可以和JQuery对象相互转换
DOM --> jquery
let $div= $(dom对象);
jquery ---> DOM
let div = $div[0] 或 let div = $div.get(0)
（三）优点
1、强大的选择器
2、优质的隐式迭代
3、无所不能的链式编程
四、选择器
注：jQuery选择元素永远是伪数组
（一）css选择器
1、标签选择器：
var div = $("div")；
2、类名选择器
var box = $(".box")；
3、ID选择器
var myId = $("#myId")；
4、属性选择器
var text = $("[type='text']")；
5、伪类选择器
var firstTr = $("tr:first-child")；
var lastTr = $("tr:last-child")；
var secondTr = $("tr:nth-child(2)")；
var evenTr = $("tr:even")；//奇数
var oddTr = $("tr:odd")；//偶数
var empty = $("tr:empty")；
筛选器
和伪类选择一样，筛选出需要的元素
$("li:first")
$("li:last")
$("li:event")
$("li:odd")
$("li:eq(数字)") // 选择下标是指定数字的元素
$("li:lt(数字)") // 下标小于指定数字的元素
$("li:gt(数字)") // 下标小于指定数字的元素
表单元素选择器 -- 了解
$(":input") // 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea)
$(":text") // 匹配单行文本框type="text" $("input:text") $("input[type=text]")
$(":password") // 匹配单行密码框
$(":radio") // 匹配单选按钮
$(":checkbox") // 匹配多选按钮
$(":submit") // 匹配提交按钮
$(":reset") // 匹配重置按钮
$(":image") // 匹配图片按钮
$(":button") // 匹配普通按钮
$(":file") // 匹配文件上传
$(":hidden") // 匹配隐藏域
表单对象选择器
$("input:enabled") // 所有可用表单元素
$("input:disbaled") // 所有禁用表单元素
$("input：checked") // 所有选中的表单元素 -- 重点
$("select:selected") // 被选中的下拉框元素 -- 重点
筛选器方法 -- 重点
使用方法来筛选元素
$("li").first() // 第一个元素
$("li").last() // 最后一个元素
$("div").next() // div的下一个兄弟元素
$("div").prev() // div的上一个兄弟元素
$("div").nextAll() // div后面的所有兄弟元素
$("div").prevAll() // div前面的所有兄弟元素
$("div").parent() // div的父元素
$("div").parents() // div的所有直系祖宗元素
$("div").eq(数字) // 指定下标的div元素
$("div").find(选择器) // div下的指定元素
$("div").siblings() // div的所有兄弟元素
筛选方法可以进行链式筛选
事件
jquery中的事件是将事件名作为方法名，传入回调函数即可。
$("div").click(function(){
});
$("div").mouseover(function(){
});
页面加载事件
在原生js中的页面加载事件是window.onload
在jquery中有两种写法：
$(function(){
});
$(document).ready(function(){
});
推荐使用jquery的页面加载事件，jquery的页面加载要比js原生的写法效率高，因为js元素的页面加载事件需要等到页面中的所有资源加载完毕才执行，而jquery的页面加载事件只需要等到页面的标签加载完毕就执行，而不会等待外部文件加载。
标准的事件处理：
on方法用于绑定事件、委托事件、传入参数
$(元素).on(事件类型[,委托元素][,传入的参数],处理的函数)
off方法用于解绑事件
$(元素).off(事件类型,处理函数)
trigger方法用于手动触发事件：
$(元素).trigger(事件类型,处理函数)
只能触发一次的事件：
$(元素).one(事件类型,处理函数);
特殊事件：
hover事件，包含鼠标放上去和鼠标离开
$("元素").hover(鼠标放上去的处理函数,鼠标离开的处理函数)
属性操作
设置属性：
$("div").prop(属性名,属性值);
获取属性：
$("div").prop(属性名);
设置自定义属性：
$("div").attr(属性名,属性值);
获取自定义属性：
$("div").attr(属性名);
删除属性：
$("div").removeProp(属性名);
$("div").removeAttr(属性名); // 删除自定义属性
案例：全选反选
js写法
<body>
<input type="checkbox">商品1<br>
<input type="checkbox">商品2<br>
<input type="checkbox">商品3<br>
<input type="checkbox">商品4<br>
<input type="checkbox">商品5<br>
<input type="checkbox">商品6<br>
<button class="all">全选</button><button class="reverse">反选</button><button class="allNot">取消</button><br>
<span>删除</span>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
var checkboxs = document.querySelectorAll("input");
document.querySelector(".all").onclick=function(){
for(var i=0;i<checkboxs.length;i++){
if(!checkboxs[i].checked){
checkboxs[i].checked = true;
}
}
}
document.querySelector(".reverse").onclick=function(){
for(var i=0;i<checkboxs.length;i++){
if(!checkboxs[i].checked){
checkboxs[i].checked = true;
}else{
checkboxs[i].checked = false;
}
}
}
document.querySelector(".allNot").onclick=function(){
for(var i=0;i<checkboxs.length;i++){
if(checkboxs[i].checked){
checkboxs[i].checked = false;
}
}
}
</script>
jquery写法：
$(".all").click(function(){
$("input[type='checkbox']").prop("checked",true);
});
$(".reverse").click(function(){
if($("input[type='checkbox']").prop("checked")){
$("input[type='checkbox']").prop("checked",false);
}else{
$("input[type='checkbox']").prop("checked",true);
}
});
$(".allNot").click(function(){
$("input[type='checkbox']").prop("checked",false);
});
当操作jquery对象的时候，不需要遍历操作每一个，直接操作的就是每一个元素。因为在jquery内部自带遍历操作。这就是隐形迭代。
样式操作
设置样式：
$("div").css(css属性名,值); // 设置一个样式
$("div").css({ // 设置多个样式
css属性名:值,
css属性名:值
})
获取样式：
$("div").css(css属性名);
类名操作
$("div").addClass(类名); // 添加类名
$("div").removeClass(类名); // 删除类名
$("div").toggleClass(类名); // 在添加和删除之间切换
$("div").hasClass(类名); // 判断元素是否有这个类名，有是true，没有是false
案例：选项卡
<style>
*{
padding: 0;
margin: 0;
}
.box{
width:600px;
height:400px;
border:1px solid #000;
}
.title{
height: 50px;
display: flex;
justify-content:space-evenly;
align-items:center;
background-color: pink;
}
.title span{
display:block;
width:150px;
height: 30px;
background:#ccc;
line-height: 30px;
text-align: center;
}
.title span.current{
background:yellow;
}
.content{
width: 600px;
height: 350px;
}
.content p{
width:600px;
height: 350px;
font-size:200px;
font-weight:bold;
color:#fff;
text-align: center;
line-height: 350px;
display:none;
}
.content p.current{
display:block;
}
.content p:first-child{
background:red;
}
.content p:nth-child(2){
background:blue;
}
.content p:last-child{
background:green;
}
</style>
<body>
<div class="box">
<div class="title">
<span class="current">红色</span>
<span>蓝色</span>
<span>绿色</span>
</div>
<div class="content">
<p class="current">1</p>
<p>2</p>
<p>3</p>
</div>
</div>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
$("div>span").click(function(){
$(this).addClass("current").siblings().removeClass("current").parent().next().find("p").eq($(this).index()).addClass("current").siblings().removeClass("current");
});
</script>
补充知识点：
$(this) 是将this关键字转为jquery对象
$(this).index() // index方法是获取元素的下标
链式编程在这里体现的淋漓尽致。
元素内容操作
$("div").text(); // 获取元素内容 === 相当于 div.innerText
$("div").text("盒子"); // 设置元素内容 === 相当于 div.innerText = "盒子"
$("div").html(); // 获取元素代标签的内容 === 相当于 div.innerHTML
$("div").html("<b>文字</b>"); // 设置元素带标签的内容 === 相当于 div.innerHTML = "<b>文字</b>"
$("input").val(); // 获取表单元素的值 === 相当于 input.value
$("input").val("请输入用户名"); // 设置表单元素的内容 === 相当于 input.value = "请输入用户名"
