day50 阻止事件冒泡 \默认事件的执行\后续事件的执 + jQuery内置动画

https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-10-6

1. 内容回顾
　　1. 今日面试题
　　2. 昨日内容
　　　　1. 文档操作
　　　　　　添加HTML元素到文档树中
　　　　　　1. 内部添加
　　　　　　　　1. 前面加
　　　　　　　　　　1. prepend()
　　　　　　　　　　2. prependTo()


　　　　　　　　2. 后面加
　　　　　　　　　　1. append()
　　　　　　　　　　2. appendTo()


　　　　　　2. 外部添加
　　　　　　　　　　1. 前面加
　　　　　　　　　　　　1. before()
　　　　　　　　　　　　2. insertBefore()


　　　　　　　　　　2. 后面加
　　　　　　　　　　　　　1. after()
　　　　　　　　　　　　　2. insertAfter()


　　　　　　3. 删除
　　　　　　　　　　　　remove()


　　　　　　4. 清空
　　　　　　　　　　　　empty()


　　　　　　5. 替换
　　　　　　　　　　　　1. replaceWith()
　　　　　　　　　　　　2. replaceAll()


　　　　　　6. 克隆
　　　　　　　　　　　　clone()/clone(true)   

　　　　　　　　　　　　　　　　　　　　true 复制标签的时候，把事件也给复制过来


　　　　2. 事件
　　　　　　1. DOM绑定事件的方式
　　　　　　　　1. onclick=f()
　　　　　　　　2. DOM对象.onclick=function(){...}
　　　　　　2. jQuery绑定事件的方式
　　　　　　　　1. $("").click(function(){...})
　　　　　　　　2. $("").on("click", "子选择器", function(){...})--> 事件委托--> 原理是事件冒泡
　　　　　　　　3. 阻止事件冒泡

　　3. 作业
　　　　使用事件委托给未来的标签绑定事件。



2. 今日内容
　　　　jQuery中文文档：http://jquery.cuishifeng.c

 

　　1. 阻止事件冒泡
　　　　event.stopPropagation()

由于标签的嵌套，会导致点击内层的事件，会传到外标签上

<!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>

<div id="d1">
    <p id="p1">
        <span id="s1">span</span>
    </p>
</div>

<hr>
<form action="">
    <input type="text" id="i2">
    <input type="submit" value="提交" id="i1">
</form>



<script src="jquery-3.3.1.js"></script>
<script>
    $("#s1").click(function (event) {
        // event表示事件本身
        alert("这是span标签");
        // 阻止事件冒泡
        // event.preventDefault()
        event.stopPropagation()
    });
    $("#p1").click(function () {
        alert("这是p标签")
    });
    $("#d1").click(function () {
        alert("这是div标签")
    });

    // 点击submit按钮，先校验input框的值为不为空，
    // 为空就不提交，不为空就提交
     $("#i1").click(function (event) {
        alert("这是form表单的提交按钮！");
        var value = $("#i2").val();
        if (value.length === 0){
            // 为空就不提交
            // 不执行后续默认的提交事件
            // 阻止默认事件的执行
            // event.preventDefault()
            return false;
        }
    });
</script>
</body>
</html>
View Code

 


　　2. 阻止默认事件的执行（通常用于阻止form表单的提交）
　　　　event.preventDefault()

我们点击表单提交submit时候，会执行submit绑定的事件后，还会默认提交表单


　　3. 阻止后续事件的执行
　　　　return false

 

<!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>

<div id="d1">
    <p id="p1">
        <span id="s1">span</span>
    </p>
</div>
<hr>
<form action="">
    <input type="text" id="i2">
    <input type="submit" value="提交" id="i1">
</form>



