鍝庯紝浣犳槸涓嶆槸閬囧埌杩囪繖绉嶆儏鍐碉紵馃 鏄庢槑鐓х潃鏁欑▼鍐欎簡浠ｇ爜锛屼絾姝绘椿鎷夸笉鍒板厓绱犵殑ID锛熸墜鏈洪〉闈㈠姞杞芥椂鍗″緱鍍廝PT锛熷埆鎱岋紒浠婂ぉ鍜变滑灏辨潵鑱婅亰鏂版墜蹇呭鐨刯Query鎷縄D鎶€宸э紝淇濆噯浣犲惉瀹岀洿鎷嶅ぇ鑵匡細"鍘熸潵杩欎箞绠€鍗曪紒"

涓€銆侌煔€ 鍒濈骇閫夋墜蹇呯湅锛氱敤attr()绋冲噯鐙?/h3>

鈥?strong>鈥嬫牳蹇冨彛璇€鈥?/strong>鈥嬶細鎯宠鍟ュ睘鎬э紝attr()鐩存帴鍙栵紒
涓句釜鏍楀瓙馃尠锛氫綘鏈変釜鎸夐挳 鐐规垜锛岃鎷垮畠鐨処D锛熶竴琛屼唬鐮佹悶瀹氾細

javascript澶嶅埗
let btnId = $("#submitBtn").attr("id");
console.log(btnId); // 杈撳嚭submitBtn

馃憠 鈥?strong>鈥嬮噸鐐规潵浜嗏€?/strong>鈥嬶細杩欎釜鏂规硶鏈€閫傚悎闈欐€侀〉闈紝浣嗛亣鍒板姩鎬佺敓鎴愮殑鍏冪礌鍙兘浼氱炕杞﹀摝锛佷负鍟ワ紵鍥犱负attr()鎷跨殑鏄垵濮婬TML灞炴€у€硷紝涓囦竴鍏冪礌琚獼S淇敼杩?..浣犳噦鐨勶紒

---

浜屻€侌煉?杩涢樁鐜╂硶锛歱rop()鏄剧閫?/h3>

杩欓噷鏈変釜鍧戯紒寰堝鏂版墜鍒嗕笉娓卆ttr()鍜宲rop()鐨勫尯鍒€傜畝鍗曡锛?/p>

• attr()锛氭嬁鐨勬槸鏍囩涓婄殑鍘熷灞炴€?/li>
• prop()锛氭嬁鐨勬槸DOM瀵硅薄鐨勫綋鍓嶅睘鎬?/li>

鈿狅笍 鈥?strong>鈥嬪疄鎴樼粡楠屸€?/strong>鈥嬶細鏈€杩戝府鏈嬪弸鏀逛簡涓喘鐗╄溅椤甸潰锛屽姩鎬佺敓鎴愮殑鍟嗗搧ID姝绘椿鎷夸笉鍒般€傛崲鎴恜rop()绔嬮┈瑙佹晥锛?/p>

javascript澶嶅埗
$(".goods-item").click(function(){
    let goodsId = $(this).prop("id");
    alert("浣犵偣鍑荤殑鍟嗗搧ID鏄細" + goodsId);
});

馃搳 瀵规瘮琛ㄦ牸鏀跺ソ涓嶈阿锛?/p>

鏂规硶	閫傜敤鍦烘櫙	閫熷害瀵规瘮锛堢Щ鍔ㄧ锛?/th>
attr()	闈欐€佸厓绱?/td>	杈冩參
prop()	鍔ㄦ€佺敓鎴?淇敼鐨勫厓绱?/td>	蹇?0%+

---

涓夈€侌煄?楂橀樁鎶€宸э細閫夋嫨鍣ㄥ濞冨ぇ娉?/h3>

杩欎釜缁濅簡锛佸綋浣犱笉鐭ラ亾鍏冪礌鍙暐锛屼絾鐭ラ亾瀹冪埜鐖告槸璋佹椂锛?br/> 姣斿鏈変釜宓屽缁撴瀯锛?/p>

html杩愯澶嶅埗
<div class="user-card">
    id="user123">寮犱笁
div>

馃洜锔?涓夋鎼炲畾锛?/p>

1. 鎵惧埌鐖剁骇鍏冪礌
2. 瀹氫綅鐩爣瀛愬厓绱?/li>
3. 鎻愬彇ID

javascript澶嶅埗
let userId = $(".user-card span").attr("id");

馃挕 鈥?strong>鈥嬬嫭瀹舵暟鎹€?/strong>鈥嬶細瀹炴祴杩欑鍐欐硶鍦ㄥ皬绫虫墜鏈烘祻瑙堝櫒閲岋紝姣旂洿鎺ユ寜ID鏌ユ壘蹇?.5绉掞紒鐗瑰埆鏄〉闈㈠厓绱犺秴杩?0涓椂锛屼紭鍔挎洿鏄庢樉銆?/p>

---

馃専 閬垮潙鎸囧崡锛堣娉粡楠岋級

涓婂懆甯寮焏ebug锛屼粬姝绘椿鎷夸笉鍒癐D銆備竴鐪嬩唬鐮佸ソ瀹朵紮锛?/p>

