2021-03-03 jQuery 中 各类事件的操作方法

<body>
<button class="btn1">1</button>
<button class="btn2">2</button>
<button class="btn3">3</button>
<button class="btn4">4</button>
<button class="btn5">5</button>
<button id="btn">#btn</button>
<input id="inPut" type="text" value="123">
<br>
<ul id="ulBox">
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
</ul>
<script src="./库/jquery-3.5.1.js"></script>
<script>
    //jQuery 中的事件

    //加载完成 ready();
    $(document).ready(function () {
        //完全写法
        console.log("加载完成");
    })
    //简单写法
    $(function () {
        console.log("加载完成");
    })

    //常规事件:
    // change click dblclick
    // blur focus focusin focusout
    // keydown keypress keyup
    // mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup
    // resize scroll select submit

    //添加事件: 对象.方法  不需要 on 例: btn.click([[data],fn])
    //data:事件传递的数据,在事件的执行参数上 fn:事件的匿名函数回调

    $("#btn").mousedown(10, function (e) {
        console.log(1, e.data);
        console.log("mousedown");
        $("#btn").css({
            backgroundColor: "#7fc982",
        })
    }).mouseup(function () {
        $("#btn").css({
            backgroundColor: "#cbcbcb",
        })
        console.log("mouseup");
    }).mouseover(function () {
        console.log("mouseover");
        $("#btn").css({
            backgroundColor: "#cbcbcb",
        })
    }).mouseleave(function () {
        $("#btn").css({
            backgroundColor: "#eaeaea",
        })
        console.log("mouseleave");
    })

    //聚焦失焦事件
    $("#inPut").focusin(function () {
        console.log("focusin");
    }).focusout(function () {
        console.log("focusout");
    }).focus(function () {
        console.log("focus");
    }).blur(function () {
        console.log("blur");
    })

    // //mousewheel :滚轮事件
    // $(document).bind("mousewheel", function (e) {
    //     console.log(e.originalEvent.deltaY);
    // })
    $(document).on("mousewheel", function (e) {
        console.log(e.originalEvent.deltaY);
    })

    //事件切换 hover:mouseenter + mouseout
    $(".btn1").hover(function () {
        console.log("mouseenter");
    }, function () {
        console.log("mouseout");
    })

    //事件处理
    //on off bind unbind one:绑定一次性事件 trigger:指定触发某事件

    //on:event selector data fn
    $(".btn2").on("click", 10, function (e) {
        console.log("btn2", e.data);
    })

    //使用 on 可以事件绑定 可以委托
    $("#ulBox").on("click", "li", function (e) {
        console.log((e.target).innerHTML);
    })

    //一次性绑定多个事件
    $(".btn3").on("mouseenter mouseleave", function (e) {
        if (e.type == "mouseenter") {
            console.log("mouseenter");
        } else {
            console.log("mouseleave");
        }
    })

    //off:移除事件 不写参数全部移除
    // $(".btn1").off()

    //移除指定事件
    $(".btn1").off("mouseenter")

    //one :绑定一次性事件
    $(".btn4").one("click", function () {
        console.log("btn4");
    })

    //trigger:指定触发某事件(令某事件自动触发) 触发自定义事件
    $("#inPut").on("timer",function () {
        setTimeout(function () {
            $("#inPut").trigger("focus")
        },1000)
    }).trigger("timer")