<script src="jquery-3.3.1.js"></script>
<script>
    $("#s1").click(function (event) {
        // event表示事件本身
        alert("这是span标签");
        // 阻止事件冒泡
        // event.preventDefault()
        event.stopPropagation()
    });
    $("#p1").click(function () {
        alert("这是p标签")
    });
    $("#d1").click(function () {
        alert("这是div标签")
    });

    // 点击submit按钮，先校验input框的值为不为空，
    // 为空就不提交，不为空就提交
     $("#i1").click(function (event) {
        alert("这是form表单的提交按钮！");
        var value = $("#i2").val();
        if (value.length === 0){
            // 为空就不提交
            // 不执行后续默认的提交事件
            // 阻止默认事件的执行
            // event.preventDefault()
            return false;
        }
    });
</script>
</body>
</html>
阻止！

 

<!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>
</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>
  // 全选
  $("#b1").on("click", function () {
    $(":checkbox").prop("checked", true);
  });
  // 取消
  $("#b2").on("click", function () {
    $(":checkbox").prop("checked", false);
  });
  // 反选
  $("#b3").on("click", function () {
    $(":checkbox").each(function () {
      var flag = $(this).prop("checked");
      $(this).prop("checked", !flag);
    })
  });
  // 按住shift键，批量操作
  // 定义全局变量
  var flag = false;
  // 全局事件，监听键盘shift按键是否被按下
  $(window).on("keydown", function (e) {
//    alert(e.keyCode);
    if (e.keyCode === 16){
      flag = true;
    }
  });
  // 全局事件,shift按键抬起时将全局变量置为false
  $(window).on("keyup", function (e) {
    if (e.keyCode === 16){
      flag = false;
    }
  });
  // select绑定change事件
  $("table select").on("change", function () {
    // 是否为批量操作模式
    if (flag) {
      var selectValue = $(this).val();
      // 找到所有被选中的那一行的select，选中指定值
      $("input:checked").parent().parent().find("select").val(selectValue);
    }
  })
</script>
</body>
</html>
按住shift 批量操作

 


　　4. jQuery内置动画
　　　　写个例子，看一下效果。有个印象就好
　　5. 补充
　　　　1. each
　　　　　　1. $.each(要遍历的对象, function(){...})
　　　　　　2. $("").each(function(){
　　　　　　　　// this 是进入循环体的当前标签
　　　　　　　　console.log(this);
　　　　　　　　})
　　　　　　3. 退出本层循环
　　　　　　　　return
　　　　　　4. 退出each循环
　　　　　　　　return false
　　　　2. .data()
　　　　　　1. .data(key, value) --> 存值
　　　　　　2. .data(key) --> 根据key取值
　　　　　　3. .data() --> 取所有键值对
　　　　　　4. .removeData(key) --> 根据key删除值
　　　　　　5. .removeData() --> 删除所有键值对
　　　　3. 扩展
　　　　　　1. $.extend() --> 给jQuery扩展自定义方法
　　　　　　2. $.fn.extend() --> 给jQuery对象扩展自定义方法

　　6. 以后页面的开发
　　　　　　1. DOM里只需记忆document.createElement()
　　　　　　2. 主要使用jQuery操作


　　　　　　3. 今日任务
　　　　　　　　1. 整理博客
　　　　　　　　2. 写大作业，jQuery版的增删改查

　　　　　　4. 明天安排
　　　　　　　　1. Bootstrap ：https://v3.bootcss.com/

　　　　　　　　复制和粘贴

　　　　　　5. 明天早上说一下装饰器

 

 

 

 

事件

常用事件

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

keydown和keyup事件组合示例：

<!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>
</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>
  // 全选
  $("#b1").on("click", function () {
    $(":checkbox").prop("checked", true);
  });
  // 取消
  $("#b2").on("click", function () {
    $(":checkbox").prop("checked", false);
  });
  // 反选
  $("#b3").on("click", function () {
    $(":checkbox").each(function () {
      var flag = $(this).prop("checked");
      $(this).prop("checked", !flag);
    })
  });
  // 按住shift键，批量操作
  // 定义全局变量
  var flag = false;
  // 全局事件，监听键盘shift按键是否被按下
  $(window).on("keydown", function (e) {
//    alert(e.keyCode);
    if (e.keyCode === 16){
      flag = true;
    }
  });
  // 全局事件,shift按键抬起时将全局变量置为false
  $(window).on("keyup", function (e) {
    if (e.keyCode === 16){
      flag = false;
    }
  });
  // select绑定change事件
  $("table select").on("change", function () {
    // 是否为批量操作模式
    if (flag) {
      var selectValue = $(this).val();
      // 找到所有被选中的那一行的select，选中指定值
      $("input:checked").parent().parent().find("select").val(selectValue);
    }
  })
