link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

选择器语法

jQuery 选择器接受第二个参数作为搜寻范围，默认为 document

$('div.userinfo') 查询选择器

$.escapeSelector(n) 将选择器专用字符转义，例如 #a 会转为 \#a

jQuery 扩展的选择器伪类（原生不支持）：


     :text


     :password


     :radio


     :checkbox


     :file


     :reset


     :submit

对应类型的表单元素


     :visible


     :hidden

选择可见/隐藏元素


     :image


     :input

图片/输入控件元素


     :enable


     :disable

可用/禁用的表单元素


     :checked

已勾选的复选框、单选框，以及被选中的


     <option>


     :selected

被选中的


     <option>


     :animated

处于动画状态的元素


     :contains(t)

内容文本包含

的元素，大小写需严格匹配


     :has(a)

选择带有符合

选择器的元素的元素


     :parent

选择含有任意子元素或内容的元素

DOM 集合

返回原生 DOM 元素的方法：


     .get(2)

获取集合中的第 3 个元素，也可以写成

[2]

，但它还支持负数


     .get()

获取集合中所有元素


     .first()


     .last()

返回集合中第一个/最后一个元素，等同于


     .get(0)


     .get(-1)


     .toArray()

将所有 DOM 以数组形式返回

以下方法返回新的 jQuery 对象，且不会对原 DOM 集合进行任何修改

集合相关：


     .length

获取集合的元素数量，和已废弃的


     a.size()

作用相同


     .clone([e][, d])

克隆元素，

表示是否复制事件和数据，

表示是否递归到所以子元素


     .index(selector | el)

获取选择器/元素在 DOM 集合中的索引位置，不存在则返回

-1


     .index()

返回集合中首个元素在其同级元素中的索引位置


     .each(cb)

，回调参数


     function(index, el)

同数组的


     forEach

，回调中可以通过


     this

获取当前元素，回调返回


     false

则会停止迭代


     .map(cb)

，回调参数


     function(index, el)

同数组的

map

操作，但此方法最终返回一个新的 jQuery 对象


     .is(selector | cb)

判断集合中是否有任意元素匹配选择器/回调

过滤方法：


     .eq(4)


     .eq(-5)

返回集合中正数第 5 个/倒数第 5 个元素；正数从

开始，倒数从

-1

开始


     .even()


     .odd()

滤出集合中偶数/奇数的元素


     .filter(selector | cb)


     .not(selector | cb)

同筛选/反向筛选，返回一个筛选后的结果


     .find(selector)

从集合中所有元素的子元素中应用选择器，返回这些新元素的集合


     .has(selector | el)

返回集合中含有指定子元素的元素


     .slice(start [, end])

同数组的


     slice

操作

DOM 相对选择

这些方法返回 jQuery 对象后，可以一直调用方法来链式筛选、移动、增加元素

链式操作：


     .add(el | selector)

将新的元素加入 DOM 集合


     .addBack()

使用了


     .next()

之类的方法选择其他 DOM 时，可以把之前的元素加入集合


     .end()

回退到上一次调整 DOM 集合内容之前的内容

以下所有的 filter 参数，均为可选，表示提供一个选择器字符串，用于进一步筛选

后代元素：


     .children([filter])

返回 DOM 集合元素的所有直接子级元素


     .contents()

返回 DOM 集合元素的所有子节点，包含文本节点

祖先元素：


     .parent([filter])

返回直接父级元素


     .parents([filter])

类似于


     parent

，但它返回所有父级元素


     .parentsUntil([el] [, filter])

类似于


     parent

，但会返回满足条件的前一层


     .closest(filter)

从元素自身向父级开始，返回匹配的第一个元素


     .offsetParent()

返回可用于定位的第一个父级元素，可定位元素的


     position

为


     relative

或


     absolute

同级元素：


     .next([filter])


     .prev()

选择当前元素后面/前面的第一个元素


     .nextAll([filter])


     .prevAll()

类似上一个方法，但会选择后面/前面的所有元素


     .nextUntil(selector [, filter])


     .prevUntil()

从当前元素开始向后/向前，一直选中直到找到匹配选择器的元素，但不包含匹配选择器的元素


     .siblings([filter])

选择当前元素的其他所有同级元素

