The web develope bootcamp jQuery

前言

在現在的 JS 可以做到很多 jQuery 的事情，但是 jquery 已經存在有一段時間，在網路開發的路上隨處可見，而且有些使用上也是很方便，除了閱讀官方文件，藉由 udemy 課程更輕鬆的認識這個資料庫。

Selecting with jQuery

在使用 jQuery 的時候，作為選擇器是使用 $，很方便的就可以選擇到要目標，而內容則是以 CSS 的方式作為選擇。可以選擇標籤 h1、a 或者 .class、#id，非常的直覺，假使現在有一個 h1，並要改變他的顏色可以這樣做。

$("h1").css("color", "yellow")

結果會回傳 html 內所有符合條件的元素，加入一個 array 回傳顯示，而在 JS 可以使用 document.querySelector 做選擇。

document.querySelector('h1').style.color = 'yellow'

而有更明顯的例子可以看出 jquery 的方便性，利用 key-value pair

var styles = {
  color: "red",
  background: "pink",
  border: "2px solid purple"
}
$("h1").css(styles)

// 還可以這樣做
$('li').css({
  fontSize: '10px',
  border: '3px dashed purple',
  background: 'rgba(89, 45, 20, 0.5)'
})

如果用 jQery 和 JS 來做類似的事情比較

// jquery
$('li').css('color', 'green')

// es6
const lis = document.querySelectorAll('li')
for (let i = 0; i < lis.length; i++){
  lis[i].style.color = 'green'
}

假設在 ul 裡面有兩個以上的 li 可以使用 first-of-type 選擇第一個元素或者使用不同的 child-filter-selectors

$('li:first-of-type')

jQuery text()、html()、attr()

官網連結

html()、text()、attr()

使用 text() ，單純使用文字，無法解析 html 標籤

// if <h1>Test</h1>
$('h1').text() // 返回標籤內容' Test'，如果標籤是複數會串起來
$('h1').text('New Test') // 覆蓋成 New Test

使用 html()，可以解析 html 標籤

// if <h1>Test</h1>
$('h1').html() // 返回 <h1>Test</h1>
$('h1').html('<a href="https://github.com/cTaohe">我的github</a>') // h1變成成 <h1><a href="https://github.com/cTaohe">我的github</a></h1>

使用 attr()，假設我們html有圖片

$('img').css('width', '500px')

$('img').attr('scr') //返回 scr 位址
$('img').attr('scr', '網址') // 修改成想要的網址，如果有多張圖片會全部變成一樣
$('img').last().attr('scr', '網址') // 修改多張圖片的最後一個

$('input')

$('input').attr('type') // 假設返回是 text
$('input').attr('type', 'checkbox') // 修改成 checkbox

使用 val()

$('input').val() // 返回 input 
$('input').val('test') // 把test 加到 input

// 如果是 select 選單，可以返回 selected

Manipulating Classes

addClass、removeClass、toggle

// 增加 class
$('h1').addClass('correct') // <h1>test</h1> => <h1 class="correct">test</h1>
$('h1').removeClass('correct') // <h1 class="correct">test</h1> => <h1>test</h1>

$('h1').toggle('correct') // 結合 add remove 判斷 correct 做切換

Event

click()、keypress()、on()

click

// 設定事件
$('h1').click(function (){
  console.log('clicked!')
})

// 複數按鈕 this 要用 $ 包覆
$('button').click(function (){
  $(this).css('background', 'pink')
})

$('button').click(function (){
  const text = $(this).text()
  console.log(text) //取得點擊的 text
})

keypress : 跟 click 很像但不一樣，keypress 在按下與放開之間的狀態，不是只是按下和放開

// 設定事件，這邊只假設有一個 input，每次 input 都會反饋
$('input').keypress(function (){
  console.log('you pressed a key!')
})

// 返回 object ，可以看到 keycode、 which、 charcode 按了甚麼按鈕的代號
$('input').keypress(function (event){
  console.log(event)
})

// 對應 enter 觸發 alert
$('input').keypress(function (event){
  if (event.which === 13) {
    alert('you hit enter')
  }
})

on 可以更簡單的使用 click、 mouseenter 等方法

// 設定事件，多個複數的 h1
$('h1').on('click', function (){
  $(this).css('color', 'purple')
})

// 按下按鈕
$('input').on('keypress', function (){
  console.log('keypress!')
})

// 對應 mouseenter
$('button').on('mouseenter', function (){
  console.log('mouseenter!')
})

// 改變 button 狀態， 不過現在透過 css 可以做到類似效果更為方便
$('button').on('mouseenter', function (){
  $(this).css('font-weight', 'bold')
})
$('button').on('mouseleave', function (){
  $(this).css('font-weight', 'normal')
})

fadeOut 使 html 的標籤 fade out，可以用 ‘slow’ 的部分可以填寫毫秒 1000 等等。

fadeOut、fadeIn、fadeToggle

// ex1
$('button').on('click', function (){
  $('div').fadeOut('slow', function (){
    console.log('fade completed') // 會等 fadeout
  })
  console.log('fade!!') // 不會等 fadeout 結束，馬上就執行了
})

// ex2
$('button').on('click', function (){
  $('div').fadeOut(1000 , function (){
    $(this).remove() // 移除標籤
  })
  $('div').remove() // 放外面不會等 fadeout ，所以不會有 fadeout 效果
})

// 相反的 fadeIn
$('button').on('click', function (){
  $('div').fadeIn(1000)
})

// fadeToggle 直接判斷上面兩種狀態
$('button').on('click', function (){
  $('div').fadeToggle(500)
})

slideUp、、slideDown、slideToggle 則是另外一種隱藏效果，可以直接在官網查詢。