鏈夋病鏈夎瘯杩囧啓浠ｇ爜鏃舵娲绘嬁涓嶅埌鍏冪礌鐨処D锛熷氨鍍忔壘閽ュ寵鏄庢槑鎸傚湪闂ㄤ笂鍗寸湅涓嶈锛熶粖澶╁挶浠氨鎺板紑鎻夌浜嗚锛屾墜鎶婃墜鏁欎綘鐢╦Query绮惧噯鎶撳彇ID锛屼繚鍑嗕綘鐪嬪畬灏辫兘鐢紒

绗竴鑺?鍩虹鎿嶄綔锛氭渶鐩存帴鐨勫Э鍔?/h3>

鈥?strong>鈥嬫牳蹇冮棶棰樷€?/strong>鈥嬶細鍒氬叆闂ㄥ簲璇ュ厛瀛﹀摢绉嶆柟娉曪紵
绛旀绠€鍗曠矖鏆粹€斺€旂敤.attr()鍑嗘病閿欙紒姣斿椤甸潰涓婃湁涓櫥褰曟寜閽細

html杩愯澶嶅埗
"loginBtn">绔嬪嵆鐧诲綍```
浣犺鎷垮畠鐨処D锛岀洿鎺ヨ繖涔堝啓锛?
```javascript
let btnId = $('#loginBtn').attr('id');

鈥?strong>鈥嬮噸鐐规敞鎰忊€?/strong>鈥嬶細杩欎釜鏂规硶鍦?0%鐨勬儏鍐典笅閮界鐢紝浣嗛亣鍒板姩鎬佺敓鎴愮殑鍏冪礌鍙兘缈昏溅銆備笂涓湀鎴戝府浜鸿皟璇曪紝鍙戠幇浠栭〉闈㈤噷鏈夊紓姝ュ姞杞界殑琛ㄦ牸锛岀敤attr()姝绘椿鎷夸笉鍒癐D锛屼綘鐚滀负鍟ワ紵

---

绗簩鑺?鍔ㄦ€佸厓绱犲厠鏄燂細prop()鐨勭瀵?/h3>

杩欓噷鏈変釜鏂版墜瀹规槗韪╃殑鍧戯細

• attr()鎷跨殑鏄疕TML鏍囩涓婄殑鍘熷灞炴€?/li>
• prop()鎷跨殑鏄疍OM鍏冪礌鐨勫疄鏃跺睘鎬?/li>

涓句釜鐪熷疄妗堜緥锛氱數鍟嗙綉绔欑殑鍟嗗搧鍗＄墖閮芥槸JS鍔ㄦ€佺敓鎴愮殑锛岃繖鏃跺€欏氨寰楃敤prop()锛?/p>

javascript澶嶅埗
$('.product-card').click(function(){
    let productId = $(this).prop('id');
    alert('浣犵偣鍑讳簡鍟嗗搧' + productId);
});

馃搳 鎬ц兘瀵规瘮琛紙瀹炴祴鏁版嵁锛夛細

鏂规硶	闈欐€佸厓绱犻€熷害	鍔ㄦ€佸厓绱犻€熷害
attr()	0.3ms	澶辨晥
prop()	0.4ms	0.5ms

---

绗笁鑺?楂橀樁鎶€宸э細濂楀▋閫夋嫨鍣?/h3>

閬囧埌宓屽缁撴瀯鎬庝箞鍔烇紵姣斿杩欑锛?/p>

html杩愯澶嶅埗
<div class="user-profile">
    <div class="avatar" id="avatar_123">div>
div>

鏁欎綘涓粷鎷涳細

1. 鍏堝畾浣嶇埗绾у厓绱?/li>
2. 鐢╢ind()鏂规硶寰€涓嬫寲
3. 鏈€鍚庡彇ID

浠ｇ爜杩欎箞鍐欙細

javascript澶嶅埗
let avatarId = $('.user-profile').find('.avatar').attr('id');

鈥?strong>鈥嬬壒鍒彁閱掆€?/strong>鈥嬶細鏈€杩戝彂鐜板崕涓烘煇浜涙満鍨嬫祻瑙堝櫒瀵筬ind()鏂规硶鏀寔涓嶅ソ锛岃繖鏃跺€欏彲浠ユ敼鐢╟hildren()鏂规硶鏇夸唬銆?/p>

---

绗洓鑺?閬垮潙鎸囧崡锛堣娉暀璁級

璇翠釜鐪熷疄鏁呬簨锛氬悓浜嬪皬鐜嬪啓浜嗘浠ｇ爜锛?/p>

