文章目录
一、基本使用
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.基础选择器
$("选择器")
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $("#id") | 获取指定ID的元素 |
全选选择器 | $(*) | 匹配所有元素 |
类选择器 | $(".class") | 获取同一类class的元素 |
标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”) | 选取多个元素 |
交集选择器 | $(“li.current”) | 交集元素 |
注: 设置样式
$("div").css("属性","值")
2.隐式迭代
把匹配的所有元素内部进行遍历循环,给每个元素添加css这个方法。(不必循环)
$(function(){
$(".nav>li").mouseover(function(){
$(this).children("ul").show(); //this表示当前元素 即li
});
$(".nav>li").mouseout(function(){
$(this).children("ul").hide()
})
})
3.筛选选择器
语法 | 用法 | 描述 |
---|---|---|
:first | $("lifirst’) | 获取第一个li元素 |
:last | $("lilast’) | 获取最后一个li元素 |
:eq(index) | $(“li:eq(2)”) | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始。 |
:odd | $("“li:odd”) | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“Ii:even”) | 获取到的li元素中,选择索引号为偶数的元素 |
4.筛选方法
语法 | 用法 | 说明 |
---|---|---|
parent() | $("“li”).parent() | 查找父级 |
children(selector) | $(“ul”).children(“li”) | 相当于$("ul>li") ,最近一级(亲儿子) |
find(selector) | $(“ul”).find(“li”); | 相当于$("ul li") ,后代选择器 |
siblings(selector) | $(".first").siblings(“li”) | 查找兄弟节点,不包括自己本身 |
nextAll( [expr]) | $(".first" ) .nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAl1([expr]) | $(".last" ).prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $( ’ div’ ).hasClass(“protected”) | 检查当前的元素是否含有某个特定的类,如果有,则返回true |
eq(index) | $(“li”).eq(2) | 相当于$("li:eq(2)") ,index从0开始 |
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();
})
})