<
jQuery核心用法
>
上一篇

如何快速提高自己的设计水平
下一篇

jQuery入门

第十三天学习

  1. JQuery效果
  2. JQuery工具
  3. JQuery事件对象
  4. JQuery延迟对象
  5. JQuery回调函数
  6. JQuery其它

JQuery事件

blur([[data],fn])

当元素失去焦点时触发blur事件。

data: 可传入data供函数fn处理

fn: 在每一个匹配元素的blur事件中绑定的处理函数。

change([[data], fn])

当元素的值发生改变时,会发生change事件

fn : 在每一个匹配元素的change事件中绑定的处理函数。

data: 可传入data供函数fn处理

click([[data], fn])

触发每一个匹配元素的click事件。

fn : 在每一个匹配元素的click事件中绑定的处理函数

dblclick([[data], fn])

当双击元素时,会发生dblclick事件。

fn : 在每一个匹配元素的dblclick事件中绑定的处理函数

error([[data], fn])

当元素遇到错误(没有正确载入)时,发生error事件

如果异常是由window对象抛出, 事件处理函数将会被传入三个参数:

  1. 描述事件的信息 (“varName is not defined”, “missing operator in expression”, 等等.),
  2. 包含错误的文档的完整URL
  3. 异常发生的行数 如果事件处理函数返回true, 则表示事件已经被处理,浏览器将认为没有异常。

focus([[data], fn])

当元素获得焦点时,触发focus事件。

可以通过鼠标点击或键盘上的TAB导航触发。

fn : 在每一个匹配元素的dblclick事件中绑定的处理函数

focusin([data], fn)

当元素获得焦点时,触发focusin事件。

focusin事件跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况

fn : 在每一个匹配元素的focusin事件中绑定的处理函数

focus out([data], fn)

当元素失去焦点时触发focusout事件

focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况

fn:在每一个匹配元素的focusout事件中绑定的处理函数

keydown([[data], fn])

当键盘或按钮被按下时,发生keydown事件

注意:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会被触发

fn:在每一个匹配元素的keydown事件中绑定的处理函数。

keypress([[data], fn])

当键盘或按钮被按下时,发生keypress事件

与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。

fn:在每一个匹配元素的keypress事件中绑定的处理函数。

keyup([[data], fn])

当按钮被松开时,发生keyup事件。它发生在当前获得焦点的元素上

fn: 在每一个匹配元素的keyup事件上绑定的处理函数。

mousedown([[data], fn])

当鼠标指针易懂到元素上方,并按下鼠标按键时,会发生mousedown事件

mousedown 与 click 事件不同,mousedown 事件仅需要按键被按下,而不需要松开即可发生。

fn : 在每一个匹配元素的mousedown事件中绑定的处理函数

mouseenter([[data], fn])

当鼠标指针穿过元素时,会发生mouseenter事件

该事件大多数时候会与mouseleave 事件一起使用。

fn : 在每一个匹配元素的mouseenter事件中绑定的处理函数。

mouseleave([[data], fn])

当鼠标指针离开元素时,会发生mouseleave事件。

该事件大多数时候会与mouseenter 事件一起使用。

fn : 在每一个匹配元素的mouseleave事件中绑定的处理函数

mousemove([[data], fn])

当鼠标指针在指定的元素中移动时,就会发生mousemove事件。

mousemove事件处理函数会被传递一个变量——事件对象,其.pageX 和 .pageY 属性代表鼠标的坐标

fn : 在每一个匹配元素的mousemove事件中绑定的处理函数

mouseout([[data], fn])

当鼠标指针从元素上移开时,发生mouseout事件

该事件大多数时候会与mouseover事件一起使用。

fn : 在每一个匹配元素的mouseout事件中绑定的处理函数。

mouseover([[data], fn])

当鼠标指针位于元素上方时候,会发生mouseover事件

该事件大多数时候会与mouseout事件一起使用

fn : 在每一个匹配元素的mouseover事件中绑定的处理函数

mouseup([[data], fn])

当在元素上放松鼠标按钮时,会发生mouseup事件

与 click 事件不同,mouseup 事件仅需要放松按钮。

fn : 在每一个匹配元素的mouseup事件中绑定的处理函数。

resize([[data], fn])

当调整浏览器窗口的大小时,发生resize事件