DOM 移动和修改

创建元素：


     $(html [, props])

创建 DOM 元素，


     html

为标签字符串，


     props

为属性和事件监听器

以下方法未特别说明的，返回值均为原 jQuery 对象

以下方法的 el 参数：

可以是字符串、HTML 字符串，注意不支持选择器字符串

可以是 jQuery 对象、元素， 这些元素会被移走

也可以是一个返回上述内容的方法，此时会针对 DOM 集合中的元素依次执行此方法；方法签名


     function(index, htmlString)

，参数分别表示当前元素在 DOM 集合中的索引、当前元素的 HTML 字符串，在方法中使用


     this

来访问当前元素

元素内部：


     .append(el)

向当前元素内部的末尾追加内容


     .appendTo(el)

将当前元素追加到

el

内部的末尾


     .prepend(el)

向当前元素内部的开头追加内容


     .prependTo(el)

将当前元素追加到

el

内部的开头

元素外部：


     .after(el)

向当前元素外部后面追加内容


     .insertAfter(el)

将当前元素插入到

el

的后面


     .before(el)

向当前元素外部前面追加内容


     .insertBefore(el)

将当前元素插入到

el

的前面


     .wrap(el)

使用

el

来依次包裹当前 DOM 集合中的每个元素，返回值不变


     .unwrap([selector])

移除当前元素外层元素，返回被移除掉的元素空标签


     .wrapAll(el)

使用

el

来包裹当前 DOM 集合内的所有元素，返回包裹后的整体


     .wrapInner(el)

当前元素的内部生成

el

包裹原本元素内部的内容，返回值不变


     .replaceWith(el)

使用

el

取代当前元素，返回被取代掉的元素


     .replaceAll(el)

使用当前元素依次取代

el

集合的所有元素，返回被取代掉的元素


     .empty()

将当前元素所有子节点清空，返回值不变


     .remove([selector])

删除当前元素，返回值不变


     .detch([selector])

同上条，但是此方法会保留元素的数据和事件监听，返回值不变


     .uniqueSort()

对 DOM 集合中的元素按照文档顺序排序并去重，返回新的结果

DOM 属性

如果 DOM 集合包含多个元素，以下方法仅对首个元素起效；设置值类方法均返回原对象

标签属性：


     .attr(key)


     attr(key, value | cb)

获取/设置属性，参数也可以是一个对象以设置所有键值对


     .prop(key)


     .prop(key, value | cb)

同上一条，但可用于获取和设置


     checked

、


     disable

等属性，可以取到


     true

和


     false


     .removeAttr(key)

移除属性


     .removeProp(key)

对应


     prop

用于移除属性

.hasClass(name) 是否含有类名

.addClass(name) 给元素添加类名，多个类名用空格分开

.removeClass(name) 移除元素的类名，多个类名用空格分开

.toggleClass(name [, trueToAdd]) 添加/移除类名，第二个参数可以是布尔值或回调

内容操纵：


     .html()


     .html(text| cb)

获取或设置


     innerHTML


     .text()


     .text(text | cb)

获取或设置


     textContent


     .val()


     .val(value)

获取或设置表单元素的值

数据值属性：


     .data(key)


     .data()

获取元素特定键的数据值/所有数据值键值对，可以获取到 HTML 中的


     data-

标签的内容，特性：

会自动转换键名，API 中的


       lastName

在 HTML 中为


       last-name

，反之同理

会自动解析类型，可以从 HTML 属性中直接解析出


       null

、对象、数组、数值、布尔值

初始值可以从 HTML 标签的


       data-*

属性中获取， 但获取一次后即被记住，修改标签属性后无法获取最新值


       .data(key, value)

设置元素的数据值，由 jQuery 管理，注意它不会在元素的 HTML 标签上放置


       data-*

属性


       .removeData(key)


       .removeData()

移除元素特定键的数据值/移除元素所有数据值，它也不会修改 HTML 标签的


       data-*

属性


       $.hasData(el)

判断目标元素是否曾被 jQuery 附加过数据对象，返回布尔值

el

是 DOM 元素，不同于


       .data(key)

，此方法没有任何副作用

样式与尺寸

如果 DOM 集合包含多个元素，以下方法仅对首个元素起效

