绿色记忆 » jQuery https://blog.gmem.cc Mon, 06 Apr 2026 02:15:06 +0000 en-US hourly 1 http://wordpress.org/?v=3.9.14 jQuery知识集锦 https://blog.gmem.cc/jquery-faq https://blog.gmem.cc/jquery-faq#comments Wed, 03 Nov 2010 02:41:14 +0000 https://blog.gmem.cc/?p=16909 简介 jQuery的核心是对DOM的封装。jQuery提供的所有方法，都是针对数组风格的jQuery元素集的。 本文中列出jQuery API时，所有以[crayon-69d370a1c6f93571396184-i/]开头的，表示此API是元素集对象的一个方法，所有以[crayon-69d370a1c6f9a098035233-i/]开头的，表示此API是jQuery提供的静态函数。 核心和工具 核心函数 $() 该函数可以用于： 根据指定的CSS选择器查找匹配的元素 将一个元素DOM元素封装为jQuery元素集 根据传入的HTML文本创建新的元素集 $.ready 主要和ready()不一样。这是一个Thenable对象，其在文档加载完毕后解析： [crayon-69d370a1c6f9c286012453/] $.when 可以把一个或多个对象封装为Promise。 $.holdReady() 用于暂停、恢复ready事件的执行，调用者可以通过此方法来延迟ready事件： [crayon-69d370a1c6f9f091033685/] 工具函数 函数 说明 [...]

The post jQuery知识集锦 appeared first on 绿色记忆.

]]>
简介

jQuery的核心是对DOM的封装。jQuery提供的所有方法，都是针对数组风格的jQuery元素集的。

本文中列出jQuery API时，所有以

.
开头的，表示此API是元素集对象的一个方法，所有以
$
开头的，表示此API是jQuery提供的静态函数。

核心和工具
核心函数
$()

该函数可以用于：

  1. 根据指定的CSS选择器查找匹配的元素
  2. 将一个元素DOM元素封装为jQuery元素集
  3. 根据传入的HTML文本创建新的元素集
$.ready

主要和ready()不一样。这是一个Thenable对象，其在文档加载完毕后解析：

$.when( $.ready ).then(function() {
    // 文档加载完毕后的回调
});

$.when(
    $.getJSON( "data.json" ),
    $.ready
).done(function( data ) {
    // 文档加载完毕，且data.json中数据被传入data
});
$.when

可以把一个或多个对象封装为Promise。

$.holdReady()

用于暂停、恢复ready事件的执行，调用者可以通过此方法来延迟ready事件：

// 暂停ready事件
$.holdReady( true );
$.getScript( "myplugin.js", function() {
    // 恢复ready事件
    $.holdReady( false );
});
工具函数
函数 说明
$.browser 用于检测浏览器特性
$.contains() 函数签名：
$.contains( container, contained )
。检查contained是否为container的子代元素
$.data() 函数签名：
$.data( element, key, value )
。为元素设置任意关联数据
$.each() 函数签名：
$.each( array, callback )
。一般性的迭代函数，可以用来迭代对象、数组
$.extend() 函数签名：
$.extend( target [, object1 ] [, objectN ] )
。把后面多个的对象的属性依次合并到第一个
$.fn.extend 为jQuery元素集对象扩展新方法：
$.fn.extend({
  check: function() {
    return this.each(function() {
      this.checked = true;
    });
  }
});

