[FE201] 前端中階：jQuery

#-jQuery

Posted by s103071049 on 2021-07-02

最快認識套件的方法 : 官方網站，裡面會寫套件主要在做甚麼

使用 jQuery 的好處

[jQuery]https://jquery.com/) 是快速又小且多功能的 js library。他都把很多東西用 function 包好。

一、 light weight
二、 css3 compliant

三、 跨瀏覽器
早期規範不完整，加上瀏覽器百家爭鳴，不像現在 chrome 獨霸，因此每個瀏覽器都有自己的寫法與規則，放棄一個可能就放棄十五趴的市場。且當年很多跨瀏覽器的 api 沒有這麼完整。

一個功能五種寫法很費時，所以救世主 jQuery 出現。

只要用同樣的介面，就可以用在任何瀏覽器且不會出錯。

一、jQuery 基礎示範上集

開發時，建議使用沒壓縮過的 https://code.jquery.com/jquery-3.6.0.js

用 script 引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://code.jquery.com/jquery-3.6.0.js'></script>
    <script>console.log(jQuery)</script>
</head>
<body>

</body>
</html>

不用 jQuery 原本要這樣寫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='https://code.jquery.com/jquery-3.6.0.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
          document.querySelector('.btn').addEventListener('click', function() {
            alert('click')
          })
        })
    </script>
</head>
<body>
    <button class='btn'>我是按鈕</button>
</body>
</html>

jQuery 算是一個 funct，jQuery('selector')，回傳的是 jQuery 專屬的物件

let element = jQuery('.btn')
console.log(element)

幫她加上事件

element.click(function(e) {
  alert('click jq!')
})

$ 字號就是 jQuery，這個符號取代呼叫 jQuery funct 的動作，所以下面代碼可以這樣改。另外，仔細觀察原生和 jQuery 是可以混用的。

    <script src='https://code.jquery.com/jquery-3.6.0.js'></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
          document.querySelector('.btn').addEventListener('click', function() {
            alert('click')
          })
          let element = $('.btn')
          element.click(function(e) {
            alert('click jq!')
          })
        })
    </script>

全部改成 jQuery

$(document).ready(function() {
    $('.btn').click(function(e) {
        alert('click jq')
    })
})

跟事件、dom 相關的東西可以用 jQuery，除此之外其它還是用原生。

現在，製作一個盒子。

<style>
.box {
  background: gray;
  width: 100px;
  height: 100px;
}
</style>
# 中間代碼略
<body>
    <button class='btn'>我是按鈕</button>
    <div class="box">box</div>
</body>

一、點按鈕，改變文字

    <script>
        $(document).ready(function() {
          $('.btn').click(function(e) {
            $('.box').text('love ready')
          })
        })
    </script>

二、點按鈕，將盒子藏起來
jQuery 幫我們加 display: none

    <script>
        $(document).ready(function() {
          $('.btn').click(function(e) {
            $('.box').hide()
          })
        })
    </script>

三、點按鈕 =>若盒子藏起來就打開，若打開就藏起來

        let isHide = false
        $(document).ready(function() {
          $('.btn').click(function(e) {
            if (isHide) {
                $('.box').show()
            } else {
                $('.box').hide()
            }
            isHide = !isHide
          })
        })

四、fade in, fade out 淡入淡出效果
jQuery 在 hide 之外，再調整透明度。fadeIn(秒數)

        let isHide = false
        $(document).ready(function() {
          $('.btn').click(function(e) {
            if (isHide) {
                $('.box').fadeIn(2000)
            } else {
                $('.box').fadeOut(2000)
            }
            isHide = !isHide
          })
        })

jQuery 基礎示範下集

希望在點按鈕後，輸入的值會被加到下面

    <input class="todo-input"></input>
    <button class='btn'>add todo</button>
    <div class="todos"></div>

首先，幫 btn 加 eventListener

      $(document).ready(function() {
        $('.btn').click(function(e) {
          })
      })

將 input 值給拿出來

console.log($('.todo-input').val())

