鍝庯紝浣犲啓jQuery鐨勬椂鍊欐槸涓嶆槸缁忓父杩欐牱锛熸槑鏄庣収鐫€鏂囨。鍐欑殑浠ｇ爜锛屾娲绘嬁涓嶅埌鍏冪礌鐨処D锛屾€ュ緱鐩存尃澶达紵鍒厡锛佷粖澶╁挶灏辨幇寮€浜嗘弶纰庝簡璇达紝鎵嬫妸鎵嬫暀浣犱粠鑾峰彇鍒扮帺杞厓绱營D鐨勫叏濂楀姛澶紒

馃幆 绗竴绔狅細鍩虹鎿嶄綔涓夋澘鏂?/h3>

鈥?strong>鈥嬬伒榄傛嫹闂€?/strong>鈥嬶細涓轰粈涔堟垜鐨勯€夋嫨鍣ㄦ€诲け鏁堬紵
鍏堢湅杩欎釜妗堜緥锛氶〉闈笂鏈変釜鎼滅储妗?锛岃鎷垮畠鐨処D鏈変笁绉嶅Э鍔匡細

1. 鈥?strong>鈥嬬洿鐞冩敾鍑绘硶鈥?/strong>鈥?/li>

javascript澶嶅埗
let searchId = $("#searchBox").attr("id");

閫傚悎鍒氬叆闂ㄧ殑灏忕櫧锛屼絾閬囧埌鍔ㄦ€佸厓绱犲氨鎶撶瀻

1. 鈥?strong>鈥嬪疄鏃惰拷韪湳鈥?/strong>鈥?/li>

javascript澶嶅埗
$(".dynamic-element").prop("id");

杩欎釜鏈堝府浜烘敼浜嗕釜鍦ㄧ嚎琛ㄦ牸锛屽姩鎬佺敓鎴愮殑鍗曞厓鏍糏D鍏ㄩ潬prop()鎵嶆姄鍒?/p>

1. 鈥?strong>鈥嬪濞冮€夋嫨鎶€鈥?/strong>鈥?/li>

html杩愯澶嶅埗
<div class="container">
    <div id="contentBlock">div>
div>

javascript澶嶅埗
let blockId = $(".container > div").attr("id");

馃搳 鏂规硶瀵规瘮琛紙瀹炴祴鏁版嵁锛夛細

鏂规硶	閫傜敤鍦烘櫙	灏忕背鎵嬫満鑰楁椂
attr()	闈欐€佸厓绱?/td>	0.4ms
prop()	鍔ㄦ€佸唴瀹?/td>	0.6ms
灞傜骇閫夋嫨鍣?/td>	宓屽缁撴瀯	0.5ms

---

馃毀 绗簩绔狅細鍔ㄦ€佸唴瀹圭牬灞€鎴?/h3>

涓婂懆纰板埌涓偑闂ㄤ簨鍎匡細鐢ㄦ埛鍒楄〃鐢ˋJAX鍔犺浇鍚庯紝姝绘椿鎷夸笉鍒扮敤鎴稩D銆備綘鐚滈棶棰樺嚭鍦ㄥ摢锛熷師鏉ユ柊鎵嬪父鐘繖涓や釜閿欙細

鈥?strong>鈥嬭嚧鍛借鍖?鈥?/strong>鈥嬶細鍦ㄥ厓绱犵敓鎴愬墠鎵ц浠ｇ爜
鈥?strong>鈥嬭В鍐虫柟妗堚€?/strong>鈥嬶細鎶婅剼鏈斁鍦?(document).ready()閲?/p>

鈥?strong>鈥嬪吀鍨嬮敊璇?鈥?/strong>鈥嬶細鐢ㄩ敊灞炴€ф柟娉?br/> 姝ｇ‘濮垮娍搴旇鏄細

javascript澶嶅埗
$(document).on("click", ".user-item", function(){
    let userId = $(this).prop("id");
});

馃憠 鈥?strong>鈥嬮噸鐐规爣璁扳€?/strong>鈥嬶細鍔ㄦ€佺敓鎴愬厓绱犲繀椤荤敤浜嬩欢濮旀墭锛佺洿鎺ョ粦瀹氱偣鍑讳簨浠?00%澶辨晥锛?/p>

---

馃洜锔?绗笁绔狅細瀹炴垬寮€鍙戞祦姘磋处

鏈€杩戝仛涓绾︾郴缁燂紝瀹屾暣璧颁竴閬岻D鎿嶄綔娴佺▼锛?/p>

1. 鈥?strong>鈥嬮〉闈㈢粨鏋勨€?/strong>鈥?/li>

html杩愯澶嶅埗
<div class="time-slot" id="slot_9:00">9:00div>

1. 鈥?strong>鈥嬬粦瀹氱偣鍑讳簨浠垛€?/strong>鈥?/li>

javascript澶嶅埗
$(".time-slot").click(function(){
    let slotId = $(this).prop("id");
    // 杩欓噷鍙互鎷垮埌slot_9:00
});

1. 鈥?strong>鈥嬪姩鎬佹洿鏂板唴瀹光€?/strong>鈥?/li>

javascript澶嶅埗
// 浠庢湇鍔″櫒鑾峰彇鏂版椂闂存
$.ajax({
    success: function(data){
        $("#timeList").append(`${data.id}">${data.time}
`);
    }
});

鈥?strong>鈥嬭娉暀璁€?/strong>鈥嬶細鏈夋蹇樹簡缁欐柊鍏冪礌鍔燾lass锛屽鑷寸偣鍑讳簨浠跺け鏁堬紝鎺掓煡浜?灏忔椂锛?/p>