$( "input[type='checkbox']" ).check();
$.globalEval() 在全局作用域估算一个JS表达式
$.grep() 函数签名：
$.grep( array, function [, invert ] )
。从array中寻找匹配过滤器function的元素，如果invert为true，则function返回false的才匹配。返回匹配元素构成的数组，array保持不变
$.inArray() 函数签名：
$.inArray( value, array [, fromIndex ] )
。检查value是否在array中
$.isArray()
$.isEmptyObject()
$.isFunction()
$.isNumeric()
$.isPlainObject()
$.isWindow()
$.isXMLDoc()		 检查参数的类型
$.makeArray() 将一个类似数组的对象转换为JavaScript数组类型
$.map() 函数签名：
$.map( array, callback )
。使用map函数转换数组的每个元素
$.merge() 函数签名：
$.merge( first, second )
。将数组second合并到first中
$.noop() 一个空函数
$.now() 返回代表当前时间的毫秒数
$.parseHTML() 解析一段字符串为DOM节点数组
$.parseJSON() 解析JSON字符串为JavaScript对象
$.parseXML() 解析XML对象
$.trim() 去除字符串首尾的空白符
$.type() 检查对象的内部JavaScript Class
$.unique() 移除DOM元素数组中的重复项
操控元素
操控元素属性
方法 说明
.addClass() 针对元素集中所有元素，添加CSS样式类。如果要多个样式类，用空格分割：
$( "p" ).addClass( "myClass yourClass" );
.removeClass() 移除匹配元素的样式类
.hasClass() 检查是否元素集中至少一个元素具有指定的样式类
.toggleClass() 轮换匹配元素的样式类
.attr() 获取第一个元素的指定属性，或者设置所有元素的属性：
// 同时设置多个属性值
$( "#greatphoto" ).attr({
    alt: "Beijing Brush Seller",
    title: "photo by Kelly Clark"
}); 
.removeAttr() 移除匹配元素的指定属性
.prop()

获取第一个元素的指定属性，或者设置所有元素的属性

从1.6开始，jQuery严格区分Attribute和Property。selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, defaultSelected等Property应该通过该方法获取
.removeProp() 移除匹配元素的指定属性
.val()

主要用于获得表单元素的值

如果元素集的第一个元素是支持多选的select，则返回值是一个数组，包含所有选中的option。如果没有任何选中的option，3.0+返回[]，3.0-返回null
操控元素样式

除了add/remove/toggle/has样式类之外，jQuery还支持以下操控元素样式的方法：

方法 说明
.css()

获取第一个元素经计算后的CSS样式属性，或者设置所有元素的CSS样式属性：

$( this ).css({
    backgroundColor : "#ddd",
    "background-color": "yellow"
});
.height() 获取第一个元素经计算后的高度，或者设置所有元素的高度
.width() 获取第一个元素经计算后的宽度，或者设置所有元素的宽度
.innerHeight()

获取第一个元素经计算后的内部高度，或者设置所有元素的内部高度 

内部高度是除去border的高度，包含padding
.innerWidth() 

获取第一个元素经计算后的内部宽度，或者设置所有元素的内部宽度 

内部宽度是除去border的宽度，包含padding
.outerHeight() 

获取第一个元素经计算后的外部高/宽度，或者设置所有元素的外部高/宽度

外部宽/高度包括：padding、border、margin
.outerWidth() 
.position()

获取第一个元素（以margin box计） 相对于器offset父元素（以padding box计） 的位置偏移，

返回 

{left: x, top: y }
格式的对象
.offset()

和.position()类似，但是偏移是相对于document对象的（滚动到顶部时的左上角）
.scrollLeft()
.scrollTop()

获取第一个元素的水平、垂直滚动位置，或者设置所有元素的滚动位置
操控关联数据
方法 说明
.data()

使用字符串为键，为元素集的每一个元素存储任意数据。或者返回第一个元素之前存储的数据
.removeData() 移除先前存储的数据，如果不传入键，则移除所有数据
内部插入

所谓内部插入，是指将新的内容插入到既有元素的内部，作为其子元素。被插入的内容，可以是HTML片断、字符串、DOM元素、数组、jQuery对象。

插在头部
方法 说明
.append() 将参数所指定的内容，插入到元素集的每个元素的子元素列表尾部
.appendTo() 将元素集中的元素，依次重入到参数所指定的元素的子元素列表尾部
插在尾部
方法 说明
.prepend() 将参数所指定的内容，插入到元素集的每个元素的子元素列表头部
.prependTo() 将元素集中的元素，依次重入到参数所指定的元素的子元素列表头部
替换内容
方法 说明
.html()

获取第一个元素的HTML内容，或者设置所有元素的HTML内容。

设置HTML时，所有子元素被清空。可以传入字符串，或者如下签名的函数：

Function( Integer index, htmlString oldhtml ) => htmlString 
.text()

获得第一个元素的文本内容，这些文本是它的字节文本节点、所有子代的文本节点的串联

或者将所有元素的内容替换为指定的文本
前后插入

