jQuery API 快速学习笔记1

By | 2016年7月1日

之前自己的jquery知识库一直停留在1.6的版本,而目前jquery的版本已经更新到2.0了,前天看到1.10中css()竟然扩充了那么多用法,这2天就迫不及待的更新一下自己的jquery知识,以下内容是自己整理的,目的是对jquery最新版的用法熟悉起来,网上资料很多,高手直接跳过 ^_^.

不错学习资源:

  1. jqapi-1.9 这个很直观
  2. jquery API chm 类似在线的chm 方便查询

1 triggerHandler()与trigger()的区别

->.triggerHandler() 方法并不会触发事件的默认行为。(例如,表单提交)。

->.trigger() 会影响所有与 jQuery 对象相匹配的元素,而 .triggerHandler() 仅影响第一个匹配到的元素。

->使用 .triggerHandler() 创建的事件,并不会在 DOM 树中向上冒泡。如果事件没有被目标元素直接处理,那么它就不会进行任何处理。

->与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反,.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件,会返回 undefined。

2 .keypress()

->当浏览器捕获一个元素上键盘输入时,keypress就会发送个元素。这是类似keydown事件,除了当按键被一直按下(即连续插入字符的场合)时的处理。如果用户按下并按住这个键(不松开释放)的时候,keydown事件只触发一次,但是keypress会在每个字符插入的时候都会触发事件。此外,组合键(如Shift)会触发keydown事件,但不会触发keypress事件。

->keypress事件处理程序可以附加到任何元素,但该事件只是发送到具有焦点的元素上。不同的浏览器中,可获得焦点的元素略有不同,但是表单元素总是能获取焦点,所以对于此事件类型表单元素是最合适的。

->要确定哪个键被按下,我们可以检测传递给处理函数的event 对象。而浏览器使用不同的属性来存储这些信息,jQuery的规范了.which属性,以便我们能够可靠地使用它来检索关键代码。参考

3 .hover()

->.hover( handlerIn(eventObject), handlerOut(eventObject) )

->.hover()方法是同时绑定 mouseenter和 mouseleave事件

4.animate()

->根据一组 CSS 属性,执行自定义动画。

->所有用于动画的属性必须是数字的,除非另有说明;这些属性如果不是数字的将不能使用基本的jQuery功能。(例如,width, height或者left可以执行动画,但是background-color不能,除非使用jQuery.Color()插件。)属性值的单位像素(px),除非另有说明。单位em 和 %需要指定使用。

->除了样式属性, 一些非样式的属性,如scrollTop 和 scrollLeft,以及自定义属性,也可应用于动画。

->动画属性也可以是一个相对值。如果提供一个以+= 或 -=开始的值,那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的。

->注意: 如果试图将元素高度或宽度动画至 0px,元素的内容是可见的,可能在动画中溢出。通过固定原始元素的尺寸,隐藏内容解决。这样可以确保动画平稳运行。一个clearfix 可以用来自动修复您的主要元素的尺寸,而无需手动设置。

5 .toggle()

->动画:显示或隐藏匹配元素。(注意 .animate()中允许属性值使用toggle)

->事件:绑定两个或多个处理程序绑定到匹配的元素,用来执行在交替的点击。

->注意: 事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置。

6 .focusin() & focusout () VS focus() & blur()

->.focusin(), focusout() 相对于focus(), blur()的区别在于它们可以在父元素上检测子元素失去焦点的情况(换而言之,它支持事件冒泡)。

7 .delay()

->.delay()是用来在jQuery动画效果和类似队列中是最好的。但是,由于其本身的限制,比如无法取消延时

—>.delay(),它不是JavaScript的原生 setTimeout函数的替代品,这可能是更适合某些使用情况。

8 .stop()

->仅仅停止匹配元素当前正在运行的动画。然后执行动画队列中的后续动画

9 .param() 和 .serialize()

->2者都会将将对象序列化成字符串,适用于一个URL 地址查询字符串或Ajax请求。

->区别在于$.param()是序列化对象的, serialize()是序列化表单的。

10 .load()

->从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中。

->事件处理函数中也有一个方法叫 .load()。jQuery根据传递给它的参数设置来确定使用哪个方法执行。

->由于浏览器的安全限制,大多数“Ajax”的要求,均采用同源的政策 ;该请求不能成功地检索来自不同的域,子域或协议的数据。

11 jQuery.noConflict()

-> 释放 $

->创建别名: var newQuery = jQuery.noConflict(true);

12 jQuery.extend()

合并 defaults 和 options 对象,并且不修改 defaults 对象。这是常用的插件开发模式。

->var settings = $.extend({}, defaults, options);

不理解的内容:

->.dequeue()

使用 jQuery.dequeue() 来结束一个自定义队列函数,以便能够让队列继续运行下去。

例如某个元素A上绑定了4个动画,加入第3个动画中$.dequeue(this); 结果是,第三个动画会被移出队列然后执行第4个动画。

->jQuery.when() [.then() .done()]

发表评论