锋利的jQuery--jQuery事件,动画(读书笔记二)

1.注意$(document).ready()方法和window.onload方法之间的细微区别

$(document).ready()在DOM树构建完成就会执行,而window.onload是在DOM树构建完成后且相关的文件下载完毕后才会执行。

例如:一个图库页面,且给页面上图片绑定了事件

$(document).ready()就会在图库页面的DOM结构完成就会执行,但这时候页面上面图片还没下载完毕,给图片绑定的事件也就不能起作用。这时候如果要获取图片的宽高就会失败。

为了解决这个问题:可以使用jQuery中的:

$(window).load(function(){})

这个函数类似于JavaScript中的:

window.onload=function(){}

而window.onload是在所有图片下载完成后才会执行并且绑定事件。缺点是影响页面加载速度。

2.jQuery的is()与next()

3.事件冒泡

span的click冒泡到div的click,div的click冒泡到body的click。

有时候这种冒泡如果不是你想要的话,情况会比较恶劣。

因为你触发了span的点击事件也就会触发div的,触发body的。

jQuery中阻止冒泡的方法:

even.stopPropagation();

jQuery中阻止默认的行为:

even.preventDefault();

同时阻止冒泡与默认行为:

return false;是一种简写。

3.事件对象的属性

event.type()

event.stopPropagation()

even.preventDefault();

event.target();

event.relatedTarget();

event.pageX()/event.pageY()

event.which();

event.metaKey();

event.originalEvent();

4.模拟事件操作

<1>$("#but").trigger("click");

$("#but").click();

模拟了点击行为。

<2>trigger不仅可以触发浏览器支持的事件,还可以触发自定义事件。

$("#but").bind("zqzClick",function(){

alert("这是zqz的自定义事件");

});

$("#but").trigger("zqzClick");或

$("#but").zqzClick(); ---------不知道这样写行不?

<3>trigger绑定数据

<4>triggerHandler()

 

<5>bind()可以绑定多个事件

<6>添加事件命名空间,便于管理

删除的时候只会删除命名空间下的。

<7>停止动画

$(this).stop(true)

//判断元素是否处于动画状态。
if(!$(element).is(":animated")){

}
时间: 2024-08-06 20:03:42

锋利的jQuery--jQuery事件,动画(读书笔记二)的相关文章

《卓有成效的程序员》----读书笔记二

六大方面对比Launchy和TypeAndRun(TAR) 对于快速启动工具,很多人都有自己的偏好,多次听到朋友介绍Launchy的好,虽然自己一直在使用着TAR,还是克制不住对于好软件的渴求,下载Launchy进行试用.很多软件都是有一个试用期的,也许新的软件确实不错,但是你习惯了以前使用的那个软件.今天就比较客观的将Launchy和TAR进行一下对比,从界面.上手速度到功能.自定义,以及软件的稳定性.占用资源进行详细的比较. [界面美观]Launchy:毫无疑问这是它的强项.1.0正式版自带

《Programming in Lua 3》读书笔记(二十二)

日期:2014.8.6 PartⅣ The C API 26 Extending Your Application 使用Lua很重要的一点是用来做配置语言.配合主语言做一些功能的配置. 26.1 The Basics 有的时候程序需要配置一些功能信息,很多时候可能有许多别的方法比用lua做配置要更简单:如使用环境变量或者读取文件,读取文件涉及到文件的解析.如果使用Lua进行配置的话,相当于用lua文件替代了要读取的如csv.txt文件等. 使用Lua进行配置的时候,就需要使用Lua API去控制

《R实战》读书笔记二

第一章 R简介 本章概要 1安装R 2理解R语言 3运行R程序 本章所介绍的内容概括如下. 一个典型的数据分析步骤如图1所示. 图1:典型数据分析步骤 简而言之,现今的数据分析要求我们从多种数据源中获取数据.数据合并.标注.清洗和分析,并且把分析的结果进行展示,形成报告或者系统,辅助决策.R能够满足现今数据分析的要求. 为什么用R? R是一个适合统计分析和绘图的环境与语言.它是开源.免费的,获得世界范围社区支持.统计分析和绘图工具已经很多了,例如:SPSS,SAS,Excel,Stata和Min

