Web前端学习笔记—— jQuery之事件机制、补充、插件

其他 2020-03-05 21:27:16 阅读次数: 0

jQuery事件机制

  • JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

jQuery事件发展历程(了解)

简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐)

  • 简单事件注册
click(handler)			单击事件
mouseenter(handler)		鼠标进入事件
mouseleave(handler)		鼠标离开事件

缺点：不能同时注册多个事件

  • bind方式注册事件
// 第一个参数：事件类型
// 第二个参数：事件处理程序
$('p').bind('click mouseenter', function(){
    // 事件响应方法
});

缺点：不支持动态事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {

      //为按钮绑定鼠标进入,鼠标离开,点击事件
      //第一种写法
//      $("#btn").mouseenter(function () {
//        $(this).css("backgroundColor","red");
//      });
//      $("#btn").mouseleave(function () {
//        $(this).css("backgroundColor","green");
//      });
//      $("#btn").click(function () {
//        alert("啊~我被点了");
//      });

      //第二种写法:链式编程
//      $("#btn").mouseenter(function () {
//        $(this).css("backgroundColor","red");
//      }).mouseleave(function () {
//        $(this).css("backgroundColor","green");
//      }).click(function () {
//        alert("啊~我被点了");
//      });

      //第三种写法:bind方法绑定事件
//      $("#btn").bind("click",function () {
//        alert("哦买雷电嘎嘎闹");
//      });
//      $("#btn").bind("mouseenter",function () {
//        $(this).css("backgroundColor","red");
//      });
//      $("#btn").bind("mouseleave",function () {
//        $(this).css("backgroundColor","green");
//      });

      //第四种写法:链式编程
//      $("#btn").bind("click",function () {
//        alert("哦买雷电嘎嘎闹");
//      }).bind("mouseenter",function () {
//        $(this).css("backgroundColor","red");
//      }).bind("mouseleave",function () {
//        $(this).css("backgroundColor","green");
//      });
      //第五种写法:使用键值对的方式绑定事件
//      $("#btn").bind({"click":function () {
//        alert("哦买雷电嘎嘎闹");
//      },"mouseenter":function () {
//        $(this).css("backgroundColor","red");
//      },"mouseleave":function () {
//        $(this).css("backgroundColor","green");
//      }});
    });
  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn" />

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <script src="jquery-1.12.1.js"></script>
  <script>
    $(function () {
      //为按钮绑定多个相同事件
//      $("#btn").click(function () {
//        console.log("小苏好猥琐哦");
//      }).click(function () {
//        console.log("小苏好美啊");
//      }).click(function () {
//        console.log("天冷了,注意身体");
//      });

//      $("#btn").bind("click",function () {
//        console.log("哈哈,我又变帅了");
//      }).bind("click",function () {
//        console.log("我轻轻来,正如我轻轻走,挥一挥手,不带走一个妹子");
//      });

      //bind方法绑定多个相同的事件的时候,如果使用的是键值对的方式,只能执行最后一个
      $("#btn").bind({"click":function () {
        console.log("如果有一天我邪恶了");
      },"click":function () {
        console.log("请记住,我曾纯洁过");
      }});

    });

    //bind方法内部是调用的另一个方法绑定的事件

  </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>

</body>
</html>
  • delegate注册委托事件
// 第一个参数：selector，要绑定事件的元素
// 第二个参数：事件类型
// 第三个参数：事件处理函数
$('.parentBox').delegate('p', 'click', function(){
    // 为 .parentBox下面的所有的p标签绑定事件
});

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div{
      width: 200px;
      height: 100px;
      border: 2px solid green;
    }
    p{
      width: 150px;
      height: 50px;
      border: 1px solid red;
      cursor: pointer;
    }
  </style>
  <script src="jquery-1.12.1.js"></script>
  <script>
    //点击按钮为div中的p标签绑定事件
    $(function () {
      $("#btn").click(function () {
        //为父级元素绑定事件,父级元素代替子级元素绑定事件
        //子级元素委托父级绑定事件

        //父级元素调用方法,为子级元素绑定事件
        $("#dv").delegate("p","click",function () {
          alert("啊!~,被点了");
        });
      });
    });

    //为元素绑定事件三种方式
    /*
    * 对象.事件名字(事件处理函数);---$("#btn").click(function(){});
    * 对象.bind("事件名字",事件处理函数);---$("#btn").bind("click",function(){});
    * 父级对象.delegate("子级元素","事件名字",事件处理函数);---->$("#dv").delegate("p","click",function(){});
    *
    *
    * */
  </script>