样式控制：


       .css(key)


       .css(key, value)

设置/获取 CSS 属性值，会自动添加诸如


       -webkit-

的前缀，尺寸会自动添加

px

后缀

$.cssHooks
用于自定义特定 CSS 规则的设置和获取逻辑；使用时需要在此对象上挂载键值对：
- d 为持续时间，是一个表示毫秒数的数值，默认 400
- e 为缓动，定义动画的过渡速率，默认 'swing' 先快后慢，可改为 'linear' 表示线性
- cb 为动画完成后的回调，被 .stop() 的动画不会调用它，但 .finish() 会调用
- .show([d] [, e] [, cb]) / .hide([d] [, e] [, cb])
  缩放显示/隐藏元素， 如果不传任何参数，将立即显示/隐藏元素，没有动画
- .toggle([d] [, e] [, cb])
  在缩放显示/隐藏元素之间切换， 也可以传布尔值表示显示/隐藏，此时也没有动画
- .slideDown([d] [, e] [, cb]) / .slideUp([d] [, e] [, cb])
  通过向下展开/向上收起来展示/隐藏元素
- .slideToggle([d] [, e] [, cb])
  切换滑动隐藏和显示
- .fadeIn([d] [, e] [, cb]) / .fadeOut([d] [, e] [, cb])
  淡入显示/淡出隐藏元素
- .fadeToggle([d] [, e] [, cb])
  切换淡入淡出显示隐藏元素
- .fadeTo(d, o [, e] [, cb])
  将透明度淡入淡出到参数 o 的值， o 是一个 0 到 1 之间的数字
