jQuery笔记
jQuery
一、jQuery概述
1.1、JavaScript库
仓库：可以把很多东西放到这个仓库里面，找东西只需要到仓库里面查找到就可以了
JavaScript库：即library,是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角色理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面，这样我们可以快速高速的使用这些封装好的功能了。
比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。
常见的JavaScript库
(1)jQuery
(2)Prototype
(3)YUI
(4)Dojo
(5)Ext JS
(6)移动端的zepto
这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，我们主要学习的是jQuery。
1.2、jQuery的概念
jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是“write Less,Do More”，即倡导写更少的代码，做更多的事情。
j就是JavaScript;Query查询；意思就是查询js,把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质：就是学习调用这些函数（方法）。
jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。
1.3、jQuery的优点
（1）轻量级。核心文件才几十kb，不会影响页面加载速度
（2）跨浏览器兼容，基本兼容了现在主流的浏览器
（3）链式编程、隐式迭代
（4）对事件、样式、动画支持，大大简化了DOM操作
（5）支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等
（6）免费、开源
二、jQuery的基本使用
2.1、jQuery的下载
官网地址：https://jquery.com/
版本：
（1）1x：兼容IE 678等低版本浏览器，官网不在更新
（1）2x：不兼容IE 678等低版本浏览器，官网不在更新
（1）3x：兼容IE 678等低版本浏览器，是官方主要更新维护的版本
各个版本的下载：https://code.jquery.com/
2.3、jQuery的入口函数
$(function () {
... // 此处是页面DOM加载完成的入口
});
$(document).ready(function () {
... // 此处是页面DOM加载完成的入口
})
1.等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
2.相当于原生js中的DOMContentLoaded.
3.不同于原生js中的load事件是页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
4.更推荐使用第一种方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery的基本使用</title>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
// $('div').hide();
// 1.等着页面DOM加载完毕再去执行js代码
// 复杂写法
// $(document).ready(function () {
// $('div').hide();
// })
// 简单写法
$(function () {
$('div').hide();
})
</script>
<div></div>
</body>
</html>
2.4、jQuery的顶级对象$
1.$是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便，通常都直接使用$。
2.$是jQuery的顶级对象，相当于 原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery顶级对象</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
// 1.$是jQuery的别称(另外的名字)
// $(function () {
// alert(11);
// });
jQuery(function () {
alert(11);
// $('div').hide();
// jQuery('div').hide();
});
// 2.$同时也是jQuery的顶级对象
</script>
<div></div>
</body>
</html>
2.5、jQuery对象和DOM对象
DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
1.DOM对象转换为jQuery对象：$(DOM对象)
$('div')
2.jQuery对象转换为DOM对象（两种方式）
$('div')[index] index是索引号
$('div').get(index) index是索引号
三、jQuery常用API
3.1、jQuery基础选择器
原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。
$("选择器") // 里面选择器直接写css选择器即可，但是要加引号
3.2、jQuery层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery基本和层级选择器</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>我是div</div>
<div class="nav">我是nav</div>
<p>我是p</p>
<ol>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
<li>我是ol的</li>
</ol>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<script>
$(function () {
console.log($(".nav"));
console.log($("ul li"));
})
</script>
</body>
</html>
四、jQuery选择器
4.1、jQuery设置样式
$('div').css('属性','值')
4.2、隐式迭代（重要）
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作，方便我们调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery隐式迭代</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 1.获取四个div元素
console.log("div");
// 2.给四个div设置背景颜色为粉色，jquery对象不能使用style
$('div').css("background","pink");
// 3.隐式迭代就是把匹配的所有元素内部进行遍历循环，给每个元素添加css这个方法
$("ul li").css("color","red");
</script>
</body>
</html>
4.3、jQuery筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery筛选选择器</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
$(function () {
$("ul li:first").css("color","red");
$("ul li:eq(2)").css("color","blue");
$("ol li:odd").css("color","skyblue");
$("ol li:even").css("color","pink");
})
</script>
</body>
</html>
4.4、jQuery筛选方法(重点)
重点记住：parent()、children()、find()、siblings()、eq()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=q">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery筛选方法(上)</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="grandpa">
<div class="father">
<div class="son"></div>
</div>
</div>
<div class="nav">
<p>我是第一个p</p>
<div>
<p>我是第二个p</p>
</div>
</div>
<script>
// 注意一下，都是方法，带括号
$(function () {
// 查找父级，返回的是最近一级的父级元素
console.log($(".son").parent());
// 查找子级，返回的是最近一级的子级元素，利用children(),类似于子代选择器ul>li
$('.nav').children('p').css("color","blue");
// 可以选择里面的所有孩子，包括儿子和孙子，find（）类似于后代选择器
$('.nav').find('p').css("color","red");
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery筛选方法（下）</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<ol>
<li>你好</li>
<li>你好</li>
<li class="item">你好</li>
<li>你好</li>
<li>你好</li>
<li>你好</li>
</ol>
<ul>
<li>哆啦A梦</li>
<li>哆啦A梦</li>
<li>哆啦A梦</li>
<li>哆啦A梦</li>
<li>哆啦A梦</li>
<li>哆啦A梦</li>
</ul>
<div class="current">有current</div>
<div>没有current</div>
<script>
// 注意一下都是方法，带括号
$(function () {
// 1.兄弟元素siblings 选择除了自身以外的所有亲兄弟
$("ol .item").siblings("li").css("color","red");
// 2.第n个元素
var index = 2;
// (1)利用选择器的方式选择
// $("ul li:eq(2)").css("color","blue");
// $("ul li:eq(" + index + ")").css("color","blue");
// (2)利用选择方法的方式选择，更推荐这种写法
$("ul li").eq(index).css("color","red");
// 3.判断是否有某个类名
console.log($("div:first").hasClass("current"));
console.log($("div:last").hasClass("current"));
})
</script>
</body>
</html>
五、jQuery样式操作
5.1、操作css方法
jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式。
1、参数只写属性名，则是返回属性值
$(this).css("color");
2、参数是属性名、属性值、逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。
$(this).css("color","red");
3、参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({"color":"white","font-size":"20px"});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery操作样式之css方法</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
$(function () {
// 1.参数只写属性名，返回的是属性名
console.log($("div").css("width")); //200px
// 2.将width的属性值改为300px
// $("div").css("width","300px");
// $("div").css("width",300);
// 属性名一定要加引号
// $("div").css(height,"300px");
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})
})
</script>
</body>
</html>
5.2、设置类样式方法
作用等同于以前的classList,可以操作类样式，注意操作类里面的参数不要加点。
1.添加类
$("div").addClass("current");
2.移除类
$("div").removeClass("current");
3.切换类
$("div").toggleClass("current");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery操作样式之类操作</title>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.5s;
}
.current{
background-color: red;
transform: rotate(360deg);
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div ></div>
<script>
$(function () {
// 1.添加类 addClass()
// $("div").click(function () {
// $(this).addClass("current");
// })
// 2.删除类 removeClass()
// $("div").click(function () {
// $(this).removeClass("current");
// })
// 3.切换类 toggleClass()
$("div").click(function () {
$(this).toggleClass("current");
})
})
</script>
</body>
</html>
5.3、类操作与className区别
原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先的类名。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery类操作不形象原先类</title>
<style>
.one{
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
.two{
transform: rotate(720deg);
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="one"></div>
<script>
// 原生js中className会覆盖元素原先里面的类名
// var one = document.querySelector('.one');
// one.className('two');
// 这个addClass相当于追加类名，不影响以前的类名
$(".one").addClass("two");
// $(".one").removeClass("two");
</script>
</body>
</html>
六、jQuery效果
jQuery给我们封装了很多了很多动画效果，最为常见的如下：
6.1、显示效果
1、显示语法规范
show([speed],[easing],[fn])
2、显示参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
6.2、隐藏效果
1、隐藏语法规范
hide([speed],[easing],[fn]);
2、隐藏参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
6.3、切换效果
1、切换语法规范
toggle([speed],[easing],[fn]);
2、切换参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery效果之显示与隐藏</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").show(1000,function () {
alert(1);
});
})
$("button").eq(1).click(function () {
$("div").hide(1000,function () {
alert(1);
});
})
$("button").eq(2).click(function () {
$("div").toggle(1000,function () {
alert(1);
});
})
})
</script>
</body>
</html>
6.4、下滑效果
1、下滑效果语法规范
slideDown([speed],[easing],[fn]);
2、下滑效果参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
6.5、上滑效果
1、上滑效果语法规范
slideUp([speed],[easing],[fn]);
2、上滑效果参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
6.6、切换效果
1、切换效果语法规范
slideToggle([speed],[easing],[fn]);
2、切换效果参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
6.7、事件切换
hover([over,]out)
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
6.8、动画队列及其停止排队方法
1、动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
2、停止排队
stop()
（1）stop()方法用于停止动画或效果。
（2）注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新浪下拉菜单</title>
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: black;
}
.nav{
margin: 100px;
}
.nav>li{
float: left;
height: 30px;
width: 120px;
/* margin: 0 auto; */
margin-right: 10px;
text-align: center;
line-height: 30px;
background-color: pink;
}
.nav ul{
display: none;
border-left:1px solid orange;
border-right:1px solid orange;
}
.nav ul > li{
border-bottom:1px solid orange;
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul class="nav">
<li >
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">博客</a>
<ul>
<li>
<a href="">博客评论</a>
</li>
<li>
<a href="">未读提醒</a>
</li>
</ul>
</li>
<li>
<a href="#">邮箱</a>
<ul>
<li>
<a href="">免费邮箱</a>
</li>
<li>
<a href="">VIP邮箱</a>
</li>
<li>
<a href="">企业邮箱</a>
</li>
<li>
<a href="">新浪邮箱客户端</a>
</li>
</ul>
</li>
</ul>
<script>
$(function () {
// $(".nav>li").mouseover(function () {
// 鼠标经过
// $(this).children("ul").slideDown(200);
// });
// $(".nav>li").mouseout(function () {
// 鼠标离开
// $(this).children("ul").slideUp(200);
// });
// 1.事件切换 hover就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function () {
// $(this).children("ul").slideDown(200);
// },function () {
// $(this).children("ul").slideUp(200);
// });
// 2.事件切换 hover如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function () {
$(this).children("ul").stop().slideToggle();
})
})
</script>
</body>
</html>
6.9、淡入效果
1、淡入效果语法规范
fadeIn([speed],[easing],[fn]);
2、淡入效果参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
6.10、淡出效果
1、淡出效果语法规范
fadeOut([speed],[easing],[fn]);
2、淡出效果参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
6.11、淡入淡出切换效果
1、淡入淡出切换效果语法规范
fadeToggle([speed],[easing],[fn]);
2、淡入淡出切换效果参数
（1）参数都可以省略，无动画直接显示
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
6.12、淡入淡出效果
1、淡入淡出效果语法规范
fadeTo([speed],opacity,[easing],[fn]);
2、淡入淡出效果参数
（1）opacity透明度必须写，取值0~1之间。
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。必须写
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery效果之淡入淡出</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function () {
$("button").eq(0).click(function () {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function () {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function () {
// 淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
})
$("button").eq(2).click(function () {
// 修改透明度 fadeTo()
$("div").fadeTo(1000,0.5);
})
})
</script>
</body>
</html>
6.13、自定义动画animate
1、语法
animate(params,[speed],[easing],[fn]);
2、参数
（1）params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
（2）speed:三种预定速度之一的字符串("slow","normal",or "fast")或表示动画时长的毫秒数值（如：1000）。
（3）easing:(Optional)用来指定切换效果，默认是"swing",可用参数"linear"。
（4）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。
七、jQuery属性操作
7.1、设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type.
1.获取属性语法
prop('属性')
2.设置属性语法
prop("属性","属性值")
7.2、设置或获取元素自定义属性值attr()
用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index = "1"
1.获取属性语法
attr("属性") // 类似原生getAttribute()
2.设置属性语法
attr("属性","属性值") // 类似原生setAttribute()
改方法也可以获取H5自定义属性
7.3、数据缓存 data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。
1.附加数据语法
data("name","value") // 向被选元素附加数据
2.获取数据语法
data("name") // 向被选元素获取数据
同时，还可以读取HTML5自定义属性data-index,得到的是数字型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全选反选</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.wrap table{
width: 200px;
margin: 100px auto;
border:1px solid #000;
border-spacing: 0;
}
thead th{
text-align: center;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
tbody td{
text-align: center;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cdAll">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox">
</td>
<td>苹果</td>
<td>3.5元/斤</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>梨</td>
<td>2.5元/斤</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>榴莲</td>
<td>35元/斤</td>
</tr>
</tbody>
</table>
</div>
<script>
$(function () {
// 通过全选判断单选框状态，全选框状态发生改变
$("#j_cdAll").change(function () {
// 在控制台打印全选框状态
// console.log($(this).prop("checked"));
// 将全选框状态赋值给单选框
$("#j_tb input").prop("checked",$(this).prop("checked"))
})
// 通过单选框状态判断全选框状态，单选框全选中，全选框也选中
$("#j_tb input").change(function () {
// 如果单选框的长度等于单选框全部长度
if($("#j_tb input:checked").length === $("#j_tb input").length){
// 全选框按钮就选中
$("#j_cdAll").prop("checked",true);
}else{
// 否则全选框按钮不选中
$("#j_cdAll").prop("checked",false);
}
})
})
</script>
</body>
</html>
八、jQuery内容文本值
主要针对元素的内容还有表单的值操作。
8.1、普通元素内容html() (相当于原生inner HTML)
html() //获取元素的内容
html("内容") //设置元素的内容
8.2、普通元素文本内容text() (相当于原生inner Text)
text() // 获取元素的文本内容
text("文本内容") //设置元素的文本内容
8.3、表单的值val() (相当于原生value)
val() //获取元素表单的值
val("内容") // 设置元素的表单的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery内容文本值</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 获取设置元素内容 html()
console.log($("div").html());
console.log($("div").html("123"));
// 获取设置元素文本内容 text()
console.log($("div").text());
console.log($("div").text("123"));
// 获取设置元素表单的值 val()
console.log($("input").val());
console.log($("input").val("456"));
</script>
</body>
</html>
8.4、parents('选择器')可以返回指定祖先元素
8.5、通过toFixed(2)保留2位小数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>商品数量加减</title>
<style>
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
.form{
position: relative;
width: 100px;
height: 20px;
margin: 100px auto;
border: 1px solid #000;
}
.decrement{
position: absolute;
top: 0;
left: 0px;
width: 20px;
text-align: center;
/* border-right: 1px solid #000; */
}
.itxt{
position: absolute;
top: 0;
left: 25px;
width: 50px;
text-align: center;
}
.increment{
position: absolute;
top: 0;
left: 75px;
width: 30px;
text-align: center;
/* border-left: 1px solid #000; */
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<!-- 商品单价 -->
<div class="p-price">￥12.60</div>
<!-- 商品数量加减 -->
<div class="form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
<!-- 商品总价 -->
<div class="p-sum">￥12.60</div>
<script>
$(function () {
// 增加数量
$(".increment").click(function () {
// 获取商品的数量
var n = $(this).siblings(".itxt").val();
// 点击加号商品数量也增加
n++;
// 将增加后数量赋值给数量值
$(this).siblings(".itxt").val(n);
// 获取商品的单价
var p = $(this).parent().siblings(".p-price").html();
// 将获取的单价￥12.60剪切为商品价格12.60
p = p.substr(1);
console.log(p);
// 将获取到的单价和数量相乘赋值给商品总价,并保留两位小数
$(this).parent().siblings(".p-sum").html("￥" + (p * n ).toFixed(2));
})
// 减少数量
$(".decrement").click(function () {
var n = $(this).siblings(".itxt").val();
if(n==1){
return false;
}
n--;
$(this).siblings(".itxt").val(n);
var p = $(this).parent().siblings(".p-price").html();
p = p.substr(1);
console.log(p);
$(this).parent().siblings(".p-sum").html("￥" + (p * n ).toFixed(2));
})
// 用户直接修改文本框的值
$(".itxt").change(function () {
// 先得到用户输入文本框的值
var n = $(this).val();
// 当前商品的单价
var p = $(this).parent().siblings(".p-price").html();
// 将获取的单价￥12.60剪切为商品价格12.60
p = p.substr(1);
// 将获取到的单价和数量相乘赋值给商品总价,并保留两位小数
$(this).parent().siblings(".p-sum").html("￥" + (p * n ).toFixed(2));
})
})
</script>
</body>
</html>
九、jQuery元素操作
主要是遍历、创建、添加、删除元素操作。
9.1、遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作，如果想要同一类元素做不同操作，就需要用到遍历。
语法1：
$("div").each(function(index,domEle) {xxx;})
1.each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个
2.里面的回调函数有2个参数：index是每个元素的索引号，demEle是每个DOM元素对象，不是jquery对象
3.所以要想使用jquery()方法，需要给这个dom元素转换为jquery对象 $(domEle)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery遍历元素</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function () {
// 针对于同一元素做不同操作，需要用到遍历元素（类似于for 但相比较for更强大）
var arr = ["red","pink","blue"];
var sum = 0;
// 利用each()方法遍历元素
$("div").each(function (i,domEle) {
// 回调函数第一个参数一定是索引号，可以自己指定索引号名称
console.log(i);
// 回调函数第二个参数一定是dom元素对象，也是自己命名
console.log(domEle);
// domEle.css("color");dom对象没有css方法
$(domEle).css("color",arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
})
</script>
</body>
</html>
执行结果：
语法2：
$.each(object,function (index,element) {xxx; })
1.$.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象
2.里面的函数有2个参数：index是每个元素的索引号；element遍历内容
$.each({
name:"andy",
age:18
},function(i,ele) {
console.log(i);// 输出的是 name age属性名
console.log(ele);// 输出的是 name age属性值
})
9.2、添加元素
1.内部添加
(1)element.append("内容")
把内容放入匹配元素内部最后面，类似原生appendChild。
(2)element.prepend("内容")
把内容放入匹配元素内部最前面
2、外部添加
(1)element.after("内容") // 把内容放入目标元素后面
(2)element.before("内容") // 把内容放入目标元素前面
（1）内部添加元素：生成之后，它们是父子关系。
（2）外部添加元素：生成之后，它们是兄弟关系。
9.3、删除元素
element.remove() // 删除匹配的元素（本身）
element.empty() // 删除匹配的元素集合中所有的子节点
element.html("") // 清空匹配的元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>创建添加删除元素</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<ul>
<li>1</li>
</ul>
<div class="test">我是第一个</div>
<script>
$(function () {
// 1.创建元素
var li = $("<li>2</li>");
// 2.添加元素
// (1) 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// (2) 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3.删除元素
$("ul").remove(); // 可以删除匹配的元素
$("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
})
</script>
</body>
</html>
十、jQuery事件
1、jQuery事件注册
1.1、单个事件注册
语法：
element.事件(function () {})
$("div").click(function () { 事件处理程序})
其他事件和原生基本一致。
比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll等
2、jQuery事件处理
2.1、事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数。
语法：
element.on(events,[selector],fn)
1.events:一个或多个用空格分隔的事件类型，如"click"或"keydown"。
2.selector:元素的子元素选择器。
3.fn:回调函数即绑定在元素身上的侦听函数
on()方法优势1：
可以绑定多个事件，多个处理事件处理程序。
$("div").on({
mouseover:function(){},
mouseout:function(){},
click:function(){}
});
$("div").on("mouseover mouseout",function () {
$(this).toggleClass("current");
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件处理</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
}
.current{
background-color: blueviolet;
}
</style>
</head>
<body>
<div></div>
<script>
$(function () {
// 1.单个事件注册
// $("div").click(function () {
// $(this).css("background","red");
// })
// $("div").mouseenter(function () {
// $(this).css("background","skyblue");
// })
// 2.事件处理on
// $("div").on({
// mouseenter : function () {
// $(this).css("background","red");
// },
// click : function () {
// $(this).css("background","skyblue");
// },
// mouseleave : function () {
// $(this).css("background","orange");
// }
// });
// 3.通过鼠标经过和鼠标离开自动切换
$("div").on("mouseenter mouseleave" , function () {
$(this).toggleClass("current");
})
})
</script>
</body>
</html>
on()方法优势2：
可以事件委派操作，事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。
$('ul').on('click','li',function () {
alert('hello world!');
});
在此之前有bind(),live(),delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on代替他们。
on()方法优势3：
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件处理</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: blue;
}
.current{
background-color: blueviolet;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<ol></ol>
<script>
$(function () {
// 1.事件处理on
// (1) on可以绑定1个或者多个事件处理程序
$("div").on("mouseenter mouseleave" , function () {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
$("ul").on("click","li",function () {
alert(1);
});
// click是绑定在ul身上的，但是触发的对象是ul里面的li
// (3) on可以给未来动态创建的元素绑定事件
// $("ol li").click(function() {
// alert(2); // 无法做点击事件
// })
$("ol").on("click","li",function () {
alert(2);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>
</html>
2.2、事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序。
$("p").off() // 解绑p元素所有事件处理程序
$("p").off("click") // 解绑p元素上面的点击事件，后面的off是侦听函数名
$("ul").off("click","li"); // 解绑事件委托
如果有的事件只想触发一次，可以使用one()来绑定事件。
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件解绑</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
$(function () {
$("div").on({
click:function () {
console.log('我被点击了');
},
mouseover:function() {
console.log('我被鼠标经过了');
}
});
$("ul").on("click","li",function () {
alert(1);
});
// 1.事件解绑off()
$("div").off(); //这个是解除了div上的所有事件
$("div").off("click"); // 这个是解除了div上的点击事件
$("ul").off("click","li"); // 这个是解绑了ul下所有li的点击事件
// 2.one() 只能触发事件一次
$("p").one("click",function () {
alert(2);
});
})
</script>
</head>
<body>
<div></div>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<p>你好</p>
</body>
</html>
2.3、自动触发事件trigger()
有些事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一致，可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
1.element.click() // 第一种简写形式
2.element.trigger("type") //第二种自动触发模式
// 案例：
$("p").on("click",function () {
alert("hi");
});
$("p").trigger("click"); // 此时自动触发点击事件，不需要鼠标点击
3.element.triggerHandler(type) // 第三种自动触发模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动触发事件</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
$(function () {
$("div").click(function () {
alert(1);
});
// 自动触发事件
// 1.元素.事件()
// $("div").click(); 会触发元素的默认行为
// 2.元素.trigger("事件")
$("div").trigger("click"); // 会触发元素的默认行为
$("input").trigger("focus");
// 3.元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("div").triggerHandler("click");
$("input").on("focus",function () {
$(this).val("你好吗？");
});
})
</script>
</head>
<body>
<div></div>
<input type="text">
</body>
</html>
3、jQuery事件对象
事件被触发，就会有事件对象的产生。
element.on(events,[selector],function(event) {})
阻止默认行为：event.preventDefault() 或者 return false
阻止冒泡：event.stopPropagation()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件对象</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script>
$(function () {
$(document).on("click",function () {
console.log("点击了document");
})
$("div").on("click",function () {
console.log("点击了div");
event.stopPropagation();
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>
十一、jQuery对象拷贝
如果想要把某个对象拷贝（合并）给另外一个对象使用，此时可以使用$.extend()方法。
语法：
$.extend([deep],target,object1,[objectN])
1.deep：如果设为true为深拷贝，默认为false浅拷贝
2.target：要拷贝的目标对象
3.object1:待拷贝到第一个对象的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery对象拷贝</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var targetObj = {
id: 2,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: "andy",
msg: {
age:18
}
}
// $.extend(targetObj,obj);
// console.log(targetObj); 会覆盖targetObj,里面原来的数据
// // 1.浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
// targetObj.msg.age = 20;
// console.log(targetObj);
// console.log(obj); obj里面的msg()方法中的age也变为20
// 2.深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并在一起
$.extend(true,targetObj,obj);
targetObj.msg.age = 20;
console.log(targetObj);
console.log(obj);
})
</script>
</head>
<body>
</body>
</html>
十二、多库共存
问题概述
jQuery使用$作为标识符，随着jQuery的流行，其它js库也会用$作为标识符，这样一起作用会引起冲突。
客观需求
需要一个解决方案，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。
jQuery解决方案：
1.把里面的$符号统一改为jQuery,比如jQuery("div")
2.jQuery变量规定新的名称：$.noConflict() var xx = $.noConflict();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多库共存</title>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
<script>
$(function () {
function $(ele){
return document.querySelector(ele);
}
console.log($("div"));
// 1.如果$符号冲突，我们就是用jquery
jQuery.each();
// 2.让jquery释放对$控制权让用户自己决定
var s = jQuery.noConflict();
console.log(s("span"));
s.each();
})
</script>
</head>
<body>
<div></div>
<span></span>
</body>
</html>
执行效果：
十三、jQuery插件
jQuery功能比较有限，想要更复杂的特效效果，可以借助于jQuery插件完成。
注意:这些插件也是依赖与jQuery来完成的，所以必须要先引入jQuery文件，因此也称为jQuery插件。
jQuery插件常用的网站：
1.jQuery插件库：http://www.jq22.com/
2.jQuery之家：http://www.htmleaf.com/
jQuery插件使用步骤：
1.引入相关文件。（jQuery文件和插件文件）
2.复制相关html、css、js(调用插件)
jQuery插件演示
1、瀑布流
2、图片懒加载（图片使用延迟加载在可提高网页下载速度，他也能帮助减轻服务区负载）
当我们页面滑动到可视区域，在显示图片
我们使用jquery插件库EasyLazyload。注意，此时的js引入文件和js调用必须写到DOM元素（图片）最后面。
3、全屏滚动（fullpage.js）
gitHub:https://github.com/alcarotrigo/fullPage.js
中文翻译网站：http://www.dowebok.com/demo/2014/77/
十四、jQuery尺寸、位置
1、jQuery尺寸
（1）以上参数为空，则是获取相应值，返回的是数字型。
（2）如果参数是数字，则是修改相应值。
（3）参数可以不必写单位。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jQuery位置</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
padding: 10px;
border: 1px solid #000;
margin: 2px;
}
</style>
<script src="../jquery-3.3.1/jquery-3.3.1.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function () {
// 1.width() height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2.innerWidth() innerHeight() 获取设置元素width和height + padding 大小
console.log($("div").innerWidth());
// 3.outerWidth() outHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4.outerWidth(true) outHeight(true) 获取设置元素 width和height + padding + border + margin 大小
console.log($("div").outerWidth(true));
})
</script>
</body>
</html>