</head>
<body>
<input type="button" value="为div绑定事件" id="btn" />
<div id="dv">
  <p>这是p</p>
</div>
</body>
</html>
  • on注册事件

on注册事件(重点)

  • jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
  • 最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( 'click', function() {});

on注册事件委托

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( 'click','span', function() {});

事件委托原理

// 事件委托的原理
var ul = document.querySelector('#ul');
ul.onclick = function (e) {
  // console.log(e.target.tagName);
  if (e.target.tagName.toLowerCase() === 'li') {
    console.log(e.target);
  }
}

on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);
  • 通过源码查看 bind click delegate on 注册事件的区别

事件解绑

  • unbind方式（不用）
$(selector).unbind(); // 解绑所有的事件
$(selector).unbind('click'); // 解绑指定的事件
  • undelegate方式（不用）
$( selector ).undelegate(); // 解绑所有的delegate事件
$( selector).undelegate( 'click' ); // 解绑所有的click事件
  • off方式（推荐）
// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off('click');

触发事件

$(selector).click(); // 触发 click事件
$(selector).trigger('click');

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

// screenX和screenY	对应屏幕最左上角的值
// clientX和clientY	距离页面左上角的位置（忽视滚动条）
// pageX和pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）

// event.keyCode	按下的键盘代码
// event.data	存储绑定事件时传递的附加数据

// event.stopPropagation()	阻止事件冒泡行为
// event.preventDefault()	阻止浏览器默认行为
// return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

案例

  • 按键变色 [19-按键变色.html]
<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 400px;
            height: 400px;
            margin: 100px auto 0;
        }

        .wrap h1 {
            text-align: center;
        }

        .wrap div {
            width: 400px;
            height: 300px;
            background: pink;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
        }
    </style>
    <script src="vendor/jquery.js"></script>
    <script>
        $(function () {
            //需求：在页面中按下键盘上的键的时候，获取他的Unicode编码给定body背景色；
            $(document).keyup(function (event) {
                //alert(event.keyCode);
                //r:82;   p:80;    b:66;    o:79;    y:89;    s:83;
                $("#keyCodeSpan").text(event.keyCode);
                changeDivBackground(event.keyCode);
            });

            //封装一个方法，根据传递的参数值，改变div的背景色；
            function changeDivBackground(num){
                switch (num){
                    case 82:
                        $("#bgChange").css("background-color","red");
                        break;
                    case 80:
                        $("#bgChange").css("background-color","purple");
                        break;
                    case 66:
                        $("#bgChange").css("background-color","blue");
                        break;
                    case 79:
                        $("#bgChange").css("background-color","orange");
                        break;
                    case 89:
                        $("#bgChange").css("background-color","yellow");
                        break;
                    case 83:
                        $("#bgChange").css("background-color","skyblue");
                        break;
                    default :
                        $("#bgChange").css("background-color","pink");
                        $("#keyCodeSpan").text("查无此键");
                }
            }


        });
    </script>
</head>
<body>

    <div class="wrap">
        <h1>按键改变颜色</h1>
        <div id="bgChange">
            keyCode为：
            <span id="keyCodeSpan"></span>
        </div>
    </div>

</body>
</html>

jQuery补充知识点

链式编程

  • 通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

each方法

  • jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

多库共存

  • jQuery使用 作 为 标 示 符 ， 但 是 如 果 与 其 他 框 架 中 的 作为标示符，但是如果与其他框架中的 冲突时，jQuery可以释放$符的控制权.
var c = $.noConflict();// 释放$的控制权,并且把$的能力给了c

