jQuery - 常用方法

切換 active 類別

$('ul>li').click(function () {
  $(this).addClass('active').siblings().removeClass('active')
})

全選 checkbox

// 方法一
let tog = false
$('a').on('click', function (e) {
  e.preventDefault()
  $('input[type=checkbox]').attr('checked', (tog = !tog))
})

// 方法二
$('a').on('click', function (e) {
  e.preventDefault()
  if ($('input[type=checkbox]').attr('checked')) {
    $('input[type=checkbox]').attr('checked', false)
  } else {
    $('input[type=checkbox]').attr('checked', true)
  }
})

偵測元素內有無東西

if (!$('#box').html()) {
  console.log('empty')
} else {
  console.log('somthing')
}

// 三元運算子
!$('#box').html() ? console.log('empty') : console.log('somthing')

// 另一種寫法
if ($('#box').is(':empty')) {
  console.log('沒有東西')
} else {
  console.log('有東西')
}

// 三元運算子
$('#box').is(':empty') ? console.log('沒有東西') : console.log('有東西')

偵測某個元素是否存在

if ($('a').length) {
  console.log('存在')
} else {
  console.log('不存在')
}

偵測某個元素是否可見

if ($('#box').is(':visible')) {
  console.log('可見')
} else {
  console.log('不可見')
}