Python 前端开发之jQuery的事件操作

举报
Yuchuan 发表于 2020/06/23 22:07:39 2020/06/23
【摘要】 jQuery事件操作及其他相关知识。

一、jQuery的事件操作

1、绑定事件

bind(type,data,fn)

描述:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。

参数说明:

type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn ( Function) : 绑定到每个匹配元素的事件上面的处理函数

示例:当每个p标签被点击的时候,弹出其文本

$("p").bind("click", function(){
  alert( $(this).text() );
});

你可以在事件处理之前传递一些附加的数据。

function handler(event) {
//event.data 可以获取bind()方法的第二个参数的数据
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

常见事件:

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...}) //内容发生变化,input,select等
keyup(function(){...})  
mouseover/mouseout
mouseenter/mouseleave
mouseover事件是如果该标签有子标签,那么移动到该标签或者移动到子标签时会连续触发,mouseenter事件不管有没有子标签都只触发一次,表示鼠标进入这个对象

通过返回false来取消默认的行为并阻止事件起泡。

$("form").bind("submit", function() { return false; })

或通过event.preventDefault() 方法阻止事件起泡

$("form").bind("submit", function(event){
  event.stopPropagation();
});

2、解绑事件

unbind(type,fn);

描述:bind()的反向操作,从每一个匹配的元素中删除绑定的事件。

  如果没有参数,则删除所有绑定的事件。

  如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除。

参数说明:

type (String) : (可选) 事件类型
fn(Function) : (可选) 要从每个匹配元素的事件中反绑定的事件处理函数

示例:把所有段落的所有事件取消绑定

$("p").unbind()

将段落的click事件取消绑定

$("p").unbind( "click" )

3.补充 一次性事件

one(type,data,fn)

描述:为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数。在每个对象上,这个事件处理函数只会被执行一次。其他规则与bind()函数相同

参数说明:

type (String) : 事件类型
data (Object) : (可选) 作为event.data属性值传递给事件对象的额外数据对象
fn (Function) : 绑定到每个匹配元素的事件上面的处理函数

示例:当所有段落被第一次点击的时候,显示所有其文本。

$("p").one("click", function(){
//只有第一次点击的时候才会触发,再次点击不会触发了
  alert( $(this).text() );
});

4.事件委托(事件代理)

通俗的讲,事件就是onclick,onmouseover,onmouseout,等就是事件,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。
举个列子:有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。

原理:利用冒泡的原理,把事件加到父级上,触发执行效果。

作用:

1.性能要好
2.针对新创建的元素,直接可以拥有事件

事件源 :

  跟this作用一样(他不用看指向问题,谁操作的就是谁),event对象下的

使用情景:

  •为DOM中的很多元素绑定相同事件;
  •为DOM中尚不存在的元素绑定事件;

示例:

<body>
        <ul>
            <li class="luffy">路飞</li>
            <li>路飞</li>
            <li>路飞</li>            
        </ul>
</body>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){    
    //通过on()方法
     $('ul').on('click','#namei,.luffy',function(){
        console.log(this);
       })            
   //未来追加的元素 
    $('ul').append('<a id="namei">娜美</a>')
}
</script>

语法:在选定的元素上绑定一个或多个事件处理函数

on(type,selector,data,fn);

参数说明:

events( String) : 一个或多个空格分隔的事件类型
selector( String) : 一个选择器字符串,用于过滤出被选中的元素中能触发事件的后代元素
data: 当一个事件被触发时,要传递给事件处理函数的event.data。
fn:回调函数

二、示例

表单验证:

<!DOCTYPE html>
<html>
<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></span>
  <label for="passwd">密码</label>
  <input type="password" id="passwd">
  <span></span>
  <input type="submit" id="modal-submit" value="登录">
</form>
<script src="jquery3.4.1.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;
        }
      });
      return flag;
    });
    // input输入框获取焦点后移除之前的错误提示信息
    $myForm.find("input[type!='submit']").on("blur", function () {
      $(this).next(".error").text("");
    })
  }
  myValidation()
</script>
</body>
</html>

