jQuery 隨筆記

2月 23 2022 jQuery

隨筆記。

一些常用或容易忘的 API

  • $('selector1, selector2, selectorN') 選取多個元素（就跟 CSS 的概念相同）
1
2
3
4
5
6
7
8
9
<div class="parent">
  <p class="p1">P1</p>
  <p>P2</p>
  <div class="child">
    <p>P3</p>
    <p>P4</p>
  </div>
  <section></section>
</div>
1
2
// S.fn.init(2) [div.parent, p.p1]
console.log($('.parent, .p1'))
  • get() 把 jQuery 物件變成 DOM 元素（陣列）：
1
<div class="parent"></div>
1
2
3
4
// S.fn.init [div.parent] -> Object
console.log($('.parent'))
// [div.parent] -> Array
console.log($('.parent').get())
  • find('selector') 選到所有子孫元素（多層）
1
2
3
4
5
6
7
8
<div class="parent">
  <p>P1</p>
  <p>P2</p>
  <div class="child">
    <p>P3</p>
    <p>P4</p>
  </div>
</div>
1
2
3
// 白話來說 = 選到 .parent 底下所有的 p
// 接著把每個 p 都設為紅色
$('.parent').find('p').css('background-color', 'red')
  • children(['selector']) 選到所有子元素（一層）
1
2
3
4
5
6
7
8
<div class="parent">
  <p>P1</p>
  <p>P2</p>
  <div class="child">
    <p>P3</p>
    <p>P4</p>
  </div>
</div>
1
2
// <p> <p> <div>
console.log($('.parent').children())

裡面也可以再塞新的 selector：

1
2
3
4
5
6
7
const tagNames = $('.parent')
  .children('p')
  // 從 jQuery 物件轉成 DDM 元素
  .get()
  .map((elem) => elem.tagName)
//  ['P', 'P']
console.log(tagNames)

JavaScript：

1
2
// <p> <p> <div>
console.log(document.querySelector('.parent').children)
  • contents() 選出所有子元素（包含文字節點）
1
2
3
4
5
6
7
8
<div class="parent">
  <p>P1</p>
  <p>P2</p>
  <div class="child">
    <p>P3</p>
    <p>P4</p>
  </div>
</div>

jQuery：

1
2
// S.fn.init(7) [text, p, text, p, text, div.child, text]
console.log($('.parent').contents())

JavaScript：

1
2
// [text, p, text, p, text, div.child, text]
console.log(document.querySelector('.parent').childNodes)
  • attr('attrName', 'attrValue') 設定屬性

jQuery：

1
2
// <div tooltip="請輸入內容"></div>
$('div').attr('tooltip', '請輸入內容')

JavaScript：

1
2
// <div tooltip="請輸入內容"></div>
document.querySelector('div').setAttribute('tooltip', '請輸入內容')
  • removeAttr('attrName') 刪除屬性

jQuery：

1
$('div').removeAttr('tooltip')

JavaScript：

1
document.querySelector('div').removeAttribute('tooltip')
  • $('parent').append() 把東西放到父元素裡（最後面）
1
2
3
4
5
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3
4
5
6
7
8
9
10
$('.container').append(
  $('<button>', {
    id: 'myId',
    class: 'myClass',
    text: 'click Me',
    on: {
      click: () => console.log('click')
    }
  })
)
  • $('child').appendTo() 把自己放到父元素裡（最後面）
1
2
3
4
5
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3
4
5
6
7
8
$('<button>', {
  id: 'myId',
  class: 'myClass',
  text: 'click Me',
  on: {
    click: () => console.log('click')
  }
}).appendTo('.container')
  • $('child').prependTo() 把自己放到父元素裡（最前面）
1
2
3
4
5
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3
4
5
6
7
8
$('<button>', {
  id: 'myId',
  class: 'myClass',
  text: 'click Me',
  on: {
    click: () => console.log('click')
  }
}).prependTo('.container')
  • $('parent').prepend() 把東西放到父元素裡（最前面）
1
2
3
4
5
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3
4
5
6
7
8
9
10
$('.container').prepend(
  $('<button>', {
    id: 'myId',
    class: 'myClass',
    text: 'click Me',
    on: {
      click: () => console.log('click')
    }
  })
)
  • after() 放到旁邊（後面）
1
<div class="sibling"></div>
1
$('.sibling').after($('<div>after</div>'))
  • before() 放到旁邊（前面）
1
<div class="sibling"></div>
1
$('.sibling').before($('<div>before</div>'))
  • siblings() 選出所有的兄弟元素（但不包含自己）
1
2
3
4
5
6
7
8
9
10
<div>
  <button class="brother">兄弟一</button>
  <button>兄弟二</button>
  <button>兄弟三</button>
  <button>兄弟四</button>
  <div>
    兄弟五
    <button>不是兄弟</button>
  </div>
</div>
1
2
// [button, button, button, div]
console.log($('.brother').siblings())
  • next() 下一個兄弟元素
