IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> (与jQuery靠近乎)04-jQuery中的事件整合one篇 -> 正文阅读

[JavaScript知识库](与jQuery靠近乎)04-jQuery中的事件整合one篇

今天,我还是风尚,一个有梦想的咸鱼程序员

今天我们还来和jQuery来靠近乎


温馨提醒:好记性不如赖笔头,遇到新知识记得做好笔记哦


今日份咱们整点

一.jq中的事件(ready加载事件,on注册事件,off移除事件)

二.jq中的合成事件


以前的没看懂的,没了解的快去了解

风尚云网_CSDN博客风尚云网_CSDN博客https://blog.csdn.net/zsx0806?type=blog风尚云网_CSDN博客都会了进行今天的剧情,人生如戏,全看演技


?今日份必备单词(必须会背)

propagation 冒泡? ? ? ? ? ? ?prevent?阻止? ? ? ?default?默认? ? ? ? ? ?trigger触发

animate动画? ? ? ? ? ? ? ? ? ??slide滑动? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?fade淡入


接下来言归正传

1.jq中的事件

加载文档完成触发事件:?

语法:$(document).ready(function(){})

ready事件可以多次执行。

代码可以简写为:

? $(function(){})


另外谨记:

$(function(){})是window.onload执行前执行的

$(function(){})类似于原生js中的DOMContentLoaded事件,在DOM加载完毕后,页面全部内容(如图片等)完全加载完毕前被执行。而window.onload会在页面资源全部加载完毕后才会执行!

DOM文档加载步骤:?
1.解析HTML结构?
2.加载外部的脚本和样式文件?
3.解析并执行脚本代码?
4.执行$(function(){})内对应代码?
5.加载图片等二进制资源?
6.页面加载完毕,执行window.onload


注册事件

语法:on(events,fn)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 注*:events :事件名称? ?fn处理函数

语法:on(events,[selector],fn)

注:events 事件名称? ?selector 子选择器 fn处理函数

      //给btn注册点击事件
      $("#btn").on("click", function () {
        $("<p>我是新建的p元素</p>").appendTo("div");
      });

      //注册多个事件
      $("p").on("mouseover mouseout", function () {
        $("p").toggleClass("new");
      });

      //给div注册委托事件
      $("div").on("mouseover mouseout", "p", function () {
        $("p").toggleClass("new");
      });
自 jQuery 版本 1.7 起
on() 方法是 bind()和 delegate() 方法的结合体。该方法带来很多方便,简化了 jQuery 代码库。
      注意:使用 on() 方法添加的事件处理程序适用于当前及未来的元素(由脚本创建的新元素)。
      提示:如需移除事件处理程序,请使用 off() 方法。
      提示:如需添加只运行一次的事件然后移除,请使用 one() 方法。

? 补充:?one语法:(事件名称,fn)? ?执行一次

几种注册事件方法:


// 一:delegate 代理委托 是给父元素注册委托事件,如果给父元素中追加元素p,就会带有点击事件。1.$("div").delegate("p","click",function(){
  alert("delegate 代理委托注册 ");
});

//二:直接创建

2.$("div").click(function(){
  alert("直接创建");
});

//三:bind元素绑定。和第二中方法效果一样,可以同时注册多个事件
3.$("div").bind("click",function(){
  alert("bind绑定");
});
//四:on注册,上面能的on都能


移除事件

选择元素上移除一个或多个事件的事件处理函数。

语法:off(events,[selector],fn)

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

events:一个或多个空格分隔的事件类型和可选的命名空间,或仅仅是命名空间,比如"click", ????????????????"keydown.myPlugin", 或者 ".myPlugin".

selector:一个最初传递到.on()事件处理程序附加的选择器。

fn:事件处理程序函数以前附加事件上,或特殊值false.


二.jq中的合成事件

?jQuery有两个合成事件:hover()方法 和toggle()方法.
hover()方法:
hover()方法语法: hover(enter,leave)
hover()方法 用于模拟光标悬停事件.当光标移动到元素上时 , 会触发指定的第一个函数 , 当光标移出这个元素时 , 触发指定的第二个函数
toggle()方法:
toggle()方法的语法结构为: toggle(fnl, fn2, ...fnN);
toggle()方法用于模拟鼠标连续单击事件。第1次单击元素,触发指定的第1个函数(fn1);当再次单击同一元素时,则触发指定的第2个函数(fh2);如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。

本次分享到这里结束了



我还是风尚,一个有梦想的咸鱼程序员!让我们一起努力,共创明天的辉煌!喜欢就给个小关注啊,

关注风尚不迷路!

记得一键三连,禁止白嫖

风尚云网_CSDN博客https://blog.csdn.net/zsx0806?type=blog

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-11-12 19:30:07  更:2021-11-12 19:32:30 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/10 23:26:04-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码