jQuery是一个快速，简洁的js库；它的官方地址：https://query.com
特点：隐式迭代、链式编程
（隐式迭代：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作， 方便我们调用）
入口函数
$(function(){ })
作用：1.等待页面加载完毕在执行 2.有一个独立的作用域
jquery和javascript两者入口函数的区别：原生js的入口函数里面的代码：页面加载完毕（引入的资源，dom的渲染，图片等等）；jq的入口函数里面的代码：dom节点加载完毕。
基本使用
顶级对象$
是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用包装成jQuery对象，就可以调用jQuery 的方法
jq对象和dom对象
jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）
dom对象只能使用原生js方法，jq对象只能使用jq方法
两者相互转换：
- dom对象转换jquery对象：$(DOM对象)
- jquery对象转换dom对象：$('div')[index]、$('div').get[index]
<body>
<button>点击出现方块</button>
<div> </div>
<div> </div>
<script>
//jq对象和dom对象
var a = document.querySelector('div');
var b = $('div');
console.log(a); // <div></div>
console.log(b); // jQuery.fn.init [div, prevObject: jQuery.fn.init(1)]
//两者相互转换
console.log($(a)); //jQuery.fn.init [div]
console.log($(b)[0]); //<div></div>
</script>
</body>添加样式
数值类型可以省略单位，默认为px；连字符和驼峰命名都可以。
常用API
选择器
$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号
$('#id')==》指定id元素
$('*')==》所有元素
$('.class')==》指定class元素
$('div')==》根据标签获取元素
$('div,p,li')==》获取多个
$('li.class')==>交集获取
$('ul>li')==>子代
$('ul li')==>后代
筛选选择器
$('li:first')
：第一个元素
$('li:last')
：最后一个元素
$('li:eq(2)')==
》索引为
2
【查找指定索引的元素】
$('li:odd')==
》索引为奇数
$('li:even')==
》索引为偶数
筛选方法
$('li').parent()
父级
$('ul').children('li');
子集【如果不加参数，获取所有的，如果添加指定的元素，按照指定的找】
$('ul').find('li')
后代
$('li').siblings('li')
兄弟
$('li').nextAll();
后面的
$('li').prevAll();
前面的
判断是否具有某个类名：
$('div').hasClass('aaa')
$('div').eq(index);
指定索引方法【
eq
推荐用方法】
<body>
<div class="a" id="AA">
class="a" id="AA"
</div>
<ul>
<li>hahhahhahahhah</li>
</ul>
<span>span</span>
<ul>
<li>00000</li>
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li class="a">55555</li>
<li>66666</li>
<li>77777</li>
<li>88888</li>
<span>你好你好哦</span>
</ul>
<script>
获取选择器
console.log($('div'));//jQuery.fn.init [div#AA.a, prevObject: jQuery.fn.init(1)]
console.log($('#AA'));//jQuery.fn.init [div#AA.a]
console.log($('ul>li')); //jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
console.log($('.a,span'));//jQuery.fn.init(2) [div#AA.a, span, prevObject: jQuery.fn.init(1)]
筛选选择器
$(function(){
console.log($('li:first')); //第一个
console.log($('li:last')); //最后一个
console.log($('li:eq(2)')); //索引为2的
console.log($('li:odd')); //索引为奇数的
console.log($('li:even'));//索引为偶数的
})
//筛选方法
$(function(){
console.log($('li').parent());//jQuery.fn.init [ul, prevObject: jQuery.fn.init(9)]
console.log($('ul').children());//jQuery.fn.init(10) [li, li, li, li, li, li.a, li, li, li, span, prevObject: jQuery.fn.init(1)]
console.log($('ul').find('li'));//jQuery.fn.init(9) [li, li, li, li, li, li.a, li, li, li, prevObject: jQuery.fn.init(1)]
console.log($('.a').siblings());//jQuery.fn.init(9) [li, li, li, li, li, li, li, li, span, prevObject: jQuery.fn.init(1)]
console.log($('.a').nextAll().css('color','pink'));//jQuery.fn.init(4) [li, li, li, span, prevObject: jQuery.fn.init(1)]
console.log($('.a').prevAll().css('color','green'));//jQuery.fn.init(5) [li, li, li, li, li, prevObject: jQuery.fn.init(1)]
//判断是否具有某个类名
console.log($('li').hasClass('a')); //true
//
console.log($('li').eq());//jq
console.log($('li:eq(5)'));//jq
console.log($('li').get(5));//dom
console.log($('li')[2]);//dom
})
</script>
</body>样式操作
操作css方法：
$(this).css(''color''); 参数只写属性名，则是返回属性值
$(this).css(''color'', ''red''); 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css({ "color":"white","font-size":"20px"}); 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
设置类样式方法
添加类 $(“div”).addClass("current");
移除类 $(“div”).removeClass("current");
切换类
$
(
“div”
).
toggleClass
(
"current"
);
效果
显示隐藏效果
show
([
speed
,[
easing
],[
fn
]]）
hide
([
speed
,[
easing
],[
fn
]])
toggle
([
speed
,[
easing
],[
fn
]])
参数：
（1）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(如：1000)。
（2）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（3）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
滑动效果
slideDown([speed,[easing],[fn]])
slideUp([speed,[easing],[fn]])
slideToggle([speed,[easing],[fn]])
参数：
（1）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(如：1000)。
（2）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（3）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
事件切换
hover([over,]out)
-------
鼠标经过和移开
参数：
（1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移出元素要触发的函数（相当于mouseleave）
（3）如果只写一个函数，则鼠标经过和离开都会触发它
动画队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止排队：stop()
(1)stop() 方法用于停止动画或效果。
(2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画
//显示隐藏效果
$(function () {
$('button').click(function(){
$('div').toggle(2000,function(){
alert('动画执行完毕')
})
})
//滑动效果
$('button').click(function () {
$('div').slideToggle(6000, function () {
console.log('1111111111');
})
})
//事件切换
$('div').hover(
function () {
console.log('鼠标移入');
}, function () {
console.log('鼠标移出');
})淡入淡出
fadeIn([speed,[easing],[fn]])
fadeOut([speed,[easing],[fn]])
fadeToggle([speed,[easing],[fn]])
fadeTo([[speed],opacity,[easing],[fn]]) (fadeTo
必须写两个参数，
speed
和opacity，修改透明度 参数
0-1 )
参数：
（1）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(如：1000)。
（2）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（3）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
自定义动画
animate(params,[speed],[easing],[fn])
参数：
（1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性
则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
（2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值
(如：1000)。
（3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
（4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
132
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
