jQuery__精简__速成

jQuery网站

• 引用地址 ：https://jquery.com/download/
• 2013版 ：https://code.jquery.com/jquery-3.7.1.min.js  

---

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)  speed "slow" "fast"  mode "linear" "swing"
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	click（ function（）{ } ） bind
js	onclick = function（）{ } addEventListener

部分参考（其余等同于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 ) 提示： 1. 通常，只有延迟对象（Deferred）的创建者才能调用此方法。 2. 你可以通过调用 deferred.promise() 返回一个受限的 Promise 对象，来阻止其它代码改变延迟对象的状态或报告它的状态。 3. 当 deferred.notify 被访问时， 任何 progressCallbacks 可以通过访问 deferred.then 或者 deferred.progress 来添加。回调依照他们添加时的顺序执行。
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 对象 提示： 1. 方法允许一个异步函数阻止那些干涉其内部请求的进度（progress）或状态（status）的其它代码。 2. 只包含 deferred 对象的一组方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(), 这些方法只能观察一个 deferred 的状态，而无法更改 deferred 对象的内在状态。
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设置获取方法 语法： 设置  data(name,value) 获取  data(name)
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对象） 提示： 如果向 jQuery.when 传入一个延迟对象，那么会返回它的 Promise 对象 假设不传递任何参数，jQuery.when()将返回一个resolved（受理）状态的 promise 对象。

综合例子

// 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	将一个或多个对象的内容合并到目标对象 提示：默认相同的键合并之后会覆盖替换,需手动开启 语法： $.extend( target [, 合并的主体 ] [, 合并的对象 ] ) $.extend( [deep ], target, object1 [, objectN ]        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	判断是否为数字值 例子： 返回true 返回false "-10" "-0x42"  "0" "7.2acdgs"   0xFF "" "0xFF" true "8e5" NaN "3.1415"  null +10 Infinity 0144  undefined
$.isPlainObject	判断对象纯不纯
$.isWindow	判断是否是为window窗口 例子：$.isWindow(window)
$.isXMLDoc	判断一个DOM节点是否位于XML文档中，或者其本身就是XML文档
$.makeArray	类似数组的对象转换为真正的数组对象 了解:DOM节点遍历
$.map	处理数组每个元素,新的数组返回
$.merge	合并数组 $.merge( mergeArr, goalArr )
$.noop	空函数 了解:类似于空的语句
$.parseHTML	将HTML字符串解析为对应的DOM节点数组 语法：$.parseHTML( htmlString [, context ] [, keepScripts ] ) htmlString String类型 需要解析并转为DOM节点数组的HTML字符串 context Element类型 指定在哪个Document中创建元素，默认为当前文档的document keepScripts Boolean类型 指定传入的HTML字符串中是否包含脚本，默认为false
$.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)

---