六、[前端] jQuery

jQuery 簡介

Javascript 的程式庫 library。程式庫就是程式碼的倉庫，裡面有很多工具

每個程式庫都有自己擅長的事情。jQuery 擅長

• Event

  • click event

• Traversing

  • 抓到節點後，可以爬到其他節點

• DOM Manipulate (洞)

  • 把標籤變成物件，document object model

  • 變成物件，就多了很多函式可以用

  • 像是刪除、修改

這三件事情怎麼綜合發生的呢？已待辦清單為例

• 點擊叉叉

• 找到叉叉的 li 項目

• 移除該項目

events 事件的發生

mouse 相關

• .click() 打開、關閉

• .hover() 滑到導覽列文字變色

• .scroll() 滾動到某個地方就縮小 logo

keyboard 相關

• kepress 完整操作

• keydown，gmail 按 shift 多選視窗

• keyup

form 相關

• blur / focus / change

  • .focues() 選中 input 時，就是 focus 專注

  • .blur() 跳出 focus 狀態時，就是 blur 不專注、模糊

  • .change() focus 後，打了 hi，要 blur 前，就會觸發 change

  • .select() word focus，文字選取反白時

• submit

  • 註冊、送出表單前，先擋下來驗證資料，正確再送出

$(document).ready()

• 找 header 底下的 li，但還不存在；只要 ready 準備好再找就好

binding

• 再解釋 event。

• 點擊 #header, #header li 都是事件

• 只要做了之後，有設定要做什麼事情，有 handle，就能做操作

• 只要在目標上 binding 就好

$('#target').bind('click', function(){
    // ... 找目標，綁事件，做功能
});

$('target').click(function() {
    // ... 要監聽什麼事件，可以直接寫
});

.on()

• bind 的 target 如果不存在，就像是跟空氣進來；後來 target 進來後，還是不知道做什麼事情

• .on() 如何解決不在場的問題?

• 可以先找在場的人，後來目標進來的話，再跟他說

• 綁匪先跟父母預告，我要綁你小孩喔，等你小孩回家後，記得要讓我綁

• 什麼時候會有這種狀況? 例如，AJAX，資料可能後來才進來

$('#header').on('click', 'li', function() {
    // ...
})

events 整理

• click / hover / scroll

• keypress / keydown / keyup

• blur / focus / change

• submit

• $(document).ready()

• bind / on

自己另外想了解拖放 event

• 因為我的 todo list 想要能夠排序

• [筆記] 製作可拖曳的元素（HTML5 Drag and Drop API） ~ PJCHENder 那些沒告訴你的小細節

• HTML5 Drag and Drop 拖曳效果 - Wibibi

• JS 原生拖拽拖放事件 (drag and drop) · Issue #5 · webplus/blog

  • 還有提到拖曳本機端照片

• 拖曳事件 - jQuery UI Draggable Events example - Pure Example

  • 持續無間斷拖曳

• [HTML5 試試看 - 15] 互動機制 - drag and drop - iT 邦幫忙:: 一起幫忙解決難題，拯救 IT 人的一天

• 灰色後門: 範例 - JavaScript 實作可拖曳物件

  • 持續無間斷拖曳

traversing 爬樹

html 的架構，就像是一顆樹，是一種樹狀結構，一顆倒過來的樹。traversing 就是在樹上亂跑

• body

• #header

  • #posts

    • h1

    • p

    • p

    • #target

      • p

      • p

    • p

  • #sidebar

• content

• #footer

find / children

find 找全部下層的東西；children 只找孩子

$('#content').find('p') // 有點像 filter 
$('#posts').children()
$('#posts').children('p')

parent / closest

上一層/最近的祖先

$('#target').parent()    // #posts
$('target').closest('#content')    // #content

siblings

找同輩

$('#target').siblings()

first / last / eq

可是剛剛找的方式，會回傳很多個元素，該怎麼辦？就用數字指定

$('#posts').children().first()
$('#posts').children().last()
$('#posts').children().eq(1)    // 第二個

整理

• find / children

• parent / closest

• siblings

• first / last / eq

提問

• 為什麼沒提到讀取一個目標的用法

• 像是 document.getElementByID('target') 之類的，jQuery 應該有類似的用法吧？

• 啊，還是上一小節就講了 orz

DOM manipulate 處理網頁元素

插入系列

• 在 todo 清單底下插入新 item，就是插入的動作

• .append()

  • 目標元素的最後一個孩子的後面

• .prepend()

  • 目標元素的第一個孩子的前面

• .before()

  • 在目標元素之前，sibling

• .after()

  • 在目標元素之後

另外一個東西

• .html() 整個取代

• 如果沒有塞值進去的話，就是當讀取用

• $('#target').html('<li>hello</li>');    // 覆蓋
  var foo = $('#target').html();        // 讀取與賦值

其他

• .remove() 把選到的目標移除

• .empty() 把目標的內容物全部清空

• .clone() 複製目標

其他

• 例如，gmail 打勾信件，會變黃

• .addClass() 加上 class

• .removeClass() 移除 class

• .toggleClass() 開關

其他

• .css() 修改 css 內容

• $('.bar').css({
      width: '20px',
      left: '500px',
  });

其他

• .prop() / .val()；property, value，用來讀取屬性的值