</script>
</body>
</html>
按住shift 批量操作

 

hover事件示例：

mouseenter   
mouseleave
<!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>
    <style>
        body {
            margin: 0;
        }
        .menu {
            height: 50px;
            width: 100%;
            background-color: #0f0f0f;
            color: darkgray;
        }
        .menu>ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        .menu>ul>li {
            float: left;
            line-height: 50px;
            margin-right: 15px;
            position: relative;
        }
        .shop-cart {
            background-color: #00a9ff;
            color: white;
            height: 50px;
            width: 100px;
            position: absolute;
            right: 0;
            display: none;
        }
        .hover>.shop-cart {
            display: block;
        }
    </style>
</head>
<body>

<div class="menu">
    <ul>
        <li>登录</li>
        <li>注册</li>
        <li class="cart">购物车
            <div class="shop-cart">
                空空如也~
            </div>
        </li>
    </ul>
</div>
<script src="jquery-3.3.1.js"></script>
<script>


    $('.menu').on('mouseenter', '.cart', function() {//绑定鼠标进入事件
        $(this).addClass('hover');
    });

    $('.menu').on('mouseleave', '.cart', function() {//绑定鼠标划出事件
        $(this).removeClass('hover');
    });

</script>
</body>
</html>
hovers事件

 

实时监听input输入值变化示例：

<!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>

<input type="text" id="i1">

<script src="jquery-3.3.1.js"></script>
<script>
    // input框失去焦点就触发
    // $("#i1").blur(function () {
    //     var value = $(this).val();
    //     console.log(value);
    // });


    // 只要input框的值发生变化就触发
    $("#i1").on("input", function () {
        var value = $(this).val();
        console.log(value);
    })
</script>

</body>
</html>
input

 

事件绑定

  1. .on( events [, selector ],function(){})
  • events： 事件
  • selector: 选择器（可选的）
  • function: 事件处理函数

移除事件

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

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

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

阻止后续事件执行

  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>
View Code

 

 

注意：

像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。

想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件：

$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
    $(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
    $(this).removeClass('hover');
});

阻止事件冒泡

复制代码
<!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>
复制代码

页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

两种写法：

$(document).ready(function(){
// 在这里写你的JS代码...
})

简写：

$(function(){
// 你在这里写你的代码
})

文档加载完绑定事件，并且阻止默认事件发生：

 登录校验示例

与window.onload的区别

  • window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
  • jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

示例：

表格中每一行的编辑和删除按钮都能触发相应的事件。

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

动画效果

复制代码
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
复制代码

自定义动画示例：

<!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>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 1000)
  })
</script>
</body>
</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；

伏笔...

.data()

在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。

.data(key, value):

描述：在匹配的元素上存储任意相关数据。

$("div").data("k",100);//给所有div标签都保存一个名为k，值为100

.data(key):

描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。

$("div").data("k");//返回第一个div标签中保存的"k"的值

.removeData(key):

描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。

$("div").removeData("k");  //移除元素上存放k对应的数据

示例：

模态框编辑的数据回填表格

 

插件(了解即可)

jQuery.extend(object)

jQuery的命名空间下添加新的功能。多用于插件开发者向 jQuery 中添加新函数时使用。

示例：

复制代码
<script>
jQuery.extend({
  min:function(a, b){return a < b ? a : b;},
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
</script>
复制代码

jQuery.fn.extend(object)

一个对象的内容合并到jQuery的原型，以提供新的jQuery实例方法。

复制代码
<script>
  jQuery.fn.extend({
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>
复制代码

 

 

posted @ 2020-06-04 19:49  蜗牛般庄  阅读(167)  评论(0)  编辑  收藏  举报
Title
页脚 HTML 代码