文章目录

1 JQuery动画效果
2 JQuery插件

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 找到那些被选中行的select

            var $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 事件绑定

.on( events [, selector ],function(){})

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

7-3 移除事件

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

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

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

7-4 阻止后续事件执行

return false; // 常见阻止表单提交等
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是每次循环的具体元素。

})

输出：

.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 插件的网站

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插件、的更多相关文章

jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。
jQuery Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...
前端 ----jQuery的动画效果
03-jQuery动画效果 jQuery提供的一组网页中常见的动画效果,这些动画是标准的.有规律的效果:同时还提供给我们了自定义动画的功能. 显示动画方式一: $("div" ...
jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
jQuery animate()动画效果
1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...
第一百七十二节，jQuery，动画效果
jQuery,动画效果学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性一．显示.隐藏 jQuery 中显示方法为:. ...
jquery-12 jquery常用动画效果有哪些
jquery-12 jquery常用动画效果有哪些一.总结一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...
前端基础-jQuery的动画效果
阅读目录隐藏显示切换下拉上卷显示一.jQuery中隐藏元素的hide方法让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局, ...
jquery animate 动画效果使用解析
animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的先看动画效果:http://keleyi.com/keleyi/phtml/jq ...
基于jquery fly插件实现加入购物车抛物线动画效果,jquery.fly.js
在购物网站中,加入购物车的功能是必须的功能,有的网站在用户点击加入购物车按钮时,就会出现该商品从点击出以抛物线的动画相似加入购物车,这个功能看起来非常炫,对用户体验也有一定的提高.下面介绍基于jque ...
jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

随机推荐

【网络知识】FTP主被动模式介绍及抓包分析
一.FTP是什么 FTP,即文件传输协议(File Transfer Protocol,FTP),基于该协议客户端与服务端可以实现共享文件.上传文件.下载文件. FTP 基于TCP协议生成两个连接,一 ...
曲线艺术编程 coding curves 第十一章玫瑰花形（ ROSES）
第十一章玫瑰花形 ROSES 原作:Keith Peters https://www.bit-101.com/blog/2022/11/coding-curves/ 译者:池中物王二狗(sheldo ...
[MAUI]弧形进度条与弧形滑块的交互实现
@ 目录弧形基类定义绘制弧弧形进度条(ProgressBar) 添加动画宽度补偿文本弧形滑块(Slider) 创建控制柄拖动事件处理项目地址进度条(ProgressBar)用于展示 ...
把jar包打成docker镜像并推送到Docker Hub
1.准备需要的jar包并复制到服务器某个目录下 2.在此目录下,创建Dockerfile的文本文件,并将以下内容添加到文件中: # 基础镜像 FROM openjdk:8-jre # author(可 ...
CAN转PROFINET协议网关 JM-PN-CAN
1 产品功能捷米特JM-PN-CAN 是自主研发的一款 PROFINET 从站功能的通讯网关.主要功能是将各种 CAN 设备接入到 PROFINET 网络中. 捷米特JM-PN-CAN连接到 ...
端口探测神器——Nmap
Nmap 简介: 全称网络映射器,能快速扫描大型网络或单个网络上有哪些主机,这些主机提供什么服务,可以发现服务器运行在什么操作系统上,从而发现可攻击的脆弱点,扩大攻击范围 Nmap有图形化版本名叫Ze ...
HCL实验：4.同一vlan位于不同交换机上的通信
拓扑图 SW1配置 SW2配置 SW3配置 VLAN 1 PC1 PING PC5 VLAN 2 PC 2 PING PC 6 VLAN 3 PC4 PING PC8 怀疑是模拟器的问题---- 不知 ...
【IDEA】远程调试
远程调试使用特定JVM参数运行服务端代码要让远程服务器运行的代码支持远程调试,则启动的时候必须加上特定的JVM参数,这些参数是: -Xdebug -Xrunjdwp:transport=dt_so ...
YOLOX目标检测实战：LabVIEW+YOLOX ONNX模型实现推理检测（含源码）
目录前言一.什么是YOLOX 二.环境搭建 1.部署本项目时所用环境: 2.LabVIEW工具包下载及安装: 三.模型的获取与转化[推荐方式一] 1.方式一:直接在官网下载yolox的onnx模型 ...
【转载】Linux虚拟化KVM-Qemu分析（八）之virtio初探
原文信息作者:LoyenWang 出处:https://www.cnblogs.com/LoyenWang/ 公众号:LoyenWang 版权:本文版权归作者和博客园共有转载:欢迎转载,但未经作者 ...

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

文章目录

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

前端三件套系例之JQuery——JQuery动画效果、JQuery插件、的更多相关文章

随机推荐

热门专题