`
zhouxianglh
  • 浏览: 267420 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JQuery 事件(3)

阅读更多

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事件和动画.ppt

    jQuery事件和动画.,对刚学习的同学帮助很大

    jquery鼠标滚轮事件

    在JavaScript的世界里,jQuery库为开发者提供了极大的便利,特别是在处理DOM操作和事件处理上。"jQuery鼠标滚轮事件"是一个非常实用的功能,它允许我们监听并响应用户使用鼠标滚轮时的操作,以此来实现诸如页面滚动...

    jquery效果事件

    三、jQuery事件 1. 基本事件绑定:jQuery提供了`.on()`方法来绑定事件。例如,`$("#myButton").on("click", function() { ... })`表示当id为"myButton"的元素被点击时,执行匿名函数内的代码。 2. 鼠标事件:常见...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    为了捕捉这一行为并根据需要做出响应,开发者通常会使用JavaScript或jQuery来监听滚轮事件。本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一...

    jquery快速学三(事件与动画)

    通过以上对jQuery事件处理和动画效果的讲解,相信你已经对这两个主题有了全面的理解。结合实际的HTML文档,不断练习和探索,你将能熟练运用jQuery,提升网页交互体验。在实践中,不断学习,持续进步,是成为优秀的...

    JQuery绑定事件

    3. **`.bind()`**、**`.live()`**、**`.delegate()`**:这些都是早期jQuery版本中使用的方法,虽然在新版本中已被`.on()`替代,但理解它们有助于了解jQuery的发展历程。其中,`.bind()`与`.on()`类似,`.live()`和`....

    JQuery事件Demo

    **jQuery事件Demo详解** 在Web开发中,JavaScript的事件处理是构建交互式用户界面的关键技术。jQuery库大大简化了这一过程,提供了丰富的API和方法来处理DOM(文档对象模型)中的事件。本篇文章将深入探讨jQuery...

    为jQuery添加自定义事件机制

    在JavaScript的世界里,jQuery是一个非常流行的库,它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本文将深入探讨如何为jQuery添加自定义事件机制,这将帮助开发者扩展jQuery的功能,实现更加个性化的...

    jQuery历史事件时间轴插件.rar|jQuery历史事件时间轴插件.rar

    jQuery历史事件时间轴插件;jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件jQuery历史事件时间轴插件

    jquery监听DIV的事件

    3. 动画完成:如果使用jQuery的动画方法,如`.fadeIn()`或`.slideUp()`,可以监听`animationend`事件来知道动画何时结束。 4. 视口可见性变化:若关心元素是否在视口内,可以使用`scroll`事件和`Intersection ...

    jQuery事件及绑定.pptx

    jQuery事件基础 1、jQuery事件概述 jQuery对JavaScript操作DOM事件进行了封装,形成了更好的事件处理机制; 包括常用事件、事件绑定与解绑等。jQuery事件处理方法是jQuery的核心函数。 常用事件方法(教材P263表A-4...

    jQuery为动态生成的select元素添加事件的方法

    3. jQuery中的事件委托技术:为了解决动态元素的事件处理问题,jQuery引入了一种名为“事件委托”的技术。事件委托允许我们将事件监听器绑定到一个父级元素上,而不是直接绑定到目标元素上。这样,即使目标元素是...

    jQuery事件函数共4页.pdf.zip

    《jQuery事件函数共4页.pdf》是一份详细探讨jQuery事件处理的资料,它涵盖了JavaScript库jQuery中的关键事件处理概念和函数。jQuery简化了DOM(文档对象模型)事件处理,使得在网页交互中添加、移除和触发事件变得...

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具.zip

    triggerTracker, 用于跟踪jQuery事件的jQuery调试工具 triggerTrackerTriggerTracker是跟踪jQuery事件的工具。 它是一个单独的JavaScript文件,当加载时,它向与jQuery事件触发和事件处理程序相关的浏览器的控制台...

Global site tag (gtag.js) - Google Analytics