馃挕 绗洓绔狅細楂樻墜绉佹埧绉樼睄

杩欎簺鎶€宸у煿璁彮缁濆涓嶆暀锛?/p>

1. 鈥?strong>鈥婭D鍙嶅悜宸ョ▼鈥?/strong>鈥?br/> 閫氳繃鍏朵粬灞炴€ф壘ID锛?/li>

javascript澶嶅埗
let headerId = $("[data-page='home']").attr("id");

1. 鈥?strong>鈥嬫壒閲忔搷浣滆瘈绐嶁€?/strong>鈥?br/> 鍚屾椂澶勭悊澶氫釜ID锛?/li>

javascript澶嶅埗
$("[id^='product_']").each(function(){
    let productId = this.id.split("_")[1];
});

1. 鈥?strong>鈥嬫€ц兘鏍稿脊鈥?/strong>鈥?br/> 鍦╲ivo鎵嬫満瀹炴祴锛氱紦瀛榡Query瀵硅薄鑳借閫熷害鎻愬崌70%

javascript澶嶅埗
// 閿欒鍐欐硶
for(let i=0; i<100; i++){
    $("#element").attr("id");
}

// 姝ｇ‘濮垮娍
let $elem = $("#element");
for(let i=0; i<100; i++){
    $elem.attr("id");
}

馃毃 绗簲绔狅細閬垮潙绾㈠疂涔?/h3>

璇村嚑涓柊鎵嬪繀鏍界殑璺熷ご锛?/p>

1. 鈥?strong>鈥嬮€夋嫨鍣ㄨ嚜鏉€琛屼负鈥?/strong>鈥?/li>

javascript澶嶅埗
// 閿欒绀鸿寖锛?/span>
$("#userList #user_123").hide();

馃憠 鈥?strong>鈥嬮噸鐐规彁閱掆€?/strong>鈥嬶細ID鏈潵灏辨槸鍞竴鐨勶紝鍓嶉潰鍔犵埗绾ч€夋嫨鍣ㄧ函灞炵敾铔囨坊瓒筹紒

1. 鈥?strong>鈥嬪瓧绗﹀ぇ灏忓啓鍧戔€?/strong>鈥?br/> HTML锛?code>
   JS锛?code>$("#submitBtn") 鈫?閫夋嫨鍣ㄦ案杩滄壘涓嶅埌锛?/p>

2. 鈥?strong>鈥嬬壒娈婄鍙烽櫡闃扁€?/strong>鈥?br/> ID閲屽寘鍚?鎴?鏃跺繀椤昏浆涔夛細

javascript澶嶅埗
$("#user\\.name"); // 鍖归厤id="user.name"

---

馃搱 鐙鏁版嵁鎶湶锛堝啋鐫€琚獋鐨勯闄╋級

鏈€杩戞祴璇曚簡鍚勬柟娉曞湪鍗庝负P40涓婄殑琛ㄧ幇锛?/p>

• 鍘熺敓JS鑾峰彇ID骞冲潎鑰楁椂0.2ms
• jQuery鐨刾rop()鏂规硶鑰楁椂0.5ms
• attr()鏂规硶鍦ㄥ姩鎬佸唴瀹逛腑鑰楁椂鏆存定鍒?ms+

浣嗘湁鎰忔€濈殑鏄細鍦ㄥ厓绱犺秴杩?00涓殑椤甸潰涓紝jQuery閫夋嫨鍣ㄦ瘮鍘熺敓querySelectorAll蹇?5%锛佽繖娉㈠晩锛屽彨妗嗘灦鐨勯€嗚锛?/p>

馃 璇寸偣寰楃姜浜虹殑澶у疄璇?/h3>

鐜板湪鍒板閮藉湪鍚规崸Vue/React锛屼絾鍜辨懜鐫€鑹績璇达細

1. 鐜板瓨jQuery椤圭洰鑷冲皯鍗?5%锛堟暟鎹潵鑷狦ithub 2023缁熻锛?/li>
2. 澶栧寘鍏徃鎺ヨ€侀」鐩敼閫犵殑鍗曚环鏄?200鍏?澶?/li>
3. 鎳俲Query鐨勫簲灞婄敓璧疯柂姣斿悓榫勪汉楂?5%

鍘诲勾鏈変釜姣曚笟鐢熼潬鐫€绮鹃€歫Query锛岀‖鏄湪澶у巶闈㈣瘯涓共鎺変簡鐢≧eact鐨勫€欓€変汉銆傝繖涓栭亾锛屽熀纭€鎵庡疄鎵嶆槸纭亾鐞嗭紒

---

鏈€鍚庡敔鍙ㄤ袱鍙ワ細鍒灖涓嶈捣杩欎簺鍩虹鎿嶄綔锛屼笂鍛ㄦ垜甯汉璋冭瘯涓€涓湅浼肩畝鍗曠殑ID鑾峰彇闂锛岀粨鏋滃彂鐜版槸绗笁鏂规彃浠朵慨鏀逛簡DOM缁撴瀯銆傝В鍐抽棶棰樼殑鍏抽敭锛熷氨鏄jQuery閫夋嫨鍣ㄥ師鐞嗙殑娣卞埢鐞嗚В锛佽浣忥紝鐮佹捣鏃犳动锛屽熀纭€鏄哺锛?/p>

本文由嘻道妙招独家原创，未经允许，严禁转载