changed 6 years ago  
Linked with GitHub

jQuery

tags: javascript、jquery、library

簡介的部份

jQuery 維基百科
一套跨瀏覽器的 Javascript 函式庫，簡潔 html 與 Javascript 的編寫文法，像是操作 document、選取 DOM 元素、事件處理、建立動畫效果、開發 Ajax 程式等等。

為什麼這麼夯？

  1. 語法簡潔
  2. 擁有跨瀏覽器的支援

安裝

  • html 只要塞 CDN 的網址就可以。

  • 如果專案有裝 ESLint，要在.eslintrc.js當中的 env 物件裡放jquery: true。

vanilla js

不用任何框架的 Javascript。

比如以下程式碼就是：

  document.addEventListener('DOMContentLoaded', function () {
    document.querySelector('.btn').addEventListener('click', function (){
      alert('yo');
    })
  })

用 jQuery 來寫的話會是這樣：

$(document).ready(function () {
  $('.btn').click(function () {
    alert('yo');
  })
})

需要釐清的觀念：
使用用框架還是需要原生的 JS，而不是用了框架就不用寫原生的 JS，可以把框架或是 library 當作是一個替換的角色，使用那些工具可以幫助你在更快速的時間內開發完畢，但不使用他們也是可以完成開發。
另外要注意的是當你今天要把當初使用框架所寫的程式碼拿掉的時候，就會比較麻煩要做更新，因此也沒有說用框架寫就是好還是不好，應該說，視情況選擇你所要的工具，更重要的是，原生的 JS 一定要會。

基本語法

fadeIn() 和 fadeOut() 是元素淡入淡出的功能

<script>
​​  $(document).ready(function () {
​​    $('.title').append('<h1>hello</h1>')

​​    $('.show').click(function () {
​​      $('h1').fadeIn();
​​    })

​​    $('.hide').click(function () {
​​      $('h1').fadeOut();
​​    })
​​  })
​​</script>
​​<style type="text/css">
​​  h1 {
​​    background: red;
​​  }
​​</style>
</head>

<body>
​​  <div class="title"></div>
​​  <button class="show">show</button>
​​  <button class="hide">hide</button>
</body>

改 CSS 內容

$('h1').css('background', 'green')

改屬性

$('a').attr('href'.'https://www.google.com')

事件監聽、操作元素（新增、刪除、選取）

$(document).ready(function () {
  $('.add-btn').on('click', function () {
    let inputValue = $('#input-item')[0].value;
    if (inputValue !== '') {
      $('ul').append(`<li class='item'><span class='item-name'>${inputValue}</span> <button class='delete-btn'>X</button></li>`);
    }
    $('#input-item')[0].value = '';
  })

  $('.Todo-items').on('click', function (event) {
    let clickArea = $(event.target);
    if (clickArea.hasClass('delete-btn')) {
      clickArea.parent().remove();
    } else if (clickArea.hasClass('item-name')) {
      clickArea.addClass('checked');
    }
  })
});

新增一個排在第一個的子元素（不會取代原本位置的子元素）

$(parent).prepend(el)

會加到父元素下面所有的子元素

Notice: Only variables should be passed by reference

表示需要放變數的參數進去。

表單送出後，把表單的所有輸入值清空

$(el)[0].reset()

選取隔壁同階層的元素

$(el).siblings(selector)。如果沒有指定 selector，則選取所有同階層的元素。

拿取屬性的值

$(el).attr('屬性名稱')

找子元素

$(parent).find(selector)

拿取元素的內容

$(el).text()

更改元素的內容

$(el).text('content')。其中 content 即為要更改的內容。

選取兩個以上的 class 元素

$('.classA.classB')

幫 input 標籤類型為 checkbox 動態加上打勾或取消打勾

參考資料

How to reset all checkboxes using jQuery or pure JS?

AJAX 的部份

success 和 done 有什麼不同？

jQuery.ajax handling continue responses: “success:” vs “.done”?

Select a repo