1
2
3
4
5
<div>
  <div>兄弟</div>
  <button class="brother">兄弟一</button>
  <a>兄弟</a>
</div>
1
2
// [a]
console.log($('.brother').next())
  • nextAll() 後面所有的兄弟元素
1
2
3
4
5
6
7
<div>
  <div>兄弟</div>
  <button class="brother">兄弟一</button>
  <a>兄弟</a>
  <section>兄弟</section>
  <article>兄弟</article>
</div>
1
2
// [a, section, article]
console.log($('.brother').nextAll())
  • prev() 前一個兄弟元素
1
2
3
4
5
<div>
  <div>兄弟</div>
  <button class="brother">兄弟一</button>
  <a>兄弟</a>
</div>
1
2
// [div]
console.log($('.brother').prev())
  • prevAll() 前面所有的兄弟元素
1
2
3
4
5
6
7
<div>
  <a>兄弟</a>
  <section>兄弟</section>
  <article>兄弟</article>
  <button class="brother">兄弟一</button>
  <div>兄弟</div>
</div>
1
2
// [article, section, a]
console.log($('.brother').prevAll())
  • hasClass(className) 有沒有包含這個 class

jQuery：

1
2
// true / false
$('el').hasClass('classNmae')

JavaScript：

1
element.classList.contains('className')
  • closest(selector) 找出第一個符合選取器的父元素

jQuery：

1
2
// 這個會回傳 jQuery 物件
$(element).closest('parent')

JavaScript：

1
2
// 這個回傳 DOM 節點
element.closest('parent')
  • val() 讀取或設定表單元素的 value

jQuery：

1
2
3
4
// 取得 input 的值
$('input').val();
// 設定 input 的值
$('input')val('');

JavaScript：

1
2
3
4
// 取得 input 的值
document.querySelector('input').value
// 設定 input 的值
document.querySelector('input').value = ''

remove() 刪除元素（包含自己）

和 JavaScrip 幾乎一樣：

1
$('element').remove()
  • on('event', 'selector', function) 事件監聽器，重點是 delegate 比較方便：

jQuery：

1
2
3
4
// 直接用第二個 selector 過濾
$('element').on('click', 'child', (e) => {
  console.log('click')
})

JavaScript：

1
2
3
4
5
6
document.querySelector('element').addEventListener('click', (e) => {
  // 用 class 判定
  if (e.classList.contains('className')) {
    console.log('click')
  }
})
  • empty() 清空所有子元素（內容）

jQuery：

1
$('parent').empty()

JavaScript：

1
document.querySelector('parent').innerHTML = ''

或參考：DOM 清除所有的子元素

  • serialize() 把表單欄位值轉成 url 字串，通常用在用 $.ajax 傳送資料：
1
2
3
4
5
6
$form = $('.form')
$form.on('submit', () => {
  const formData = $('.form').serialize()
  // 這邊只是示意，輸出結果為空字串是正常的
  console.log(formData)
})

怎麼設定 button 為 disabled

  1. 用 attr
1
$('.btn').attr('disabled', 'disabled')
  1. 用 prop（property 推薦）
1
$('.btn').prop('disabled', ture)

怎麼用 $.ajax 的 POST 送表單格式資料

詳細可參考 用 jQuery 發 AJAX

1
2
3
4
5
6
7
8
9
10
11
// 取得表單的內容
const formData = new FormData($('form'))
$.ajax({
  url: `https://api.com`,
  type: 'POST',
  data: formData,
  contentType: false, // required
  processData: false, // required
  success: (data) => callback(null, data),
  error: (err) => callback(err)
})

建立 DOM 元素，並插入

jQuery 不用像 JavaScript 還要 createElement，而是直接 $(<div></div>) 來產生：

1
2
3
4
5
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
1
2
3
$(`<div>
    <p>yoyoyo</p>
  </div>`).appendTo('.container')

甚至還可以設定屬性、監聽器：

1
2
3
4
5
6
7
8
9
10
$('<button>', {
  id: 'myId',
  class: 'myClass',
  title: 'myTitle',
  tooltip: '請輸入訊息',
  text: 'Click Me', // 不可 HTML，會被當純字串
  on: {
    click: () => console.log('click')
  }
}).appendTo('.conainer')

append 的另外一種用途

可以拿來「移動元素」，簡單來說就是先 select 畫面上的元素，再把它 append 到別的地方。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 60px;
  }
  div {
    padding: 20px;
    margin: 20px;
  }
  div.box-red {
    border: 2px solid red;
  }
  div.box-blue {
    border: 2px solid slateblue;
  }
</style>
<div class="box-red">
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>
<div class="box-blue"></div>
<button>Move it.</button>
1
2
3
4
5
6
7
8
9
$(document).ready(function () {
  $('button').on('click', function () {
    if ($('ul').parent().hasClass('box-red')) {
      $('ul').appendTo($('.box-blue'))
    } else {
      $('ul').appendTo($('.box-red'))
    }
  })
})

move

Loading-overlay 懶人包 mentor-program-day71
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×