这些方法用于插入兄弟节点。被插入的内容，可以是HTML片断、字符串、DOM元素、数组、jQuery对象。

插在前面
方法 说明
.before() 将参数指定的内容，插入到元素集每个成员的前面，成为其兄节点
.insertBefore() 将元素集插入到参数指定的元素的前面，成为其兄节点
插在后面
方法 说明
.after() 将参数指定的内容，插入到元素集每个成员的后面，成为其弟节点
.insertAfter() 将元素集插入到参数指定的元素的后面，成为其弟节点
移除元素
方法 说明
.detach() 将元素集中的所有元素从DOM树中剪除
.empty() 清空元素集中所有元素的内容
.remove() 将元素集中的所有元素从DOM树中剪除
.unwrap() 清除父元素
替换元素
方法 说明
.replaceAll() 将参数指定的所有元素替换为元素集
.replaceWith() 将元素集中所有成员使用参数指定的内容替换，返回被替换掉的元素
包装元素
包装元素

调用

.wrap()
可以为元素集的每个成员添加一个父元素，示例：

$( ".inner" ).wrap( "<div class='new'></div>" );
包装全部

调用

.wrapAll()
可以为元素集整体上添加一个父元素。例如，元素集是一系列兄弟节点，则该方法会这些兄弟节点添加一个公共的父元素。

包装每个

调用

.wrapInner()
可以为元素集每个元素添加一个父元素。例如，元素集是一系列兄弟节点，则该方法会这些兄弟节点每个都多一个自己的父元素。

脱去包装

调用

.unwrap( [selector ] )
可以移除元素集中所有元素的匹配的父元素，剩余的子元素在DOM树中的位置不变。

如果指定选择器，则父元素必须匹配选择器，如果不匹配则不进行脱去操作。注意：不会脱去非直接的祖先元素。

遍历过滤

这些方法对当前元素集对象进行过滤、遍历等操作。

方法 说明
.each

方法签名：

.each(callback(index,element))

遍历元素集，每次传递给回调的入参是索引值、原始DOM
.eq(N) 过滤元素集，仅仅保留单个索引值为N的元素，N为负数表示从尾部计算
.first()  .last() 过滤元素集，仅仅保留第一个、最后一个元素
.filter() 过滤元素集，可以传入选择器字符串、过滤函数、元素集
.has()

过滤元素集，以下元素被保留：

  1. 具有匹配参数选择器的后代元素
  2. 包含参数DOM所指定的后代元素
.is() 如果元素集中的某个元素匹配参数选择器、参数回调、参数元素集，则返回true
.not() 将不匹配的元素从元素集中移除，构造由这些移除元素构成的元素集
.add() 将参数选择器匹配的元素、参数元素集、参数HTML片段添加到当前元素集结尾：
var context = $('title');
// 以context为根，选择其子元素中具有.subtitle类的元素，然后将其加到元素集
$('div.header').add( '.subtitle', context );
.map() 传递给映射函数，产生一个新的jQuery对象：
$( ":checkbox" ).map(function() {
    return this.id;
}).get().join();   // two,four,six,eight
.slice() 方法签名：
.slice( start [, end ] )
。生成由索引范围start,end限定的子元素集
其它操作
复制元素

调用

.clone( [ withDataAndEvents ] )
可以对元素集进行深度拷贝。如果指定参数true，则元素的关联数据和事件监听器一并被拷贝。

创建元素

要创建新的元素直接向$()传入HTML片断即可：

var els = $(
    '<div></div>'
);

上面的调用结果直接可以传递给append()等函数。

查询元素
选择器

jQuery从CSS 1-3版本借用了一部分选择器，并且提供了一些自己特有的选择器。jQuery的所有选择器，都针对元素的选择，它不支持文本节点或者属性的选择。

通配选择器

通配符

*
匹配任何元素 ，示例：
$( "*" ).css( "border", "3px solid red" );

元素选择器

根据标签名来选择，匹配相应类型的元素，示例：

$("div").append('<span></span');

ID选择器

根据元素的标识符来选择，匹配具有指定id的元素。标识符以

#
开头，示例：
$('#title')

类选择器

根据CSS样式类来选择，匹配任何具有指定样式类的元素。CSS类以