</script>
</body>
已标记关键词 清除标记
相关推荐
jQuery攻略目录 图书信息 内容简介 作者简介 图书目录 编辑本段图书信息    书 名: jQuery攻略   作 者:哈瓦尼(B.M.Harwani)   出版社: 人民邮电出版社   出版时间: 2010年10月1日   ISBN: 9787115238306   开本: 16开   定价: 59.00元 编辑本段内容简介   《jQuery攻略》对使用jQuery过程遇到的各类问题给出了解决方案,比如,如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果,以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。   《jQuery攻略》非常适合想利用最少的代码创建交互性网站的开发人员学习和参考,也适合懂少量HTML知识又想创建动态网站的初学者学习。 编辑本段作者简介   作者:(印度)哈瓦尼(B.M.Harwani) 译者:侯伯薇 陈宁   B.M.Harwani,印度阿杰梅尔的微芯计算机教育心(MCE)总经理。他毕业于Pane大学的计算机工程系获得学士学位,拥有印度政府机构DOEACC颁发的C级证书(计算机硕士文凭)。在教学领域工作的15年多来,他开发出了富有艺术性的教学方法,以人人都能懂的方式去解释哪怕最复杂的课题。 编辑本段图书目录   第1章 jQuery基础知识 1   1.1 jQuery的安装 1   1.2 选择DOM节点 2   1.3 延迟JavaScript的执行 3   1.4 把CSS应用到元素上 3   1.5 选择一系列非标准的HTML元素 4   1.6 计数DOM节点和显示其文本 5   1.7 获得一个元素的HTML代码 7   1.8 改变DOM节点的内容 8   1.9 快速创建DOM节点 9   1.10 为不同HTML元素分配相同类名并对它们应用样式 12   1.11 小结 13   第2章 数组和字符串 14   2.1 利用数组在列表显示名字 14   2.2 操作数组元素 17   2.3 筛选数组元素,只显示所需的数据 19   2.4 字符串数组和数值数组的排序 22   2.5 拆分数组 24   2.6 合并数组 26   2.7 把数值数组转换成字符串,并查找其子字符串 27   2.8 创建对象数组 28   2.9 为对象数组排序 30   2.10 小结 32   第3章 事件处理 33   3.1 查找被点击的按钮 34   3.2 自动触发事件 37   3.3 点击之后禁用按钮 39   3.4 处理鼠标事件 40   3.5 查明哪个鼠标键被按下 43   3.6 查找鼠标按下时的屏幕坐标 44   3.7 动态地突出显示文本 45   3.8 随着鼠标移动使图像明亮或模糊 47   3.9 查明元素何时获得和失去焦点 49   3.10 在按钮上应用悬停效果 50   3.11 切换应用一个CSS类 52   3.12 创建基于图像的变换 54   3.13 为响应事件而添加和删除文本 57   3.14 应用样式作为对事件的响应 58   3.15 显示文字气球 60   3.16 创建“返回顶部”链接 63   3.17 提供“更多……”链接 64   3.18 以动画效果显示文本 67   3.19 以滑动效果来替换文本 70   3.20 使图像滚动 71   3.21 确定被按下的键 75   3.22 防止事件冒泡 77   3.23 链接多个活动 80   3.24 小结 81   第4章 表单验证 82   4.1 确认必需字段不留空 82   4.2 验证数字字段 84   4.3 验证电话号码 88   4.4 验证用户ID 90   4.5 验证日期 92   4.6 验证电子邮件地址 94   4.7 检查复选框是否被选 96   4.8 检查单选按钮是否被选 99   4.9 检查select元素的选项是否被选 101   4.10 把样式应用到选项和表格按钮 104   4.11 一步选择或取消所有的复选框 107   4.12 验证两个字段 110   4.13 验证密码和确认密码字段是否匹配 113   4.14 禁用某些字段 116   4.15 验证整个表单 118   4.16 表单数据序列化 128   4.17 小结 132   第5章 页面导航 133   5.1 编写面包屑菜单 133   5.2 把悬停效果添加到菜单项 135   5.3 创建上下文菜单 137   5.4 创建具有快捷键的导航菜单 140   5.5 创建一个右键单击上下文菜单 144   5.6 创建具有独立菜单项的两个菜单 147   5.7 建立包含子菜单项的两个菜单 149   5.8 创建折叠式菜单 153   5.9 创建动态可视化菜单 156   5.10 小结 161   第6章 视觉特效 162   6.1 水平和垂直显示图片 162   6.2 创建水平滑动的图片浏览器 165   6.3 显示一幅图片,点击时向左滚动并消失 166   6.4 创建图片,使它向左滚动消失,然后从右侧重新出现 169   6.5 使图片在浏览器窗口间滚动 171   6.6 在鼠标悬停时依次显示图片 172   6.7 垂直滚动图片 175   6.8 水平滚动图片 179   6.9 创建新闻滚动浏览器 183   6.10 在鼠标悬停时显示放大的图片 188   6.11 按页显示图片 193   6.12 在任意两个方向上切换图片 196   6.13 编写钟摆式滚动器 199   6.14 使用数组来滚动图片 202   6.15 小结 205   第7章 处理表格 206   7.1 在鼠标悬停时突出显示行 206   7.2 交替突出显示相邻列 207   7.3 过滤行 211   7.4 隐藏选定列 213   7.5 分页显示表格 215   7.6 展开和折叠列表项 218   7.7 展开和折叠行 221   7.8 对列表项目排序 226   7.9 对表格排序 227   7.10 过滤表格的行 233   7.11 小结 235   第8章 Ajax 237   8.1 显示欢迎信息 237   8.2 执行认证 241   8.3 验证用户名 243   8.4 验证邮件地址 246   8.5 使用自动完成 252   8.6 导入HTML 256   8.7 取得JSON数据 259   8.8 取得XML数据 261   8.9 分页显示表格 265   8.10 小结 268   第9章 使用插件 269   9.1 对表格的任一列进行过滤,并且可以设置每页的行数 269   9.2 为图片添加注解 271   9.3 拖放表格的行 273   9.4 取得、序列化并清理表单控件 275   9.5 通过Ajax提交表单 277   9.6 找到元素的准确位置和大小 281   9.7 以传送带的方式显示图片 284   9.8 使用datepicker选择日期 286   9.9 对表格排序 288   9.10 小结 289   第10章 使用CSS 290   10.1 区分HTML元素 291   10.2 向内嵌在一个元素的另一个元素应用样式 292   10.3 缩进段落 293   10.4 将段落的首字母设为大写 294   10.5 去除标题和段落之间的间隔 295   10.6 向标题文字应用样式 297   10.7 缩进多个段落的第一行 297   10.8 创建带有悬挂缩进的段落 298   10.9 创建带有边框的提取引用 299   10.10 创建带有图片的提取引用 301   10.11 向列表项应用列表属性 302   10.12 只对选定的列表项应用样式 303   10.13 在列表项之间放置分隔线 306   10.14 向列表应用图片标记 307   10.15 创建水平显示的列表 308   10.16 在超链接上应用样式 309   10.17 为HTML元素赋予不同的尺寸 311   10.18 放置HTML元素 313   10.19 创建多栏的布局 314   10.20 使文字围绕图片显示 316   10.21 在图片背后放置阴影 317   10.22 当鼠标移过链接的时候改变鼠标样式 319   10.23 在指定的区域显示长文字 320   10.24 创建圆角的栏 322   10.25 应用文字装饰 323   10.26 缩放图片 324   10.27 设置背景图片 326   10.28 使背景图片在浏览器央显示 327   10.29 保持背景图片固定 328   10.30 小结 330
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页