jQuery复习：第四章
一、jQuery中的事件
1.加载DOM
$(document).ready()和window.onload方法具有类似功能，但是执行时机不同。window.onload方法是在网页中所有的元素都加载到浏览器之后才执行，而$(document).ready()方法注册的事件处理程序在DOM完全就绪时就可以被调用。但是有时候图片还没加载完DOM就准备就绪了，所以解决这个问题就需要用load()方法。
2.事件绑定
可以使用bind()方法来对匹配元素进行特定事件的绑定。调用格式：bind(type[,data,fn]);
例如：
$(function(){
$("#panel1 h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
})
})
3.合成事件
（1）hover()方法：用于模拟光标悬停事件。当光标移动到元素上时，会触发第一个指定函数；当光标移出这个元素时，会触发指定的第二个函数。语法结构：
hover(enter,leave);
例如：
$(function(){
$("#panel1 h5.head").hover(function(){
$(this).next().show();
},function(){
$(this).next().hide();
});
});
代码运行后的效果与下面代码运行后的效果是一样的。当光标滑过"标题"链接时，相应的"内容"将被显示；当光标滑出"标题"链接后，相应的"内容"被隐藏。
（2）toggle()方法：用于模拟鼠标连续单机事件。语法结构：toggle(fn1,fn2,...fnN);
例如：
$(function(){
$("#panel1 h5.head").toggle(function(){
$(this).addClass("highlight");
$(this).next().show();
},function(){
$(this).removeClass("highlight");
$(this).next().hide();
});
});
运行代码后，如果"内容"是显示的，"标题"则会高亮显示；如果"内容"是隐藏的，则不会高亮显示。
4.事件冒泡
（1）停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行。在jQuery中提供的stopPropagation()方法来停止事件冒泡。jQuery代码如下：
$("span").bind("click",function(event){
var txt = $("#msg").html()+"<p>内层span元素被单击</p>";
$("#msg").html(txt);
event.stopPrppagation();
});
当单击<span>元素时，只会触发<span>元素上的click事件，而不会触发<div>元素和<body>元素的click事件。
（2）网页中的元素有自己默认的行为，例如，单击超链接后会跳转、单击"提交"按钮后表单会提交，有时需要阻止元素的默认行为。
代码如下：
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
var username = $("#nsername").val();
if(username ==" "){
$("#msg").html("<p>文本框的值不能为空</p>");
event.preventDefault();
}
});
})
</script>
<form action = "test.html">
用户名：<input type="text" id="username"/>
<input type="submit" value="提交" id="sub"/>
</form>
<div id="msg"></div>
当用户名为空时，单击"提交"按钮，只有在用户名输入内容后，才能提交表单。
5.事件对象的属性
（1）event.type：获取到事件的类型；
（2）event.preventDefault()：阻止默认行为；
（3）event.stopPropagation()：阻止事件冒泡；
（4）event.target：获取到触发事件的元素；
（5）event.relatedTarget：在标准DOM中，mouseover和mouseout所发生的元素可以通过event.target来访问，相关元素是通过event.relatedTarget来访问的；
（6）event.pageX和event.pageY：获取到光标相对于页面的X坐标和Y坐标；
（7）event.which：在鼠标单击中获取到鼠标的左、中、右键；在键盘事件中获取到键盘的按键；
（8）event.metaKey：为键盘事件中获取<ctrl>按键。
6.移除事件
（1）移除按钮元素上以前注册的事件：unbind()方法。
语法结构：unbind([type],[data]);
第一个参数是事件类型，第二个参数是将要移除的函数，具体说明如下：
如果没有参数，则删除所有绑定的事件。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
（2）移除<button>元素的其中一个事件
one()方法可以为元素绑定处理函数，当处理函数触发一次后，立即被删除。
语法结构：one(type,[data],fn);
7.模拟操作
（1）常用模拟：trigger()。
例如可以使用下面d代码来触发id为btn的按钮的click事件：
$("#btn").trigger("click");
（2）触发自定义事件：trigger()可以触发自定义事件。
例如为元素绑定一个"myClick"事件：
$("#btn").bind("myClick",function(){
$("#test").append("<p>我的自定义事件</p>");
});
想要触发这个事件，可以使用下面的代码来实现：
$("#btn").trigger("myClick");
（3）传递数据
trigger(type,[data])方法有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。
下面是一个传递数据的例子：
$("#btn").bind("myClick",function(event,message1,message2){
$("#test").append("<p>"+message1+message2+"</p>");
});
$("#").trigger("myClick",["我的自定义","事件"]);
（4）执行默认操作
trigger()方法触发事件后，会执行浏览器默认操作。例如：
$("input").trigger("focus");
如果只想触发绑定的focus 事件，而不想执行浏览器默认操作，可以使用jQuery中另一个类似的方法——triggerHandler()方法。
8.其他用法
（1）绑定多个事件类型
例如可以一次性为元素绑定多个事件类型，jQuery代码如下：
$(function(){
$("div").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});
})
当光标划入<div>时，该元素的class切换为"over"；当光标滑出<div>元素时，class切换为先前的值。
（2）添加事件命名空间，便于管理
例如，可以把为元素绑定的多个事件类型用命名空间规范起来，jQuery代码如下：
$(function(){
$("div").bind("click.plugin",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("mouseover.plugin",function(){
$("body").append("<p>mouseover事件</p>");
});
$("button").click(function(){
$("div").unbind(".plugin");
});
})
单击<button>元素后，"plugin"的命名空间被删除，而不在"plugin"的命名空间的"dbclick"事件依然存在。
（3）想用事件名称，不同命名空间执行方法
例如，可以为元素绑定相同的事件类型，然后以命名空间的不同按需调用，jQuery代码如下：
$(function(){
$("div").bind("click",function(){
$("body").append("<p>click事件</p>");
});
$("div").bind("click.plugin",function(){
$("body").append("<p>click.plugin事件</p>");
}) ;
$("button").click(function(){
$("div").trigger("click!");
});
});
trigger("clcik!")后面的感叹号是匹配所有不包含在命名空间中的click方法。
二、jQuery中的动画
1.show( )和hide( )方法：隐藏与显示，可以制定一个值表示显示/隐藏的速度。
2.fadeIn( )和fadeOut( )方法：只改变元素的不透明度。指定一段时间内降低/提高元素的不透明度。
3.slideUp( )和slideDown( )方法：只改变元素的高度。
4.自定义动画方法animate( )：
语法结构：animate(params,speed,callback);
（1）params：一个包含样式属性及值得映射；
（2）speed：速度参数，可选；
（3）callback：在动画完成时执行的函数，可选。
5.动画回掉函数
使用回掉函数可以对非动画方法实现排队。只要把CSS()方法写在最后一个动画的回调函数里。
6.停止动画和判断是否处于动画状态
（1）停止元素的动画：stop()方法
语法结构：
stop([clearQueue],[gotoEnd]);
参数clearQueue和gotoEnd都是可选的参数，为boolean值。clearQuene代表是否要清空未完成的动画队列，gotoEnd代表是否直接将正在执行的动画跳转到末状态。
（2）判断元素是否处于动画状态
如下代码:
if(!$(element).is(":animated")){
//如果当前没有进行动画，则添加新动画
}
在使用animate()方法的时候，要避免动画积累而导致的动画与用户行为不一致。判断元素是否处在动画状态，就选择添加还是不添加动画。
（3）延迟动画：delay()方法
在动画执行过程中，如果想对动画进行延迟操作，那么可以使用delay()方法，使用方式如下：
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).delay(1000);
7.其他动画方法
（1）toggle()方法：toggle(speed,[callback]);
（2）slideToggle(speed,[easing],[callback]);
（3）fadeTo(speed,opacity,[callback]);
（4）fadeToggle(speed,[easing],[callback])
jQuery复习：第四章的更多相关文章
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- jQuery复习：第二章&第三章
第二章 一.选择器 1.层次选择器 $(“ancestor descendant”)选取ancestor元素里的所有后代元素 $(“parent > child”)选取parent元素下的chi ...
- Jquery复习（四）之text()、html()、val()
三个简单实用的用于 DOM 操作的 jQuery 方法: text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回 ...
- 《数据结构与算法分析：C语言描述》复习——第四章“树”——二叉树
2014.06.14 22:49 简介: 二叉树是学习树结构时接触的第一个概念,其他衍生的表示形式包括N叉树(随便多少叉).二叉链表(土话也叫左孩子右兄弟).由于单纯的二叉树是无序的,能做的事情不太多 ...
- 第四章 Ajax与jQuery
第四章 Ajax与jQuery 一.Ajax简介 在传统的Web应用中,每次请求服务器都会生成新的页面,用户在提交请求后,总是要等待服务器的响应.如果前一个请求没有响应,则后一个请求就不能发送,在 ...
- 第四章 使用jQuery操作DOM
第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...
- CSS3秘笈复习：十三章&十四章&十五章&十六章&十七章
第十三章 1.在使用浮动时,源代码的顺序非常重要.浮动元素的HTML必须处在要包围它的元素的HTML之前. 2.清楚浮动: (1).在外围div的底部添加一个清除元素:clear属性可以防止元素包围浮 ...
- JS复习：第三章&第四章
第三章 一.把一个值转换成字符串的两种方法: 1.使用每个值都有的toString( )方法.这个方法唯一要做的就是返回相应值的字符串表现.例如: var age = 11 ; var ageAsSt ...
- 《Entity Framework 6 Recipes》中文翻译系列 (20) -----第四章 ASP.NET MVC中使用实体框架之在MVC中构建一个CRUD示例
翻译的初衷以及为什么选择<Entity Framework 6 Recipes>来学习,请看本系列开篇 第四章 ASP.NET MVC中使用实体框架 ASP.NET是一个免费的Web框架 ...
- KnockoutJS 3.X API 第四章(13) template绑定
目的 template绑定(模板绑定)使用渲染模板的结果填充关联的DOM元素. 模板是一种简单方便的方式来构建复杂的UI结构 . 下面介绍两种使用模板绑定的方法: 本地模板是支持foreach,if, ...
随机推荐
- JNDI中 java:comp/env 的理解
J2EE 上下文环境变量前缀,一般有如下几种:java:/comp/env/jdbcjava:/comp/env/urljava:/comp/env/mailjava:/comp/env/jms在部署 ...
- Linux下的暴力密码在线破解工具Hydra安装及其组件安装-使用
Linux下的暴力密码在线破解工具Hydra安装及其组件安装-使用 hydra可以破解: http://www.thc.org/thc-hydra,可支持AFP, Cisco AAA, Cisco a ...
- Winsock - 1 - Winsock API
Winsock Winsock API Winsock是网络编程接口,而不是协议. 网络原理和协议 建立Winsock规范的主要目的是提供一个与协议无关的传送接口. Winsock将网络编程接口与具体 ...
- [SQL基础教程] 4-3 数据的更新(UPDATE)
[SQL基础教程] C4 数据更新 4-3 数据的更新(UPDATE) UPDATE UPDATE <表名> SET <列名> = <表达式>; UPDATE &l ...
- c++ 常见问题之 vector 和数组
初始化vector 对象: vector<T> v1 v1 为空vector vector<T> v2(v1) vector<T> v2 = v1 vector&l ...
- weak引用变量是否线程安全
1.在ARC出现之前,Objetive-C的内存管理需要手工执行release&retain操作,这些极大增加了代码的编写难度,同时带来很多的crash. 同时大量的delegate是unr ...
- 试制品 （nyoj 542）
模拟 a 反应物集合 ; b 生成物集合; c 存在的化合物或单质集合; ans 新生成化合物集合 1.如果反应无均在已生成的化合物集合中,则完成反应,将合成物加入c集合 2.对每个方程式的反应物进行 ...
- DevExpress的SpinEdit控件无法输入数字的问题
今天在发布程序后突然发现了这个问题,刚开始很莫名其妙的,因为在调试时从来没碰到过.然后经过测试发现,这个问题的原因和输入法有很大关系: 当你的输入法是中文状态时,是无法向框中输入数字的,此时只能点击上 ...
- python2 基础
标识符 标识符是由字母,下划线和字母组成的字符序列标识符必须以字母,下划线开头,不能以数字开头标识符不能是关键字标识符可以为任意长度 算术运算符+-*///**% 科学记数法 aEb 或者aE+b例: ...
- 矩阵赋值实例（matrixAssign）
题目:给一个二维数组赋值. 分析:主机端代码完成的主要功能: 启动CUDA,使用多卡时应加上设备号,或使用cudaSetDevice()设置GPU设备. 为输入数据分配内存空间 初始化输入数据 为GP ...