锋利的JQuery-Jquery中的事件和动画
有时候觉得这些内容都好简单，真想看看就算了。
事件绑定
bing(type [,data],fn)
第一个参数：事件类型包括：blur,focus,load,resize,scroll,unload,click,dbclick,
mousedown,mouseup,mousemove,mouseover,mouseout,mouseenter,
mouseleave,change,select,submit,keydow,keypress,keyup和error
第二个参数可选，作为event.data属性值传递给事件对象的额外数据对象。
第三个参数用来绑定处理函数
通过一个实例：
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
实现随鼠标移动而显示的效果：
(function(){
$("#panel h5.head").mouseover(function(){
$(this).next("div.content").show();
});
$("#panel h5.head").mouseout(function(){
$(this).next("div.content").hide();
})
})
合成事件
1.hover()
语法为hover(enter,leave),上面的例子则可以写成：
$(function(){
$(#panel h5.head).hover(function(){
$(this).next("div.content").show();
},function(){
$(this).next("div,content").hiden();
})
})
2.toggle()
语法为toggle(fn1,fn2,fn3..):
$(function(){
$(#panel h5.head).toggle(function(){
$(this).addClass("highlight");
$(this).next("div.content").show();
},function(){
$(this).removeClass("highlight");
$(this).next("div,content").hiden();
})
})
冒泡事件
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
});
// 为div元素绑定click事件
$('#content').bind("click",function(){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script> <body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div> <div id="msg"></div>
</body>
<script type="text/javascript">
$(function(){
// 为span元素绑定click事件
$('span').bind("click",function(event){
var txt = $('#msg').html() + "<p>内层span元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为div元素绑定click事件
$('#content').bind("click",function(event){
var txt = $('#msg').html() + "<p>外层div元素被点击.<p/>";
$('#msg').html(txt);
event.stopPropagation(); // 阻止事件冒泡
});
// 为body元素绑定click事件
$("body").bind("click",function(){
var txt = $('#msg').html() + "<p>body元素被点击.<p/>";
$('#msg').html(txt);
});
})
</script>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div> <div id="msg"></div>
</body>
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username = $("#username").val(); //获取元素的值
if(username==""){ //判断值是否为空
$("#msg").html("<p>文本框的值不能为空.</p>"); //提示信息
event.preventDefault(); //阻止默认行为 ( 表单提交 )
//或者return false;
}
})
})
</script>
<body>
<form action="test.html">
用户名：<input type="text" id="username" />
<br/>
<input type="submit" value="提交" id="sub"/>
</form> <div id="msg"></div>
</body>
事件对象属性
<script>
$(function(){
$("a").click(function(event) {
alert(event.type);//获取事件类型
return false;//阻止链接跳转
});
})
</script>
<body>
<a href='http://google.com'>click me .</a>
</body> "click"
event.preventDefault()方法
event.stopPropagation()方法
<script>
$(function(){
$("a[href=http://google.com]").click(function(event) {
alert(event.target.href);//获取触发事件的<a>元素的href属性值
return false;//阻止链接跳转
});
})
</script>
event.relatedTarget()：mouseover和mouseout所发生的元素可以通过event.relatedTarget()
锋利的JQuery-Jquery中的事件和动画的更多相关文章
- jQuery中的事件和动画——《锋利的jQuery》（第2版）读书笔记2
第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){ // 编写代码... }); 可以简写成: $(function( ...
- jQuery中的事件与动画<思维导图>
Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...
- 第三章 jQuery中的事件与动画
第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...
- jquery ajax 中各个事件执行顺序
jquery ajax 中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事 ...
- jQuery中的事件和动画 以及视频展示效果实例
经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...
- 锋利的jQuery中的事件与动画
奋夜的奋斗 ---- 事件与动画 ---- 来自地狱的战镰 小小的单词难不倒我们哦!!!!!!! bind:绑定 unbind:接触绑定 toggle:栓牢 fadeou ...
- 锋利的jQuery ——jQuery中的事件和动画（四）
一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){} 方法内注册的事件, ...
- jQuery中的事件和动画效果
刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可 ...
- jQuery中的事件与动画 (你的明天Via Via)
众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...
- Jquery中的事件和动画
在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...
随机推荐
- XML节点处理
XmlDocument xmlDoc = new XmlDocument(); if (!File.Exists(xmlFileName)) { return string.Empty; } xmlD ...
- Web性能压力测试工具之Siege详解
PS:Siege是一款开源的压力测试工具,设计用于评估WEB应用在压力下的承受能力.可以根据配置对一个WEB站点进行多用户的并发访问,记录每个用户所有请求过程的相应时间,并在一定数量的并发访问下重复进 ...
- DHT网络第一部分研究结果 加入长期在线的node
源码:http://jijiea.com/upfile/DHT_Part1_How_To_Join_In_DHT.zip
- 一个基于python的即时通信程序
5月17日更新: 广播信息.用户列表.信息确认列表以及通信信息,从原来的用字符串存储改为使用字典来存储,使代码更清晰,更容易扩展,具体更改的格式如下: 广播信息(上线): { 'status': 信息 ...
- jquer ajax
function SetValue() { var strCodeName = $("#MainContent_ddlFullNameAndFullName").val(); ) ...
- iOS 进阶 第一天(0323)
0323 Storyboard连线错误 如下图: 不允许直接修改对象的结构体属性成员,但允许直接整体修改对象的结构体属性 如下图: 打印一个控件对象的frame 如下图: 如果一个控件无论怎么改变它的 ...
- 【BZOJ3262】 陌上花开
Description 有n朵花,每朵花有三个属性:花形(s).颜色(c).气味(m),又三个整数表示.现要对每朵花评级,一朵花的级别是它拥有的美丽能超过的花的数量.定义一朵花A比另一朵花B要美丽,当 ...
- submit与button区别提交区别
提交表单时使用submit会自动提交form表单数据, 如果使用jquery的form表单插件时需要将提交按钮改为button时$("#表单id").ajaxSubmit({}); ...
- Indri中的动态文档索引技术
Indri中的动态文档索引技术 戴维 译 摘要: Indri 动态文档索引的实现技术,支持在更新索引的同时处理用户在线查询请求. 文本搜索引擎曾被设计为针对固定的文档集合进行查询,对不少应用来说,这种 ...
- hdu 4706 Children's Day（模拟）
http://acm.hdu.edu.cn/showproblem.php?pid=4706 [题目大意]: 用a-z排出N的形状,输出大小为3-10的N,如果超过z之后,重新从a开始 下面是大小为3 ...