- .animate(p [, d] [, e] [, cb])
  给出目标 CSS 键值对对象 p ，jQuery 会使元素过渡到这个状态，关于这个对象：
  - 只支持一些可以过渡的属性，且组合属性建议拆开来写，属性值需要带单位
  - 键名自动转换驼峰式写法，且还支持 scrollTop 、 scrollLeft 等非 CSS 属性
  - 值可以使用特殊值 'show' 、 'hide' 、 'toggle' ，jQuery 会记住原始值并切换
  - 值如果是数值类型，还可以使用例如 +=50px / -=30px 这种写法
  - .stop([clear] [, end])
    停止当前活动中的动画效果， clear 为是否清空排队中的动画， end 为是否立即完成当前动画
  - .delay(d) 推迟等待一段时间
  - .finish() 立即完成当前活动中和排队中的所有动画
  - .on(e, fn) / .on(e [, data], fn) 绑定事件监听器，参数如下：
    - $.ajaxPrefilter([dataType,] handler) 在每个 AJAX 发出前会触发该 handler 回调修改请求配置参数
      - $.ajaxTransport([dataType,] handler) 处理请求的发送和中断，详情见官方文档
      - $.ajaxSetup(options) 接受一个对象，为所有 AJAX 设置默认参数，此方法不推荐使用
      - $.param(obj [, trad]) 将表单、数组、对象序列化为 URL 查询参数
        参数 trad 设为 true 将使用传统方式浅层序列化，值为对象时将序列化为 '[object+Object]'
      - .serialize() 将表单 DOM 序列化为字 URL 查询参数
      - .serializeArray() 将表单 DOM 序列化为数组，其中每个对象包含 .name 和 .value 属性
      - $.globalEval(code) 在全局上下文中执行 JS 代码，完整配置见官方文档
      - $.parseHTML(data [, context] [, keepScripts]) 将字符串解析为 DOM 节点
      - $.parseXML(data) 将字符串解析为 XML 文档
      - $.noop 空函数
      - $.each(obj | arr , fn)
        可遍历对象或数组， fn 的回调签名 function(key, value)
      - $.extend([deep,] target [, …obj1])
        合并后续的对象到第一个对象并返回， deep 设为 true 则会深拷贝
      - $.grep(arr, fn [, invert])
        类似于数组的 .filter() ， invert 如果开启则改为返回原本要丢弃的元素
      - $.makeArray(obj)
        将伪数组转化为真数组， obj 也可以传 jQuery 选择器对象
      - $.map(arr | obj, fn)
        可以遍历数组或对象，回调签名 function(value, key) ，返回 null 或 undefined 时会移除元素
      - $.inArray(value, arr [, fromIndex])
        在数组 arr 中查找 value 的索引， fromIndex 默认为 0 表示搜寻起始，找不到返回 -1
      - $.merge(fir, sec)
        将第二个数组上的内容接在第一个数组后面并返回， 此方法会修改第一个参数的数组
      - $.uniqueSort(arr)
        对数组内容排序并移除重复项目，返回新的结果
      - $.contains(outer, inner)
        判断 DOM 是否有包含关系，第一个参数必须是 DOM 元素，第二个参数不支持文本和注释
      - $.isEmptyObject(obj)
        判断是否是空对象，此方法还会沿着原型链判断
      - $.isPlainObject(obj)
        判断是否是普通对象，即通过 {} 或 new Object() 创建的，而不是来自宿主
      - $.isXMLDoc(node)
        判断是否是 XML 文档或在 XML 文档内
      - $.Callbacks(flags)
        创建一个 jQuery 的回调列表， flags 是以空格分隔的表示标志的字符串：
        
        'once' 该回调列表只能被触发一次
        
        'memory' 之前触发的参数被记住，新回调添加时也会执行一遍
        
        'unique' 确保回调不能被重复添加
        
        'stopOnFalse' 任意回调返回 false 时中断回调
        
        回调列表支持链式操作，以下函数返回回调对象本身
        
        .add(fn) / .remove(fn) / .empty() 添加/删除/清空回调函数
        
        .has(fn) 判断列表中是否存在某个回调
        
        .fire(…args) / .fired()
        用给定的参数触发回调列表中的所有回调/确认是否曾调用过
        
        .fireWith([context] [, argArr])
        使用 context 的上下文来触发回调，第二个参数可以是一个数组，会以 REST 方式传给回调函数
        
        .lock() / .locked()
        锁定回调列表并阻止增删和触发回调函数，但对 “memory” 回调存在特殊处理 /确认是否被锁定
        
        .disable() / .disabled()
        禁用回调列表/确认是否被禁用
        
        延迟对象
        
        延迟对象创建：
        
        $.Deferred([beforeStart]) 创建并返回一个 Deferred 对象。
        
        beforeStart
        将在该 Deferred 返回之前调用，将这个 Deferred 对象将作为第一个参数传入
        
        改变状态：
        
        .resolve(args) / .resolveWith(context [, …args])
        成功执行延迟对象/以指定上下文成功执行
        
        .reject(args) / .rejectedWith(context [, …args])
        拒绝延迟对象/以指定上下文拒绝
        
        .notify(args) / .notifyWith(context [, …args])
        通知延迟对象执行中进度/以指定上下文通知
        
        状态改变触发的回调：
        
        .done(cb [, …cbs]) 延迟对象执行成功时依次调用回调
        
        .fail(cb [, …cbs]) 延迟对象执行失败时依次调用回调
        
        .progress(cb [, …cbs]) 设置延迟对象的进度时依次调用回调
        
        .always(cb [, …cbs]) 延迟对象解决或成功完成后都会依次调用的回调
        
        延迟对象控制：
        
        $.when(…deferrObj) 用于执行一个或多个延迟对象或 thenable 的函数对象等
        
        传入一个延时对象，会形如 Promise 一样先返回，并在延迟对象解决后改变状态
        
        传入多个延时对象，会类似 Promise.all() 一样形成新的对象，所有延时对象完成后会执行该新对象的 done 回调，任一延时对象失败后会执行该新对象的 fail 回调，这些回调的参数依次此函数的参数
        
        传其他参数或不传，将返回类似于 Promise.resolve() 的已完成的 thenable 对象
        
        .then(doneCb [, failCb] [, progressCb]) 为延迟对象添加后续处理程序参数
        
        .promise([target]) 返回一个延迟对象，但它没有任何修改状态的方法，例如 .resolve()
        如果指定了 target 对象，那么会给这个对象添加延迟对象的相关 API 并返回它，会修改此对象
        
        .state() 返回 'pending' 、 'resolved' 、 'rejected' 表示对象状态

选择器语法

DOM 集合

DOM 相对选择

DOM 移动和修改

DOM 属性

样式与尺寸

效果和动画

事件

AJAX

核心与工具方法

回调列表（发布订阅）

延迟对象