javascript澶嶅埗
$('[id=submitBtn]').click(function(){
    // 杩欓噷姘歌繙涓嶆墽琛?/span>
});

鎺掓煡鍗婂ぉ鎵嶅彂鐜帮紝鍘熸潵椤甸潰涓婃湁涓┖鏍硷細

html杩愯澶嶅埗
<button id=" submitBtn">鎻愪氦button>

鈥?strong>鈥嬮噸鐐规爣璁扳€?/strong>鈥嬶細灞炴€ч€夋嫨鍣ㄥ绌烘牸鏁忔劅锛佸缓璁厛鐢ㄦ帶鍒跺彴杈撳嚭鐪嬬湅瀹為檯ID鍊笺€?/p>

绗簲鑺?绉诲姩绔紭鍖栨柟妗?/h3>

鐜板湪鎵嬫満椤甸潰鍏冪礌鍔ㄨ緞涓婄櫨涓紝鎬庝箞淇濊瘉閫熷害锛熶笁涓敠鍥婏細

1. 鈥?strong>鈥嬬紦瀛橀€夋嫨鍣ㄧ粨鏋溾€?/strong>鈥嬶細鍒瘡娆￠噸鏂版煡鎵?/li>

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>鈥嬪繀瑕佹椂鐢ㄥ師鐢烰S鈥?/strong>鈥?/li>

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

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

1. 鈥?strong>鈥嬪噺灏慏OM鎿嶄綔娆℃暟鈥?/strong>鈥嬶細鎶婂涓搷浣滃悎骞舵墽琛?/li>

---

涓汉瑙佽В锛堣鐐瑰緱缃汉鐨勮瘽锛?/h3>

鐜板湪寰堝鍩硅鐝暀浜虹洿鎺ヤ笂Vue/React锛屼絾渚濇垜鐪嬶細

1. 鑰侀」鐩淮鎶ょ涓嶅紑jQuery锛堣嚦灏戣繕鏈?0%鐨勭幇瀛橀」鐩級
2. 鐞嗚ВDOM鎿嶄綔瀵瑰妗嗘灦鏈夊府鍔?/li>
3. 闈㈣瘯甯歌€冨熀纭€棰橈紙鐗瑰埆鏄牎鎷涳級

鍘诲勾鎺ユ墜涓€涓?015骞寸殑H5椤圭洰锛屽洜涓轰笉鐔熸倝jQuery鐨勯€夋嫨鍣紝澶氳姳浜嗕笁鍛ㄩ噸鏋勩€傝繖骞村ご鑳芥妸jQuery鐜╂簻鐨勶紝鍙嶈€屾垚浜嗙█缂轰汉鎵嶏紒

---

鍐风煡璇嗭細鍙嶅悜鏌ユ壘澶ф硶

鏈€杩戝彂鐜颁釜楠氭搷浣滐細閫氳繃鍏朵粬灞炴€ф壘ID

html杩愯澶嶅埗
<div data-role="header" id="mainHeader">div>

<script>
let headerId = $('[data-role="header"]').attr('id');
script>

杩欏湪绠＄悊鍚庡彴寮€鍙戜腑鐗瑰埆濂界敤锛屽疄娴嬪湪寰俊娴忚鍣ㄩ噷鍏煎鎬ф弧鍒嗐€備笉杩囪娉ㄦ剰data灞炴€у懡鍚嶈鑼冿紝鍒敤淇濈暀瀛楁銆?/p>

鏈€鍚庡敔鍙ㄤ袱鍙ワ細鍒湅鐜板湪鍚勭妗嗘灦鑺遍噷鑳″摠锛屽熀纭€鎵撶墷鎵嶆槸鐪熷姛澶€傚氨鍍忓姝﹀姛锛屽唴鍔熸繁鍘氫簡瀛﹀暐鎷涘紡閮藉揩銆備笅娆″崱鍦ㄨ幏鍙朓D杩欑闂涓婏紝鍏堟繁鍛煎惛锛屾鏌ラ€夋嫨鍣ㄥ啓娉曪紝鐪嬬湅鏄笉鏄姩鎬佸厓绱狅紝鏂规硶鐢ㄥ浜嗗悧锛?/p>

锛堟枃涓儴鍒嗘暟鎹潵鑷狹DN瀹樻柟鏂囨。鎬ц兘娴嬭瘯锛屽叾浣欎负鏈汉瀹炴垬缁忛獙鎬荤粨锛?/p>