锋利的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中的学习中为了能使让页面以 ...
随机推荐
- 多项分布(multinominal distribution)
简介 更一般性的问题会问:“点数1~6的出现次数分别为(x1,x2,x3,x4,x5,x6)时的概率是多少?其中sum(x1~x6)= n”.这就是一个多项式分布. 定义 把二项分布推广至多个(大于2 ...
- DB Cache Reloaded Fix缓存不能被激活解决方法
1.创建wp-content/plugins/db-cache-reloaded-fix/cache目录. 2.将cache权限改为777. 3.拷贝wp-content/plugins/db-cac ...
- .NET Web后台动态加载Css、JS 文件，换肤方案
后台动态加载文件代码: //假设css文件:TestCss.css #region 动态加载css文件 public void AddCss() { HtmlGenericControl _CssFi ...
- TextBox 绑定到DataTable某一列属性上
将TextBox绑定到DataTable某一列属性上 DataTable dt = GetDataTable() textBox1.DataBindings.Add("Text", ...
- Transact-SQL 存储过程（c#调用执行）
1. Microsoft SQL Server Management Studio 中创建 存储过程 1.1 借助模板资源管理器中的Stored Procedure模板进行修改创建 1.2 直接新建查 ...
- [原创] linux课堂-学习笔记-课程3.Linux目录结构介绍及内核与shell分析
一.目录说明 1.1 bin 一般用户,可执行的系统内置命令 1.2 sbin 系统管理员,可执行的系统内置命令 1.3 boot 启动文件目录,启动有关的文件都保存在此 1.4 dev 设备管理文件 ...
- Catalyst揭秘 Day3 sqlParser解析
Catalyst揭秘 Day3 sqlParser解析 今天我们会进入catalyst引擎的第一个模块sqlparser,它是catalyst的前置模块. 树形结构 从昨天的介绍我们可以看到sqlPa ...
- Linux进程间通信IPC学习笔记之同步二（SVR4 信号量)
Linux进程间通信IPC学习笔记之同步二(SVR4 信号量)
- shell curl
最近突然发现了一个有趣的问题:怎样判断日期是工作日还是节假日.(http://www.cnblogs.com/ZXdeveloper/p/4018886.html) 顺便发现了一个有用的网址:http ...
- WPF 多线程处理(2)
WPF 多线程处理(1) WPF 多线程处理(2) WPF 多线程处理(3) WPF 多线程处理(4) WPF 多线程处理(5) WPF 多线程处理(6) WPF UI 设计需要自动适应窗体大小,那么 ...