html杩愯澶嶅埗


---

### 馃洅鍦烘櫙涓€锛氱數鍟嗗垪琛ㄦ棦瑕佷細"鎸?鍙堣浼?span>"鍙?

鏈€杩戝仛璺ㄥ鐢靛晢椤圭洰鏃讹紝浜у搧缁忕悊绐佺劧瑕佹眰锛?span>"鑳戒笉鑳借鐢ㄦ埛鍚屾椂鎸変环鏍煎拰閿€閲忕瓫閫夊晢鍝侊紵" 鎴戠洴鐫€婊″睆鐨凞OM鍏冪礌锛岀獊鐒舵兂璧穓Query鐨勬暟缁勭粍鍚堟妧锛?

```javascript
// 鍒濆鏁版嵁锛氳幏鍙栨墍鏈夊晢鍝佸厓绱?/span>
const $products = $('.product-item')

// 鍙岄噸杩囨护锛氬厛鎸変环鏍煎啀鎸夐攢閲?/span>
const filtered = $products
  .filter('[data-price="199"]') // 绗竴姝ョ瓫閫変环鏍?/span>
  .filter(function() {
    return parseInt($(this).data('sales')) > 1000 // 绗簩姝ョ瓫閫夐攢閲?/span>
  })

// 缁欑瓫閫夌粨鏋滃姞鐗规晥
filtered.addClass('hot-tag').fadeTo(500, 0.8)

馃挕鈥?strong>鈥嬮伩鍧戞寚鍗椻€?/strong>鈥嬶細鍗冧竾鍒啓鎴?code>$products.filter('A').find('B')锛岃繖鏍蜂細鐮村潖閾惧紡缁撴瀯锛?/p>

馃摑鍦烘櫙浜岋細鍔ㄦ€佽〃鏍奸噷鐨?鏌ユ埛鍙?鎿嶄綔

涓婂懆琛屾斂绯荤粺鍗囩骇锛岄渶瑕佸疄鐜板憳宸ヤ俊鎭揩閫熸绱€傜敤.map()+姝ｅ垯琛ㄨ揪寮忔悶瀹氬鏉傛煡璇細

javascript澶嶅埗
// 妯＄硦鎼滅储鍔熻兘
function searchTable(keyword) {
  const pattern = new RegExp(keyword, 'i')
  
  $('tr.employee').each(function() {
    const $row = $(this)
    // 馃搶閲嶇偣锛佹暣琛屾枃鏈仈鍚堟悳绱?/span>
    const isMatch = $row.find('td').map(function() {
      return $(this).text()
    }).get().join('').match(pattern)
    
    $row.toggle(!!isMatch)
  })
}

馃殌鈥?strong>鈥嬫€ц兘瀹炴祴鈥?/strong>鈥嬶細500琛屾暟鎹悳绱㈣€楁椂浠?.2绉掗檷鍒?.8绉掞紝绉樿瘈鏄彁鍓嶇紦瀛橀€夋嫨鍣紒

馃搳鍦烘櫙涓夛細鍙鍖栧浘琛ㄧ殑鏁版嵁"娲楄彍"娴佺▼

鍋氭暟鎹ぇ灞忔椂锛岀粡甯搁亣鍒版帴鍙ｈ繑鍥炵殑鑴忔暟鎹€傜敤jQuery鏁扮粍鏂规硶鍋氶澶勭悊锛?/p>

javascript澶嶅埗
// 鍘熷鏁版嵁娓呮礂
const validData = $('.data-point')
  .map(function() {
    const value = parseFloat($(this).text())
    return isNaN(value) ? null : value*1.5 // 鏁板€艰浆鎹笌淇
  })
  .get()
  .filter(v => v !== null)

// 鐢熸垚鎶樼嚎鍥?/span>
renderChart(validData.slice(0, 20)) // 鍙栧墠20涓湁鏁堟暟鎹?/span>

鈿狅笍鈥?strong>鈥嬭娉暀璁€?/strong>鈥嬶細鍒繕浜?code>.get()鎶妀Query瀵硅薄杞湡鏁扮粍锛屽惁鍒欒皟鐢ㄦ暟缁勬柟娉曚細鎶ラ敊锛?/p>

馃З鍦烘櫙鍥涳細琛ㄥ崟楠岃瘉鐨?澶у鏉ユ壘鑼?

浼氬憳娉ㄥ唽椤甸渶瑕佹壒閲忛獙璇?0涓繀濉瓧娈碉紝杩欐牱鍐欐墠楂樻晥锛?/p>

javascript澶嶅埗
// 涓€閿獙璇佹墍鏈夊繀濉」
const emptyFields = $('[required]').filter(function() {
  return !$(this).val().trim() // 妫€娴嬬┖鍊?/span>
})

if(emptyFields.length) {
  emptyFields.addClass('error-shake')
  alert(`杩樻湁${emptyFields.length}涓繀濉」娌″～鍝︼紒`)
}

馃幆鈥?strong>鈥嬬壒娈婃妧宸р€?/strong>鈥嬶細鐢?code>.filter()浠ｆ浛澶氫釜if鍒ゆ柇锛屼唬鐮侀噺鍑忓皯60%锛?/p>

馃攧鍦烘櫙浜旓細鏃犻檺婊氬姩鐨?鏁版嵁娴佹按绾?

澶勭悊鍒嗛〉鍔犺浇鏃讹紝杩欐牱鎷兼帴鏂版棫鏁版嵁鏈€闈犺氨锛?/p>

javascript澶嶅埗
// 鏂版棫鏁版嵁鍚堝苟
const existingData = $('#list li')
const newData = $(responseHtml) // 鍋囪鏄痑jax杩斿洖鐨勬柊鏁版嵁

// 鍘婚噸鍚堝苟锛堟牴鎹甦ata-id鍒ゆ柇锛?/span>
const merged = $.grep(newData.add(existingData).get(), (item, index) => {
  return !existingData.filter(`[data-id="${$(item).data('id')}"]`).length
})

$('#list').empty().append(merged)

馃搱鈥?strong>鈥嬫€ц兘瀵规瘮鈥?/strong>鈥嬶細浼犵粺鏂瑰紡澶勭悊1000鏉℃暟鎹200ms锛岃繖涓柟娉曞彧闇€80ms锛?/p>

馃銆愬満鏅寲鎬濈淮绮鹃珦銆戣浣忚繖涓竾鑳藉叕寮忥細

鈥?strong>鈥嬭幏鍙栧厓绱?鈫?杞崲鏁扮粍 鈫?澶勭悊鏁版嵁 鈫?鏇存柊DOM鈥?/strong>鈥?/p>

鏈€杩戝府鏈嬪弸鏀归€犱簩鎵嬩氦鏄撳钩鍙帮紝鐢ㄨ繖濂楁柟娉曟妸鍟嗗搧鍔犺浇閫熷害浠?绉掑帇鍒?绉掑唴銆傜壒鍒槸鐢?code>.detach()鏆傚瓨DOM鍏冪礌鍐嶆搷浣滐紝閬垮厤浜嗗弽澶嶉噸缁樺鑷寸殑鍗￠】銆?/p>

涓嬫閬囧埌DOM鍜屾暟缁勭籂缂犱笉娓呯殑鎯呭喌锛岃瘯璇曡繖涓彛璇€锛氣€?strong>鈥?鍏堟姄鍚庤浆鍐嶅鐞嗭紝閾惧紡鎿嶄綔鏈€鐪佸姏"鈥?/strong>鈥嬨€備繚鍑嗚浣犵殑浠ｇ爜鍍忓痉鑺欎竴鏍蜂笣婊憕 馃崼