《学会提问》读书笔记二

<学会提问>读书笔记二 因为书中的小点知识和思考太多,我从这篇笔记开始就只记我害怕会遗忘的知识,思考过程就不提及了. 弱势批判性思维和强势批判性思维 弱势批判性思维的目的是用批判性思维来反驳.抵制那些和你意见不同的论述最终就是为了看到那些与你主张不一致的人服服帖帖的甘心认输,但是这样就意味着,你对于是否接近真理和发扬美德漠不关心,实际上也摧毁了批判性思维潜在的人性的一面和不断发展进步的特征.而且我认为,弱势批判性思维的出发点是自私的,他们盲目地认为自己的观点就是正确的,用批判性思维来批判其他人

《大型网站技术架构》读书笔记二:大型网站架构模式

一.分层 最常见的架构模式,将系统在横向维度上切分成几个部分,每个部分单一职责.网站一般分为三个层次:应用层.服务层和数据层,其具体结构如下图所示: 通过分层,一个庞大系统切分成不同部分,便于分工合作和维护. 但是,分层架构也有一些挑战:①必须合理规划层次边界和接口:②禁止跨层次的调用及逆向调用. 二.分割 分割是在纵向方面对软件进行切分->将不同的功能和服务分割开来,包装成高内聚低耦合的模块单元,有助于软件开发和维护,还便于不同模块的分布式部署,提高网站的并发处理能力和功能扩展能力. 三.分布

《How Tomcat Works》读书笔记(二)

<How Tomcat Works>读书笔记(二) 这是<How Tomcat Works>第一二章的读书笔记.第一张主要写了一个静态资源处理的web服务器,第二章加了对servlet的处理. 1. 概述 1.1 架构 HttpServer:表示Http服务器,与客户端通信,处理Http请求. StaticResourceProcessor:对静态资源请求进行处理. ServletProcessor:对Servlet资源请求进行处理. Request:表示Http请求,实现了Ser

代码的未来读书笔记&lt;二&gt;

代码的未来读书笔记<二> 3.1语言的设计 对Ruby JavaScript Java Go 从服务端客户端以及静态动态这2个角度进行了对比. 这四种语言由于不同的设计方针,产生了不同的设计风格. Header 客户端 服务端 动态 Html5 Ruby 静态 Java Go 静态动态 静态:无需实际运行,仅根据程序代码就能确定结果. 动态:只有到了运行时才能确定结果.不过无论任何程序,或多或少都包含的动态的特性. 动态运行模式 运行中的程序能识别自身,并对自身进行操作.对程序自身进行操作的编

《JavaScript 高级程序设计》读书笔记二 使用JavaScript

一   <script>元素 a.四个属性: async:立即异步加载外部脚本: defer:延迟到文档完全被解析再加载外部脚本: src:外部脚本路径: type:脚本语言的内容类型: 二   XHTML中用法 a. //<![CDATA[ javascript代码 //]]> 三   <noscript>元素 <JavaScript 高级程序设计>读书笔记二 使用JavaScript

《Programming in Lua 3》读书笔记(二十一)

日期:2014.8.1 PartⅣ The C API 25 An Overview of the C API Lua是一种嵌入式语言.这就意味着Lua不是单独存在的,而是可以通过一系列的标准库将lua的特性嵌入至其他应用模块中. Lua以Lua interpreter(lua的解释器?)来解决了其不是独立程序,我们直到现在却又能独立使用Lua的问题.这个解释器是一个小型的程序(不超过500行代码),使用lua的标准库来实现独立解释程序,这个程序将处理与用户的交互等操作交给lua的标准库,这些库