JQuery简介
jQuery是一个快速、小型的、特性很多的JS库，它把很多事儿都变得简单。jQuery是免费的、开源的。
jQuery有3条版本线：1.X、2.X、3.X。
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8.
jQuery2.X和1.X的功能完全一致，API完全一致，但是2.X不兼容IE6、7、8。
JQuery常用方法
选择器
$("#id")
$(".class")
$("p")
$("*")
// $ 是1个函数
// $("p") 是1个函数调用
// 返回的结果 jQuery 的内部【对象】
// 所有的p元素
// css 是设置样式
// {"color": "red"} 是 css 的参数
$("p").css({color: "red"});
<p id="p1" class="c1"> p1 </p>
$("#p1").css("color", "red");
<div class="div2"> div2
<p class="p2">
哈哈
</p>
</div>
<script>
$(".div2 .p2").css("color", "red");
</script>
完成加载
// 代表在 DOM元素都加载完成之后，执行
// $(document).ready(function() {
// $("div").css("color", "red");
// })
$(function() {
$("div").css("color", "red");
})
// 代表 DOM元素、图片资源都加载完成
// $(window).ready(function() {
// $("div").css("color", "red");
// })
// window.onload = function() {
// $("div").css("color", "red");
// }
元素CSS属性获取
<div id="div1" class="c1" style="width: 100px; height: 100px;background: red;">
</div>
<div id="div1" class="c1" style="width: 200px; height: 100px;background: red;">
</div>
// DOM加载完成之后
$(function() {
// css 函数； 这里返回值就是宽度值
// $(".c1") 是 jQuery 的对象
var a = $(".c1").css("background");
console.log( a );
// a = $(".c1").style.width;
// 不可以 $(".c1") 不是1个原生js对象
// oDiv 是1个原生的js对象
// var oDiv = document.getElementById("div1");
// console.log(a);
})
动画方法
引入jQuery的插件，支持动画效果
【注意】 所有的 jQuery插件必须在 引入jQuery 之后引入
1$("div:odd").animate(json,1000,function(){
2 $(this).css("background-color","red")
});
jQuery中提供了非常牛逼的动画队列功能，相同元素的animate()方法会累积
1$("div").animate({"width":600},1000);
2$("div").animate({"height":200},1000);
不同元素的动画是同时进行的
1$("div:eq(0)").animate({"width":600},1000);
2$("div:eq(1)").animate({"height":600},1000);
JQuery中的插件
滚动事件
// onscroll 原生中的滚动事件
// scroll 是页面滚动事件
$(document).scroll(function() {
// 2. jquery 获取滚动条的高度
var iTop = $("body").scrollTop();
console.log(iTop);
// 获取滚动条的高度
// 1. 原生方法
// var iTop = document.body.scrollTop; // Firefox
// var iTop = document.documentElement.scrollTop; // IE
//
// iTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
//
// console.log(iTop)
})
// 事件名 不需要添加 on前缀
$("#div1").click(function() {
console.log("点击了物体1")
})
mouseenter mouseover 都是移入的事件
不会事件冒泡 会事件冒泡
$("#div1").mouseenter(function() {
console.log("移入了物体1")
})
eq()方法
来看下面的结构，两个div中各自有4个p，让其中一个p变红：
1 <div class="box1">
2 <p></p>
3 <p class="teshu"></p>
4 <p class="teshu"></p>
5 <p></p>
6 </div>
7 <div class="box2">
8 <p class="teshu"></p>
9 <p class="teshu">我想红！我想当明星！</p>
10 <p></p>
11 <p></p>
</div>
选择box2里面的1号下标的p：
1$(".box2 p").eq(1)
2$("p").eq(5)
3$(".teshu").eq(3)
$(".box2 .teshu").eq(1)
each()
each()表示遍历节点，也叫作迭代符合条件的节点。
each()语句就好比派出一个侦察兵，挨家挨户去敲门，敲开门之后做什么事情，写在function(){}里面，这里面的$(this)表示敲开门的这家。
1$("p").each(function(i){
2 $(this).animate({"width":50 * i},1000);
});
index()方法
$(this).index()是一个很常见的写法，表示触发这个事件的元素，在自己亲兄弟中的排名：
1$(".teshu").click(function(){
2 alert($(this).index());
})
点击box1里面的p，让对应的box2里面的p变红：
1//事件监听要给box1中的所有p标签，
2$(".box1 p").click(function(){
3 //有变化的是box2中对应的p
4 $(".box2 p").eq($(this).index()).css("background-color","red");
});
get()方法
get()方法和eq()方法基本一致，都仰赖$()的序列。
eq()返回的是jQuery对象，而get()返回的是原生JS对象。jQuery对象后面要跟着jQuery方法，原生对象后面要跟着原生属性、方法：
1$("p").eq(2).html("哈哈哈哈哈哈");
等价于：
1$("p").get(2).innerHTML = "哈哈哈哈哈哈";
等价于：
1$("p").eq(2)[0].innerHTML = "哈哈哈哈哈哈";
动画相关方法
内置show()、hide()、toggle()方法
1$("div").show(); //让一个本身是display:none;元素显示
2$("div").hide(); //隐藏元素display:none;
3$("div").toggle(); //切换显示状态。
//自行带有判断，如果可见，就隐藏；否则显示。
slideDown()、slideUp()、slideToggle()方法
slideDown : 下滑展开
slideUp：上滑收回
slideToggle : 滑动切换
fadeIn()、fadeOut()、fadeTo()、fadeToggle()方法
fadeIn()淡入
fadeOut()淡出
fadeTo() 淡到那个数
fadeToggle() 淡出入切换
stop()
停止当前的animate动画，但是不清除队列，立即执行后面的animate动画：
$("div").stop(); //等价于$(“div”).stop(false,false);
停止当前的animate动画，并且清除队列，盒子留在了此时的位置：
$("div").stop(true); //等价于$(“div”).stop(true,false);
瞬间完成当前的animate动画，并且清除队列：
$("div").stop(true,true);
瞬间完成当前的animate动画，但是不清楚队列，立即执行后面的动画：
$("div").stop(false,true);
公式：
stop(是否清除队列,是否瞬间完成当前动画)
如果没有写true或者false，默认是false
