文章目录

  • 1 JQuery动画效果
    • 1. 基本效果
    • 2. 滑动效果
    • 3 淡入淡出效果
    • 4 自定义动画
    • 5 动画控制
    • 6 设置
    • 7 事件
      • 7-1 常用事件
      • 7-2 事件绑定
      • 7-3 移除事件
      • 7-4 阻止后续事件执行
      • 7-8 阻止事件冒泡
      • 7-9 页面载入
      • 7-10 与window.onload的区别
      • 7-11 事件委托
    • each
  • 2 JQuery插件
    • 1 jQuery 插件的网站
    • 2 经典jQuery插件
      • 2.2 datetimepicker 时间日期插件
      • 2.3 fullpage 全屏滚动插件
      • 2.4 lazyload 图片懒加载
      • 2.5 layer 弹窗插件
      • 2.6 nice validator 表单验证
      • 2.7 jQuery-easing
    • 3 自定义jQuery 插件
    • 4 jQuery UI
    • 5 jQueryMobile
    • 6 Sizzle
    • 7 Zepto

1 JQuery动画效果

1. 基本效果

show([s,[e],[fn]])       显示隐藏的匹配元素
hide([s,[e],[fn]])      隐藏显示的元素
toggle([s],[e],[fn])    如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

参数详解

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing  : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn      : 在动画完成时执行的函数，每个元素执行一次。

2. 滑动效果

slideDown([s],[e],[fn])      通过高度变化（向下增大）来动态地显示所有匹配的元素
slideUp([s,[e],[fn]])       通过高度变化（向上减小）来动态地隐藏所有匹配的元素
slideToggle([s],[e],[fn])   通过高度变化来切换所有匹配元素的可见性

参数详解

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing  : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn      : 在动画完成时执行的函数，每个元素执行一次。

3 淡入淡出效果

fadeIn([s],[e],[fn])     通过不透明度的变化来实现所有匹配元素的淡入效果
fadeOut([s],[e],[fn])       通过不透明度的变化来实现所有匹配元素的淡出效果
fadeToggle([s,[e],[fn]])    通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
fadeTo([[s],o,[e],[fn]])    把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

参数详解

