什么是事件?
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。在事件中经常使用术语 " 触发 " (或 " 激发 " )常用click()方法触发
DOM的加载
$(document).ready() 方法与 window.onload () 方法的区别:
事件绑定
使用bind()方法为每个匹配元素的特定事件绑定事件处理函数。bind() 方法的调用格式: bind(type,[data], fn )
• type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如 “click” 或 “submit” ,还可以是自定义事件名。
• data: 作为 event.data 属性值传递给事件对象的额外数据对象
• fn : 绑定到每个匹配元素的事件上面的处理函数
实例:
//事件绑定
$("#btn1").bind("click",function(){
alert("点我触发bind函数");
})
<button id="btn1">点我触发bind函数</button>
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)
使用 jQuery 的 is()方法判断元素是否可见,使用is()方法:
alert($("button").parent().is("body"));
/*
* $("#b1").is(":visible") 判断id为d1的元素是否可见
* 可见返回true,不可见就返回false
*
* next($("#b1").is(":visible"));
*/
alert("#btn2").is(":visible");
$("#btn2").click(function(){
if($("#b1").is(":visible")){
//$(this).next().css();
$(this).next().hide();
}else{
$(this).next().show();
}
})
合成事件-hover()
hover()模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数。
hover() 方法语法结构为: hover([over,]out)
• over: 鼠标移到元素上要触发的函数
• out: 鼠标移出元素要触发的函数
实例:
$(function(){
/*
* 合成事件hover()方法的语法结构:
* hover(enter,leave);
*
* */
$("#btn2").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
})
})
<button id="btn1">点我触发bind函数</button>
<button id="btn2">隐藏或者显示</button>
<div id="b1" style="display: none;">
<img src="img/log.jpg"/>
</div>
web前端开发学习Q-q-u-n:784783012 ,分享学习的方