锛堝挸锛屾竻娓呭棑瀛愶級鍚勪綅鍒氬叆鍧戠殑鍏勫紵濮愪滑锛屼粖澶╁挶浠鑱婄殑杩欎釜璇濋锛屽彲鑳芥鏄綘鍔犵彮鐔鐨勭姜榄佺ジ棣栵紒涓轰粈涔堝埆浜虹殑jQuery浠ｇ爜鍐欏緱鍍忓痉鑺欎竴鏍蜂笣婊戯紝浣犵殑鍗村儚鑰佺墰鎷夌牬杞︼紵鍒€ワ紝杩欏氨鎶婂帇绠卞簳鐨勭粷娲绘姈鍑烘潵锛?/p>

鈻岀涓€绔?閫夋嫨鍣ㄧ殑姝ｇ‘鎵撳紑鏂瑰紡
鍚鏈変汉鐢ㄩ€夋嫨鍣ㄥ氨鍍忓紑鐩茬洅锛熻瘯璇曡繖鍑犱釜楂橀濮垮娍锛?/p>

1. 鈥?strong>鈥嬬簿纭墦鍑烩€?/strong>鈥嬶細$("ul.nav > li.active") 姣旀极鏃犵洰鐨勭殑$("li")蹇?鍊嶄笉姝?/li>
2. 鈥?strong>鈥嬬紦瀛楧OM鈥?/strong>鈥嬶細鍒偦涔庝箮姣忔閮?code>$("#box")锛屽厛var $box = $("#box")瀛樿捣鏉?/li>
3. 鈥?strong>鈥嬩笂涓嬫枃鎼滅储鈥?/strong>鈥嬶細鍦ㄦ寚瀹氬尯鍩熸壘鍏冪礌瑕佽繖鏍风帺

javascript澶嶅埗
$(".container").find(".item")  // 姣旂洿鎺ュ啓閫夋嫨鍣ㄥ揩寰楀儚鍧愮伀绠?/span>

鈻岀浜岀珷 閾惧紡鎿嶄綔鐨勯粦榄旀硶
锛堟暡榛戞澘锛夎繖鍙槸jQuery鐨勭嫭闂ㄧ粷鎶€锛佺湅杩欐浠ｇ爜锛?/p>

javascript澶嶅埗
$("#dialog")
  .css("opacity", 0)
  .slideDown(500)
  .animate({left: '+=200'}, 300)
  .fadeTo(800, 1);

娉ㄦ剰杩欎釜鍧戰煏筹細閾惧紡鎿嶄綔瓒呰繃5姝ュ氨璇ヨ€冭檻鎷嗗垎浜嗭紝鍚﹀垯璋冭瘯鏃跺噯鍝埞鍠婂

鈻岀涓夌珷 浜嬩欢澶勭悊鐨勬纭Э鍔?br/> 鏈€杩戝府寰掑紵鎺掓煡bug锛屽彂鐜板崄涓湁涔濅釜鏍藉湪杩欎簨涓婏紒璁颁綇涓ょ偣锛?/p>

1. 鈥?strong>鈥嬪鎵樻満鍒垛€?/strong>鈥嬪繀椤绘噦锛?/li>

javascript澶嶅埗
// 缁欏姩鎬佹坊鍔犵殑鎸夐挳缁戝畾鐐瑰嚮浜嬩欢
$("#container").on("click", ".dynamic-btn", function(){
  console.log("杩欐墠鍙笓涓氾紒");
});

1. 鈥?strong>鈥嬪懡鍚嶇┖闂粹€?/strong>鈥嬪喎鐭ヨ瘑锛?/li>

javascript澶嶅埗
$("#btn").on("click.myPlugin", handler);  // 瑙ｇ粦鏃剁敤off("click.myPlugin")

鈻岀鍥涚珷 AJAX鐨勫疄鎴樺璺?br/> 锛堝帇浣庡０闊筹級璇翠釜鐪熷疄妗堜緥锛氫笂鍛ㄩ殧澹佺粍鐢ㄩ敊鍥炶皟椤哄簭锛岀洿鎺ユ妸璐墿杞︽竻绌轰簡...
姝ｇ‘濮垮娍闀胯繖鏍凤細

