玩个明白-- ＞ jQuery(三)
分享欲是我赤裸裸的告白
前言
看到这里了，说明博主的前两篇文章给你带来了帮助，不知看完上篇文章有没有自己练习一遍，只有多动手才能更快的提升自己喔。猜猜今天给大家分享什么知识。😎
一、jQuery 基本操作
先简单认识一下
-
jQuery设置样式$('div').css('属性', '值') -
jQuery里面的排他思想分析：
- 若想要多选一的效果，排他思想
- 先当前元素设置样式，其余的兄弟元素清除样式
// 当前元素设置样式 $(this).css('color', 'red') // 其他的兄弟清除样式 $(this).siblings().css('color', '') -
隐式迭代
- 遍历内部 DOM 元素（伪数组形式存储）的过程叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
// 页面中所有的 div 元素全部隐藏，不用循环操作 $('div').hide() -
链式编程
// 当前元素设置样式，其他的兄弟清除样式 $(this).css('color', 'red').siblings().css('color', '')
深入的认识一下
1.1 jQuery 样式操作
常用的样式操作有两种：css() 和设置类样式方法
1.1.1 操作 css 方法
可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。
-
常见以下三种样式
-
参数若只写属性名，则返回属性值
$(this).css('color') -
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号。
$(this).css('color', 'red') -
参数可以是对象形式，方便设置多组样式；属性名和属性值用冒号隔开，属性可以不用加引号。
$(this).css({ color: 'blue', fontSize: '20px'})
-
注意：css() 方法多用于样式少的时候操作，多了反而不太方便。
1.1.2 设置类样式方法
可以操作类样式，注意操作类里面的参数不要加点。
-
常用的三种设置类样式方法
-
添加类
$('div').addClass('active') -
删除类
$('div').removeClass('active') -
切换类
$('div').toggleClass('active')
-
-
注意
- 设置类样式方法比较适合样式多时操作，可以弥补 css() 方法的不足。
- 原生 JS 中 className 会覆盖元素原先里面的类名，
jQuery里面类操作只是对指定类进行操作，不影响原先的类名。
1.2 jQuery 效果
jQuery 给我们封装了很多动画效果，最为常见的如下：
- 显示隐藏：show() / hide() / toggle()
- 滑入滑出：slideDown() / slideUp() / slideToggle()
- 淡入淡出：fadeln() / fadeOut() / fadeToggle() / fadeTo()
- 自定义动画：animate()
注意：
- 动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
jQuery为我们提供另一个方法，可以停止动画排队：stop()方法。
1.2.1 显示隐藏
-
显示语法规范
show([speed, [easing], [fn]]) -
显示参数
- 参数可以省略，无动画直接显示。
- speed：三种预定速度之一的字符串（”slow“，”normal“，or ”fast“） 或表示动画时长的毫秒数值（如: 1000）。
- easing：(Optional) 用来指定切换效果，默认是 “swing”，可用参数 “linear”。
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
-
隐藏语法规范
hide([speed, [easing], [fn]]) -
隐藏参数与显示参数的说明一致。
-
切换语法规范
toggle([speed, [easing], [fn]]) -
切换参数与显示参数的说明一致。
代码示例
<body>
<button class="hide">隐藏</button>
<button class="show">显示</button>
<button class="toggle">切换</button>
<div class="box"></div>
<script src="./jQuery.js"></script>
<script>
// 点击按钮
$('.hide').click(function () {
// 盒子隐藏
$('.box').hide()
})
// 点击按钮
$('.show').click(function () {
// 盒子显示
$('.box').show()
})
// 点击按钮
$('.toggle').click(function () {
// 切换显示隐藏
$('.box').toggle()
})
</script>
</body>
效果如下
1.2.2 滑入滑出
-
下滑效果语法规范
slideDown([speed, [easing], [fn]]) -
上滑效果语法规范
slideUp([speed, [easing], [fn]]) -
滑动切换效果语法规范
slideToggle([speed, [easing], [fn]]) -
参数与显示隐藏的参数说明一致。
代码示例
<body>
<button class="slideDown">下拉滑动</button>
<button class="slideUp">上拉滑动</button>
<button class="slideToggle">切换滑动</button>
<div class="box"></div>
<script src="./jQuery.js"></script>
<script>
// 点击按钮
$('.slideDown').click(function () {
// 下滑动
$('.box').slideDown()
})
// 点击按钮
$('.slideUp').click(function () {
// 上滑动
$('.box').slideUp()
})
// 点击按钮
$('.slideToggle').click(function () {
// 滑动切换
$('.box').slideToggle()
})
</script>
</body>
效果如下
1.2.3 淡入淡出
-
淡入效果语法规范
fadeIn([speed, [easing], [fn]]) -
淡出效果语法规范
fadeOut([speed, [easing], [fn]]) -
淡入淡出切换效果语法规范
fadeToggle([speed, [easing], [fn]]) -
参数与显示隐藏的参数说明一致。
-
渐进方式调整到指定的不透明度
-
语法规范
fadeTo([[speed],opacity,[easing], [fn]]) -
效果参数
- opacity：透明度必须写，取值 0~1 之间。
- speed：三种预定速度之一的字符串（”slow“，”normal“，or ”fast“） 或表示动画时长的毫秒数值（如: 1000）。必须写。
- easing：(Optional) 用来指定切换效果，默认是 “swing”，可用参数 “linear”。
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
-
代码示例
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div class="box"></div>
<script src="./jQuery.js"></script>
<script>
// 点击按钮
$('button').click(function () {
// 淡入
$('.box').fadeIn(1000)
})
// 点击按钮
$('button').click(function () {
// 淡出
$('.box').fadeOut(1000)
})
// 点击按钮
$('button').click(function () {
// 淡入淡出切换
$('.box').fadeToggle()
})
// 点击按钮
$('button').click(function () {
// 修改透明度
$('.box').fadeTo(1000, 0.5)
})
</script>
</body>
效果如下
1.2.4 自定义效果
自定义动画非常强大，通过参数的传递可以模拟以上所有动画。
-
语法规范
animate(params,[speed],[easing],[fn]) -
参数
- params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略。
- speed：三种预定速度之一的字符串（”slow“，”normal“，or ”fast“） 或表示动画时长的毫秒数值（如: 1000）。
- easing：(Optional) 用来指定切换效果，默认是 “swing”，可用参数 “linear”。
- fn：回调函数，在动画完成时执行的函数，每个元素执行一次。
代码示例
<body>
<button>自定义动画</button>
<div class="box"></div>
<script src="./jQuery.js"></script>
<script>
// 点击按钮
$('button').click(function () {
// 自定义动画
$('.box').animate({
width: '300px'
}, 1000)
})
</script>
</body>
效果如下
1.2.5 停止动画排队
动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行。
停止动画排队的方法为：stop()
stop()方法用于停止动画或效果。stop()写到动画或者效果的前面，相当于停止结束上一次的动画。- 每次使用动画之前，先调用
stop()方法，再调用动画。
代码示例
<body>
<button id="start">自定义动画</button>
<button id="stop">停止动画</button>
<div class="box"></div>
<script src="./jQuery.js"></script>
<script>
$(document).ready(function () {
// 点击按钮
$('#start').click(function () {
// 自定义动画
$('.box').animate({
width: '300px'
}, 1000)
// 自定义动画
$('.box').animate({
width: '200px'
}, 1000)
})
// 停止动画
$('#stop').click(function () {
$('.box').stop()
})
})
</script>
</body>
效果如下
1.2.6 事件切换
jQuery 中为我们添加了一个新事件 hover()，功能类似 css 中的伪类 :hover 。
-
语法规范
// over 和 ount 为两个函数 hover([over,]out) -
over：鼠标移到元素上要触发的函数。
-
out：鼠标移出元素要触发的函数。
-
若只写了一个函数，则鼠标经过和离开都会触发它。
代码示例
<body>
<div class="box"></div>
<script src="./jQuery.js"></script>
<script>
// 鼠标经过
$('.box').hover(function () {
$(this).css('background-color', 'red')
// 鼠标离开
}, function () {
$(this).css('background-color', 'blue')
})
</script>
</body>
效果如下
ps：毅力是永久的享受
