分享欲是我赤裸裸的告白 前言一、`jQuery` 基本操作1.1 `jQuery` 样式操作1.1.1 操作 css 方法1.1.2 设置类样式方法 1.2 `jQuery` 效果1.2.1 显示隐藏1.2.2 滑入滑出1.2.3 淡入淡出1.2.4 自定义效果1.2.5 停止动画排队1.2.6 事件切换 前言
??看到这里了，说明博主的前两篇文章给你带来了帮助，不知看完上篇文章有没有自己练习一遍，只有多动手才能更快的提升自己喔。猜猜今天给大家分享什么知识。😎
一、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：毅力是永久的享受
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