.
开头，示例：
$('.title')

属性选择器
选择器 说明
[name|="value"]

如果属性值以value开头且value后面是字符-，则匹配

如果属性值等于value，也匹配
[name^="value"]

如果属性值以value开头，则匹配
[name*="value"] 如果属性值中包含value，则匹配
[name~="value"] 如果属性值中包含单词value，则匹配，单词以空格为边界
[name$="value"] 如果属性值以value结尾，则匹配
[name="value"] 如果属性值等于value，则匹配
[name!="value"] 如果属性值不等于value，则匹配
[name] 如果包含属性name，则匹配
[name="value"][name2="value2"] 同时匹配多个属性选择器
多选择器

可以用

,
分隔多个选择器，这样匹配其中任意一个选择器的元素被选中。示例：

// 为任何div、span元素，或者具有myClass的p元素设置样式
$( "div, span, p.myClass" ).css( "border", "3px solid red" );
层次选择器

这些选择器用于选择具有层次关系的选择器组合所指向的子代元素、兄弟元素：

选择器 说明
parentSelector > childSelector 选择匹配parentSelector的直接子元素，这些直接子元素必须匹配childSelector
ancestor  descendant 选择匹配ancestor 的任意后代元素，这些后代元素必须匹配descendant
prevSelector + nextSelector 选择匹配prevSelector的直接弟元素，这些弟元素必须匹配nextSelector
prevSelector ~ siblingsSelector 选择匹配prevSelector的任何弟元素，这些弟元素必须匹配siblingsSelector
表单选择器
选择器 说明
:button 匹配按钮
:checkbox  :radio 匹配复、单选框
:checked  :selected 匹配选中的单选框、复选框、下拉菜单项
:disabled  :enabled 匹配禁用或启用的元素
:focus 匹配聚焦或失焦的元素
:file 匹配文件上传元素
:image 匹配图片元素
:input 匹配各类型的input元素
:password 匹配密码类型的元素
:reset 匹配重置元素
:submit 匹配提交元素
:text 匹配文本输入框
基本过滤器

以

:
开头的选择器，起用法类似于CSS的伪类：

选择器 说明
:animated 匹配执行选择器时，正在动画过程中的元素
:eq(N) :gt(N) :lt(N) 索引选择器，N为元素在兄弟元素集合中的索引，以0为基准，负数表示从尾部记数
:odd  :even 匹配奇数或者偶数索引的元素
:first :last 匹配第一个或者最后一个元素
:header 匹配h1、h2、h3……
:focus 匹配获得焦点的元素
:not(selector) 匹配不满足选择器的元素，示例：
// 选择紧跟在未选中的复选框后面的span元素
$( "input:not(:checked) + span" );
:root 选择文档的根元素，也就是
<html>
元素
:target 匹配标识符为当前文档URI的哈希部分的元素
子代过滤器
选择器 说明
:first-child 匹配第一个子代元素
:first-of-type 匹配第一个指定类型的子元素，示例：
// 在所有兄弟元素中，选择第一个span
$( "span:first-of-type" );
:last-child 匹配最后一个指定类型的子元素
:last-of-type 选择最后一个指定类型的子元素
:nth-child() 选择第N个子元素：
// 选择无序列表的第2个条目
$( "ul li:nth-child(2)" )
:nth-last-child() 选择倒数第N个子元素
:nth-last-of-type() 选择倒数第N个指定类型的子元素
:nth-of-type() 选择第N个指定类型的子元素
:only-child 选择唯一的子元素
:only-of-type 选额唯一的指定类型的子元素
内容过滤器
选择器 说明
:contains() 选择任何目标元素的直接文本、子元素中的文本、或者两者的组合包含指定内容的元素：
// 选择内部包含Alex文本的子元素
$( "div:contains('Alex')" );
:empty 选择不包含子节点（包括文本节点）的元素
:parent 选择包含子节点（包括文本节点）的元素
:has(selector) 选择后代元素中，至少有一个匹配selector的元素：
// 选择内部包含p元素的div
$( "div:has(p)" );
可见性过滤器
选择器 说明
:hidden 匹配隐藏的元素，隐藏元素可以是以下情况之一：
  1. display为none的元素
  2. opacity为0的元素
  3. visibility为hidden的元素
  4. type="hidden"的表单元素
  5. width、height被明确设置为0的元素
