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事件和动画.，对刚学习的同学帮助很大
在JavaScript的世界里，jQuery库为开发者提供了极大的便利，特别是在处理DOM操作和事件处理上。"jQuery鼠标滚轮事件"是一个非常实用的功能，它允许我们监听并响应用户使用鼠标滚轮时的操作，以此来实现诸如页面滚动...
三、jQuery事件 1. 基本事件绑定：jQuery提供了`.on()`方法来绑定事件。例如，`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时，执行匿名函数内的代码。 2. 鼠标事件：常见...
为了捕捉这一行为并根据需要做出响应，开发者通常会使用JavaScript或jQuery来监听滚轮事件。本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一...
通过以上对jQuery事件处理和动画效果的讲解，相信你已经对这两个主题有了全面的理解。结合实际的HTML文档，不断练习和探索，你将能熟练运用jQuery，提升网页交互体验。在实践中，不断学习，持续进步，是成为优秀的...
3. **`.bind()`**、**`.live()`**、**`.delegate()`**：这些都是早期jQuery版本中使用的方法，虽然在新版本中已被`.on()`替代，但理解它们有助于了解jQuery的发展历程。其中，`.bind()`与`.on()`类似，`.live()`和`....
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何为jQuery添加自定义事件机制，这将帮助开发者扩展jQuery的功能，实现更加个性化的...
jQuery历史事件时间轴插件;jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件
3. 动画完成：如果使用jQuery的动画方法，如`.fadeIn()`或`.slideUp()`，可以监听`animationend`事件来知道动画何时结束。 4. 视口可见性变化：若关心元素是否在视口内，可以使用`scroll`事件和`Intersection ...
jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装，形成了更好的事件处理机制； 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法（教材P263表A-4...
3. jQuery中的事件委托技术：为了解决动态元素的事件处理问题，jQuery引入了一种名为“事件委托”的技术。事件委托允许我们将事件监听器绑定到一个父级元素上，而不是直接绑定到目标元素上。这样，即使目标元素是...
《jQuery事件函数共4页.pdf》是一份详细探讨jQuery事件处理的资料，它涵盖了JavaScript库jQuery中的关键事件处理概念和函数。jQuery简化了DOM（文档对象模型）事件处理，使得在网页交互中添加、移除和触发事件变得...
triggerTracker, 用于跟踪jQuery事件的jQuery调试工具 triggerTrackerTriggerTracker是跟踪jQuery事件的工具。 它是一个单独的JavaScript文件，当加载时，它向与jQuery事件触发和事件处理程序相关的浏览器的控制台...
《jQuery带事件记录的多功能日历详解》 在网页开发中，日历插件是一种常见的交互元素，用于显示日期、安排事件以及提醒用户。本文将深入探讨一款特别的jQuery日历插件，它具备事件记录功能，使得日历不仅美观，而且...