最重要的:外联JS要放在jQuery引用的下面，否则jQuery将用不了，所以以后定要把jQuery库放在所有外链JS的上面，确保所有外链JS都可以用到jQuery库。
————
先分析一下，原生JS的缺点：
1.不能添加多个入口函数（window.onload）,如果添加多个，后面的会把前面的给覆盖。2.原生JS的API名字都太长太难记。3.原生JS有时候代码冗余。4.原生JS中有些属性或者方法，有浏览器兼容问题。5.原生JS容错率比较低，前面代码出了问题，后面的代码执行不了。
使用jQuery：（先引用jQuery文件）
案例：
$(document).ready(function(){//入口函数
$("#kk").click(function(){//设置边框
$("div").css("border","1px solid red");
});
$("#rr").click(function(){//设置文本
$("div").text("ddd");
});
});
而用了jQuery，入口函数可以写多个，不会被覆盖。$(document).ready(function(){});用了jQuery可以解决上面提到的原生JS的缺点。
jQuery就是一个封装了很多方法的JavaScript库。
如何使用jQuery：
1.先引入jQuery文件
2.写一个入口函数
3.找到要操作的元素（jQuery选择器），去操作它（给它添加属性、样式、文本...）。
$(document).ready(function(){
$("div").width(100).height(100).text("hh").css("backgroundColor","red");//链式编程
});
jQuery的2种写法：
1.$(document).ready(function(){
});
2.$(function(){
});//这种方式常用，匿名函数类型的
jQuery与window.onload的区别：
1.window.onload的入口函数不能写多个，而jQuery的入口函数是可以写多个的。
2.执行时机不同，jQuery的入口函数会最先执行。jQuery入口函数要等待页面上dom树加载完后执行。windo.onload要等待页面上所有的资源（dom树/外部css/JS链接，图片）都加载完毕后执行。
jQuery文件的结构：
（function(){
window.jQuery=window.$=jQuery;
}( )）;//其实是一个自执行函数，一个匿名函数
引入一个js文件，是会执行这js文件中的代码的。jQuery文件是一个自执行函数，执行这个文件中的代码，就是执行这个自执行函数。这个自执行文件就是给window对象添加一个jQuery属性和$属性。
其实$和jQuery是等价的，是一个函数。
console.log(window.jQuery===window.$);//true
$是一个函数，参数传递不同，效果也不一样。
如果参数传递是一个匿名函数--入口函数：
$(function(){});
如果参数传递的是一个字符串--选择器/创建一个标签：
$("#one");
$("<div>dddd</div>");//创建一个div标签
如果参数是一个dom对象，那他就会把dom对象转换成jQuery对象。
$(dom对象);
dom对象和jQuery对象介绍：
dom对象--用原生JS选择器获取到的对象
特点：只能调用dom方法或者属性，不能调用jQuery的属性或者方法。
document.getElementById("");
var a=document.getElementById("one");
a.style.backgeoundColor="red";//dom对象是可以调用dom的属性或者方法
a.css("backgroundColor","red");//报错了，因为dom对象不能调用jQuery的属性或者方法。
jQuery对象---利用jQuery选择器获取到的对象
特点：只能调用jQuery的方法或者属性，不能调用原生JSdom对象的属性或者方法。
var $a=$("#dd");
$a.css("backgroundColor","red");//可用
$a.style.backgroundColor="red";//报错了
dom对象与jQuery对象直接相互转换：
dom对象转换成jQuery----
var a=document.getElementById("one");
var $a=$(a);
console.log($a);//jQuery对象
jQuery对象转换dom对象----
1.使用下标来取出来。
var $dd=$("div");
var dd=$dd[0];
console.log(dd);//dom对象
2.使用jQuery的方法? get（）。
var div=$div.get(1);
cinsole.log(div);//dom对象
@开灯小案例：
设置获取文本内容text：
1.获取文本： text（）方法不给参数
$("#aa").click(function(){
$("#cc").text();
//获取ID为cc标签的文本
//会获取到这个cc标签中所有的文本，包括后代元素的文本，（儿子、孙子...）。
console.log($("#cc").text());
//获取标签为div的元素的文本：包含了多个dom元素的jQuery对象，通过text（）方法获取文本，会把所有dom元素的文本获取到。
console.log($("div").text());//所有div的所有文本获取到。
});
2.设置文本：text（）方法给参数，参数就是要设置的文本
$("#ss").click(function(){
//给id为dd的标签设置文本
//设置后将会覆盖它原来的内容，如果设置的文本中包含标签是不会被解析出来的，全文本设置。
$("#dd").text("kkkkk");
$("#dd").text("kkkkk<a>ddd</a>");//id为dd的标签的文本将变成kkkkk<a>ddd</a>。
//给标签div的元素设置文本，包含了多个dom元素的jQuery对象，通过text（）方法设置文本，会把所有dom元素全部设置上。
$("div").text("kkkk");//所有div的文本全部成为kkkk，后代子孙的文本消失清空。（隐式迭代）
})
设置获取样式css：css（）方法
css操作--功能：设置或者修改样式，操作的是style属性。
//获取样式：css（）方法设置参数为要获取值的样式名。
console.log($("aa").css("width"));//获取宽度
console.log($("aa").css("border"));//获取边框值
console.log($("aa").css("background-color"));//获取背景色
console.log($("aa").css("backgroundColor"));//获取背景色
在IE浏览器中，要获得边框这样的样式值，一定要记得给一个准确的边框。
console.log($("aa").css("border-top-width"));
获取标签为div的元素们的样式：获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式。
console.log($("div").css("width"));//显示第一个div样式的宽度
//设置样式：css（样式名，样式值）；
设置的样式是行内样式。
设置单样式。
$("a").css("width",100);
$("a").css("height","100px");
$("a").css("border","1px solid red");
设置多样式---多样式就是给里面添加一个对象，把所有的样式写进去。
$("a").css({
width:300,//数值不用加引号
height:"300px",
"background-color":"red",
//用驼峰不用加引号
backgroundColor:"red",
"border-top-width":"10px",
border:"1px solid red"
});
给标签为div的元素们设置样式，所有div会全部改变。
$("k").css({
width:"100px",
"background-color":"red",
marginTop:"10px"
});//隐式迭代，把每一个div都设置了同样的样式。
jQuery基本选择器：
ID选择器：$("#id");
类选择器：$(".class");
标签选择器：$("div");
并集选择器（使用逗号分隔，只要符合条件之一就可）：$("div,p,li");//选中div或者p或者li，以及的意思。
交集选择器：$("div.redclass");//获取class为redclass的div元素
jQuery层级选择器：
子代选择器：$("ul>li");//获取儿子层级的元素，但不会获取孙子层级的元素。
console.log($("#father>div"));//获取father下的div们本身。（#father---代表是一个为ID为father的父元素）
后代选择器：$("ul li");//获取ul下的所有li元素，包括孙子等。
以上选择器都跟css的选择器一模一样
jQuery过滤选择器：（这类都带冒号）
:eq(index)
$("li:eq(2)").css("color","red");//获取li中索引为2的元素，索引号从0开始。
:odd
$("li:odd").css("color","red");//获取li元素中，选中索引号为奇数的元素。
:even
$("li:even").css("color","red");//获取li元素中，选中索引号为偶数的元素。
****0也是偶数****
筛选选择器：主要是方法
$("ul").children("li")---相当于$("ul>li")子类选择器
$("ul").find("li");---相当于$("ul li")后代选择器
$("#a").siblings("li");---查找兄弟节点，不包括本身
$("#a").parent();---查找父亲
$("li").eq(2);---相当于$("li:eq(2)"),从索引0开始
$("li").next()--找下一个兄弟
$("li").prev()---找上一个兄弟
show(）方法本质还是display:block;
hide（）方法本质还是display:none;
案例：下拉列表
mouseover事件在鼠标移动到选取的元素及其子元素上时触发。
mouseeenter事件只在鼠标移动到选取的元素上时触发。
以后如果有鼠标移入事件，请使用mouseenter,而不是mouseover.以后鼠标离开事件使用mouseleave,就不要使用mouseout.
高亮特效：
jQuery的鼠标点进的写法是另一种更加简便快捷：
$("ul li").mouseeter(function(){
$(this).css("opacity","1").siblings("li").css("opacity","0.5");
})
案例--手风琴：
jQuery特性：隐式迭代
jQuery特性：链式编程，在于一个方法返回的是一个jQuery对象，既然是jQuery对象就可以继续点出jQuery的方法。
案例---淘宝选择图
$(".div>li:eq(ind)");---不会有效果
----跟下面意思相同。
var a=18;
console.log("a")-----把他当字符串的值了
------解决方法
$(".div>li:eq("+ind+")");-----字符串拼接
$(".div>li").eq(ind);-------可以换另一种写法
jQuery添加类class：addClass(类名);
1. $("#ff").addClass("fclass");
2.$("#ff").addClass("fclass? kss");//同时添加多个类class，用空格间断。
jQuery添加类class：removeClass(类名);
1. $("#ff").removeClass("fclass");
2.$("#ff").removeClass("fclass? kss");//同时移除多个类class，用空格间断。
3.$("#ff").removeClass( );//移除所有类，HTML中那个元素的class为空，all全部没有。
jQuery判断类class：hasClass(类名);
1. $("#ff").hasClass("fclass");//是有返回值的（true、false）。
jQuery切换类：toggleClass(" ");
$("#div").toggleClass("kk");
//如果元素有这个类就移除这个类，如果元素没有这个类就添加这个类。
jQuery动画
show（）；显示
参数1：代表执行动画的时长? 毫秒数。
参数2：代表动画执行完毕后的回调函数。（也就是动画执行完毕后去执行的代码块）
大致理解为，当一个红色方块被隐藏后，用JS的show显示出来，参数是给它加上中间的动画，而相当于是animation动画了，只是从无到显示的动画而已。（隐藏到显示的动画）
$("#div").show(200,function (){
alert("动画执行完毕了....");
}):
hide（）；隐藏
同样的也有2个参数，第一个参数为消退动画的时长，第二个参数为回调函数（也就是动画执行完后要执行的代码块）
toggle（）；切换
如果元素是隐藏状态就动画显示，如果元素是显示状态就动画隐藏。
$("#toggle").clicke(function(){
$("#div").toggle(1000);
});
slideDown（）;滑入
slideDown（）就算没有写参数也是有默认动画的，而它自身也是有2个参数，第一个参数是动画时长，第二个参数是回调函数。
sildeUp（）；滑出
跟滑入是一样的写法。
slideToggle（）；切换
当元素是隐藏状态就滑入，当元素是显示状态就滑出。
后写参数都一样，前为时长，后为回调函数。
fadeIn（）；淡入
同样的不给参数也有默认的动画值效果，而它自身也是有2个参数，第一个参数是动画时长，第二个参数是回调函数。
fadeOut（）；淡出
跟淡出是一样的写法。
fadeToggle（）；切换
当元素是隐藏状态就淡入，当元素是显示状态就淡出。
后写参数都一样，前为时长，后为回调函数。
fadeTo（）；淡入到哪里/哪个程度
有2个参数，第一个同样是动画时长，第二个是淡入的数值（0~1）
$(".div").fadeTo(1000,0.5);
到最后都是值停在透明度0.5的样子。亦是停留在哪个透明度的值。
自定义动画
自定义动画：animate（）；
参数1：必选的，（对象）代表的是需要做动画的属性。
参数2：可选的，代表执行动画的时长。
参数3：可选的 easing代表是缓动还是匀速的，linear（匀速）swing（缓动）默认为缓动。
参数4：动画执行完毕后的回调函数。
例如:1：
$(".div").animate({
top:200px,
height:50px,
opacity:0.5
},2000,"linear",function(){
alert("kkk");
});
------------------------------------------
例如2：
$(".div").animate({
top:200px,
height:50px,
opacity:0.5
},2000,"linear",function(){
//既然是函数就可以写任意代码，那还可以再写动画
$(".div").animate({
top:30px,
width:4opx
},1000,function(){
//当然这里还可以继续这样
});
});
!!!!!顺其自然
