MDUI 内置了一个轻量的 JavaScript 工具库,它拥有和 jQuery 类似的 api 和 jQuery 风格的链式调用,但体积仅为 jQuery 的六分之一。
你可以通过 mdui.$
来调用该库,但最好把 mdui.$
存储到一个简短的变量中以方便调用,例如:
var $ = mdui.$;
在后面的文档中,都使用 $
来表示 mdui.$
。
$() |
该方法有多种用法: 可以传入一个 CSS 选择器作为参数,返回包含匹配元素的 JQ 对象。该方法是通过
可以传入 DOM 元素、任意数组、NodeList、JQ 对象,返回包含指定元素的 JQ 对象。
可以传入 HTML 字符串,返回包含根据 HTML 创建的 DOM 的 JQ 对象。
可以传入一个函数,在 DOM 加载完毕后会调用该函数。
|
$.extend() |
如果只传入一个对象,该对象中的属性将合并到 JQ 对象中,相当于在 JQ 的命名空间下添加新的功能。
如果传入了两个或更多个对象,所有对象的属性都添加到第一个对象,并返回合并后的对象。
|
$.fn.extend() |
在 JQ 的原型链上扩展方法。
|
$.param() |
将对象或数组序列化,返回一个可用于 URL 参数的字符串。
若传入参数是一个数组,则该数组格式必须与
|
$.each() |
遍历数组或对象。返回值为第一个参数,即被遍历的数组或对象。 函数的第一个参数为数组的索引位置、或对象的键;第二个参数为数组或对象对应位置的值。 回调函数中的
|
$.merge() |
把第二个数组的元素追加到第一个数组中,并返回合并后的数组。
|
$.unique() |
过滤掉数组中的重复元素。
|
$.map() |
遍历数组或对象,返回由函数的返回值组成的新数组。 函数的第一个参数为数组或对象对应位置的值,第二个参数为数组的索引位置、或对象的键。 函数可以返回任何值,若函数返回的是数组,则会被展开;若返回的是
|
$.contains() |
判断父节点是否包含子节点,返回布尔值。
|
.is() |
如果集合中至少有一个元素和参数匹配,则返回 参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象、或回调函数。 参数为回调函数时,函数的第一个参数为索引位置,第二个参数为当前元素,
|
.length |
返回当前集合中元素的数量。
|
.each() |
遍历当前集合,为集合中每一个元素执行一个函数。如果函数返回 函数的第一个参数为元素的索引位置,第二个参数为当前元素。函数中的
|
.map() |
遍历当前集合,为集合中的每个元素执行一个函数,返回由函数返回值组成的新集合。若函数返回 函数的第一个参数为元素的索引位置,第二个参数为当前元素。函数的
|
.eq() |
返回仅包含指定索引位置的元素的集合。
|
.first() |
返回仅包含第一个元素的集合。
|
.last() |
返回仅包含最后一个元素的集合。
|
.get() |
返回指定索引位置的元素。若未传入参数,则返回集合中所有元素组成的数组。
|
.index() |
如果没有传入参数,则返回集合中第一个元素相对于同辈元素的索引位置。 如果传入了一个 CSS 选择器作为参数,则返回集合中第一个元素相对与 CSS 选择器匹配元素的索引位置。 如果传入了一个 DOM 元素,则返回该 DOM 元素在集合中的索引值。 如果传入一个 JQ 对象,则返回对象中第一个元素在当前集合中的索引位置。
|
.slice() |
返回当前集合的子集。 第一个参数为子集的起始位置,第二个参数为子集的结束位置;若未传入第二个参数,表示包含从起始位置到结尾的所有元素。
|
.filter() |
从当前集合中筛选出与指定表达式匹配的元素。参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、回调函数。 参数为函数时,函数的第一个参数为索引位置,第二个参数为当前元素,函数中的
|
.not() |
从当前集合中筛选出与指定表达式不匹配的元素。参数可以是 CSS 选择器、DOM 元素、DOM 元素数组、回调函数。 参数为函数时,函数的第一个参数为索引位置,第二个参数为当前元素,函数中的
|
.hasClass() |
判断集合中的第一个元素是否含有指定 CSS 类。
|
.addClass() |
为集合中的每个元素添加 CSS 类,多个类名之间可以用空格分隔。 也可以传入一个返回 CSS 类名的回调函数。函数的第一个参数为索引位置,第二个参数为该元素上原有的 CSS 类名,函数中的
|
.removeClass() |
移除集合中的元素上的 CSS 类,多个类名之间可以用空格分隔。 也可以传入一个返回 CSS 类名的回调函数。函数的第一个参数为索引位置,第二个参数为该元素上原有的 CSS 类名,函数中的 若没有传入参数,则将直接移除元素上的
|
.toggleClass() |
元素上的 CSS 类,有则删除,无则添加。多个类名之间可以用空格分隔。 也可以传入一个返回 CSS 类名的回调函数。函数的第一个参数为索引位置,第二个参数为该元素上原有的 CSS 类名,函数中的
|
.prop() |
获取集合中第一个元素的属性值。
也可以是设置集合中所有元素的属性值。 设置的属性值可以是回调函数的返回值。回调函数的第一个参数为元素的索引位置,第二个参数为该元素上原有的属性值,函数内的 若属性值或回调函数的返回值为 也可以通过传入对象来同时设置多个属性。
|
.removeProp() |
删除集合中所有元素上指定的属性值。
|
.attr() |
获取集合中第一个元素的属性值。
也可以是设置集合中所有元素的属性值。 设置的属性值可以是回调函数的返回值。回调函数的第一个参数为元素的索引位置,第二个参数为该元素上原有的属性值,函数内的 若属性值或回调函数的返回值为 也可以通过传入对象来同时设置多个属性。
|
.removeAttr() |
删除集合中所有元素上指定的属性值,多个属性名之间可以用空格分隔。
|
.val() |
获取集合中第一个元素的值。 若元素是
也可以是设置集合中所有元素的值。 设置的值可以是字符串、数值、字符串数组、回调函数。 若值为回调函数,第一个参数为元素的索引位置,第二个参数为元素的原有的值,函数中的 若元素为 若值、或函数返回值为
|
.text() |
获取集合中所有元素的文本内容(包含它们的后代元素)
也可以是设置集合中所有元素的文本。 设置的值可以是字符串、数值、布尔值、回调函数。 若为回调函数,第一个参数为元素的索引位置,第二个参数为元素原有的文本内容,函数内的 若设置的值、或回调函数返回值为
|
.html() |
获取集合中第一个元素的 HTML 内容。
也可以是设置集合中所有元素的 HTML 内容。 设置的值可以是 HTML 字符串、DOM 元素、回调函数。 若为回调函数,第一个参数为元素的索引位置,第二个参数为元素原有的 HTML 内容,函数内的 如设置的值、或函数返回值为
|
$.data() |
在指定元素上读取或存储数据。 存储数据时,若值为 注意:该方法不会检索元素上的
|
$.removeData() |
移除指定元素上存储的数据。 多个键名可以用空格分隔,也可以用数组表示多个键名。未指定键名时,将移除元素上的所有数据。
|
.data() |
在当前集合的元素上读取或存储数据。 存储数据时,若值为 注意:该方法检索的数据会包含元素上的
|
.removeData() |
移除当前集合的元素上存储的数据。 多个键名可以用空格分隔,也可以用数组表示多个键名。未指定键名时,将移除元素上的所有数据。 注意:该方法只会移除通过
|
.css() |
获取集合中第一个元素的 CSS 属性值。
也可以设置集合中所有元素的 CSS 属性值。 属性值可以是字符串、数值、或一个返回字符串或数值的回调函数。 若属性值是回调函数,第一个参数为元素的索引位置,第二个参数为元素原有的 CSS 属性值,函数中的 若属性值或回调函数返回 若属性值或回调函数返回数值,则会添加 也可以通过传入一个键值对对象,来同时设置多个 CSS 属性。
|
.width() |
获取集合中第一个元素的宽度(像素值),不包含
也可以设置集合中所有元素的宽度(不包含 值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。 回调函数的第一个参数为元素的索引位置,第二个参数为元素原有的宽度值,函数中的 若值、或回调函数的返回值为数值,则会自动添加 若值、或回调函数的返回值为
|
.height() |
获取集合中第一个元素的高度(像素值),不包含
也可以设置集合中所有元素的高度(不包含 值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。 回调函数的第一个参数为元素的索引位置,第二个参数为元素原有的高度值,函数中的 若值、或回调函数的返回值为数值,则会自动添加 若值、或回调函数的返回值为
|
.innerWidth() |
获取集合中第一个元素的宽度(像素值),包含
也可以设置集合中所有元素的宽度(包含 值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。 回调函数的第一个参数为元素的索引位置,第二个参数为元素原有的宽度值,函数中的 若值、或回调函数的返回值为数值,则会自动添加 若值、或回调函数的返回值为
|
.innerHeight() |
获取集合中第一个元素的高度(像素值),包含
也可以设置集合中所有元素的高度(包含 值可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。 回调函数的第一个参数为元素的索引位置,第二个参数为元素原有的高度值,函数中的 若值、或回调函数的返回值为数值,则会自动添加 若值、或回调函数的返回值为
|
.outerWidth() |
获取集合中第一个元素的宽度(像素值),包含
也可以设置集合中所有元素的宽度(包含 第一个参数可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。 回调函数的第一个参数为元素的索引位置,第二个参数为元素的原有宽度,函数中的 若值、或回调函数的返回值为数值,则会自动添加 若值、或回调函数的返回值为
|
.outerHeight() |
获取集合中第一个元素的高度(像素值),包含
也可以设置集合中所有元素的高度(包含 第一个参数可以是带单位的字符串、数值、或返回带单位的字符串或数值的回调函数。 回调函数的第一个参数为元素的索引位置,第二个参数为元素的原有高度,函数中的 若值、或回调函数的返回值为数值,则会自动添加 若值、或回调函数的返回值为
|
.hide() |
隐藏集合中的所有元素。
|
.show() |
显示集合中的所有元素。
|
.toggle() |
切换集合中所有元素的显示状态。
|
.offset() |
获取集合中第一个元素相对于
也可以设置集合中所有元素相对于 参数为一个包含 若参数是回调函数,第一个参数为元素的索引位置,第二个参数为元素的原有坐标,函数中的 若参数中
|
.offsetParent() |
返回集合中第一个元素的用于定位的父元素。即父元素中第一个
|
.position() |
获取集合中第一个元素相对于父元素的偏移。
|
.find() |
在当前集合的所有元素中,根据 CSS 选择器找到指定的后代节点的集合。
|
.children() |
在当前集合的所有元素中,获取直接子元素组成的集合。 可以传入一个 CSS 选择器作为参数,对子元素进行过滤。
|
.has() |
在当前集合的所有元素中,筛选出含有指定子元素的元素。 参数可以是 CSS 选择器或 DOM 元素。
|
.parent() |
获取当前集合中,所有元素的直接父元素的集合。 可以传入一个 CSS 选择器作为参数,仅返回与该参数匹配的父元素的集合。
|
.parents() |
获取当前集合中,所有元素的祖先元素的集合。 可以传入一个 CSS 选择器作为参数,仅返回与该参数匹配的祖先元素的集合。
|
.parentsUntil() |
获取当前集合中,每个元素的所有父辈元素,直到遇到和第一个参数匹配的元素为止(不包含匹配元素)。 第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。 可以传入第二个参数,必须是 CSS 选择器,表示仅返回和该参数匹配的元素。 若没有指定参数,则所有的祖先元素都将被匹配,即和
|
.prev() |
获取当前集合中所有元素的前一个同辈元素组成的集合。 可以传入一个 CSS 选择器作为参数,仅获取和该参数匹配的同辈元素的集合。
|
.prevAll() |
获取当前集合中所有元素的前面的所有同辈元素组成的集合。 可以传入一个 CSS 选择器作为参数,仅获取和该参数匹配的同辈元素的集合。
|
.prevUntil() |
获取当前集合中,每个元素前面所有的同辈元素,直到遇到和第一个参数匹配的元素为止(不包含匹配元素)。 第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。 可以传入第二个参数,必须是 CSS 选择器,表示仅返回和该参数匹配的元素。
|
.next() |
获取当前集合中所有元素的后一个同辈元素组成的集合。 可以传入一个 CSS 选择器作为参数,仅获取和该参数匹配的同辈元素的集合。
|
.nextAll() |
获取当前集合中所有元素的后面的所有同辈元素组成的集合。 可以传入一个 CSS 选择器作为参数,仅获取和该参数匹配的同辈元素的集合。
|
.nextUntil() |
获取当前集合中,每个元素后面所有的同辈元素,直到遇到和第一个参数匹配的元素为止(不包含匹配元素)。 第一个参数可以是 CSS 选择器、DOM 元素、JQ 对象。 可以传入第二个参数,必须是 CSS 选择器,表示仅返回和该参数匹配的元素。
|
.closest() |
从当前元素向上逐级匹配,返回最先匹配到的元素。 参数可以是 CSS 选择器、DOM 元素、JQ 对象。
|
.siblings() |
获取当前集合中,每个元素的兄弟元素。 可以传入一个 CSS 选择器作为参数,仅获取和该参数匹配的兄弟元素。
|
.add() |
添加元素到当前集合中。 参数可以是 HTML 字符串、CSS 选择器、JQ 对象、DOM 元素、DOM 元素数组、NodeList。
|
.empty() |
移除当前元素中所有的子元素。
|
.remove() |
从 DOM 中移除当前集合中的元素。 可以传入一个 CSS 选择器作为参数,仅移除与该参数匹配的元素。
|
.prepend() |
在当前集合的元素内部的前面插入指定内容。 参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。 也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数,函数的第一个参数是当前元素的索引位置,第二个参数是元素的原始 HTML,函数中的 该方法返回原始集合。
|
.prependTo() |
把当前集合中的元素追加到指定元素内部的前面。 参数可以是 CSS 选择器、HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。 该方法返回原始集合。
|
.append() |
在当前集合的元素内部的后面插入指定内容。 参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。 也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数,函数的第一个参数是当前元素的索引位置,第二个参数是元素的原始 HTML,函数中的 该方法返回原始集合。
|
.appendTo() |
把当前集合中的元素追加到指定元素内部的后面。 参数可以是 CSS 选择器、HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。 该方法返回原始集合。
|
.after() |
在当前集合的元素后面插入指定内容,作为其兄弟节点。 参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。 也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数,函数的第一个参数为当前元素的索引位置,第二个参数为元素的原始 HTML,函数中的 该方法返回原始集合。
|
.insertAfter() |
把当前集合中的元素插入到目标元素的后面,作为其兄弟元素。 如果当前集合中的元素是页面中已有的元素,则将移动该元素,而不是复制。如果有多个目标,则将克隆当前集合中的元素,并添加到每个目标元素的后面。 可以传入一个 HTML 字符串、CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象作为参数,来指定目标元素。
|
.before() |
在当前集合的元素前面插入指定内容,作为其兄弟节点。 参数类型可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。支持传入多个参数。 也可以传入一个返回 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象的回调函数,函数的第一个参数为当前元素的索引位置,第二个参数为元素的原始 HTML,函数中的 该方法返回原始集合。
|
.insertBefore() |
把当前集合中的元素插入到目标元素的前面,作为其兄弟元素。 如果当前集合中的元素是页面中已有的元素,则将移动该元素,而不是复制。如果有多个目标,则将克隆当前集合中的元素,并添加到每个目标元素的后面。 可以传入一个 HTML 字符串、CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象作为参数,来指定目标元素。
|
.replaceWith() |
用指定元素来替换当前集合中的元素。 参数可以是 HTML 字符串、DOM 元素、DOM 元素数组、JQ 对象。 也可以传入一个返回 HTML 字符串、DOM 元素、DOM元素数组、JQ 对象的回调函数,函数的第一个参数为当前元素的索引位置,第二个参数为元素的原始 HTML,函数中的 该方法返回原始集合,即被替换掉的集合。
|
.replaceAll() |
用当前集合中的元素替换指定元素。 参数为 CSS 选择器、DOM 元素、DOM 元素数组、JQ 对象。 该方法返回原始集合,即用于替换的元素的集合。
|
.clone() |
通过深度克隆来复制集合中的所有元素。 通过原生
|
.serializeArray() |
把表单元素的值组合成由 该方法可对单独表单元素进行操作,也可以对整个
|
.serialize() |
将表单元素的值序列化。
|
.on() |
为集合中每个元素的特定事件绑定事件处理函数。具体用法见下方示例:
|
.one() |
为每个匹配元素的特定事件绑定事件处理函数。但事件只会触发一次。 该方法的用法和 |
.off() |
为集合中每个元素解除绑定的事件。具体用法见下方示例:
|
.trigger() |
触发指定的事件。具体用法见下方示例:
|
$.ajaxSetup() |
为 Ajax 请求设置全局配置参数。
详细参数列表见下方的 AJAX 参数。 |
$.ajax() |
发送 AJAX 请求,返回 Promise。
详细参数列表见下方的 AJAX 参数。 |
.ajaxStart() |
全局 AJAX 事件。 AJAX 请求开始时执行函数。
|
.ajaxSuccess() |
全局 AJAX 事件。 AJAX 请求成功时执行函数。
|
.ajaxError() |
全局 AJAX 事件。 AJAX 请求发生错误时执行函数。
|
.ajaxComplete() |
全局 AJAX 事件。 AJAX 请求完成时执行函数。
|
参数名 | 参数类型 | 默认值 | 描述 |
---|---|---|---|
url |
String |
当前页面的 URL。 | 请求的 URL 地址。 |
method |
String |
GET |
请求方式。 包括:GET、POST、PUT、PATCH、HEAD、OPTIONS、DELETE |
data |
any |
'' |
发送到服务器的数据。 |
processData |
Boolean |
true |
是否把传递进来的数据转换成查询字符串发送。 |
async |
Boolean |
true |
是否为异步请求。 |
cache |
Boolean |
true |
是否从缓存中读取。只对 GET、HEAD 请求有效。 |
username |
String |
'' |
HTTP 访问认证的用户名。 |
password |
String |
'' |
HTTP 访问认证的密码。 |
headers |
Object |
{} |
添加到 Headers 中的数据。可以在 值为字符串或 |
xhrFields |
Object |
{} |
设置在 XMLHttpRequest 对象上的数据。
|
statusCode |
Object |
{} |
HTTP 状态码和函数组成的对象。
状态码在 200 - 299 之间、或状态码为 304 时,表示请求成功,函数参数和 |
dataType |
String |
text |
服务器返回的数据类型。 包括:text、json |
contentType |
String |
application/x-www-form-urlencoded |
内容的编码类型。为 false 时将不设置 Content-Type。 |
timeout |
Number |
0 |
请求的超时时间(毫秒)。为 0 时表示永不超时。 |
global |
Boolean |
true |
是否触发全局 AJAX 事件。 |
beforeSend |
Function |
在请求发送之前调用。返回
|
|
success |
Function |
请求成功之后调用。
|
|
error |
Function |
请求出错时调用。
|
|
complete |
Function |
请求完成之后调用。
|
注意:下面这些方法只在 MDUI 框架中存在,若你直接使用 mdui.jq 库,则不存在这些方法。
.reflow() |
强制重绘当前元素。
|
.transition() |
设置当前元素的 可以是带单位的时间值,也可以不带单位。若不带单位,则将自动添加
|
.transitionEnd() |
在当前元素上添加 transitionend 事件回调。 回调函数的参数为
|
.transform() |
设置当前元素的
|
.transformOrigin() |
设置当前元素的
|
.mutation() |
执行在当前元素及其子元素内注册的初始化函数。
|
$.showOverlay() |
创建并显示遮罩,返回遮罩层的 JQ 对象。 可以传入一个整数参数,表示遮罩层的
|
$.hideOverlay() |
隐藏遮罩层。 如果调用了多次
|
$.lockScreen() |
锁定屏页面,禁止页面滚动。
|
$.unlockScreen() |
解除页面锁定。 如果调用了多次
|
$.throttle() |
函数节流。 传入一个函数作为参数,函数的第一个参数是执行的函数,第二个参数是延迟时间,单位为毫秒。
|
$.guid() |
生成一个全局唯一的 ID。
可以传入一个参数。当该参数值对应的 guid 不存在时,会生成一个新的 guid,并返回;当该参数对应的 guid 已存在,则直接返回已有 guid。
|