概念
jQuery是一个快速、简洁的js库，它是把原生js中的dom操作做了封装，以达到快速查询使用里面的功能。
学习jQuery的本质就是学习调用函数（方法）
由于以下部分举例已经在JS篇写过了，所以本篇文章不再有案例展示
入口函数
<div></div>
<script>
// 举例 隐藏元素hide方法
// 等页面dom加载完毕再去执行js代码
$(function(){ //入口函数
$('div').hide(); //首先把div包装成jQuery对象，然后只能调用jq的方法
})
</script>
jQuery与DOM的转换
<div></div>
<script>
// DOM对象转换为jQuery对象
var divt=document.querySelector('div');
$(divt).方法(); //可以使用dom里的方法
// jQuery转换为DOM对象
$('div')[0].方法(); //也是使用dom里的方法
</script>
选择器
jq基础选择器
层级选择器
筛选选择器
筛选方法（重点）
jq得到当前元素索引号 $(this).index();
查找父级
$(".类名").parents(".类名2") //查找类名的所有父级中的类名2的父级
隐式迭代
遍历内部DOM元素（伪数组形式存储），就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法（对元素进行相同的操作）
排他思想
<script>
//隐式迭代，给所有的按钮都绑定了点击事件
$("button").click(function(){
//当前的元素变化背景颜色
$(this).css("background","red");
//其余的兄弟去掉背景颜色（隐式迭代实现了排他思想）
$(this).siblings("button").css("background","");
})
</script>
链式编程
<script>
//隐式迭代，给所有的按钮都绑定了点击事件
$("button").click(function(){
//当前的元素变化背景颜色
$(this).css("background","red");
//其余的兄弟去掉背景颜色（隐式迭代实现了排他思想）
$(this).siblings("button").css("background","");
//链式编程
//我的颜色为红色，我的兄弟的颜色为空
$(this).css("background","red").siblings().css("background","");
})
</script>
样式操作
返回属性值
$(this).css("color");
修改样式
$('div').css({
width:400,
color:"red"
});
设置类样式操作
添加类(追加）
$("div").addClass("类名"); //类名不用写点.
移除类
$("div").removeClass("类名");
切换类
$("div").toggleClass("类名"); //有其就移除，无就添加
案例
<script src="https://demo.wangxuelong.vip/js/jquery/jquery.min.js"></script>
<script>
$(function() {
// 1.点击上面的li，当前li 添加current类，其余兄弟移除类
$(".tab_list li").click(function() {
// 链式编程操作
$(this).addClass("current").siblings().removeClass("current");
// 2.点击的同时，得到当前li 的索引号
var index = $(this).index();
console.log(index);
// 3.让下部里面相应索引号的item显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
});
})
</script>
结果演示
动画效果（具体请看jq API）
显示隐藏效果（举例）
show([speed,[easing],[fn]]) //显示 hide(同上) //隐藏 toggle(同上)//切换显示和隐藏
动画队列及其停止排队方法
动画或效果队列
动画或效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。
stop()方法用于停止动画或效果，它必须写到动画或效果的前面，相当于停止结束上一次的动画。
举例：
$(this).children("ul").stop().slideToggle();
只要是动画，都会有排队的情况，所以要在动画前面写上stop()来停止动画
自定义动画animate（重点）
animate(params,[speed],[easing],[fn])
属性操作
获取（固有）属性值
prop("属性名")
设置属性及其值
$(this).prop("属性名","我是值");
自定义属性
获取自定义属性值
attr("属性名")
设置自定义属性
attr("属性名",属性值)
数据缓存data()
data()方法可以在指定的元素上存取数据，不会修改DOM元素结构（即在元素结构内看不到该数据），一旦页面刷新，之前存放的数据都将被移除。
$("span").data("uname","wang"); //在被选元素内附加数据
data("属性名")。//在被选元素内获取数据
全选反选案例
<script src="https://demo.wangxuelong.vip/js/jquery/jquery.min.js"></script>
<script>
$(function(){
//只要全选按钮发生变化就执行代码
$(".j_cbAll").change(function(){
//首先拿到全选按钮的值 $(this).prop("checked")，然后赋值给小按钮以及所以全选按钮
$(".j-checkbox, .j_cbAll").prop("checked", $(this).prop("checked"));
});
$(".j-checkbox").change(function(){
//如果被选的小按钮的个数==4
if($(".j-checkbox:checked").length === $(".j-checkbox").length){
//就要选中全选按钮
$(".j_cbAll").prop("checked",true);
}else{
$(".j_cbAll").prop("checked",false);
}
})
})
</script>
结果演示
内容文本值
//获取元素内容
html()
//设置元素文本内容
html("值")
//获取普通元素内容
text()
//获取表单值
$("input").val();
//设置表单值
val("值")
元素操作
遍历元素
$("div").each(function(index,domEle){xxx;})
- each()方法是遍历匹配的每一个元素
- 回调函数参数中，index是每个元素的索引号，demEle是每个DOM元素对象(即每个div元素)，不是jq对象。
案例：根据不同索引设置不同div的颜色
<script>
$(function(){
var arr=["red","green","blue"];
//第一种遍历的方法，比如dom对象
$("div").each(function(i,domEle){
$(domEle).css("color",arr[i]);
})
//第二种遍历的方法 ，主要用来遍历数据，处理处理数据，比如数据和对象
$.each(arr,function(i,value){
})
})
</script>
元素增删改
//创建元素
var li = $("<li></li>");
//添加元素
//内部添加元素
$("ul").append(li); //内部添加并且放到内容的最后面
$("ul").prepend(li);//放到内容的最前面
//外部添加
var div=$("<div></div>");
//放到目标元素的后面
$(".test").before(div);
//删除元素
$("ul").remove(); //删除匹配的元素
$("ul").empty(); //删除匹配元素里面所有子节点，即清空
尺寸位置操作
尺寸
offset()设置或获取元素偏移
- 该方法设置或获取被选元素是相当于文档的偏移坐标，跟父级没有关系。
- 该方法有2个属性lest、top。offset().top 用于获取距离文档顶部的距离
- 可以设置元素的偏移：offset({top:10,left:30});
position()获取带有定位父级的位置（偏移）
- 该方法只能获取不能设置
设置或获取元素被卷去的头部和左侧
- scrollTop()设置或获取元素被卷去的头部
- scrollLeft()设置或获取元素被卷去的左侧
返回顶部案例
<script>
$(".back").click(function(){
//只有元素才能坐动画，不能是文档document
$("body,html").stop().animate({
scrollTop:0
});
})
</script>
事件
事件处理
on可以处理一个或多个事件（优势1）
one()绑定事件，只能触发一次。
<script>
$(function () {
$("div").on({
mouseenter:function(){
$(this).css("color","red");
},
click:function(){
$(this).css("color","blue");
}
});
})
</script>
事件委托
优势2
<script>
$(function () {
// $("ul li").click();
$("ul").on("click","li",function(){
//会冒泡到父亲身上，但是触发的对象是ul 里面的li
});
})
</script>
优势3: on可以给未来动态创建的元素绑定事件
<script>
$(function () {
$("ol").on("click","li",function(){
alert(1);
})
var li = $("<li>后来创建</li>");
$("ol").append(li);
})
</script>
事件解绑off()
该方法可以移除通过on()方法添加的事件
$("p").off("click") //解绑p元素上面的点击事件
$("ul").off("click","li"); //解绑事件委托
自动触发事件
$("div").click(); //会触发元素的默认行为
$("div").trigger("click"); //会触发元素的默认行为
$("div").triggerHandler("click"); //不会触发元素的默认行为，比如表单的光标闪烁
事件对象
$("ol").on("click",function(event){
event.方法();
})
对象拷贝
语法：
$.extend([deep],target,object1,[objectN])
- deep 如果是true就深拷贝
- tartget 要拷贝的目标对象
- object1 待拷贝到target的对象
- 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝的对象。重复数据会覆盖。
- 深拷贝是完全克隆，拷贝的是对象不是地址，修改目标对象不会影响被拷贝的对象。重复数据不会覆盖，而是会新开辟一个空间存起来。
