jQuery概述
JavaScript：即library，是一个封装好的特定的集合（方法和函数），从凤凰一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show,比如获取元素等；简单理解：就是一个JS文件，里面对我们原生JS代码进行了封装，存放在前面，这样我们可以快速高效的使用这些封装好的功能。
常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext.JS、移动端的zepto;
1.2jQuery的优点：
1.轻量级，核心文件只有几十KB，不会影响页面加载速度；
2、跨浏览器兼容，基本兼容了现在主流的浏览器；
3.链式编程，隐式迭代；
4、对事件、样式、动画支持、有着丰富的第三方的插件、例如：树形菜单、日期控件、轮播图等；
5、免费，开源；
2.3jQuery的入口函数
1、$(function(){
...//此处是页面DOM加载完成的入口；
});
2、$(document).ready(function(){
...//此处是页面DOM加载完成的入口；
});
2.4jQuery的顶级对象$
1、;
2、包装成jQuery对象，就可以调用jQuery的方法；
2.5jQuery对象和DOM对象
1、用原生JS获取来的就是DOM对象
var myDiv =document.querySelector('div');
console.dir(myDiv);
2、jQuery对象，用jQuery方式获取过来的对象是jQUery对象，本质上通过$符号把DOM对象进行了封装；
$('div');
console.dir($('div'));
2-1、jQuery对象本质上是：利用$对DOM对象包装后产生的对象（伪数组）
3、jQuery对象只能使用jQuery方法，DOM对象则使用原生的JS属性和方法；
jQuery对象和DOM对象是可以相互转化的
因为原生的JS比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，想要使用这些属性和方法需要jQuery对象转化为DOM对象才能使用；
1、DOM对象转化为jQuery对象：$(DOM对象)
<script>
$('video');
var myvideo = document.querySelector('video');
$(myvideo);
</script>
2、jQuery对象转化为DOM对象；
<script>
$('div')[index] index是索引号
$('div').get(index) index是索引号
</script>
jQuery选择器
1.1 jQuery基础选择器
原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了很多的封装，使获取元素统一了标准；
1.3隐式迭代（重要）
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代；
简单理解：给匹配的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们的调用。
1.4 jQuery筛选选择器
1.5jQuery筛选方法（重点）
1.5链式编程
链式编程是为了节省代码量，看起来更优雅
<script>
$(this).('color','red').siblings().css('color','');
</script>
2.jQuery样式操作
2.1操作css方法
jQuery可以使用css方法来修饰简单元素样式，也可以操作类，修改多个样式。
1、参数只写属性名，则是返回属性值
<script>
$(this).css('color');
</script>
2.参数是属性名、属性值、逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。
<script>
$(this).css('color','red');
</script>
3、参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用添加引号；
<script>
$(this).caa({
'color':"white",
'font-size':'20px'
});
</script>
2.2设置类样式方法
作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不要加.;
1、添加类
<script>
$('div').addClass('current');
</script>
2、移除类
<script>
$('div').removeClass('current');
</script>
3、切换类
<script>
$('div').toggleClass('current');
</script>
2.3类操作与className区别
原生JS中className会覆盖元素原先里面的类名
var one = document.querySelector(".one");
one.className = 'tow';
jQuery里面类操作只是对指定类进行操作，不影响原先的类名；
$('.one').addClass('two'); addClass不影响原先的类
$('.one').removeClass('two');
3、jQuery效果
常见如下：
显示与隐藏 滑动 淡入淡出 自定义动画
show() slideDown() fadeIn() animate()
hide() slideUp() fadeOut()
toggle() slideToggle() fadeTo()
2、显示参数
（1）参数都可以省略，无动画直接显示
（2）speed：三种预定速度之一的字符串（“show","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">
<title>显示与隐藏</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$(".button").eq(0).click(function(){
$('div').show(1000)
});
$(".button").eq(1).click(function(){
$('div').hide(1000)
});
$(".button").eq(2).click(function(){
$('div').toggle(1000)
});
// 一般情况下，我们都不加参数直接显示或者隐藏
});
</script>
</head>
<body>
<input type="button" class="button" value="显示">
<input type="button" class="button" value="隐藏">
<input type="button" class="button" value="切换">
<div></div>
</body>
</html>
jQuery鼠标滑动下拉菜单效果
1、
$(".nav>li").mouseover(function(){
$(this).children("ul").sildeUp(200);
});
$(".nav>li").mouseout(function(){
$(this).children("ul").sildeDown(200);
});
2、
$(".nav>li").hover(function(){
$(this).children("ul").sildeUp(200);
},function(){
$(this).children("ul").sildeDown(200);
})
3、
$(".nav>li").hover(
$(this).children("ul").sildeToggle(200);
);
3.4动画队列以及停止排队方法
1、动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队；
2.停止排队
stop()
(1)stop()方法用于停止动画或者效果；
$('.nav>li').hover(function(){
//注意stop()必须写在动画的前面
$(this).children('ul').stop().slideToggle(500);
})
(2)注意：stop()写到动画或者效果的前面，相当于停止结束上一次动画；
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
console.log($(".wrap"));
// $("body").css("backgroundColor","#000000");
$(".wrap li").hover(
function(){
//如果使用fadeTo();则必须加上毫秒数，透明度参数
$(this).siblings().stop().fadeTo(400,.5);
},
function(){
$(this).siblings().stop().fadeTo(400,1);
}
)
});
</script>
3、jQuery效果
3.6自定义动画animate
1、语法animate(params, [speed], [easing] , [fn])
2、参数
（1）params想要更改的样式属性，以对象形式传递，必须写，属性名也可以不用带引号，如果是复合属性则需要取驼峰命名法borderLeft，其余参数都可以省略；
（2）speed：三种预定速度之一的字符串（‘slow’,'normal','fast'）；
（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">
<title>自定义动画</title>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("div").animate({
left:500,
top:200,
opacity:.4
},200)
});
});
</script>
</head>
<body>
<button>移动</button>
<div></div>
</body>
</html>
5、jQuery属性操作
5.1设置或获取元素固有属性值prop();
所谓元素固有属性就是元素本身自带的属性，比如元素里面的href，比如元素里面的type;
1、获取属性语法 prop("属性")
2、设置属性语法prop("属性","属性值")
5.2设置或获取元素自定义属性值attr()
用户自己给元素添加的属性，我们称为自定义属性，比如给div添加index = "1";
1、获取属性语法
attr("属性")
2、设置属性语法
attr("属性","属性值");
该方法也可以获取H5自定义属性
5.3数据缓存data（）
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一单页面刷新，之前存放的数据都将被清除。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>属性操作</title>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
console.log($("div").prop("title","我们都挺好"));
$("input").change(function(){
console.log($(this).prop("checked"));
});
$("div").attr('index',4);
console.log($("div").attr('index'));
console.log($("div").attr('data-index'));
$("span").data("username","andy");
console.log($("span").data("username"));
console.log($("span").data("index"));
});
</script>
</head>
<body>
<div title="都挺好" index="1" data-index = "网面">
123
</div>
<label for="lq">篮球</label><input type="checkbox" name="" id="">
<span data-index="王小明">123</span>
<p></p>
</body>
</html>
jQuery获取内容文本值
<html>
<body>
<div>
<span>我是span</span>
</div>
<input type='text' value='请输入内容' />
</body>
<script>
1、获取设置元素内容 html() 等价于原生JS中的innerHTML;
console.log($("div").html());
//输出结果
//<span>我是span</span>
2、获取设置元素文本内容 text() 等价于原生JS中的innerText();
console.log($("div").text(123));
//输出结果 123
3、获取设置表单值 val() 等价于原生JS中的value();
console.log($("input").val(123));
//输出结果 123
</script>
</html>
购物车计算价格案例
<div class="cart">
<div class="price">￥12.8</div>
<button class="decrement">-</button>
<input type="text" name="" id="" class="itxt">
<button class="increment">+</button>
<div class="count">合计￥</div>
</div>
<script>
$(function(){
$(".increment").click(function(){
var n =$(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
var p = $(this).siblings(".price").html();
// console.log(p.substr(1));
p = p.substr(1);
$(".count").html("￥" + (n * p).toFixed(2));
})
$(".decrement").click(function(){
var n = $(this).siblings(".itxt").val();
if(n == 0){
return false;
}
n--;
var p = $(this).siblings(".price").html();
// console.log(p.substr(1));
p = p.substr(1);
$(".count").html("￥" + (n * p));
$(this).siblings(".itxt").val(n);
})
})
</script>
6、jQuery元素操作
主要是遍历、创建、添加、删除元素操作；
6.1jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类做不同的操作，就需要对元素进行遍历。
语法1：$("div").each(function (index,domEle) {(}XXX;});
$(function(){
// $("div").each(function(index,domEle){
// console.log(index);
// // domEle为DOM对象
// console.log(domEle);
// $(domEle).css("color",arr[index]);
// sum += parseInt($(domEle).text());
// console.log(sum);
// });
}
1.each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个；
2.里面的回调函数有2个参数：index是每一个元素的索引号，domEle是每一个DOM元素对象，不是jQuery对象；
3.所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象$(domEle).
语法2.遍历元素
$.each($("div"),function(index,domEle){
$(domEle).css("color",arr[index]);
sum += parseInt($(domEle).text());
console.log(sum);
});
- $.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象；
- 里面的函数有2个参数：index是每一个元素的索引号，element遍历内容。
<script>
var arr = ["red","blue","green"]
$.each(arr,function(i,ele){
console.log(i);
console.log(ele);
});
//等价于for in
</script>
