JS美化,压缩http://js.clicki.cn/
1 ready和load的区别
2 bind事件
3 hover伪类
4 事件冒泡,事件默认操作(参考http://topic.csdn.net/u/20081205/11/cc587309-19ad-4e3b-af89-53615e310cf5.html
)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery-事件</title>
<!-- 这里用到CSS伪类,IE6中不支持 -->
<style type="text/css">
<!--
.buttonStyle {
background-color: #CCC;
}
.buttonStyle:hover {
background-color: #F0F;
}
.buttonCss {
background-color: #FCF;
}
.buttonCssHover {
background-color: #6F0;
}
-->
</style>
<script language="javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("div").bind("click",
function() {//注册DIV click 事件
alert("DIV click event.");
});
//hover事件
$("#buttonTag2").hover(function() {//mouseover
$(this).removeClass();//注意这里this 是指button元素,而不是JQuery 对象,JQuery可以这样使用它
$(this).addClass("buttonCssHover");
},
function() {//mouseout
$(this).removeClass();
$(this).addClass("buttonCss");
});
$("#aTag1").click(function(event) {//click 的简写.event 是JS中的对象,因为使用JQuery 的缘故,event可以在IE下使用
event.stopPropagation();//停止事件冒泡(在这里DIV 不会触发 click 事件,对比buttonTag1)
event.preventDefault();//停止标签默认操作(在这里a 将不执行链接)
});
$("#aTag2").click(function() {
return false;//stopPropagation,preventDefault 的简写
});
funImage();
}
);
//注意$(document).ready()和<body onload="">的区别.window.onload 在页面完全加载完后执行类似于$(document).load(),ready()执行时一些支持文件还没完成下载,些时注意.(如大图片,此时height,width无效)
function funImage(){
image = document.createElement("img");
image.src = "http://www.wallcoo.com/film/Corpse_Bride/wallpapers/1024x768/%5Bwallcoo.com%5D_The_Corpse_Bride_01001.jpg";
if (image.onreadystatechange) {
if (image.readyState == "complete") {//IE
image.height=100;//这里因为image 没有插入所以不能使用$("image")
image.width=76;
$("DIV").append(image);
}
} else {
image.onload = function() {//FireFox
image.height=100;
image.width=76;
$("DIV").append(image);
};
}
}
</script>
</head>
<body>
<div>
<input type="button" id="buttonTag1" class="buttonStyle" value="点击1" />
<input type="button" id="buttonTag2" class="buttonCss" value="点击2" />
<a href="http://www.iteye.com" id="aTag1">aTag1</a> <a href="http://www.google.com" id="aTag2">aTag2</a> </div>
</body>
</html>
分享到:
相关推荐
jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡jquery-事件冒泡...
jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件
jquery 监听 键盘 事件
jquery事件
jQuery 事件以及处理方法 jQuery 事件 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。 触发实例:$("button#demo").click() 上面的例子将触发 id="demo" 的 button 元素的 click 事件。 ...
jQuery事件和动画.,对刚学习的同学帮助很大
jQuery入门,jQuery入门,jQuery入门,jQuery入门
jQuery第4天知识点:jQuery节点操作、jQuery特殊属性操作、jQuery事件机制.zip
JQUERY事件大全,方便学习jquery.
开发工具与关键技术:Visual Studio jQuery事件 jQuery事件相关知识点总结
jQuery事件日历插件Calendar是一款可帮助您在网页上创建事件日历和日期选择器,支持选择天,月份,年份,并能自定义日期对应的事件。
jQuery历史事件时间轴插件;jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件
jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4...
jquery监听鼠标滚轮事件+js监听滚轮事件, 两个例子,都可以通过! 目前已测试 ie8 火狐,360
jquery阻止事件冒泡jquery阻止事件冒泡jquery阻止事件冒泡
triggerTracker, 用于跟踪jQuery事件的jQuery调试工具 triggerTrackerTriggerTracker是跟踪jQuery事件的工具。 它是一个单独的JavaScript文件,当加载时,它向与jQuery事件触发和事件处理程序相关的浏览器的控制台...
jQuery参考手册-事件总结,供学习交流,谢谢~