前端三件套系例之JQuery——JQuery动画效果、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)一个01之间表示透明度的数字。

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>

[img](javascript:void(0)😉
hover事件示例:
[img](javascript:void(0)😉

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

2 经典jQuery插件

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

$(dom).select2()
$(dom).select({
  width:,
  data:,
  ajax:,
  ....
})

2.2 datetimepicker 时间日期插件

//设置语言
$.datetimepicker.setLocale('zh');
//调用插件
$(dom).datetimepicker({
  datepicker:,
  timepicker:,
  format:"Y-m-d H:i",
  value:....
})

2.3 fullpage 全屏滚动插件

<!--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 图片懒加载

$("#lazyWrapper img").lazyload()

2.5 layer 弹窗插件

layer.alert()
layer.confirm()
layer.msg()
layer.load()
layer.tips()
layer.colse()
layer.open({
  type: ,
  title: ,
  content: 
  ....
})
...

2.6 nice validator 表单验证

$("form").validator({
  
})

2.7 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

5 jQueryMobile

6 Sizzle

7 Zepto

  • 0
    点赞
  • 2
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

代码有毒。。。

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值