jQuery事件

jQuery事件

jQuery常用事件：

click(function(){...})  //  单击
hover(function(){...})	//  悬浮
blur(function(){...})	//  失去焦点
focus(function(){...})	// 聚焦
change(function(){...})	//  文本域改变
keyup(function(){...})	//  按键抬起
keydown(function(){...})  // 按键按下

绑定事件的两种方式：

方式1：jQuery对象.事件名(function(){})
	eg： $('#d1').click(function(){alert('弹一弹')})
    
方式2：jQuery对象.on('事件名',function(){})
	eg： $('#d1').on('click',function(){alert('弹弹弹')})


有时候绑定事件可能没有效果 这个时候可以考虑切换绑定方式
	方式1不行就方式2
	方式2不行就方式1

补充:

hover悬浮会触发两个事件：悬浮进来一个 悬浮出去一个。

示例：

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>
hover事件示例： 
<!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>

阻止后续事件执行

目的 ：为了组织后续的事件执行
格式 ：
1.阻止该标签后续事件的执行 方式1   推荐
		return false
2.阻止该标签后续事件的执行 方式2   了解
	    e.preventDefault()
准备工作 
<body>
<form action="">
    <input type="text">
    <input type="submit" id="d1">
    <script>
        $('#d1').click(function (){
            alert('不让你提交')
        })
    </script>
</form>
</body>

示例：

需求：我们要在提交按钮事件点击后触发弹窗事件，并且阻止触发提交事件。

<body>
<form action="">
    <input type="text">
    <input type="submit" id="d1">
    <script>
        $('#d1').click(function ('e'){
            alert('不让你提交')
            return false
            // e.preventDefault()
        })
    </script>
</form>
</body>

事件冒泡

事件冒泡其实是一种现象：我们在触发子标签的时候同时触发了他的父标签。
// 我们来看一下这种现象，并且阻止他。
事件冒泡与阻止事件冒泡代码块 
<body>
<div>div
    <p>div>p
        <span>div>p>span</span>
    </p>
</div>
    <script>
        $('span').click(function (){
            alert('弹出span')
            return false   // 阻止事件冒泡
            // e.stopPropagation()  方式二:需添加参数e
        })
        $('p').click(function (){
            alert('弹出p')
        })
        $('div').click(function (){
            alert('弹出div')
        })
    </script>
</body>

文档加载

// 我们在编写js语句时，我们通常会用到标签的一些属性，所以通常会在body最下边编写scriptjs代码
// 还有就是使用文档加载方式来实现，这里介绍通过jQuery的方式来实现。

// 原生js文档加载方式
window.onload = function () {}
// jQuery文档加载方式01
$(document).ready(function () {})
// jQuery文档加载方式02
$(function(){})

事件委托

// 事件委托相当于原先标签元素可以触发的事件，委托给另一个标签元素同样可以触发相同的事件。
委托按钮事件 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery源码.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button>戳我</button>
<script>
        // 将body内部所有的点击事件委托给button按钮执行
        $('body').on('click','button',function () {
            // 创建一个button标签
            var btnEle = document.createElement('button')
            // 设置内部文本
            btnEle.innerText = '点我'
            // 将button标签添加到body内部
            $('body').append(btnEle)
        })

</script>
</body>
</html>

动画效果

// 基本
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])

示例：

$('div').hide(3000);		// 消失：时间三秒
$('div').show(3000);		// 显示：时间三秒
$('div').toggle(3000);		// 轮换：消失了就显示 显示就消失
$('div').slideDown(3000);	
$('div').slideUp(3000);
$('div').slideToggle(3000);
('div').fadeIn(2000);
$('div').fadeOut(2000);
$('div').fadeTo(2000,0.5);	// 两秒后淡出50%透明度
$('div').fadeToggle(2000);

实现点赞+1得效果

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
 <style>
    div {
        font-size: 100px;
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -80px;
      top: -40px;
      opacity: 1;
    }
  </style>
<body>
<div id="d1">点赞</div>

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

posted @   JasonBorn  阅读(63)  评论(0)  编辑  收藏  举报
相关博文：
· jQuery简介及导入问题
· js之DOM操作
· jQuery事件操作与动画效果
· jQuery事件
· jQuery基础之事件
阅读排行：
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
点击右上角即可分享
微信分享提示