目录
扫描二维码关注公众号，回复：
14250159 查看本文章
jQuery 选择器
jQuery 基础选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号
$('.nav')jQuery 层级选择器
$('ul li')jQuery 设置样式
$('div').css('属性', '值')
$('div').css('backgroundColor', 'pink');
隐式迭代（重要）
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
这里就是隐式迭代给四个div设置背景颜色和字体颜色
jQuery 筛选选择器
odd和even 选择的是索引号为奇数或者偶数的元素！！！
<script>
$(function () {
$('ul li:first').css('color', 'red'); // ul里面的第一个小li
$('ul li:eq(2)').css('color', 'blue'); // ul里面的第三个小li
$('ol li:odd').css('color', 'skyblue'); // 索引号是奇数行的
$('ol li:even').css('color', 'pink'); // 索引号是偶数行的
})
</script>
jQuery 筛选方法（重点）
- 这些是函数，不要忘记最后加（）！！！
- 这些是站在 父 子 兄 的角度来查找元素
重点记住： parent() children() find() siblings() eq()
<script>
$(function () {
// 1. 父 parent() // 返回的是 最近一级的父级元素 亲爸爸
$('.son').parent();
console.log($('.son').parent()); // father
// 2. 子
// (1) 只选亲儿子 children() 相当于子代选择器 ul>li
$('.nav').children('p').css('color', 'red');
// (2) 可以选里面所有的儿子，包括儿子和孙子 类似于后代选择器 ul li
$('.nav').find('p').css('backgroundColor', 'skyblue');
})
</script>
<script>
// 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
$('ol .item').siblings('li').css('color', 'red');
// 2. 第n个元素
// (1)我们可以利用选择器的方式选择
$('ul li:eq(2)').css('backgroundColor', 'skyblue');
// (2) 利用 选择方法 来选择 更推荐这种选法
$('ul li').eq(1).css('background', 'pink');
// 3. 判断是否有某个类名
console.log($('div:first').hasClass('current')); // true
console.log($('div:last').hasClass('current')); // false
</script>
- $(this) jQuery的当前元素 this不要加引号
- show () 显示元素 hide()隐藏元素
<script> $(function () { // 鼠标经过 $('.nav>li').mouseover(function () { // $(this) jQuery的当前元素 this不要加引号 // show () 显示元素 hide()隐藏元素 $(this).children('ul').show(); }) // 鼠标离开 $('.nav>li').mouseout(function () { $(this).children('ul').hide(); }) }) </script>
jQuery 里面的排他思想
想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(function () {
// 1.隐式迭代 给所有的按钮都绑定了了点击事件
$('button').click(function () {
// 2.当前的元素变化背景颜色
$(this).css('backgroundColor', 'pink');
// 3.其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings('button').css('backgroundColor', '');
})
})
案例：淘宝服饰精品案例
核心原理：
- 鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏。
- 需要得到当前小li 的索引号，就可以显示对应索引号的图片
- jQuery 得到当前元素索引号 $(this).index()
- 右边对应的图片，可以通过 eq(index) 方法去选择
- 排他思想：siblings后面一定要带()！！！
- 显示元素 show() 隐藏元素 hide()
<script>
$(function () {
// 1. 鼠标经过左侧的小li
$('#left li').mouseover(function () {
// 2.得到当前小li的索引号
var index = $(this).index();
// 3.让我们右侧的盒子相应索引号的盒子显示出来
$('.content div').eq(index).show();
// 4.让其余的图片（兄弟）隐藏起来
$('.content div').eq(index).siblings().hide();
})
})
</script>
链式编程
链式编程是为了节省代码量，看起来更优雅。
写链式编程的时候要注意 给哪个对象执行样式
$(this).css('color', 'red').siblings().css('color', '');
// 我的颜色变为红色，兄弟不变颜色
$(this).siblings().css('color', 'red');
// 我的兄弟变为红色，我不变颜色
$(this).siblings().parent().css('color', 'blue');
// 最后是给我兄弟的爸爸变得颜色
jQuery 样式操作
操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。
- 参数只写属性名，则是返回属性值
$('div').css('width');
- 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$('div').css('width', '300px'); // 修改样式
- 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号，不是数字的话必须加引号
// 里面的属性可以不用加引号，文字的话必须加引号，符合属性的话必须采取驼峰命名法
$('div').css({
width: 400,
height: 500,
backgroundColor: "red"
})
设置类样式方法
作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。
- 添加类 $(this).addClass('current')
// 1. 添加类 addClass()
$('div').click(function () {
$(this).addClass('current');
})
- 移除类 $(this).removeClass('current')
// 2. 删除类 removeClass()
$('div').click(function () {
$(this).removeClass('current');
})
- 切换类 $(this).toggleClass('current')
// 1. 切换类 toggleClass()
$('div').click(function () {
$(this).toggleClass('current');
})
案例：tab 栏切换
- 点击上部的li，当前li 添加current类，其余兄弟移除类。
- 点击的同时，得到当前li 的索引号
- 让下部里面相应索引号的item显示，其余的item隐藏
<script>
$(function () {
// 点击上部的li，当前li 添加current类，其余兄弟移除类。
$('.tab_list li').click(function () {
$(this).addClass('current');
$(this).siblings().removeClass('current');
// 点击的同时，得到当前li 的索引号
var index = $(this).index();
console.log(index);
// 让下部里面相应索引号的item显示，其余的item隐藏
$('.tab_con div').eq(index).show().siblings().hide();
})
})
</script>
类操作与className区别
原生 JS 中 className 会覆盖元素原先里面的类名。
var one = document.querySelector('.one');
one.className = 'two'; // 会覆盖掉原来的类名
jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
$('div').addClass('two'); // classList相当于追加类名，不影响以前类名
jQuery 效果
显示隐藏效果
show([speed,[easing],[fn]]) 显示
hide([speed,[easing],[fn]]) 隐藏
toggle([speed,[easing],[fn]]) 切换
- （1）参数都可以省略， 无动画直接显示。
- （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- （3）easing：(Optional) 用来指定切换效果，默认是“swing”先慢后快，可用参数“linear”匀速的。
- （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
<script>
$(function () {
$('button').eq(0).click(function () {
$('div').show('1000', 'linear', function () {
alert('显示了');
});
})
$('button').eq(1).click(function () {
$('div').hide('1000', 'linear', function () {
alert('隐藏了');
});
})
$('button').eq(2).click(function () {
$('div').toggle();
})
// 一般情况下不加参数，直接显示隐藏就可以了
})
</script>
滑动效果
slideDown([speed,[easing],[fn]]) 下滑
slideUp([speed,[easing],[fn]]) 上滑
slideToggle([speed,[easing],[fn]]) 切换
- （1）参数都可以省略。
- （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- （3）easing：(Optional) 用来指定切换效果，默认是“swing”先慢后快，可用参数“linear”匀速的。
- （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
<script>
$(function () {
$('button').eq(0).click(function () {
$('div').slideDown();
})
$('button').eq(1).click(function () {
$('div').slideUp();
})
$('button').eq(2).click(function () {
$('div').slideToggle();
})
})
</script>
事件切换
hover([over,]out)
- （1）over:鼠标移到元素上要触发的函数（相当于mouseenter）
- （2）out:鼠标移出元素要触发的函数（相当于mouseleave）
- （3）如果只写一个函数，则鼠标经过和离开都会触发它
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
$('.nav>li').hover(function () {
$(this).children('ul').slideDown();
}, function () {
$(this).children('ul').slideUp();
});
// 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
$('.nav>li').hover(function () {
$(this).children('ul').slideToggle('3000');
});
动画队列及其停止排队方法
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止排队
stop()
- (1）stop() 方法用于停止动画或效果。
- (2) 注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画，执行本次动画
$('.nav>li').hover(function () {
// stop必须写到动画的前面，在动画执行前停止之前的动画
$(this).children('ul').stop().slideToggle('3000');
});
淡入淡出效果
fadeIn([speed,[easing],[fn]]) 淡入效果
fadeOut([speed,[easing],[fn]]) 淡出效果
fadeToggle([speed,[easing],[fn]]) 淡入淡出切换
- （1）参数都可以省略。
- （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- （3）easing：(Optional) 用来指定切换效果，默认是“swing”先慢后快，可用参数“linear”匀速的。
- （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
$('button').eq(0).click(function () {
// 淡入效果
$('div').fadeIn();
});
$('button').eq(1).click(function () {
// 淡入效果
$('div').fadeOut();
});
$('button').eq(2).click(function () {
// 淡入淡出切换效果
$('div').fadeToggle();
});
fadeTo(speed,opacity,[easing],[fn])
- （1）opacity 透明度必须写，取值 0~1 之间。
- （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。必须写
- （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
$('button').eq(3).click(function () {
// 修改透明度 fadeTo() 这个速度和修改透明度必须写！
$('div').fadeTo(1000, 0.5);
});
案例：突出显示
$(function () {
$('.wrap li').hover(function () {
// 鼠标进入的时候，其他的li标签透明度为0.5
$(this).siblings('li').stop().fadeTo(400, 0.5);
}, function () {
// 鼠标离开的时候，其他的li标签透明度为1
$(this).siblings('li').stop().fadeTo(400, 1);
});
})
自定义动画 animate
animate(params,[speed],[easing],[fn])
- （1）params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
- （2）speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
- （3）easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”。
- （4）fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。
$(function () {
$('button').click(function () {
$('div').animate({
left: 500,
top: 300,
opacity: 0.4,
width: 400
}, 500);
})
})
案例：王者荣耀手风琴效果
- 鼠标经过某个小li 有两步操作：
- 当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
- 其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
要给小li设置宽度和高度，要不然就会覆盖掉之前的小li
当前小li动画效果 宽度变为224，然后去find小li下面的所有孩子中的small给它设置淡出效果，然后small的siblings（其他兄弟）中的big给他设置淡入效果
<script>
$(function () {
$('.king li').mouseenter(function () {
// 1. 当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
$(this).stop().animate({
width: 224,
}).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
$(this).siblings().stop().animate({
width: 69
}).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();
});
})
</script>