表格操作:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .cover {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.3);
            z-index: 99;
        }
        .modal {
            width: 300px;
            height: 200px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -100px;
            margin-left: -150px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
    <script src="jquery3.4.1.js"></script>
</head>
<body>
<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>开车</td>
        <td>
            <button>开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex</td>
        <td>抽烟、喝酒、烫头</td>
        <td>
            <button>开除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊(苑局)</td>
        <td>不洗头、不翻车、不要脸</td>
        <td>
            <button>开除</button>
        </td>
    </tr>
    </tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
    <div>
        <label>姓名:
            <input type="text" id="name">
        </label>
    </div>
    <div>
        <label>爱好:
            <input type="text" id="hobby">
        </label>
    </div>
    <button id="cancel" type="button">取消</button>
    <button id="submit" type="button">提交</button>
</div>
<script>
    // 定义一个清空输入框并且隐藏模态框的方法
    function hideModal(){
         // 1. 清空input的值
        $("#name,#hobby").val('');
        // 2. 隐藏起来
        $(".cover,.modal").addClass('hide');
    }
    // 开除按钮的功能
    $("table").on('click', '.fire', function () { //我们先去学冒泡事件、事件委托然后再回来学这个例子,事件里面都是用的匿名函数,这里用on是因为我们要将新添加进来的每行里面的button标签能够继承这个点击删除的事件
        // 点击开除按钮要做的事儿————把当前行移除掉
        //this  --> 触发当前点击事件的DOM对象
        $(this).parent().parent().remove();  // 链式操作
    });
    // 新增按钮的功能
    $("#add").click(function () {
        // 点击新增按钮要做的事儿
        // 1. 移除cover和modal的hide样式
        $(".cover,.modal").removeClass('hide');
    });
    // 点击modal中的cancel按钮
    $("#cancel").click(function () {
       hideModal();
    });
    // 点击modal中的submit按钮
    $("#submit").click(function () {
        // 1. 获取用户输入的值
        var name = $("#name").val();
        var hobby = $("#hobby").val();
        // 2. 隐藏模态框,清空输入框
        hideModal();
        // 3. 创建一个tr标签,把数据塞进去
        var trEle = document.createElement("tr");
        $(trEle).append('<td><input type="checkbox"></td>');
        $(trEle).append('<td>' + name + '</td>');
        var tdTmp = document.createElement('td');
        tdTmp.innerText = hobby;
        $(trEle).append(tdTmp);
        $(trEle).append('<td><button>开除</button></td>')
        // 4. 把上一步的tr追加到表格的tbody后面
        $('tbody').append(trEle);
    });
  //先用下面这种方式写,你会发现一些问题,我们新添加的每一行数据里面的那个button标签点击删除的时候没有效果
    //  // 点击modal中的submit按钮
    // $("#submit").on('click', function () { #这个和直接$('submit').click(function ...)是一样的
    //     // 1. 获取用户输入的值
    //     var name = $("#name").val();
    //     var hobby = $("#hobby").val();
    //     // 2. 隐藏模态框,清空输入框
    //     hideModal();
    //     // 3. 创建一个tr标签,把数据塞进去
    //     var trEle = document.createElement("tr");
    //     $(trEle).append('<td><input type="checkbox"></td>');
    //     $(trEle).append('<td>' + name + '</td>');
    //     var tdTmp = document.createElement('td');
    //     tdTmp.innerText = hobby;
    //     $(trEle).append(tdTmp);
    //     $(trEle).append('<td><button>开除</button></td>')
    //     // 4. 把上一步的tr追加到表格的tbody后面
    //     $('tbody').append(trEle);
    // })
</script>
</body>
</html>

三、补充内容:

jquery除了咱们上面讲解的常用知识点之外,还有jquery 插件、jqueryUI知识点

jqueryUI 官网:

https://jqueryui.com/

jqueryUI 中文网:

https://www.jqueryui.org.cn/

jquery插件内容包含

image.png

官网demo:

https://www.oschina.net/project/tag/273/jquery

里面包含了jquery插件效果和实现代码,大家可以好好的玩一下了!


【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200