如果 $('.todo-input').val() 呼叫 funct 裡面沒有傳東西，就是 GET。
裡面如果傳東西就是設定值，舉例：$('.todo-input').val('ABC')

      $(document).ready(function() {
        $('.todo-input').val('ji3')
        $('.btn').click(function(e) {
        })
      })

jQuery 中， get 或 set 會用同個函式以參數的方式進行區分

      $(document).ready(function() {
        $('.btn').click(function(e) {
          const value = $('.todo-input').val() //把值拿出來
          $('.todo-input').val('') //把輸入框的值清空
          $('.todos').append(`<div class='todo'>${value}</div>`) //把 html 元素 append 到上面去
        })
      })

append 和 prepend 差異在新加入的元素，放置位置是在原本元素前還後

也可以用 jQuery 調整 css

$('.todo-input').css('color', 'red')

jQuery 實戰 - todo list

剛剛 add todo 部份已製作完成，現在製作刪除與標示的部份。

      $(document).ready(function() {
        $('.btn').click(function(e) {
          const value = $('.todo-input').val()
          $('.todo-input').val('')
          $('.todos').prepend(
            `<div class='todo'>
              ${value}
              <button class="btn-mark">標記完成</button>
              <button class="btn-delete">刪除</button>
            </div>`
          ) 
        })
      })

要先用 $ 變成 jQuery 物件才有 jQuery 的方法使用。

對於動態新增的元素，要使用事件代理，

todos 底下的 .btn-delete 每個 click 的時候都會執行這個 funct

        $('.todos').on('click', '.btn-delete', (e) => {
          $(e.target).parent().remove()
        })

也可以用 fadeOut() 取代 remove 讓消失的時候變得更有動畫效果

製作標記完成

        $('.todos').on('click', '.btn-mark', (e) => {
          const todo = $(e.target).parent()
          //如果他是完成，又進來事件，就代表要變成未完成
          if (todo.hasClass('completed')) {
            todo.css('color', 'black')
            todo.removeClass('completed')
            $(e.target).text('標記完成')
          } else {
            todo.css('color', 'green')
            todo.addClass('completed')
            $(e.target).text('標記未完成')
          }
        })

用 .remove() 會整個 div 都不見，若整個 div 不見，新增 todo 就會出錯，因為它整個 dom 的節點已被移除。

        $('.todos').on('click', '.btn-delete', (e) => {
          $(e.target).parent().fadeOut()
        })

代碼長相

<!DOCTYPE html>

<html>
<head>
  <meta charset="utf-8">

  <title>FE201</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script>
    $(document).ready(function() {
      $('.btn').click(function(e) {
        const value = $('.todo-input').val()
        $('.todo-input')
        $('.todo-input').val('')
        $('.todos').append(`
          <div class="todo">
            ${value}
            <button class="btn-mark">標記完成</button>
            <button class="btn-delete">刪除</button>
          </div>`
        )
      })

      $('.btn-remove-all').click(() => {
        $('.todos').empty();
      })

      $('.todos').on('click', '.btn-delete', function(e) {
        $(e.target).parent().fadeOut()
      })

      $('.todos').on('click', '.btn-mark', function(e) {
        const todo = $(e.target).parent();
        // 變成未完成
        if (todo.hasClass('completed')) {
          todo.css('color', 'black')
          todo.removeClass('completed')
          $(e.target).text('標記完成')
        } else {
          todo.css('color', 'green')
          todo.addClass('completed')
          $(e.target).text('標記未完成')
        }

      })
    })

  </script>
  <style>
      .todo {
        padding: 12px;
        border: 1px solid grey;
      }
  </style>
</head>

<body>
  <input class="todo-input"/>
  <button class="btn">Add todo</button>
  <button class="btn-remove-all">Remove all todos</button>
  <div class="todos">

  </div>
</body>
</html>

#-jQuery

s103071049




Related Posts

{210409} Hello, World!

{210409} Hello, World!

 nuoxoxo
[BE201] Express & Sequelize part 1

[BE201] Express & Sequelize part 1

 yymarlerr
關於 JavaScript 的提升 (Hoisting)

關於 JavaScript 的提升 (Hoisting)

 Kai

Comments