JQuery 事件(3)

最新推荐文章于 2023-01-07 11:07:03 发布

zhouxianglh

最新推荐文章于 2023-01-07 11:07:03 发布

阅读量117

点赞数

分类专栏： JavaScript 文章标签： jQuery JavaScript IE CSS Firefox ViewUI

JavaScript 专栏收录该内容

23 篇文章

订阅专栏

JS美化,压缩http://js.clicki.cn/

1 ready和load的区别

2 bind事件

3 hover伪类

4 事件冒泡，事件默认操作(参考http://topic.youkuaiyun.com/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>