Help:JQuery

来自滚动的天空Wiki

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对象的方法。下面介绍这些方法。

普通方法[编辑源代码]

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

获取特定属性的值。