嘻道奇闻
- 文章199742
- 阅读14625734
jQuery常用方法实例教程：快速掌握核心操作
锛堟媿澶ц吙锛夊搸鍝熷杺锛佸垰鎺ヨЕ鍓嶇鐨勬柊鎵嬫槸涓嶆槸鎬昏JavaScript缁曞緱澶存檿锛熷埆鎱岋紒浠婂ぉ鍜变滑灏辩敤jQuery杩欐妸鐟炲＋鍐涘垁锛屽甫浣犱笁鍒嗛挓鎼炴噦閭ｄ簺璁╅〉闈㈠姩璧锋潵鐨勭瀵嗘鍣紒
馃幆 涓€銆佷负鍟ヨ瀛Query鍟婏紵
锛堟墭鑵級浣犲彲鑳借闂簡锛氱幇鍦ㄩ兘2023骞翠簡锛岃繕鏈夊繀瑕佸杩欎釜鑰佸彜钁ｅ悧锛熷樋锛佸憡璇変綘涓暟鎹€斺€斿叏鐞冧粛鏈?8%鐨勭綉绔欑敤鐫€jQuery鍛紙鏁版嵁鏉ユ簮锛欱uiltWith锛夛紒鐗瑰埆鏄淮鎶よ€侀」鐩殑鏃跺€欙紝涓嶄細jQuery灏卞儚鍚冮潰鏉℃病绛峰瓙锛屾€ユ涓汉锛?/p>
涓句釜鏍楀瓙馃尠锛?/p>
javascript澶嶅埗// 鍘熺敓JS瑕佸啓杩欎箞闀?/span> document.querySelector('#box').style.display = 'none' // jQuery鍙渶瑕佽繖鏍?/span> $('#box').hide()
锛堟憡鎵嬶級浣犵湅锛屾槸涓嶆槸绠€鍗曞緱鎯冲摥锛?/p>
馃敟 浜屻€佹柊鎵嬪繀瀛︾殑5澶ч噾鍒氭柟娉?/p>
鈻?. 鎵句笢瑗跨鍣細閫夋嫨鍣?br/>
锛堟暡榛戞澘锛夎浣忚繖涓叕寮忥細(鈥?/span>閫夋嫨鍣?/span>鈥?/span>)=浣犺鎵剧殑涓滆タ鈥⑩€?/span>鈭?/span>鈭?/span>鈥?/span>鎵?/span>ID鈥?/span>鈭?/span>鈭?/span>鈥?/span>锛?/span>鈥?/span>('#header') 锛堢獊鐒跺叴濂嬶級鏉ワ紒鍜变滑鐜╀釜娓告垙锛?/p>
鈻?. 鍙樿澶у笀锛歝ss()鏂规硶 娉ㄦ剰鍟︷煋細杩欓噷灞炴€у悕鍙互鐢ㄩ┘宄板紡锛坆orderRadius锛夋垨鐑よ倝涓插紡锛坆order-radius锛夛紝浣嗗缓璁粺涓€鐢ㄥ紩鍙峰寘璧锋潵鏇寸ǔ锛?/p>
鈻?. 鍐呭鎿嶆帶涓夊墤瀹?br/>
鈥?鈥?strong>鈥媓tml()鈥?/strong>鈥?鈫?鏁翠釜鎴块棿閲嶆柊瑁呬慨 锛堢獊鐒舵缁忥級姣斿琛ㄥ崟澶勭悊锛?/p>
鈻?. 浜嬩欢鐩戝惉灏忚兘鎵?br/>
锛堟帹鐪奸暅锛夎浣忚繖涓粡鍏告惌閰嶏細 鍋峰伔鍛婅瘔浣狆煠細鐢?code>on() 鈫?灏卞儚鐢ㄨ韩浠借瘉鎵句汉 鈥?**鎵綾lass**锛?/code>(鈥?/span>.menu鈥?/span>)鈥?/span>鈫?/span>鍍忔槸鎸夎亴涓氭壘浜?/span>鈥⑩€?/span>鈭?/span>鈭?/span>鈥?/span>鎵炬爣绛?/span>鈥?/span>鈭?/span>鈭?/span>鈥?/span>锛?/span>鈥?/span>('div')` 鈫?鐩存帴鎸夌墿绉嶆壘浜?/p>
姣旂洿鎺ョ敤javascript澶嶅埗
// 鐐瑰嚮鎸夐挳灏遍殣钘忓浘鐗?/span>
$('#hideBtn').click(function(){
$('img').fadeOut(500) // 500姣鎱㈡參娑堝け鐗规晥
})
锛堟寫鐪夛級鎯宠鍏冪礌绉掑彉瑁咃紵璇曡瘯杩欎釜锛?/p>
javascript澶嶅埗
$('.box').css({
'background': '#f00',
'border-radius': '10px'
})
鈥?鈥?strong>鈥媡ext()鈥?/strong>鈥?鈫?鍙崲澧欎笂鐨勫瓧鐢?br/>
鈥?鈥?strong>鈥媣al()鈥?/strong>鈥?鈫?涓撻棬绠¤緭鍏ユ鐨勫€?/p>
javascript澶嶅埗
let name = $('#username').val() // 鑾峰彇杈撳叆鍊?/span>
$('#displayArea').text('浣犲ソ鍛€锛? + name) // 鏄剧ず鏂囨湰
javascript澶嶅埗
$('#submitBtn').on('click', function(){
alert('鍒偣浜嗭紒鎴戣繕娌″啓瀹屽憿锛?)
})click()鏇寸伒娲伙紝鑳藉鐞嗗姩鎬佹坊鍔犵殑鍏冪礌鍝︼紒
鈻?. 鍔ㄧ敾鍏ㄥ妗?br/> 锛堟墜鑸炶冻韫堬級璁╁厓绱犲姩璧锋潵瓒呯畝鍗曪細
javascript澶嶅埗$('#box') .slideDown(1000) // 1绉掓粦涓嬫潵 .delay(500) // 绛夊崐绉?/span> .fadeOut(800) // 鍐嶈姳0.8绉掓贰鍑?/span>
锛堝潖绗戯級璇曡瘯鎶婂弬鏁版敼鎴?code>fast鎴?code>slow锛屾湁鎯婂枩锛?/p>
馃挕 涓夈€侀伩鍧戞寚鍗楋紙琛€娉粡楠岋級
- 鈥?strong>鈥嬭寰楁枃妗ｅ姞杞藉畬鎴愬啀鎿嶄綔鈥?/strong>鈥嬶紒
javascript澶嶅埗$(document).ready(function(){ // 浣犵殑浠ｇ爜鍐欒繖閲?/span> })
- 鈥?strong>鈥嬮€夋嫨鍣ㄥ埆鐬庡啓鈥?/strong>鈥嬶細
$('div#box ul li a')杩欑瓒呴暱閫夋嫨鍣ㄤ細璁╅〉闈㈠崱鎴怭PT - 鈥?strong>鈥嬮摼寮忔搷浣滃埆澶暱鈥?/strong>鈥嬶細瓒呰繃5涓柟娉曡繛鍐欙紝璋冭瘯鏃朵細鎯崇牳鐢佃剳
锛堢獊鐒跺帇浣庡０闊筹級璇翠釜琛屼笟鍐呭箷锛氬緢澶氭柊鎵嬩笉鐭ラ亾jQuery杩樿兘杩欎箞鐜╋紒
javascript澶嶅埗// 鎵归噺鍒涘缓鍏冪礌 let newItems = ['鑻规灉', '棣欒晧', '姗樺瓙'].map(item => $('' ).text(item)) $('#fruitList').append(newItems)
锛堟媿鑳歌劘锛夎繖鎷涘仛鍔ㄦ€佸垪琛ㄨ秴濂界敤锛屾瘮瀛楃涓叉嫾鎺ュ畨鍏?00鍊嶏紒
馃搳 鍥涖€佸師鐢烰S vs jQuery 瀵规瘮琛?/p>
| 鎿嶄綔 | 鍘熺敓JS琛屾暟 | jQuery琛屾暟 |
|---|---|---|
| 闅愯棌鍏冪礌 | 2琛?/td> | 1琛?/td> |
| 鎵归噺淇敼鏍峰紡 | 5琛?/td> | 1琛?/td> |
| 浜嬩欢濮旀墭 | 8琛?/td> | 3琛?/td> |
| 鍔ㄧ敾鏁堟灉 | 15琛? | 3琛?/td> |
锛堝徆姘旓級鍞?..褰撳勾瑕佹槸鏃╀細jQuery锛岃兘灏戞帀澶氬皯澶村彂鍟婏紒
锛堢獊鐒舵缁忥級鐙鍙戠幇锛?br/> 鏈€杩戝府瀹㈡埛鏀归€犺€佺郴缁熸椂锛岀敤jQuery鐨?code>$.ajax澶勭悊鏃ф帴鍙ｏ紝姣旂敤axios鐪佷簡40%鐨勯€傞厤浠ｇ爜銆備笉杩囪娉ㄦ剰鈿狅笍锛氭柊鐗坖Query锛?.6+锛夊凡缁忔敮鎸丳romise浜嗭紝鍙互杩欎箞鍐欙細
javascript澶嶅埗$.ajax({url: 'data.json'}) .done(res => console.log('鎴愬姛', res)) .fail(err => console.log('缈昏溅浜?, err))
锛堟尃澶达級鏈€鍚庤鍙ユ帍蹇冪獫鐨勶細铏界劧鐜板湪娴佽Vue/React锛屼絾灏卞儚鎵嬫満鏀粯鏃朵唬杩樺緱甯︾幇閲戜竴鏍凤紝jQuery杩欎釜鑰佷紮璁¤繕鏄緱鎻ｅ厹閲屻€備笅娆￠潰璇曡鏄闂埌"鎬庝箞涓嶇敤妗嗘灦瀹炵幇xx鏁堟灉"锛屾妸杩欑瘒鏂囩珷鎷嶅嚭鏉ョ粷瀵归晣鍦哄瓙锛?/p>