最快認識套件的方法 : 官方網站,裡面會寫套件主要在做甚麼
使用 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>