案例

  • 五角星评分案例 [20-五角星评分案例.html]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: red;
        }

        .comment li {
            float: left;
            cursor: pointer;
        }

        ul {
            list-style: none;
        }
    </style>
    <script src="vendor/jquery.js"></script>
    <script>
        jQuery(function () {
            //设置两个五角星
            var SXWJX = "★";
            var KXWJX = "☆";

            //需求1: 鼠标进入哪个li，让当前的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
            //需求2: 鼠标移开当前li，让之前记录位置(默认没有)的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
            //需求3: 鼠标点击哪个li，这个li就变成别记录的五角星，然后设置一个类名，方便下次获取，其他的去掉类名；



            //需求1: 鼠标进入哪个li，让当前的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
            $(".comment li").mouseenter(function () {
                //让当前的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
                $(this).text(SXWJX).prevAll("li").text(SXWJX).end().nextAll("li").text(KXWJX);
            });
            //需求2: 鼠标移开当前li，让之前记录位置(默认没有)的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
            $(".comment li").mouseout(function () {
                //判断：有记录以记录位置为基准，没有记录位置，全部设置空五角星；
                $(".comment li").text(KXWJX);
                //有就覆盖掉
                if($(".current").length === 1){
                    //让之前记录位置(默认没有)的li和之前的所有li内容设置为实心五角星，后面的设置为空心五角星；
                    $(".current").text(SXWJX).prevAll("li").text(SXWJX).end().nextAll("li").text(KXWJX);
                }
            });
            //需求3: 鼠标点击哪个li，这个li就变成别记录的五角星，然后设置一个类名，方便下次获取，其他的去掉类名；
            $(".comment li").click(function () {
                $(this).addClass("current").siblings("li").removeClass("current");
            });

        });
    </script>
</head>

<body>

    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

</body>

</html>

插件

常用插件

自己探索插件

jQuery插件开发

  • 给jQuery增加方法的两种方式
$.method = fn		静态方法
$.fn.method = fn	实例方法
  • 增加一个静态方法，实现两个数的和，插件
(function ($) {
  $.add = function (a, b) {
    return a + b;
  }
}(jQuery))

$.add(5, 6);
  • tab栏插件 [21-tab栏插件.html]
(function ($) {
  // {tabMenu: '#aa'}
  $.tab = function (options) {
    // 默认参数
    var defaults = {
      tabMenu: '#tab',
      activeClass: 'active',
      tabMain: '#tab-main',
      tabMainSub: '.main',
      selectedClass: 'selected'
    }
    // 把options中的属性，把对应属性的值赋给defaults对应的属性
    // defaults.tabMenu = options.tabMenu || defaults.tabMenu;
    // for(var key in options) {
    //   defaults[key] = options[key];
    // }
    $.extend(defaults, options);

    $(defaults.tabMenu).on('click', 'li', function () {
      $(this)
        .addClass(defaults.activeClass)
        .siblings()
        .removeClass(defaults.activeClass);

      //
      var index = $(this).index();
      //
      $(defaults.tabMain + ' ' + defaults.tabMainSub)
        .eq(index)
        .addClass(defaults.selectedClass)
        .siblings()
        .removeClass(defaults.selectedClass);
    })
  }
}(window.jQuery))
  • 表格插件 [22-表格插件.html]
(function($) {
  // 内部的变量，外部无法访问，防止变量名冲突
  var a = 0;
  // 给$增加了一个实例方法
  $.fn.table = function (header, data) {
    var array = [];
    array.push('<table>');
    array.push('<tr>');

    // 生成表头
    $.each(header, function () {
      array.push('<th>' + this + '</th>');
    })
    array.push('</tr>');


    // 生成数据行
    $.each(data, function (index) {
      // this是当前遍历到的数组中的每一个对象
      // 拼数据行
      array.push('<tr>');
      array.push('<td>' + (index + 1) + '</td>');

      // 遍历对象，拼表格
      for (var key in this) {
        array.push('<td>' + this[key] + '</td>');
      }

      array.push('</tr>');
    })
    array.push('</table>');

    this.append(array.join(''));
  }

}(window.jQuery))
  • 插件开发的原理
唯恋殊雨
发布了296 篇原创文章 · 获赞 562 · 访问量 50万+
他的留言板 关注

猜你喜欢

转载自blog.csdn.net/tichimi3375/article/details/82836750
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022