文章目录
一、基本使用1.jquery入口函数2.$符3.DOM对象和jQuery对象的转换 二、jquery选择器1.基础选择器2.隐式迭代3.筛选选择器4.筛选方法5.排他思想 淘宝服饰案例三、样式操作1.操作css方法2.设置类样式方法 四、效果1.显示隐藏效果2.滑动3.事件切换解决动画排队问题 stop() 4.淡入淡出5.自定义动画 animate 王者荣耀手风琴一、基本使用
1.jquery入口函数
等着页面DOM加载完毕再执行js代码，不必等到所有外部资源加载完成
不同于js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码
2.$符
jQuery的顶级对象、jQuery的别称
获取jQuery对象 (伪数组形式)$('div')
**注：**①jQuery对象只能使用jQuery方法
②DOM对象则使用原生的JavaScript属性和方法
③DOM对象和jQuery对象可以相互转换
3.DOM对象和jQuery对象的转换
（1）DOM对象 => jQuery对象
<video src="xxx.mp4"></video><script>//直接获取视频$('video')//已经使用原生js获取过来的DOM对象var myvideo = document.querySelector('video')$(myvideo)</script>
（2）jQuery对象 => DOM对象
$('div')[index]$('div').get(index)
$('video')[0].play()$('video').get(0).play()j
二、jquery选择器
1.基础选择器
$("选择器")
注：设置样式
$("div").css("属性","值")
2.隐式迭代
把匹配的所有元素内部进行遍历循环，给每个元素添加css这个方法。（不必循环）
$(function(){$(".nav>li").mouseover(function(){$(this).children("ul").show();//this表示当前元素 即li});$(".nav>li").mouseout(function(){$(this).children("ul").hide()})})
3.筛选选择器
4.筛选方法
5.排他思想
$(function(){//隐式迭代，所有按钮绑定点击事件$("button").click(function(){//当前按钮背景颜色改变$(this).css("background","pink")//其余兄弟去掉背景颜色 隐式迭代$(this).siblings().css("background","")})})
链式编程
$(this).css("background","pink").siblings().css("background","")
淘宝服饰案例
实现当鼠标经过某标题时，显示其相关内容。
①核心原理∶鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
②需要得到当前小li的索引号，就可以显示对应索引号的图片
③jQuery得到当前元素索引号$(this).index
④对应的图片，可以通过eq(index)方法去选择
$(function(){$("#left li").mouseover(function(){var index = $(this).index();$("#content div").eq(index).show();$("#content div").eq(index).siblings().hide()})})
三、样式操作
1.操作css方法
（1）参数只写属性名则是返回属性值
$(this).css("color")
（2）修改属性值
$(this).css("color","red")//修改为红色
（3）修改多个属性，采用对象形式
$(this).css({"color":"red","fontSize:"20px"})//属性可不加引号，此时复合属性采用驼峰命名法
2.设置类样式方法
（1）添加类 addClass()
（2）删除类 removeClass()
（3）切换类 toggleClass() 实现添加类和删除类
注：类操作和className的区别
原生JS中className会覆盖原来的类名
jquery里的类操作只是对指定类进行操作，不影响原先类名
四、效果
1.显示隐藏效果
（1）显示
show([speed],[easing],[fn])
speed：slow normal fast 或表示动画时长的毫秒数 （1000）
easing：指定切换效果，默认是swing，可用linear
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
（2）隐藏
hide([speed],[easing],[fn])
（3）切换（一般情况下，不加参数，直接显示隐藏）
toggle([speed],[easing],[fn])
2.滑动
（1）上拉slideUp
（2）下拉slideDown
（3）切换slideToggle
3.事件切换
hover(鼠标经过的函数,鼠标离开的函数)
如果只写一个函数，那么鼠标经过和离开都会触发这个函数
解决动画排队问题 stop()
stop方法必须写在动画前，解决动画排队问题
$(".nav>li").hover(function(){$(this).children("ul").slideDown();},function(){$(this).children("ul").slideUp();})
$(".nav>li").hover(function(){$(this).children("ul").stop().slideToggle();})
4.淡入淡出
（1）淡入
fadeIn([speed],[easing],[fn])
（2）淡出
fadeOut([speed],[easing],[fn])
（3）修改透明度
fadeTo([speed],opacity,[easing],[fn])//opacity取值0-1（必写） speed必写
（3）淡入淡出切换
fadeToggle([speed],[easing],[fn])
5.自定义动画 animate
animate(params,[speed],[easing],[fn])
params：想要修改的样式属性，以对象形式编写，必写
王者荣耀手风琴
当鼠标放在上方出现大图片，移走显示为小图片
分析：当前li宽度224 small隐藏 big显示 其他li宽度69 small显示 big隐藏
$(function(){$(".king li").mouseenter(function(){$(this).stop().animate({width:224},200).find(".small").fadeOut().siblings(".big").fadeIn();$(this).siblings("li").stop().animate({width:69},200).find(".small").fadeIn().siblings(".big").fadeOut();})})