fn : 在每一个匹配元素的resize事件中绑定的处理函数

scroll([[data], fn])

当用户滚动指定的元素时,会发生scroll事件。

scroll事件适用于所有可滚动的元素和window对象(浏览器窗口)

fn : 在每一个匹配元素的scroll事件中绑定的处理函数。

submit([[data], fn])

当提交表单时,会发生submit事件。

该事件只适用于表单元素。

fn : 在每一个匹配元素的submit事件中绑定的处理函数。

trigger(type, [data])

在每一个匹配的元素上触发某类事件。

可以有三种方式指定事件类型:

type:一个事件对象或者要触发的事件类型

data:传递给事件处理函数的附加参数

triggerHandler(type, [data])

这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。

这个方法的行为表现与trigger类似,但是有以下三个主要区别:

type:要触发的事件类型

data:传递给事件处理函数的附加参数

JQuery效果

show([speed,[easing],[fn]])

显示隐藏的匹配元素。

speed: 三种预定速度(slow, normal, fast)或者表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

hide([speed,[easing],[fn]])

隐藏显示的元素

speed: 三种预定速度(slow, normal, fast)或者表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次

toggle([speed],[easing],[fn])

用于绑定两个或多个事件处理器,以响应被选元素的轮流的click事件。

如果元素是可见的,切换为隐藏的;如果是隐藏的,切换为可见的。

speed: 默认是0; 三种预定速度(slow, normal, fast)或者表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次

slideDown([speed], [easing], [fn]);

通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度

speed: 三种预定速度效果(“slow”, “normal”, “fast”)或表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”, 可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

slideUp([speed, [easing], [fn]]);

通过高度变化(向上减少)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

speed: 三种预定速度效果(“slow”, “normal”, “fast”)或表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”, 可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

slideToggle([speed], [easing], [fn])

通过高度变化来切换所有匹配的可见性,并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度,可以使匹配的元素以“滑动”的方式隐藏或显示。

speed: 三种预定速度效果(“slow”, “normal”, “fast”)或表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”, 可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

fadeIn([speed], [easing], [fn]);

通过不透明度的变化实现所有匹配元素的淡入效果,并在完成后可选地触发一个回调函数。

speed: 三种预定速度效果(“slow”, “normal”, “fast”)或表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”, 可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

fadeOut([speed], [easing], [fn])

通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

speed: 三种预定速度效果(“slow”, “normal”, “fast”)或表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”, 可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

fadeTo([speed], opacity, [easing], [fn]);

把所有匹配元素的不透明度以渐进的方式调整到指定的不透明度。并在动画完成后可选地触发一个回调函数。

可自定义淡入淡出程度

speed: 三种预定速度效果(“slow”, “normal”, “fast”)或表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”, 可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

fadeToggle([speed,[easing], [fn]]);

​ 通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。

speed: 三种预定速度效果(“slow”, “normal”, “fast”)或表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”, 可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

animate(params, [speed], [easing], [fn]);

用于创建自定义动画的函数。

参数:

params : 一组包含作为动画属性和终值的样式属性和及其值的集合

speed: 三种预定速度效果(“slow”, “normal”, “fast”)或表示动画时长的毫秒数值(如:1000)

easing:(Optional)用来指定切换效果,默认是”swing”, 可用参数”linear”

fn:在动画完成时执行的函数,每个元素执行一次。

stop([clearQueue], [jumpToEnd])

停止所有在指定元素上正在运行的动画

queue:用来停止动画的队列名称

clearQueue:如果设置成true,则清空队列。可以立即结束动画。

jumpToEnd:如果设置成true,则完成队列。可以立即完成动画。

delay(duration, [queueName])

设置一个延时来推迟执行队列中之后的项目。

duration:延时时间,单位:毫秒

queueName:队列名词,默认是Fx,动画队列。

finish([queue])

停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。

jQuery.fx.off = true (传入布尔值)

关闭页面上所有的动画

JQuery 工具

$.browser.version

浏览器渲染引擎版本号

JQuery.each(object, [callback])

通用便利方法,可用于遍历对象和数组。

不同于遍历JQuery对象的$().each()方法,此方法可用于遍历任何对象。

回调函数拥有两个参数: 第一个为对象的成员或数组的索引,第二个为对应遍历或内容。