javascript澶嶅埗
$.ajax({
  url: "/api/data",
  type: "POST",
  dataType: "json",
  timeout: 5000
})
.done(function(res){
  // 鎴愬姛鍥炶皟
})
.fail(function(xhr){
  // 澶辫触澶勭悊
})
.always(function(){
  // 涓嶇鎴愯触閮借鎵ц
});

閲嶇偣鏉ヤ簡馃搶锛氭柊鐗坖Query寤鸿鐢≒romise璇硶锛屽埆鍐嶅祵濂楀洖璋冧簡锛?/p>

鈻岀浜旂珷 鎬ц兘浼樺寲涓夋澘鏂?br/> 瀹炴祴瀵规瘮鏁版嵁锛堟祴璇曠幆澧僀hrome 118锛夛細

涓変釜绔嬬瑙佸奖鐨勪紭鍖栨妧宸э細

1. 鈥?strong>鈥嬫枃妗ｇ鐗団€?/strong>鈥嬶細鐢?code>$.merge鍚堝苟DOM鎿嶄綔
2. 鈥?strong>鈥嬫牱寮忔壒閲忎慨鏀光€?/strong>鈥嬶細鍒竴涓竴涓敼CSS灞炴€?/li>
3. 鈥?strong>鈥嬪姩鐢婚槦鍒椻€?/strong>鈥嬶細鍠勭敤stop(true)娓呴櫎鏃у姩鐢?/li>

鈻岀鍏珷 鎻掍欢寮€鍙戠殑鍐涜
锛堟媿澶ц吙锛夎杩囧お澶氶噹璺瓙鎻掍欢浜嗭紒姝ｇ粡鍐欐硶瑕佽繖鏍凤細

javascript澶嶅埗
(function($){
  $.fn.myPlugin = function(options){
    const settings = $.extend({
      color: "#333",
      speed: 400
    }, options);
    
    return this.each(function(){
      // 鎻掍欢閫昏緫鍐欒繖閲?/span>
    });
  };
})(jQuery);

閲嶇偣娉ㄦ剰鈿狅笍锛氫竴瀹氳淇濇寔閾惧紡璋冪敤鑳藉姏锛屽埆鏂簡鍒汉鐨勫悗缁搷浣?/p>

鈻岀涓冪珷 閭ｄ簺骞磋俯杩囩殑鍧?br/> 鍘诲勾閲嶆瀯鑰侀」鐩椂閬囧埌鐨勭湡瀹炴渚嬶細

javascript澶嶅埗
// 閿欒绀鸿寖
$(".item").click(function(){
  $(this).remove();
  // 杩欓噷璁块棶鐨刲ength宸茬粡鏄垹闄ゅ悗鐨勫€硷紒
  console.log($(".item").length); 
});

// 姝ｇ‘濮垮娍
var $items = $(".item");
$items.click(function(){
  var index = $items.index(this);
  $(this).remove();
  $items = $(".item"); // 閲嶆柊鑾峰彇闆嗗悎
});

锛堢獊鐒舵缁忥級璇寸偣鎺忓績绐濈殑璇濓細鐜板湪铏界劧娴佽Vue/React锛屼絾鎺ユ墜鑰侀」鐩椂锛宩Query灏卞儚寮€淇濋櫓绠辩殑瀵嗙爜鏈€傛渶杩戠粺璁″叕鍙稿瓨閲忕郴缁燂紝68%鐨勪腑鍚庡彴杩樺湪鐢╦Query锛堟暟鎹潵鑷?023鍐呴儴瀹¤锛夈€?/p>

鏈変釜鍐风煡璇嗗彲鑳戒綘涓嶇煡閬擄細jQuery 3.6+宸茬粡鏀寔for...of寰幆浜嗭紝杩欐牱閬嶅巻鍏冪礌鏇寸幇浠ｏ細

javascript澶嶅埗
for(const element of $(".items")){
  console.log(element); // 鐩存帴鎷垮埌鍘熺敓DOM鍏冪礌
}

锛堟尃澶达級鏈€鍚庢彁閱掓柊鎵嬫湅鍙嬶細鍒互涓轰細鍐?code>$("#id")灏辩畻浼歫Query浜嗭紝杩欓噷闈㈢殑闂ㄩ亾娣辩潃鍛紒涓嬫闈㈣瘯瑕佹槸琚棶"濡備綍鐢╦Query瀹炵幇缁勪欢鍖?锛岃寰楁妸鎻掍欢寮€鍙戦偅绔犵炕鍑烘潵娓╀範娓╀範銆?/p>