今天,我还是风尚,一个有梦想的咸鱼程序员
今天我们还来和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);如果有更多函数,则依次触发,直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。