:visible 匹配可见的元素
$()                         

调用该函数，传入一个CSS选择器字符串或DOM元素，jQuery会返回匹配的元素集对象。元素集是一个类似于数组的对象，它具有length属性，可以针对此元素集调用本文中所有

.
号开头的方法。

全局查询

直接传入选择器，则针对整个文档进行查询，例如：

$('div')
选择整个文档中任何div元素。

后代查询

这些方法用于选择当前元素集中每个元素的子代、后代节点：

方法 说明
.contents()  遍历元素集所有成员，收集所有子节点，包括文本、注释节点
.children() 方法签名：
.children( [selector ] )
。选择匹配selector的直接子元素，并产生一个新的元素集
.find() 方法签名：
.find( selector )
。选择匹配selector的任意后代元素，并产生一个新的元素集
   
祖代查询

这些方法用于选择当前元素集中每个元素的父代、祖代节点：

方法 说明
.parent() 方法签名：
.parent( [selector ] )
。选择直接父元素
.parents() 方法签名：
.parents( [selector ] )
。选择祖代元素，如果有多个祖代元素匹配，最接近当前元素的排在前面
.parentsUntil() 方法签名：
.parentsUntil( [selector ] [, filter ] )
。选择祖代元素，直到匹配selector（不包含匹配此选择器的），如果提供fitler，则仅仅满足过滤器的祖先元素才被选择
.closest() 方法签名：
.closest( selector [, context ] )
。在当前元素，及其任意祖代元素中查找满足selector的元素，如果指定参数context，则祖代元素必须是context的子代元素
.offsetParent() 寻找最接近的具有定位性（positioned ）的祖代元素，也就是position为relative/absolute/fixed的元素
兄弟查询

这些方法用于选择当前元素集中每个元素的兄弟节点：

方法 说明
.next()  .prev() 方法签名：
.next( [selector ] )
。选择当前元素直接弟、兄元素，如果提供selector，则仅仅在直接弟元素匹配选择器的情况下选择之
.nextAll()  .prevAll() 方法签名：
.nextAll( [selector ] )
。选择当前元素匹配selector的所有弟、兄元素
.nextUntil()  .prevUntil() 方法签名：
.nextUntil( [selector ] [, filter ] )
。选择当前元素的后续弟、兄元素，直到遇到（不包含）一个匹配selector的弟元素。如果指定filter，则只有匹配filter这个选择器的弟元素才被选择
.siblings() 选择当前元素的兄或者弟元素
事件支持

本章介绍的大部分方法，都同时支持注册监听器、手工触发事件监听器回调两种功能。

浏览器事件
.error()

该方法是

.on( "error", handler )
的快捷方式。

你应该针对元素注册此事件的监听器，例如img，当图片加载失败时，此事件会被触发。

当脚本执行出错时，window对象触发error事件，不要使用本节的方法来注册这种事件的回调，而应该使用：

window.onerror
。

.resize()

绑定resize监听器到元素上，或者在元素上手工触发此事件。示例：

$( window ).resize(function() {
    
});
.scroll()

绑定scroll监听器到元素上，或者在元素上手工触发此事件。示例： 

$( "#target" ).scroll(function() {
   // target元素滚动了
});
文档加载事件
.load()

绑定load事件的监听器。load事件在元素及其所有子代元素完全加载后触发。任何关联到URL的元素，例如images, scripts, frames, iframes以及window都支持该事件。示例：

$( "#book" ).load(function() {
});
.ready() 

主要用于提供一种机制，在文档加载完毕后立即执行某些逻辑。示例：

$( document ).ready(function() {
});
// 等价的更加简洁的方式：
$(function() {
});
.unload()

绑定unload事件监听器，当用户离开当前页面前，该事件被发送给window对象。示例：

$( window ).unload(function() {
});
表单事件
.blur()

绑定或者触发表单元素的blur（失去焦点）事件。

.focus()

绑定或者触发表单元素的focus（获得焦点）事件。

.focusin()

任何一个子元素获得焦点，父元素上均触发该事件。