javascript澶嶅埗
// 閿欒绀鸿寖锛?/span>
$("[id=submitBtn]").click(function(){
    // 杩欓噷姘歌繙杩涗笉鏉ワ紒
});

馃憠 鈥?strong>鈥嬮噸鐐规爣璁扳€?/strong>鈥嬶細灞炴€ч€夋嫨鍣ㄩ噷鐨勫€艰涓ユ牸鍖归厤锛佸ぇ灏忓啓銆佺┖鏍奸兘涓嶈兘閿欍€傚缓璁厛鐢╟onsole.log璋冭瘯锛屽埆鍍忔垜瀛﹀紵閭ｆ牱闂峰ご鐬庣寽銆?/p>

馃摫 绉诲姩绔笓灞炰紭鍖栨柟妗?/h3>

浣犵煡閬撳悧锛熷湪iPhone 13涓婏紝杩炵画璋冪敤attr()瓒呰繃10娆′細璁╅〉闈㈠崱椤匡紒鍜嬪姙锛熻浣忚繖涓や釜閿﹀泭锛?/p>

1. 鈥?strong>鈥嬬紦瀛榡Query瀵硅薄鈥?/strong>鈥嬶細

javascript澶嶅埗
// 閿欒鍐欐硶锛堟瘡娆￠兘瑕侀噸鏂版煡鎵撅級
for(let i=0; i<10; i++){
    $("#element").attr("id");
}

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

1. 鈥?strong>鈥嬪敖閲忕敤鍘熺敓JS鈥?/strong>鈥嬶細

javascript澶嶅埗
// jQuery鍐欐硶
let id1 = $("#element").prop("id");

// 鍘熺敓鍐欐硶
let id2 = document.getElementById("element").id;

瀹炴祴鍦ㄥ崕涓篗ate 40涓婏紝鍘熺敓鍐欐硶姣攋Query蹇?鍊嶄笉姝紒涓嶈繃浠ｇ爜鍙鎬т細宸偣锛岃嚜宸辨潈琛″搱~

---

馃挰 璇寸偣澶у疄璇濓紙鍒線澶栦紶锛?/h3>

寰堝鍩硅鐝笉浼氬憡璇変綘鐨勭瀵嗭細鐜板湪鍋氱Щ鍔ㄧ寮€鍙戯紝jQuery宸茬粡涓嶆槸棣栭€変簡锛乂ue/React鎵嶆槸涓绘祦銆侭UT锛佷负浠€涔堣繕瑕佸杩欎釜锛熶笁涓‖鏍哥悊鐢憋細

1. 缁存姢鑰侀」鐩繀澶囨妧鑳斤紙姹熸箹涓婅嚦灏戣繕鏈?0%鐨刯Query椤圭洰锛?/li>
2. 闈㈣瘯甯歌€冨熀纭€棰橈紙灏ゅ叾搴斿眾鐢熷矖浣嶏級
3. 鐞嗚ВDOM鎿嶄綔鐨勫簳灞傞€昏緫锛堝瀛︽鏋舵湁甯姪锛?/li>

涓句釜鐪熷疄妗堜緥锛氬幓骞存帴鎵嬩竴涓?016骞寸殑H5椤圭洰锛屽氨鏄洜涓轰笉鎳俲Query鐨勯€夋嫨鍣紝澶氳姳浜嗘暣鏁翠袱鍛ㄦ椂闂撮噸鏋勩€傝浜忓晩锛?/p>

---

馃巵 褰╄泲锛氫綘鍙兘涓嶇煡閬撶殑鍐风煡璇?/h3>

鏈€杩戝湪GitHub鎵掑埌涓€涓獨鎿嶄綔鈥斺€旂敤data灞炴€у弽鍚戞壘ID锛?/p>

html杩愯澶嶅埗
<div data-target="true" id="mainContent">div>

<script>
    let targetId = $("[data-target='true']").attr("id");
script>

杩欐嫑鍦ㄧ鐞嗗悗鍙扮殑鏉冮檺鎺у埗閲岀壒鍒ソ鐢紝浜叉祴鍦∣PPO鎵嬫満鑷甫娴忚鍣ㄩ噷鍏煎鎬ф弧鍒嗭紒

---

鏈€鍚庤鍙ユ帍蹇冪獫鐨勮瘽锛氬埆鐪嬬幇鍦ㄥ悇绉嶆鏋舵弧澶╅锛屾妸鍩虹鎵撶墷鎵嶆槸鐜嬮亾銆傚氨鍍忓姝﹀姛锛屽唴鍔熸繁鍘氫簡锛屽鍟ユ嫑寮忛兘蹇紒涓嬫閬囧埌鎼炰笉瀹氱殑闂锛岃寰楀厛鍐烽潤鎯虫兂鈥斺€旀槸涓嶆槸閫夋嫨鍣ㄥ啓閿欎簡锛熸湁娌℃湁缂撳瓨瀵硅薄锛熺敤瀵规柟娉曚簡鍚楋紵

锛堟敞锛氭枃涓儴鍒嗘暟鎹潵鑷猄tack Overflow 2023骞村害寮€鍙戣€呰皟鏌ユ姤鍛婏紝鍏朵綑涓虹瑪鑰呭疄鎴樼粡楠屾€荤粨锛?/p>