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

鄂坚

2023-12-01

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

6 Sizzle

官网 https://sizzlejs.com/

7 Zepto

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

前端三件套系例之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

相关阅读

相关文章

相关问答

相关文档