.focusout()

任何一个子元素失去焦点，父元素上均触发该事件。

.change()

绑定或者触发表单元素的change事件。对于select、checkbox、radio，鼠标点选后立即触发，对于其它表单字段，仅仅在失去焦点后触发

.select()

仅仅在文本框、文本区上触发，如果用户选择了字段上一部分文本，触发该事件

.submit()

表单提交前触发，调用event.preventDefault()阻止表单提交。

鼠标事件
.click()

注册鼠标单机事件的监听器，该事件仅仅在：

  1. 鼠标指向元素内时，按下
  2. 鼠标指向元素内时，放开 

上述两个条件同时满足时，才会触发。

.toggle() 

函数签名：

toggle( handler, handler [, handler ] )
。可以提供多个监听器，这样，每次点击鼠标后执行其中一个，轮流执行。函数签名：

.contextmenu()

注册contextmenu事件的监听器，该事件在右击之后，上下文菜单显示之前触发。

.dblclick()

注册鼠标双击事件的监听器。

.hover()

注册一个或者两个监听器，分别在鼠标指针进入、离开元素时执行。方法签名：

hover( handlerIn, handlerOut );
hover( handlerInOut );
 .mousedown()

注册监听鼠标按下事件的监听器

.mouseup()

注册监听鼠标按键放开时的事件的监听器

.mouseenter()

鼠标指针移动并进入目标元素后触发。该事件本是IE特有，jQuery对其封装，允许任何浏览器使用。

.mouseleave()

鼠标指针移动并离开目标元素后触发。该事件本是IE特有，jQuery对其封装，允许任何浏览器使用。

.mousemove()

鼠标指针在元素内部移动时，该事件反复触发。即使移动一个像素，该事件也会触发，由于可能非常频繁的触发，监听器的逻辑应该足够简单。

为了跟踪鼠标的实际位置，你可能使用.clientX, .offsetX,  .pageX等事件属性，这些属性不同浏览器的行为不同，推荐使用标准的pageX属性。

.mouseout()

由于冒泡机制的存在，该事件可能导致一些麻烦的问题。例如，子元素上触发该事件后，父元素上注册的监听器也会监听到，这个可能和预期不符，考虑使用.mouseleave()代替该方法。

.mouseover()

由于冒泡机制的存在，该事件可能导致一些麻烦的问题。考虑使用.mouseenter()代替该方法。

键盘事件
.keydown()

按下某个按键后，触发该事件。按住按键不放，操作系统可能反复的触发该事件。

你可以在任何元素上注册监听器，但是仅仅获得焦点的元素才能触发该事件。哪些元素支持获得焦点取决于浏览器，但是表单元素通常都支持获得焦点。

如果你希望捕获在任何元素上触发的keydown事件，可以在document上注册监听，这样可以利用事件冒泡机制。

.keypress()

当发生某个击键操作后，触发该事件。

需要注意的是，keydown/keyup事件的event.which报告的是keycode，而keypress事件的event.which则报告键入的字符。例如，当输入a时，keydown的event.which为65而keypress是97。因此，在向知道按键而非字符时，优选keydown/keyup。

示例：

$( "#target" ).keypress( function ( event ) {
    if ( e.ctrlKey && event.which == 13 ) {
        event.preventDefault();
    }
} );
.keyup()

放开按键后，触发该事件。

通用绑定方法
.on()

函数签名：

.on( events [, selector ] [, data ], handler )
。 为选择器匹配的元素的1-N个事件注册监听器，data为传递给handler入参的event.data属性的任意对象。

.one()

和上面类似，但是监听器最多被执行一次。

.off()

函数签名：

.off( events [, selector ] [, handler ] )
。移除监听器，不传递handler则移除匹配的事件类型的全部监听器。

.trigger()

函数签名：

.trigger( eventType [, extraParameters ] )
。手工触发指定事件类型的所有监听器调用

事件对象

jQuery的事件对象遵循W3C的标准。原始浏览器的事件对象被被包装，提供满足标准的接口。要访问原始浏览器事件，可以通过

event.originalEvent
属性。

事件的方法和属性
方法/属性 说明
currentTarget 在事件冒泡阶段，当前的DOM元素。典型情况下，就是事件处理函数中的this
relatedTarget

