jQuery网站
jQuery特点
- js精简化
- 链式写法
- 动画样式
jQuery精简化
链式写法
// 链式写法: $(element).函数1.函数2.函数...
var chain = $(".who").text().split("");
内容
html | html格式内容 |
text | 纯文本内容 |
val | 表单元素的值 |
css样式
例子 | |
单条语句 | css('position', 'relative') |
多条语句 | css({ 'width': '100%', 'height': '300px'}) |
attr | 设置或返回属性的值 |
prop | 设置或返回属性的值 |
removeAttr | 删除属性 |
offset | 被选元素相对于文档的偏移坐标 详情:返回top,left值 语法: 获取$(selector).offset() 设置$(selector).offset({top:value,left:value}) |
position | 元素的位置(相对于它的父元素) 详情:返回top,left值 |
attr 与 prop区别
- 自带的属性 使用 prop (data-test)如果没有相应的属性,返回值是空字符串
- 自定义的属性 使用 attr (class/id/...)如果没有相应的属性,返回值是 undefined
// $("#who").attr("href")
尺寸
width | 宽度(不包括内边距、边框或外边距) |
height | |
innerWidth | (包括内边距) |
innerHeight | |
outerWidth | (包括内边距和边框) |
outerHeight |
节点获取
contents | 所有子节点 |
offsetParent | 返回第一个被定位的父元素 |
first | 首 |
last | 尾 |
prev | 上 |
prevAll | 上+ |
next | 下 |
nextAll | 下+ |
children | 子级 |
parent | 父级 |
parents | 父级+ |
sibings | 同级 |
节点增删改
add | 附加 |
prepend | 添加到开头 |
append | 添加到末尾 |
appendTo | 移动 |
remove | 删除 |
empty | 清空 |
replaceAll | 替换 |
before | 之前插入 |
insertBefore | 之前插入 |
after | 之后插入 |
insertAfter | 之后插入 |
例子-综合
// $(".who1").add(".who2").add(".who3").css("color","red");
// $('.who').before('<i> content </i>')
// $("<strong> content </strong>").insertBefore(".who")
// $('.who').prepend("<strong> content </strong>")
// $('.who').append("<strong> content </strong>")
// $(".who").appendTo('body')
// $(".who").empty()
// $("<p> content </p>").replaceAll(".who");
// $("ul").remove(".who"); // 仅删除.who的类型
查找匹配
filter | 匹配标签 提示 :与contents方法结合使用 |
find | 查找元素 |
eq | 元素索引匹配 |
例子-filter方法
// contents().filter('.who')
// contents().filter('.who').first()
// find('.who')
// $('ul>li').eq(0)
其它节点操作
clone | 复制节点 参考 : 复制+移动节点 |
wrap | 包裹 参考 :每个p标签外嵌套一个div |
wrapAll | 包裹+ |
has | 是否包含指定节点 |
is | 判断是 |
not | 判断否 |
例子
// $(".who").clone().appendTo("body");
// $(".who").wrap("<div></div>");
// $("body").has(".who").css("background-color","yellow");
// $(".who").parent().is("body");
// $("p").not(".who")
class操作
addClass | 添加 |
removeClass | 删除 |
hasClass | 是否包含 |
toggleClass | 切换,不存在则创建 |
隐藏/显示
hide | 隐藏 语法1:$(selector).hide(speed,callback) 语法2:$(selector).hide(speed,"mode",callback)
| ||||
show | 显示 | ||||
toggle | 切换 | ||||
slideDown | 样式-隐藏 | ||||
slideUp | 样式-显示 | ||||
slideToggle | 样式-切换 | ||||
fadeIn | 不透明度-隐藏 | ||||
fadeOut | 不透明度-显示 | ||||
fadeTo | 自定义不透明效果 语法:fadeTo(speed,opacity,callback); 例子:fadeTo(1000,0.4) 设置1秒后 0.4不透明 |
例子
/* 隐藏 $(selector).hide(speed,easing,callback) */
$("#who1").click(function () {
$("#d1").hide((speed = "slow"));
});
/* toggle hide() 和 show() 之间的切换。*/
$("#who2").click(function () {
$("#d2").toggle();
});
// 进阶的用法
$("#wh3").hide(1000,"linear",function(){
// ...
});
事件
区别
jQuery |
|
js |
|
部分参考(其余等同于js)
bind | bind(event,function)添加一个或多个事件处理程序 参考:addEventListener |
unbind | 移除被选元素的事件处理程序(与die方法类似) |
ready | 防止文档在完全加载(就绪)之前运行 jQuery 代码 详情:当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件 |
error | 触发错误事件 |
change | 当元素的值发生改变时 |
load | 当指定的元素(及子元素)已加载时 |
unload | 当用户离开页面时,会发生 unload 事件 |
resize | 当调整浏览器窗口的大小时 |
select | 当 textarea 或文本类型的 input 元素中的文本被选择时 |
submit | 当提交表单时 |
blur | 当元素失去焦点时发生 blur 事件 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
scroll | 当用户滚动指定的元素时 |
动画
animate | 动画简写 语法:animate(styles,speed,easing,callback) |
speed | 速度 值:slow/normal/fast/毫秒单位 |
easing | 速度形式 值:swing/linear |
delay | 延迟 |
stop | 停止 语法 :$(selector).stop(stopAll,goToEnd); 详情 : stop() 默认停止当前动画 stopAll=true 停止所有动画 |
clearQueue | 停止队列中所有仍未执行的函数,与stop方法不同(只适用于动画) |
dequeue | 运行被选元素的下一个排队函数 |
queue | 显示被选元素的排队函数 |
例子
<section>
<button id="start">start</button>
<button id="stop">stop</button>
<div id="box" style="background: green"></div>
</section>
$(document).ready(function () {
$("#start").click(function () {
$("#box").animate({ width: 300, height: 300 }, "slow");
$("#box").delay(2000);
$("#box").queue(function () {
$(this).css("background-color", "red");
$(this).dequeue();
// 上方动画执行后,该函数启动运行,包括后面的代码
});
$("#box").animate({ height: 50 }, "slow");
$("#box").animate({ width: 50 }, "slow");
});
$("#stop").click(function () {
$("#box").clearQueue();
});
});
/* slideUp/slideDown 向上隐藏/向下显示 */
// $('.test').css('color','red').slideUp(2000).slideDown(2000) 向上隐藏,向下显示
运行
jQuery补充了解
jQuery 入口函数与 JavaScript 入口函数的区别
jQuery示例
$(document).ready(function () {
// 执行代码
});
$(function () {
// 执行代码
});
js示例
window.onload = function () {
// 执行代码
}
jQuery 回调对象
jQuery.Callbacks() 函数,返回一个多功能对象,此对象提供了一种强大的方法来管理回调列表。它能够增加、删除、触发、禁用回调函数。
$.Callbacks | 一个多用途的回调列表对象,用来管理回调函数列表 |
callbacks.add | 在回调列表中添加一个回调或回调的集合 |
callbacks.disable | 禁用回调列表中的回调函数 |
callbacks.disabled | 确定回调列表是否已被禁用 |
callbacks.empty | 从列表中清空所有的回调 |
callbacks.fire | 传入指定的参数调用所有的回调 |
callbacks.fired | 确定回调是否至少已经调用一次 |
callbacks.firewith | 给定的上下文和参数访问列表中的所有回调 |
callbacks.has | 判断回调列表中是否添加过某回调函数 |
callbacks.lock | 锁定当前状态的回调列表 |
callbacks.locked | 判断回调列表是否被锁定 |
callbacks.remove | 从回调列表中的删除一个回调或回调集合 |
综合例子
// 例子1
$(function () {
function fn1(value) {
console.log("func1:", value)
}
function fn2(value) {
console.log("func2:", value);
}
var callbacks = $.Callbacks();
callbacks.add(fn1);
callbacks.fire("number one"); // >>> func1:number one
callbacks.remove(fn1); // 删除函数,不删除的结果会叠加执行一次
// callbacks.lock(); // 锁定当前状态的回调列表 ,后面将无法运行
// console.log( callbacks.locked() ); // 判断锁没锁上
callbacks.add(fn2);
callbacks.fire("number two");
// 上面使用了remove >>> func2:number two
// 上面未使用remove情况 >>> func1:number one >>> func2:number two
console.log( callbacks.fired()) // 测试回到列表是否只是被调用过一次 >>>> true
})
// 例子2
$(function () {
// 一个将被添加到列表的简单的函数
var fc = function (value) {
alert(value);
};
var callbacks = $.Callbacks();
// 添加上面的函数到回调列表
callbacks.add(fc);
// 传入参数调用所有回调列表函数
callbacks.fire("func"); // >>> func
callbacks.disable(); // 禁用回调函数
alert( callbacks.disabled() ); // 查看禁用的状态 >>> true
callbacks.fire("new message"); // new message 不会被输出
callbacks.empty(); // 清空回调列表
alert( callbacks.has( fc ) ); // 确认所有回调列表是否被移除 // >>> false
});
// 例子3-其它方法
$(function () {
//将被添加到列表的一个简单的函数
var fc = function (value1, value2) {
alert(value1 + "," + value2);
};
var callbacks = $.Callbacks();
// 添加函数到列表
callbacks.add(fc);
// 使用上下文"window"调用回调列表
callbacks.fireWith(window, ["foo", "bar"]);// >>> foo, bar"
});
jQuery 延迟对象
通过调用 jQuery.Deferred() 方法来创建的可链接的实用对象。它可注册多个回调函数到回调列表,调用回调列表并且传递异步或同步功能的成功或失败的状态。
$.Deferred | 对象 | 返回一个链式实用对象方法来注册多个回调 详情:这是一个构造函数,用来返回一个链式实用对象方法来注册多个回调,并且调用回调队列,传递任何同步或异步功能成功或失败的状态 了解:python的注册函数+try语句+promise的综合体 |
deferred.then | 处理 | 当Deferred(延迟)对象解决,拒绝或仍在进行中时,调用添加处理程序 了解: 由于 deferred.then 返回 Promise 对象,可以链接其它的 Promise 对象,包括附加的 .then() 方法。 语法: deferred.then( doneFilter [, failFilter ] [, progressFilter ] ) |
deferred.resolve | 已成功 | 解决Deferred(延迟)对象,并根据给定的参数调用任何 doneCallbacks 回调函数 |
deferred.reject | 已失败 | 拒绝 Deferred(延迟)对象,并根据给定的参数调用任何 failCallbacks 回调函数 |
deferred.notify | 已进行中 | 给定一个参数,调用正在延迟对象上进行的回调函数( progressCallbacks ) 提示:
|
deferred.always | 始终进行 | 当Deferred(延迟)对象被受理或被拒绝时,调用添加的处理程序 |
deferred.done | 成功状态的执行函数 | 当Deferred(延迟)对象被受理时,调用添加的处理程序 详情:该方法接受一个或者多个参数。deferred.done() 返回的是一个 Deferred 对象, 可以连接其他的延迟对象方法,包括额外的 .done() 方法。当Deferred 对象得到解决时,回调函数按它们被添加时的顺序执行,并且可以作为参数传递给如下的方法使用:resolve,resolveWith。 |
deferred.fail | 失败状态的执行函数 | 当Deferred(延迟)对象被拒绝时,调用添加的处理程序 |
deferred.progress | 进行中状态的执行函数 | 当Deferred(延迟)对象生成进度通知时,调用添加处理程序 |
deferred.notifyWith | 给定上下文和参数,调用正在延迟对象上进行的回调函数( progressCallbacks ) | |
deferred.promise | Promise 对象 | 返回 Deferred(延迟)的 Promise 对象 提示:
|
deferred.rejectWith | 拒绝 Deferred(延迟)对象,并根据给定的 context 和 args 参数调用任何 failCallbacks 回调函数 | |
deferred.resolveWith | 解决Deferred(延迟)对象,并根据给定的context 和 args 参数调用任何 doneCallbacks 回调函数 | |
deferred.state | 当前状态 | 确定一个Deferred(延迟)对象的当前状态 |
.promise | 返回一个 Promise 对象,观察某种类型被绑定到集合的所有行动,是否已被加入到队列中 |
综合例子
$(function () {
// 当Deferred对象被解决时,3个函数被调用
function fn1() {
console.log("函数1...");
}
function fn2() {
console.log("函数2...");
}
function fn3(n) {
console.log("函数3...");
}
function asyncEvent() {
var dfd = new jQuery.Deferred();
var dfd = $.Deferred();
// 添加当dfd解决时被调用的处理程序
dfd
// 执行函数的顺序
.done([fn1, fn2], fn3, [fn2, fn1])
// 可进行叠加
.done(function (msg) {
console.log("done:", msg + " -> " + "进一步处理成功");
})
.fail(function (msg) {
console.log("fail:", msg + " -> " + "进一步处理失败");
})
.always(function () {
console.log("always:", "无论成功还是失败都执行...");
})
.progress(function (msg) {
console.log("progress:", msg + " -> " + "进一步处理进度");
});
// 成功的状态
setTimeout(function () {
dfd.resolve("【成功的状态】");
}, Math.floor(400 + Math.random() * 2000));
// 失败的状态
setTimeout(function () {
dfd.reject("【失败的状态】");
}, Math.floor(400 + Math.random() * 2000));
// 进行中的状态
setTimeout(function working() {
// console.log("当前的状态:" + dfd.state());
if (dfd.state() === "pending") {
dfd.notify("【进行中的状态】");
setTimeout(working, 500);
}
}, 100);
// 返回 Promise 对象,调用者不能改变延迟对象
return dfd.promise();
}
$.when(asyncEvent()).then(
function (doneCallback) {
console.log("最终结果:" + doneCallback + "继续执行");
},
function (failCallback) {
console.log("最终结果:" + failCallback + "退出或返回");
}
);
});
jQuery杂项方法
data | 向被选元素附加数据,或者从被选元素获取数据 原理:类似于localstorage设置获取方法 语法:
|
removeData | 移出data方法设置的数据 |
each | 为每个匹配元素执行函数 了解:遍历节点 语法:each(function(index,element)) |
get | 获取由选择器指定的 DOM 元素 了解:获取节点信息 语法:get(index) |
index | 获取节点当前位置(相对于同级) 语法:index(element) 注释:index(element) 可用于更详细的操作 |
$.noConflict | 释放变量 $ 的 jQuery 控制权 了解:给jQuery的$换个名称(例如:$(document) 等同于 who(document)) 语法:$.noConflict(removeAll) |
$.param | param() 方法创建数组或对象的序列化表示形式。 了解:匿名自定义,类似于匿名函数 语法:$.param(object,trad) |
$.toArray | 以数组的形式检索所有包含在 jQuery 集合中的所有 DOM 元素 了解:其它方法可代替 |
$.pushStack | 将一个DOM元素集合加入到jQuery栈 了解:其它方法可代替 |
$.when | 提供一种方法来执行一个或多个对象的回调函数 语法:$.when( deferreds ) deferred(Deferred类型 一个或多个延迟对象, 或者普通的JavaScript对象) 提示:
|
综合例子
// data
$("#bt1").click(function () {
$("#who").data("username", "admin");
});
$("#bt2").click(function () {
alert($("#who").data("username"));
});
// each
$("bt3").click(function () {
$("li").each(function () {
let txt = $(this).text()
console.log(txt);
});
});
// get
$("bt4").click(function () {
let x = $("p").get(0);
let txt =
"标签名:" + x.nodeName + "\n" +
"标签内容:" + x.innerHTML;
console.log(txt);
});
// index
$("#bt5").click(function () {
console.log($(this).index())
});
// $.noConflict
var who = $.noConflict();
who(document).ready(function () {
who("bt6").click(function () {
who("p").hide();
});
});
// $.param
$(document).ready(function () {
// 可用于Ajax的URL查询字符串
let info = new Object();
info.firstname = "英文名";
info.lastname = "英文姓";
info.id = "001";
$("bt7").click(function () {
$("#who").text($.param(info));
});
});
// $.when (类似于promise)
// 例子1
$(function () {
$.when({ goal: "who" }).done(
// 一个参数传递给 $.when() 被受理,执行回调函数
function (e) { alert(e.goal); }
);
})
// 例子2-promise
$(function () {
$.when().then(function (x) {
alert("...");
});
})
// 例子3-传入多个延迟对象
$(function () {
var d1 = $.Deferred();
var d2 = $.Deferred();
$.when(d1, d2).done(function (v1, v2) {
alert(v1);
alert(v2);
});
d1.resolve("number one");
d2.resolve("number two");
})
jQuery实用工具
$.contains | 是否是指定DOM元素的后代 | ||||||||||||||||||
$.each | 用于遍历指定的对象和数组 了解:map方法 | ||||||||||||||||||
$.extend | 将一个或多个对象的内容合并到目标对象 提示:默认相同的键合并之后会覆盖替换,需手动开启 语法:
deep(默认为false),true为深度覆盖 | ||||||||||||||||||
$fn.extend | 自定义jQuery实例属性和方法 语法:$.fn.extend( object ) | ||||||||||||||||||
$globalEval | 全局性地执行一段JavaScript代码。 了解:不常用 | ||||||||||||||||||
$.grep | 使用指定的函数过滤数组中的元素,并返回过滤后的数组。 了解:filter方法 语法:grep( array, function [, invert ] ) | ||||||||||||||||||
$.inArray | 在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1) | ||||||||||||||||||
$.isArray | 判断是否为数组 语法:$.isArray( object ) | ||||||||||||||||||
$.isEmptyObject | 判断对象是否为空 语法:$.isEmptyObject( object ) | ||||||||||||||||||
$.isFunction | 判断是否为函数 | ||||||||||||||||||
$.isNumeric | 判断是否为数字值 例子:
| ||||||||||||||||||
$.isPlainObject | 判断对象纯不纯 | ||||||||||||||||||
$.isWindow | 判断是否是为window窗口 例子:$.isWindow(window) | ||||||||||||||||||
$.isXMLDoc | 判断一个DOM节点是否位于XML文档中,或者其本身就是XML文档 | ||||||||||||||||||
$.makeArray | 类似数组的对象转换为真正的数组对象 了解:DOM节点遍历 | ||||||||||||||||||
$.map | 处理数组每个元素,新的数组返回 | ||||||||||||||||||
$.merge | 合并数组 $.merge( mergeArr, goalArr ) | ||||||||||||||||||
$.noop | 空函数 了解:类似于空的语句 | ||||||||||||||||||
$.parseHTML | 将HTML字符串解析为对应的DOM节点数组 语法:$.parseHTML( htmlString [, context ] [, keepScripts ] )
| ||||||||||||||||||
$.parseJSON | 标准格式的JSON字符串转换为js对象 | ||||||||||||||||||
$.parseXML | 将字符串解析为对应的XML文档 | ||||||||||||||||||
$.type | JavaScript内置对象的类型 | ||||||||||||||||||
$.uniqueSort | 对DOM元素数组进行排序,并移除重复的元素 | ||||||||||||||||||
$.data | 在指定的元素上存取数据,返回设置值 了解:这是一个底层方法,.data() 方法更简单 语法:$.data( element, key, value ) | ||||||||||||||||||
$.hasData() | 确定一个元素是否有相关的jQuery数据 语法:$.hasData( element ) | ||||||||||||||||||
$.sub | 创建一个新的jQuery副本,其属性和方法可以修改,而不会影响原来的jQuery对象 了解:类似于自定义方法,不常用 | ||||||||||||||||||
$.speed | 创建一个包含一组属性的对象用来定义自定义动画 语法:$.speed( [duration ] [, easing ] [, complete ] ) | ||||||||||||||||||
$.htmlPrefilter | 通过jQuery操作方法修改和过滤HTML字符串 了解:从传入HTML字符串中删除所有标签 | ||||||||||||||||||
$.readyException | 处理包裹在jQuery()中函数同步抛出的错误 | ||||||||||||||||||
综合例子
// contains
$.contains(document.documentElement, document.body); // >>> true
// each
$.each([10, 20, 30], function (index, value) {
console.log(index + ': ' + value);
});
// extend
var o1 = {
x: 10,
y: { a: 1, b: 2 },
};
var o2 = {
y: { b: "temp" },
z: 300
};
$.extend(o1, o2); console.log(o1);
// 默认覆盖 >>> {"x":10,"y":{"b":"temp"},"z":300};
// $.extend(true, o1, o2); console.log(o1);
// 深度覆盖 >>> {"x":10,"y":{"a":1,"b":"temp"},"z":300}
// fn.extend
$.fn.extend({
myFunc: function () {
return true;
}
});
$("#who").myFunc();
// grep
$(function () {
var arr = [1, 2, 3, 4];
arr = jQuery.grep(arr, function (n) {
return n > 2;
});
console.log(arr);
// >>> 3,4
})
// inArray
$(function () {
var arr = [1, "two", 3, "four"];
jQuery.inArray(3, arr); // >>> 2
jQuery.inArray("nothing", arr); // >>> -1
})
// makeArray
$(function () {
var elems = document.getElementsByTagName("li");
var arr = jQuery.makeArray(elems);
arr.reverse();
})
// data
$(function () {
var div = $("div")[0];
jQuery.data(div, "box", {
w: 10,
h: 20
});
let res = jQuery.data(div, "box").w;
console.log(res);
})
引用地址 :jQuery 杂项方法 | 菜鸟教程 (runoob.com)