Help:JQuery

jQuery是一个跨浏览器的JavaScript库，作用可以是用更少的代码做更多的事情。包括MediaWiki在内的许多网站都使用了jQuery。

jQuery是基于JavaScript的，因此请确保已经阅读关于JavaScript的帮助。

基础用法

jQuery的工厂方法是jQuery，可以使用其别称$，亦可使用以$.开头的工厂函数。MediaWiki内的所有代码都可以假定已经加载jQuery。

选择元素

• $(selector: string): JQuery<HTMLElement>
• $(selector: string, context: JQuery | Element | Document | string): JQuery<HTMLElement>

使用$("选择器")可以选择网页内所有符合条件的元素，返回一个jQuery对象。例如：

• $("div#test")
• $(".mw-content")

可以用context参数指定选择的范围，可以是元素/文档/jQuery对象/选择器。例如$("a", "#mw-content-text")指定寻找#mw-content-text中的所有链接，等价于$("#mw-content-text").find("a")。

初始化函数

$(callback: (this: Document, $: JQueryStatic) => void): JQuery<HTMLElement>

等价于$(document).ready(fn)，可以指定一段代码在页面完全加载后执行。例如：

$(function() {
    // 页面加载完成时调用该函数。
    // 代码放这里。
});

如果$已被占用且已经要求jQuery为原来的变量腾出位置，可以指定第一个参数以在函数体中使用jQuery，但在MediaWiki中一般不会有这种情况，因为MediaWiki中没有别JavaScript的库使用$作为标识符。例如：

// 外面给$定义了其他值，不能用$代指jQuery
jQuery(function ($) {
    // 这里可以使用$
});

创建新的元素

• $(html: string, ownerDocument: Document): JQuery<HTMLElement>
• $(html: string, context: Node): JQuery<HTMLElement>
• $(html: string, attributes: Object<string, any>): JQuery<HTMLElement>

使用HTML字符串创建一个新的元素。如果第二个参数给定一份文档对象，将使用它来解析HTML。给定一个节点，会使用它的主人文档解析HTML。如果第二个参数是一个普通对象（直接使用字面量的），会对逐一遍历它的属性，如果属性名是一个jQuery对象方法的名字，就会使用属性值调用该方法；如果不是，就会作为这个元素的属性。例如：

var $div = $("<div/>", {
    "class": "test", // 这里因为class是关键字做属性名必须加引号
    title: "悬浮显示文字",
    click: function () {
        ...
    }
});
// 相当于
var $div = $("<div/>");
$div
    .addClass("test")
    .attr("title", "悬浮显示文字")
    .click(function () {
        ...
    });

克隆jQuery对象

$(element: jQuery): JQuery<HTMLElement>

传入一个jQuery对象，返回一个内容相同的对象。

包装元素/窗口对象

• $(object: Window): JQuery<Window>
• $(objectOrArray: any): JQuery<any>

包装元素或窗口对象，如果参数不符合所有上面的要求就会被认定为这个方法。你甚至可以包装数字，但通常这是没有意义的。

$(window).resize(function () {
    ...
});
$(document.body).css("color", "red");

jQuery.fn是jQuery实例的原型（prototype），其中有所有jQuery对象的方法。下面介绍这些方法。

普通方法

以下文档的类型标注中有这些类型别称：

• type JNode = Document | Element | Text | Comment | DocumentFragment

jQuery.fn.prepend/jQuery.fn.append

• JQuery<HTMLElement>.append(...contents: Array<string | JNode | JQuery<JNode>| (JNode | JQuery<JNode>)[]>): this

将参数中的HTML字符串/节点/JQuery对象添加到本元素的头/尾部。

jQuery.fn.prependTo/jQuery.fn.appendTo

• JQuery<HTMLElement>.appendTo(selector: string): this
• JQuery<HTMLElement>.appendTo(target: string | Element | DocumentFragment | JQuery): this

将本对象中的元素添加到指定选择器的元素、指定HTML字符串、指定的元素或jQuery对象中。

var $ele = $("<table/>");
$ele.prependTo("#mw-content-text"); // 等价于$("#mw-content-text").prepend($ele)

以上四个方法无论元素是否已有父节点都会生效。如果元素已有父节点，元素会从父节点那里被夺走，放置到新的位置。

jQuery.fn.attr

设置

• JQuery<HTMLElement>.attr(name: string, value: string | number | boolean | null): this
• JQuery<HTMLElement>.attr(name: string, func: ((this: HTMLElement, index: number, attr: string) => string | number | void | undefined)): this
• JQuery<HTMLElement>.attr(attributes: {[key: string]: string}): this

设定特定属性的值。如果第二个参数传入一个函数，会对其中的每个元素以之作为this、用元素在其中的索引和原来的属性值作为参数调用这个函数，并用其返回值作为属性值。如果只传入一个字面量对象，就会将其中的键值对作为元素属性。

jQuery.fn.data

设置

• JQuery<HTMLElement>.data(name: string, value: string | number | boolean | null | symbol | object): this
• JQuery<HTMLElement>.data(obj: {[key: string]: any}): this

在节点中设置数据属性。如果传入一个字面量对象，会将其属性作为data属性。

获取

• JQuery<HTMLElement>.data(name: string): any
• JQuery<HTMLElement>.data(): Object

设置或获取元素数据。获取时首先在元素的data-*属性里找，找不到则会在节点本身上的jQuery.expando域上找。如果没有参数，将返回所有data属性组成的键值对对象。

jQuery.fn.addClass

• JQuery<HTMLElement>.addClass(className: string | string[]): this
• JQuery<HTMLElement>.addClass(func: ((this: HTMLElement, index: number, currentClassName: string) => string)): this

为元素添加一个或多个类。如果传入函数，会对其中的每个元素以之作为this、用元素在其中的索引和原来的类作为参数调用这个函数，并用其返回值作为添加的类。

jQuery.fn.removeClass

同上，但是是移除类。

jQuery.fn.toggleClass

• JQuery<HTMLElement>.addClass(className: string | string[], state?: boolean): this
• JQuery<HTMLElement>.addClass(func: ((this: HTMLElement, index: number, currentClassName: string) => string), state?: boolean): this

不提供state参数的情况下，如果有className类会移除它，没有就会加上它。如果state指定，移除和添加就是确定的。一般只使用第一种，用以在两种状态切换。

// 设定一个可折叠元素
var $ele = $("<div/>").appendTo("#mw-content-text");
var $toggle = $("<a/>").on("click", function () {
    $ele.toggleClass("collapsed");
    // 相当于if ($ele.hasClass("collapsed")) {$ele.addClass("collapsed")} else {$ele.removeClass("collapsed")}
}).appendTo($ele);

获取

• JQuery<HTMLElement>.attr(name): string | undefined

获取特定属性的值。

>doc