如果有的话，指向其它和本事件相关的DOM元素

例如对于mouseout，指向鼠标进入的新元素；对于mouseover，指向鼠标来自的旧元素 
target

实际触发事件的哪个元素，该元素可能是监听元素的子代元素

根据 

event.target == this
可以判断是否当前处于冒泡阶段
delegateTarget 获得注册监听器的那个元素，示例：
// 在.box元素上注册监听
// 事件发生在它的一个子代元素button上
$( ".box" ).on( "click", "button", function( event ) {
    // 针对注册监听的那个祖代.box元素操作
    $( event.delegateTarget ).css( "background-color", "red" );
});
isDefaultPrevented() 确认event.preventDefault()是否被调用过 
preventDefault() 调用此方法后，目标事件的浏览器默认行为不会被触发 
isImmediatePropagationStopped() 确认event.stopImmediatePropagation()是否被调用过
stopImmediatePropagation() 禁止剩余的监听器的执行，同时禁止向上冒泡
isPropagationStopped() 确认event.stopPropagation()是否被调用过
stopPropagation() 禁止事件向上继续冒泡 
metaKey 事件发生时，是否按下META键。Windows下对应win键，Mac下对应Command键
namespace 触发事件时指定的名字空间
pageX 事件发生时，鼠标相对于文档左上角的偏移  
pageY
which

事件发生时， 按下的按键或者鼠标按钮

该属性对event.keyCode、event.charCode进行规范化

概述向对mousedown、mouseupevents的按钮进行正规化。1表示左键、2表示中键、3表示右键
type 事件的类型
data 触发事件时传入的额外对象
result 该事件的上一个监听器的执行结果
timeStamp 1970到现在的ms值 
其它属性 以下属性，依据事件的不同，可能为undefined：
  1. altKey、altKey、shiftKey  对应功能键是否按下，用于keypress
  2. screenX, screenY, clientX, clientY 事件发生位置
AJAX支持
发送AJAX
$.ajax()

执行一次Ajax请求：

/**
 * 参数：
 * url 请求的目标地址
 * settings 请求设置，覆盖默认设置
 */
$.ajax( 'data.json', {
    // 声明自定义数据类型和MIME类型的对应关系，支持的MIME类型将通过请求头发送给服务器
    accepts: {
        mycustomtype: 'application/x-some-custom-type'
    },

    // 指示如何反串行化某个数据类型
    converters: {
        'text mycustomtype': function ( result ) {
            // 执行转换
            return newresult;
        }
    },

    // 期望服务器发送回来的数据类型（实际上是前往响应的MIME类型）
    dataType: 'mycustomtype',
    async: true, // 请求发送方式，默认异步
    // 前置回调，用于修改jqXHR对象，此回调返回false则请求被取消
    beforeSend: function ( jqXHR, settings ) {
    },
    // 缓存方式：可选值 false for dataType、script、jsonp
    cache: true,
    // 后置回调，在success、success之后执行
    complete: function ( jqXHR, textStatus ) {
    },
    // 请求处理失败时的回调
    error: function ( jqXHR, textStatus, errorThrown ) {
    },
    /**
     * 请求处理成功时的回调
     * @param data 根据dataType或者dataFilter进行处理，之后的服务器响应
     */
    success: function ( data, textStatus, jqXHR ) {
    },
    // 用于提示jQuery如何解码响应内容
    contents: { 'string': 'regexp' },
    // 发送请求给服务器时使用的MIME类型
    contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
    // 所有回调的this对象
    context: { /*settings*/ },
    // 可以用于发起强制的JSONP请求。对于同源请求默认false，对于跨站请求默认true
    crossDomain: false,
    // 发送的数据，可以是对象、数组、字符串
    data: {},
    /**
     * 默认情况下，传递给data的对象会被编码为查询字符串，以满足application/x-www-form-urlencoded的要求
     * 如果你希望禁用这种编码功能，可以设置为false
     */
    processData: true,
    // 用于处理原始响应内容，返回任意值
    dataFilter: function ( strData, strType ) {
    },
    /**
     * 期望的响应类型，xml, json, script,  html, text, jsonp
     * 如果取值jsonp，则自动添加请求参数?callback=?
     */
    dataType: '默认自动猜测',
    // 是否触发全局事件
    global: true,
    // 如果设置为true，那么Last-Modified头被检测，如果自上次请求后响应没有改变则请求失败
    ifModified: false,
    // 覆盖JSONP回调参数名称，默认callback，如果设置为xx则添加请求参数?xx=?
    jsonp: 'callbackParamName',
    // 发送请求时使用的HTTP方法，"POST", "GET", "PUT"
    // 别名：type
    method: 'GET',
    // 用于覆盖XHR的MIME类型
    mimeType: undefined,
    // HTTP基本身份验证信息
    username: undefined,
    password: undefined,
    // 指定不同状态码的处理回调
    statusCode: {
        404: function () {
        }
    },
    // 请求超时ms
    timeout:0,
    // 用于处理请求对象的回调，对于IE默认是一个ActiveXObject，其它浏览器则是XMLHttpRequest
    xhr:function (  ) {
    }
} );
jqXHR对象