speed    : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing  : (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn      : 在动画完成时执行的函数，每个元素执行一次。opacity   : (用户fadeTo)一个0至1之间表示透明度的数字。

4 自定义动画

animate(p,[s],[e],[fn])

参数详解

params   : 一组包含作为动画属性和终值的样式属性和及其值的集合
speed   : 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing  : 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn      : 在动画完成时执行的函数，每个元素执行一次。

5 动画控制

stop([c],[j])        停止所有在指定元素上正在运行的动画
delay(d,[q])        设置一个延时来推迟执行队列中之后的项目
finish([queue])     停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画

6 设置

//关闭页面上所有的动画
jQuery.fx.off = true;

7 事件

// 第一种$('#d1').click(function () {alert('别说话 吻我')});// 第二种(功能更加强大 还支持事件委托)$('#d2').on('click',function () {alert('借我钱买草莓 后面还你')})

7-1 常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

keydown和keyup事件组合示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta http-equiv="content-Type" charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><title>Title</title>
</head>
<body><table border="1"><thead><tr><th>#</th><th>姓名</th><th>操作</th></tr></thead><tbody><tr><td><input type="checkbox"></td><td>Egon</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr><tr><td><input type="checkbox"></td><td>Alex</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr><tr><td><input type="checkbox"></td><td>Yuan</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr><tr><td><input type="checkbox"></td><td>EvaJ</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr><tr><td><input type="checkbox"></td><td>Gold</td><td><select><option value="1">上线</option><option value="2">下线</option><option value="3">停职</option></select></td></tr></tbody>
</table><input type="button" id="b1" value="全选">
<input type="button" id="b2" value="取消">
<input type="button" id="b3" value="反选"><script src="jquery-3.3.1.js"></script>
<script>var flag = false;// shift按键被按下的时候$(window).keydown(function (event) {console.log(event.keyCode);if (event.keyCode === 16){flag = true;}});// shift按键被抬起的时候$(window).keyup(function (event) {console.log(event.keyCode);if (event.keyCode === 16){flag = false;}});// select标签的值发生变化的时候$("select").change(function (event) {// 如果shift按键被按下，就进入批量编辑模式// shift按键对应的code是16// 判断当前select这一行是否被选中console.log($(this).parent().siblings().first().find(":checkbox"));var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");console.log(isChecked);if (flag && isChecked) {// 进入批量编辑模式// 1. 取到当前select选中的值var value = $(this).val();// 2. 给其他被选中行的select设置成和我一样的值// 2.1 找到那些被选中行的selectvar $select = $("input:checked").parent().parent().find("select")// 2.2 给选中的select赋值$select.val(value);}});
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>苍茫的天涯是我的哎，绵绵的青山脚下一片海！</p><script src="jQuery-3.3.1.js">
</script>
<script>$('p').hover(function () {alert('来啦，老弟')},function () {alert('慢走哦～')})
</script>
</body>
</html>

实时监听input输入值变化示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1"><script src="jquery-3.2.1.min.js"></script>
<script>/** oninput是HTML5的标准事件* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，* 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发* oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代* 使用jQuery库的话直接使用on同时绑定这两个事件即可。* */$("#i1").on("input propertychange", function () {alert($(this).val());})
</script>
</body>
</html>

7-2 事件绑定

  1. .on( events [, selector ],function(){})
  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

7-3 移除事件

  1. .off( events [, selector ][,function(){}])

off() 方法移除用 .on()绑定的事件处理程序。

  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

7-4 阻止后续事件执行

  1. return false; // 常见阻止表单提交等
  2. e.preventDefault();
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>阻止默认事件</title>
</head>
<body><form action=""><button id="b1">点我</button>
</form><script src="jquery-3.3.1.min.js"></script>
<script>$("#b1").click(function (e) {alert(123);//return false;e.preventDefault();});
</script>
</body>
</html>

注意：
像click、keydown等DOM中定义的事件，我们都可以使用.on()方法来绑定事件，但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件$(this).removeClass('hover');
});

7-8 阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>阻止事件冒泡</title>
</head>
<body>
<div><p><span>点我</span></p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>$("span").click(function (e) {alert("span");e.stopPropagation();});$("p").click(function () {alert("p");});$("div").click(function () {alert("div");})
</script>
</body>
</html>

7-9 页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
两种写法：

$(document).ready(function(){// 在这里写你的JS代码...
})

简写：

$(function(){// 你在这里写你的代码
})

文档加载完绑定事件，并且阻止默认事件发生：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>登录注册示例</title><style>.error {color: red;}</style>
</head>
<body><form id="myForm"><label for="name">姓名</label><input type="text" id="name"><span class="error"></span><label for="passwd">密码</label><input type="password" id="passwd"><span class="error"></span><input type="submit" id="modal-submit" value="登录">
</form><script src="jquery-3.2.1.min.js"></script>
<script src="s7validate.js"></script>
<script>function myValidation() {// 多次用到的jQuery对象存储到一个变量，避免重复查询文档树var $myForm = $("#myForm");$myForm.find(":submit").on("click", function () {// 定义一个标志位，记录表单填写是否正常var flag = true;$myForm.find(":text, :password").each(function () {var val = $(this).val();if (val.length <= 0 ){var labelName = $(this).prev("label").text();$(this).next("span").text(labelName + "不能为空");flag = false;}});// 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件return flag;});// input输入框获取焦点后移除之前的错误提示信息$myForm.find("input[type!='submit']").on("focus", function () {$(this).next(".error").text("");})}// 文档树就绪后执行$(document).ready(function () {myValidation();});
</script>
</body>
</html>

7-10 与window.onload的区别

  • window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
  • jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

7-11 事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
示例：
表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {// 删除按钮绑定的事件
})

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
<button>是兄弟，就来砍我!!!</button>
</body><script>// 给页面上所有的button标签绑定点击事件$('button').click(function () {  // 无法影响到动态创建的标签alert(123)})//$('body').append('<button>是兄弟，就来砍我!!!</button>')// 事件委托// $('body').on('click','button',function () {//     alert(123)  // 在指定的范围内 将事件委托给某个标签 无论该标签是事先写好的还是后面动态创建的// })
</script>
</html>

each

jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。

li =[10,20,30,40]
$.each(li,function(i, v){console.log(i, v);//index是索引，ele是每次循环的具体元素。
})

输出：

010
120
230
340

.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。

// 为每一个li标签添加foo
$("li").each(function(){$(this).addClass("c1");
});

注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：

$("li").addClass("c1");  // 对所有标签做统一操作

注意：
在遍历过程中可以使用 return false提前结束each循环。
终止each循环

return false；

2 JQuery插件

1 jQuery 插件的网站

  • http://plugins.jquery.com/ 官网
  • http://www.jq22.com/ jQuery插件库
  • http://www.htmleaf.com/ jQuery 之家
  • http://www.jq-school.co m jQuery-school

2 经典jQuery插件

2.1 ### select2 下拉框搜索插件

  • 官网 https://select2.org/
  • github https://github.com/select2/select2
  • 用法
$(dom).select2()
$(dom).select({width:,data:,ajax:,....
})

2.2 datetimepicker 时间日期插件

  • github https://github.com/xdan/datetimepicker
  • 文档 https://xdsoft.net/jqplugins/datetimepicker/
  • 用法
//设置语言
$.datetimepicker.setLocale('zh');
//调用插件
$(dom).datetimepicker({datepicker:,timepicker:,format:"Y-m-d H:i",value:，....
})

2.3 fullpage 全屏滚动插件

  • 官网 https://alvarotrigo.com/fullPage/zh/
  • github https://github.com/alvarotrigo/fullpage.js/
  • 用法
<!--HTML部分-->
<div id="fullpage><div class="section"></div><div class="section"><div class="slide"></div><div class="slide"></div><div class="slide"></div></div><div class="section"></div><div class="section"></div>
</div>
自定义的导航 卸载包裹元素的外面<!--JS部分-->
<script>$("#fullpage").fullpage({navigation: true,sectionsColor: [].....})
</script>

2.4 lazyload 图片懒加载

  • 官网 https://appelsiini.net/projects/lazyload/
  • github https://github.com/tuupola/jquery_lazyload/tree/2.x
  • 用法
$("#lazyWrapper img").lazyload()

2.5 layer 弹窗插件

  • 官网 http://layer.layui.com/?alone
  • github https://github.com/sentsin/layer/
  • 用法
layer.alert()
layer.confirm()
layer.msg()
layer.load()
layer.tips()
layer.colse()
layer.open({type: ,title: ,content: ....
})
...

2.6 nice validator 表单验证

  • 官网 https://validator.niceue.com/
  • github https://github.com/niceue/nice-validator
  • 用法
$("form").validator({})

2.7 jQuery-easing

  • 官网 http://gsgd.co.uk/sandbox/jquery/easing/
  • github https://github.com/gdsmith/jquery.easing
  • 用法
$(dom).hide(speed, easing, fn)

3 自定义jQuery 插件

jQuery.fn.extend() 给jQueryDom扩展方法

$.fn.extend({方法名:function(){}
})
//或者
$.fn.方法名 = function(){}

jQuery.extend() 给jQuery 对象本身扩展方法

$.extend({方法名: function(){}
})

4 jQuery UI

  • 官网 https://jqueryui.com/

5 jQueryMobile

  • 官网 https://jquerymobile.com/
  • 教程 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html

6 Sizzle

  • 官网 https://sizzlejs.com/

7 Zepto

  • 官网 http://zeptojs.com/
  • 与jquery区别： https://www.zhihu.com/question/25379207

前端三件套系例之JQuery——JQuery动画效果、JQuery插件、相关推荐

  1. 前端三件套系例之BootStrap——BootStrap基础、 BootStrap布局

    文章目录 1 BootStrap基础 1 什么是BootStrap 2 BootStrap的版本 3 BootStrap 下载 4 CDN服务 5 目录结构 6 基本模板 7 浏览器支持 8 浏览器兼 ...

  2. 前端三件套系例之CSS——CSS3基础样式

    文章目录 1.宽和高 案例 2.字体属性 2-1 文字字体 2-2 字体大小 2-3 字重(粗细) 2-4 文本颜色 2-5 总结 2-6 案例 文字属性 3-1 文字对齐 3-2 文字装饰 3-3 ...

  3. 前端三件套系例之CSS——响应式布局

    文章目录 1.什么是响应式设计 1-1 定义 1-2 响应式设计的优势 2.屏幕的相关概念 3.viewport 视口 3-1 什么是viewport 3-2 设置viewport 4.媒体查询 @m ...

  4. JQuery渐变色动画效果

    JQuery渐变色动画效果 jquery.gradientify.min.js插件 渐变色插件链接 在页面中引入js库与插件 <script src="js\jquery-3.0.0. ...

  5. 前端 ----jQuery的动画效果

    03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画 方式一: $("div"). ...

  6. jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  7. 第一百七十二节，jQuery，动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...

  8. java easing_[Java教程]jQuery Easing 动画效果扩展

    [Java教程]jQuery Easing 动画效果扩展 0 2015-11-20 11:00:03 官网:http://gsgd.co.uk/sandbox/jquery/easing/ jQuer ...

  9. jQuery Easing 动画效果扩展

    官网: http://gsgd.co.uk/sandbox/jquery/easing/ jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果, 一款jQuery动画效果扩展增强插件j ...

最新文章

  1. 绑定成员函数表达式上的非法操作_在优麒麟上使用MPV编写自己的播放器
  2. 浏览器打不开网页问题
  3. hdi-shared Service plan的分配
  4. 解析Hibernate的结构
  5. redisson的锁的类型_厉害了，中间件Redisson原来这么好用！
  6. bzoj1639[Usaco2007 Mar]Monthly Expense 月度开支*
  7. numpy.linspace()的使用方法
  8. python docker自动化_「docker实战篇」python的docker爬虫技术-移动自动化控制工具安卓ADB的使用（15）...
  9. 如何快速取消svn的关联
  10. flask orm 数据库_Flask：使用ORM框架操作数据库
  11. linux 查看端口战役,漫画 ：Apache Nginx80 端口争夺战
  12. ZooKeeper之（一）ZooKeeper是什么
  13. HAOI2018 反色游戏
  14. 《疯狂的站长》读后感3
  15. WS2812B全彩LED驱动
  16. 手机APP——扫描全能王去除水印字样
  17. hcna学习小结第一天
  18. 路由器WIFI信号有时找不到，挨在边上也找不到的解决办法 - 找不到WIFI信号 - 家里WIFI找不到
  19. 阿里妈妈展示广告召回之多场景建模算法
  20. 国密sm2 js加密后台解密，sm3 js、后台加密，sm4 后台加密

热门文章

  1. pooler [转]
  2. html下拉列表+网页更换背景实现的换肤功能
  3. 想做出更好的建筑表现？你需要明白这8点！
  4. 龙族幻想服务器维护多长时间,【龙族幻想】4月1日维护公告
  5. SQLSERVER基础--视图
  6. 微电子器件实验 04 - | 晶体管特征频率的测量
  7. 链表遍历(JSU-ZJJ)
  8. 2020-06-06
  9. 数据处理包括哪些内容
  10. 在暗网（Deep Web）中搭建自己的网站