如果需要退出each循环可使回调函数返回false,其它返回值将被忽略。

遍历数组,同时使用元素索引和内容

$.each( [0,1,2], function(i, n) {
  alert("Item #" + i + ": " + n);
});

遍历对象,同时使用成员名称和变量内容

$.each( {name: "John", lang:"JS"}, function(i, n) {
  alert("Name:" + i + ", Value:" + n);
} );

JQuery.extend([deep], target, object1, [objectN])

用一个或对各其它对象来扩展一个对象,返回被扩展的对象。

如果不指定target,则给jQuery命名空间本身进行扩展。

deep:如果设为true,则递归合并。

target:待修改对象。

object1:待合并到第一个对象的对象。

objectN:待合并到第一个对象的对象。

JQuery.grep(array, callback, [invert]);

使用过滤函数过滤数组元素。

此函数至少传递两个参数:待过滤数组和过滤函数。

过滤函数必须返回true以保留元素或false以删除元素。

array: 待过滤数组。

callback: 此函数将处理数组每个元素。第一个参数为当前元素,第二个参数为元素索引值。此函数需要返回一个布尔值

invert: 如果为false,则返回数组中函数返回true的元素,否则反之;

过滤数组中小于0的元素

$.grep([0,1,2], function(n,i) {
	return n > 0;
});

JQuery.when(deferreds)

提供一种方法来执行一个或多个对象的回调函数,延迟对象通常表示异步事件。

当延迟得到解决或者拒绝,通常的代码创建了原来的延迟,适当的回调将被调用。

🌰

$.when( $.ajax("test.aspx") ).then(function(ajaxArgs) {
  /* ajaxArgs is [ "success", statusText, jqXHR ] */
});

如果一个参数被传递给JQuery.when, 这不是延迟,这将被视为延迟解决,并立即执行附加任何doneCallbacks。

$.when( {testing:123} ).done(
	function(x) { alert(x.testing); }
);

执行函数myfunc当两个Ajax请求是成功的,如果有其它错误则执行myFailure

$.when($.ajax("/page1.php"), $.ajax("/page2.php"))
	.then(myFunc, myFailure);

JQuery.makeArray(obj)

将类数组对象转换为数组对象

JQuery.map(arr|obj, callback);

将一个数组中的元素转换到另一个数组中。

array: 待转换数组。

callbackArray:为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。

$.map([0,1,2], function(n) {
  return n + 4; 
})

原数组中大于0的元素加1,否则删除

$.map([0,1,2], function(n) {
  return n > 0 ? n + 1: null;
})

JQuery.inArray(value, array, [fromIndex]) ;

确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回-1)。

value: 用于在数组中查找是否存在

array: 待处理数组

fromIndex: 用来搜索数组队列,默认值为0

查看对应元素的位置

var arr = [4, "Pete", 8, "John"];
jQuery.inArray("John", arr);

jQuery.toArray()

把jQuery 集合中所有DOM元素恢复成一个数组。

得到所有li的元素数组

$('li').toArray();

jQuery.merge(first, second)

合并两个数组

first:第一个待处理数组,会改变其中的元素。

second:第二个待处理数组,不会改变其中的元素。

合并两个数组到第一个数组上

$.merge([0,1,2], [2,3,4])
//结果
[0,1,2,2,3,4]

jQuery.uniqueSort(array)

$.uniqueSort()函数通过搜索的数组对象,排序数组,并排除任何重复的节点。

jQuery.parseXML(data)

解析一个字符串到一个XML文件。

创建一个jQuery对象使用一个XML字符串并得到标题节点的值。

var xml = '<rss version="2.0"><channel><title>RSS Title</title></channel></rss>', xmlDoc = $.parseXML(xml), $xml = $(xmlDoc), $title = $xml.find('title');
$( '$someElement' ).append( $title.text() );
$title.text( 'XML Title' );
$( '#anotherElement' ).append($title.text())

Jquery.noop

一个空函数

当你仅仅想要传递一个空函数的时候,就用他吧。这对一些插件作者很有用,当插件提供了一个可选的回调函数接口,那么如果调用的时候没有传递这个回调函数,就用jQuery.noop来代替执行。

jQuery.proxy(context, name)

返回一个新函数,并且这个函数始终保持了特定的作用域。