• <div id="header">
      <ul>
          <li>
              <a href="about.html">about</a>
          </li>
      </ul>
  </div>

• <form action="action.php">
      <input type="text" name="email" value="[e-mail]">
      <button>submit</button>
  </form>

• $('input').prop('value'); // 好像只有 form 裡面的 input 比較常用到 value
  $('input').val();    // 簡寫
  
  $('input').prop('value'， 20); // 寫入
  $('input').val(20);

其他

• .data()

• 像是 gmail 在跟伺服器拿信的內容，要怎麼知道是那一封

• 每封信有自己的編號 data-id

• <ul>
      <li data-id="2028">Lorem</li>
      <li data-id="1720">Lorem</li>
      <li data-id="9728">Lorem</li>
  </ul>

• var result = $('ul li').eq(2).data('id');    // 抓到 9725 
  $('ul li').eq(2).data('id', 25);            // 改成 25

DOM manipulate 整理

• append / prepend / before / after

• html

• remove / empty / clone

• addClass / removeClass / clone

• css

• prop / val

• data

jQuery 整理

• event

• traversing

• DOM manipulating

[練習] 極簡版 todo list

用 Codepen 練習，記得要把 JS 區塊引用 jQuery，quick add

需求

• 有 Lorem list 介面

• 有能新增 list 的 button

• 有能刪除 list 的 button

自己試作的

• [練習] 自己試作 todo list。list + create + delete

• jquery 怎麽獲取當前點擊 class 是第幾個_百度知道

• jQuery判断当前元素是第几个元素&获取第N个元素 - isWTF's blog

• [jQuery] this 和 $(this) 的區别 @ 碎碎念 :: 隨意窩 Xuite 日誌

html

<div class="container">

  <div class="lists">
    <div class="list" id="temp">
      <div class="content">Lorem</div>
      <div class="delete">x</div>
    </div>
  </div>
  <div class="clearfix"></div>

  <button class="add">+ todo</button>
</div>

css

.list {
  background-color: pink;
  padding: 5px;
  margin: 5px 0 ;
}

.content {
  float: left;
  background-color: pink;
  width: 95%
}

.delete {
  text-align: center;
  background-color: gray;
}
.delete:hover {
  background-color: orange;
}

.clearfix {
  clear: both;
}

js

// 清單範本
var tempListHtml = $('.lists').html();

// add button，能在 lists 底下新增清單範本
$('.add').click(function(){
  $('.lists').append(tempListHtml);
});

// delete button，偵測到第幾個 list 的 button 被 click，就 remove 第幾個 list
$('.lists').on('click', '.delete', function(){
  var order = $('.delete').index(this);
  $('.list').eq(order).remove();
})

參考後修改的 Codepen

• 修改 taker 的 list + create button + delete button

html

<ul id="todo">
  <li>
    <div class="content">Lorem, ipsum.</div>
    <div class="delete">x</div>
  </li>
  <li>
    <div class="content">Lorem, ipsum.</div>
    <div class="delete">x</div>
  </li>
  <li>
    <div class="content">Lorem, ipsum.</div>
    <div class="delete">x</div>
  </li>
</ul>

<button id="create">+ todo</button>

css

ul {
  padding: 0;
  mragin: 0;
  list-style-type: none;

}

li {
  position: relative;
  background-color: pink;
  padding: 10px;
  margin: 5px 0;
}



.delete {
  /*  del btn 用絕對定位  */
  position: absolute;
  top: 5px;
  right: 20px;
  padding: 4px 10px;
  cursor: pointer;
  background-color: #ccc;
}
.delete:hover {
  background-color: yellow;
}

#create {
  background-color: pink;
  width: 200px;
  height: 50px;
}

js

$(document).ready(function(){

  $('#create').click(function(){
    // clone
    var todo = $('#todo').find('li').first().clone();
    // insert @bottom
    $('#todo').append(todo);
  });

  $('#todo').on('click', '.delete', function(e){ // 會傳 event 進來
     $(e.currentTarget).closest('li').remove();
  });

  // $('.delete').click(function(e){
  //   // target's li, remove
  //   $(e.currentTarget).closest('li').remove();
  // });

});

[練習] event binding 做不到的事

// 原先是這個，新出現的 .delete 會不知道要監聽
$('.delete').click(function(e){
  // target's li, remove
  $(e.currentTarget).closest('li').remove();
});

// 改成這個才能持續監聽，讓別人交待新來的
$('#todo').on('click', '.delete', function(e){
    $(e.currentTarget).closest('li').remove();
});

AJAX 的概念

舉例

• 填表單時，在網頁上填好，傳訊息給 server

• server 回傳結果。如果有錯誤，就提醒

• 壞處是，只是想知道想東西，卻需要重整頁面

改良

• server 在背景傳資料給網頁，不用重整頁面

• 沒有 AJAX 的話，在 Google Docs 修改文字時，就會一直跳頁跳頁跳針跳針

jQuery + AJAX

• 例如，想刪掉 li，會觸發 delete 的 click event。

• 前端刪，後端也要刪，透過 jQuery code 和 AJAX call 互動

• 例如，想獲得 data-id="20" 的資料，透過 traversing 拿，並與 AJAX call 互動

• 想移除 li，就使用 DOM manipulate 移除

前端小結

• HTML

• CSS

• Javascript

• jQuery