上述Ajax请求发送后，返回值是一个jqXHR对象，从1.5开始，此对象实现了Promise风格的接口：

jqXHR.done( function ( data, textStatus, jqXHR ) {} );
jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});
jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { });
jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});

使用该对象示例代码：

var jqxhr = $.ajax( "data.json" );
jqxhr.done(function() {}).fail(function() {

});
$.ajaxSetup()

用于设置默认的Ajax请求设置，入参即为一个包含了默认设置的对象。 

快捷方式

函数签名：

jQuery.get( url [, data ] [, success ] [, dataType ] )
 

使用GET请求从服务器加载数据

函数前面：

jQuery.post( url [, data ] [, success ] [, dataType ] )

使用POST请求从服务器加载数据

函数签名：

jQuery.getJSON( url [, data ] [, success ] )

使用GET请求从服务器加载JSON并解码

函数签名：

jQuery.getScript( url [, success ] )

使用GET请求从服务器加载脚本并执行

函数签名：

.load( url [, data ] [, complete ] )

从服务器加载HTML，并将其作为指定元素的HTML内容
串行化

jQuery提供以下助手函数，用于串行化对象以便通过Ajax发送。

$.param()

将对象、数组或者jQuery对串行化为请求参数键值对（字符串）形式：

‌‌$.param({name:'alex',age:30});    // name=alex&age=30
$.param({ a: [ 2, 3, 4 ] });      // a=2&a=3&a=4
.serialize()

针对一系列表单元素调用，将其组装为请求参数键值对（字符串）形式：

$( "input, textarea, select" ).serialize();
.serializeArray()

收集表单元素的值，将其组装为JSON数组，数组中每个对象的name、value属性分别对应表单元素的名称、取值：

$('form').serializeArray();
全局处理器

jQuery提供了一些方法，调用这些方法可以注册针对页面中所有支持发布全局事件的Ajax请求的生命周期回调。

要让一个Ajax请求支持全局事件，可以这样配置：

jQuery.ajaxSetup({ global: true });
处理方法列表

通过下表中方法注册的回调函数 ，其this均指向对应的AjaxEvent：

函数 说明
.ajaxComplete() 当所有Ajax请求处理完成后调用
.ajaxError() 当Ajax请求处理出现错误时调用
.ajaxSend() 在Ajax请求即将发送之前调用
.ajaxStart() 在第一个Ajax请求开
.ajaxStop() 在所有Ajax请求处理完毕后调用
.ajaxSuccess() 当一个Ajax请求处理成功后调用
示例
/**
 * 回调的参数：
 * event  AjaxEvent对象
 * xhr 原始XHR请求对象
 * settings 发送Ajax时使用的设置
 */
$( document ).ajaxComplete( function ( event, xhr, settings ) {
    console.log( xhr.responseText );
} );
$.ajax( 'data.json', {} );

 

常见问题
How-tos
Escape HTML特殊字符

使用jQuery时，可以参考如下方式：

$('<div/>').text( h.attr( 'header-title' ) ).html();

 

The post jQuery知识集锦 appeared first on 绿色记忆.

]]> https://blog.gmem.cc/jquery-faq/feed 0