jQuery.contains(container, contained)

一个DOM节点是否包含另一个DOM节点。

container: DOM元素作为容器,可以包含其它元素

contained: DOM节点,可能被其它元素所包含

jQuery.type(obj)

检测obj的数据类型。

jQuery.type(true) === "boolean";

jQuery.isEmptyObject(obj)

用于测试是否为空对象(不包含任何属性)

jQuery.isNumeric(value)

确定它的参数是否是一个数字

jQuery.trim(str)

去掉字符串起始和结尾的空格。

jQuery.param(obj, [traditional]);

将表单元素数组或者对象序列化,是.serialize()的核心方法。

obj:数组或jQuery对象会按照name/value对进行序列化,普通对象按照key/value对进行序列化。

traditional:是否使用传统的方式浅层序列化。

jQuery.error(message)

接受一个字符串,并且直接抛出一个包含这个字符串的异常

事件对象

event.data

当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind

🌰

$('a').each(function(i) {
  $(this).bind('click', {index:i}, function(e) {
    console.log(e.data.index);
  })
})

event.isDefaultPrevented()

根据事件对象中是否调用过event.preventDefault()方法来返回一个布尔值

$('a').click(function(e) {
  alert(e.isDefaultPrevented());
  e.preventDefault();
  alert(e.isDefaultPrevented());
})

event.namespace

当事件被触发时此属性包含指定的命名空间。

<!DOCTYPE html>
  <html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  </head>
  <body>
      <button>display event.namespace</button>
  <p></p>
    <script>
  $("p").bind("test.something", function(event) {
    alert( event.namespace );  });
  $("button").click(function(event) {
    $("p").trigger("test.something");
  });
    </script>
    </body>
  </html>

event.preventDefault();

阻止默认事件行为的触发(阻止默认行为) 与return false同理

event.relatedTarget

在事件中涉及的其它任何DOM元素。

指向的是除触发事件的元素外的其它元素。

对于 mouseout 事件,它指向被进入的元素;对于 mousein 事件,它指向被离开的元素。

event.stopImmediatePropagation()

阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。

调用函数前的所有事件都可以触发,之后的就不能触发

event.stopProgapation()

防止事件冒泡到DOM树上,也就是不触发的任何前辈元素上的事件处理函数

可用return false 效果等同

▶️event.target

最初触发事件的DOM元素.

通常用于比较 event.target 和 this 来确定事件是不是由于冒泡而触发的。经常用于事件冒泡时处理事件委托。

event.timeStamp

这个属性返回事件触发时距离1970年1月1日的毫秒数

用于检测某个jQuery函数的性能

event.type

返回事件类型

$('a').click(function(event) {
  alert(event.type);//click
  
})

event.which

针对键盘和鼠标事件,这个属性能确定你到底按的是哪个键或按钮。

event.which 将event.keyCode 和 event.charCode 标准化了。推荐使用event.which来监视键盘输入

jQuery 延迟对象

deferred.done(doneCallbacks)

当延迟成功时调用一个函数或者数组函数

$.get("test.php").done(function() { 
  alert("$.get succeeded"); 
});

deferred.fail(failCallbacks[,failCallbacks])

当延迟失败时调用一个函数或者数组函数。

$.get("test.php")
  .done(function(){ alert("$.get succeeded"); })//延迟成功
  .fail(function(){ alert("$.get failed!"); });//延迟失败

deferred.then(doneFilter[,failFilter][,progressFilter])

添加处理程序被调用时,递延对象得到解决或拒绝。

doneCallbacks: 一个函数或函数数组,当延迟成功时调用。

failCallbacks: 一个函数或函数数组,当延迟失败时调用。

一旦jQuery.get方法返回一个来自延迟的对象的jqXHR对象,我们可以附加一个成功回调使用.then方法。

$.get("test.php").then(
    function(){ alert("$.get succeeded"); },
    function(){ alert("$.get failed!"); }
);

deferred.promise([type],[target])

返回一个Promise对象用来观察当某种类型的所有行动绑定到集合,排队与否还是已经完成

deferred.always(alwaysCallbacks,[alwaysCallbacks]);

当递延对象是解决或拒绝时被调用添加处理程序

不管成功与否,都会执行函数

Top
Foot