一、jQuery是什么？
1.jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多JavaScript高手加入其team
2.jQuery是继prototype之后有一个优秀的JavaScript框架。其宗旨是——WRITE LESS.DO MORE!
3.它是轻量级的js库（压缩后只有21k），这是其他的js库所不及的，它兼容CSS3，还兼容各种浏览器
4.jQuery是一个快速的，简洁的JavaScript库，使用户能更方便地处理HTMLdocuments、event、实现动画效果，并且方便地为网站提供AJAX交互。
5.jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用说得很详细，同时还有许多成熟的插件可供选择。
二、什么是jQuery对象？
jQuery对象就是通过包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象是jQuery对象。那么它就可以使用jQuery里的方法：
$("#p1") -------> jQuery对象
var ele=document.getElementById("p1") ele------>DOM对象
jQuery与DOM对象下的方法和属性不能混用
jquery对象：
jQuery.方法====$.方法
基础语法：$（selector）.action（）
selector：查找想操作的标签
三、寻找元素（选择器和筛选器）
3.1：选择器
1 基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
2 层级选择器
$(".outer div")：后代选择器
$(".outer>div")：子代选择器
$(".outer+div")：毗邻选择器
$(".outer~div")：普通兄弟选择器
3 基本筛选器
$("li:last")：最后一个 $("li:first")：第一个
$("li:eq(2)")：索引为2
$("li:odd")：奇数 $("li:even")：偶数
$("li:gt(1)")：大于 $("li:lt(5)")：小于
4 属性选择器
$('[][id]')：alex属性为sb并且有id属性
5 表单选择器
$("[type='text']")
简写：$(":text") 注意只适用于input标签 :$("input:checked")
3.2：筛选器
3.2.1：过滤筛选器
$("li").eq(2)：推荐写法
$("li").first()：第一个
$("li").last()：最后一个
$("ul li").hasclass("test")：有class的值是test
3.2.2：查找筛选器
1.查找子标签：
$("div").children(".test")：所有子代中的.test标签
$("div").find(".test")：所有后代中的.test标签
2.向下查找兄弟标签：
$(".test").next():下一个兄弟标签
$(".test").nextAll()：找到下面所有的兄弟标签
$(".test").nextUntil(条件)：直到条件成立停止，同样顾头不顾尾，最后一个取不到
3.向上查找兄弟标签：
$("div").prev()：上一个兄弟标签
$("div").prevAll()：找到上面所有的兄弟标签
$("div").prevUntil(条件)：直到条件成立停止，顾头不顾尾
4.查找所有兄弟标签：
$("div").siblings()
5.查找父标签：
$(".test").parent()：找父标签
$(".test").parents()：找多个父标签，父标签的父标签也是父标签，一直找到body层
$(".test").parentUntil(条件)：找所有的父标签直到条件成立停止，顾头不顾尾
注意：jQuery支持链式操作，比如：
$("#d1").next().css("color","red").next().css("color","green");
四、操作元素（属性，css，文档处理）
4.1：事件
4.1.1：页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
写法：
$(document).read(function(){
// 在这里写你的JS代码...
})
简写：
$(function(){
// 你在这里写你的代码
})
4.1.2：事件绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
4.1.3：事件委派（父标签把方法委派给子标签）
on方法：事件绑定不再给指定的标签绑定，而是绑定给父标签
语法：$("父级标签").on(eve,[selector],[data],fn)
// 在选择元素上绑定一个或多个事件的事件处理函数。
off：解除事件（绑定谁解除谁）
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
4.2：属性操作
--------------------------CSS类
$("").addClass(class名)：添加类
$("").removeClass([class名])：删除类
--------------------------属性
$("").attr();：
$("").attr("属性")：取值
$("").attr(“属性”，“值”)：赋值
$("").removeAttr();：删除属性
$("").prop()：用于checked、selected属性
$("").prop("属性")：取值
$("").prop(“属性”，“值”)：赋值
$("").removeProp();
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("#c1").css({"color":"red","fontSize":"35px"})
4.3：each循环
jQuery支持两种循环方式，方式一（类下的方法）：
格式：$each（obj，callback）
li=[10,20,30,40];
$.each(li,function(i,x){
console.log(i,x)
});
在这里i是索引，x是值
方式二（实例下的方法）：
格式：$("").each(fn)
$("tr").each(function(){
console.log($(this).html())
})
在这里,$(this)代指当前循环标签。
扩展
li=[11,22,33,44];
$.each(li,function(i,v){
if (v==33){
return ;
}
console.log(v)
});
//each的参数function内如果出现return 结束档次循环，类似于continue；
如果出现return false，结束的是整个each循环，类似break。
//结果是11,22,44；因为这里每次循环都执行一个函数，当v==33的时候只是结束了一次函数
4.4：文档节点处理
//创建一个标签对象，用变量名拿对象时要加$，表示这是一个jquery对象 $("<p>") //内部插入 $("").append(content|fn)：追加到最后一个位置 ----->$("p").append("<b>Hello</b>"); $("").appendTo(content)：子标签添加到父标签里面的最后 ----->$("p").appendTo("div"); $("").prepend(content|fn)：添加到第一个位置 ----->$("p").prepend("<b>Hello</b>"); $("").prependTo(content)：子标签添加到父标签里面的首尾 ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn)：添加兄弟标签到后面 ----->$("p").after("<b>Hello</b>"); $("").before(content|fn)：添加兄弟标签到前面 ----->$("p").before("<b>Hello</b>"); $("").insertAfter(content)：标签添加到某个兄弟标签的后面 ----->$("p").insertAfter("#foo"); $("").insertBefore(content)：标签添加到某个兄弟标签的前面 ----->$("p").insertBefore("#foo"); //替换 $("").replaceWith(content|fn)：直接oldnode替换成newnode ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty()：清空节点内容 $("").remove([expr])：删除节点（删谁谁调用） //复制 $("").clone([Even[,deepEven]])
4.5：动画效果
1.基本
.show([speed, [easing], [fn]])：显示 //显示隐藏的匹配元素。 .hide([speed, [easing], [fn]])：隐藏 //隐藏显示的匹配元素。 .toggle([speed], [easing], [fn]) //如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 参数介绍： speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 easing:(Optional) 用来指定切换效果，默认是”swing”，可用参数”linear”。 fn:在动画完成时执行的函数，每个元素执行一次。
2.滑动
.slideDown([speed, [easing], [fn]])：显示 //通过高度变化（向下增大）来动态地显示所有匹配的元素。 .slideUp([speed, [easing], [fn]])：隐藏 //通过高度变化（向下减小）来动态地隐藏所有匹配的元素。 .slideToggle([speed, [easing], [fn]]) //通过高度变化来切换所有匹配元素的可见性。 参数同上
3.淡入淡出
.fadeIn([speed, [easing], [fn]])：显示 //通过不透明度的变化来实现所有匹配元素的淡入效果。 .fadeOut([speed, [easing], [fn]])：隐藏 //通过不透明度的变化来实现所有匹配元素的淡出效果。 .fadeTo([speed, [easing], [fn]]) //把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。 .fadeToggle([speed, [easing], [fn]]) //通过不透明度的变化来切换所有匹配元素的淡入和淡出效果。
<!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">
<title>图片轮播</title>
<style>
*{
margin: 0;
padding: 0;
}
.image_carousel{
position: relative;
left: 0;
top:0;
/*border: 1px solid;*/
width: 790px;
height: 340px;
margin: 138px auto;
overflow: hidden;
}
.image_list li{
list-style: none;
position: absolute;
left: 0;
top:0;
}
.cut_button{
position: absolute;
/*z-index: 1;*/
left: 37%;
bottom: 22px;
width: 194px;
height: 12px;
background-color: hsla(0,0%,100%,.3);
padding: 5px 10px;
border-radius: 12px;
line-height: 12px;
text-align: center;
}
.cut_button_list li{
display:inline-block;
width: 12px;
height: 12px;
background-color: #fff;
list-style: none;
margin-left: 4px;
margin-right: 4px;
border-radius: 100%;
}
.cut_button_list li:hover{
background-color: #db192a;
}
.btn a{
font-size: 25px;
color: white;
position: absolute;
bottom: 141px;
width: 30px;
height: 60px;
background-color: RGBA(0,0,0,0.3);
line-height: 60px;
text-align: center;
text-decoration: none;
}
.last a{
left: 0;
}
.next a{
right: 0;
}
a:hover{
background-color: RGBA(0,0,0,0.7);
}
</style>
</head>
<body>
<div class="image_carousel">
<div class="image">
<ul class="image_list">
<li class="img"><a href=""><img ></a></li>
<li class="img"><a href=""><img ></a></li>
<li class="img"><a href=""><img ></a></li>
<li class="img"><a href=""><img ></a></li>
<li class="img"><a href=""><img ></a></li>
<li class="img"><a href=""><img ></a></li>
<li class="img"><a href=""><img ></a></li>
<li class="img"><a href=""><img ></a></li>
</ul>
</div>
<div class="cut_button">
<ul class="cut_button_list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="last btn"><a> < </a></div>
<div class="next btn"><a> > </a></div>
</div>
<script src="jquery-3.2.1.js"></script>
<script>
var x=0; //定义全局变量用来标识两轮播图位置
//轮播图切换函数
function cut_img() {
$(".cut_button_list li").eq(x).css("background-color","#db192a").siblings().css("background-color","#fff");
$(".image_list li").eq(x).fadeIn(1000).siblings().fadeOut(1000);
}
//自动切换图片函数
function auto_cut_img() {
if (x!==$(".img").length-1){
x++;
}
else {
x=0;
}
cut_img()
}
var ID;
cut_img();
ID=setInterval(auto_cut_img,2000); //启动定时器
$(".cut_button_list li").mouseover(function () {
x=$(this).index();
cut_img()
});
$(".image_carousel").hover(function () {
clearInterval(ID);
},function () {
ID=setInterval(auto_cut_img,2000);
});
//上一张图按钮
$(".last").click(function () {
if (x!==0){
x--;
}
else {
x=$(".img").length-1;
}
cut_img()
});
//下一张图按钮
$(".next").click(function () {
auto_cut_img()
})
</script>
</body>
</html>