A Javascript library: jQuery (w3school)

第 11 屆 iThome 鐵人賽

DAY 7

自我挑戰組

網頁服務開發之路系列第 7 篇

11th鐵人賽

jiajun_chou

團隊中興應數98級 3+1個香皮匠

2019-09-22 23:36:42

3582 瀏覽

分享至

關於 w3school 的學習筆記

Selector

element, id, class
- $("*") : 選取全部元素
- $(this) : 選取HTML所有元素
- $("p:first") : 選取第一個<p>元素
- $("ul li:first") : 選取<ul>裡面第一個<li>
- $("ul li:first:child") : 選取每個<ul>裡面第一個<li>
- $("[href]") : 選取所有有href attribute的元素
- $"a[traget='_blank']" : 選取所有target='_blank'的<a>
- $(":button") : 選取所有<button>與type=button的<input>元素
- $("tr:odd") : 選取所有奇數的<tr>
- $("parent > child") : 選取在parent下的child
$("something") 是回傳一個 JQuery Object，$("something")[0] 或 `$("something").get(0) 才會回傳一個 DOM Object

Events

Events: Mouse, Keyboard, Form, !Document/Window Events
- #!javascript $("selector").method(function(){code here}); : 使用方法模組
- Mouse:
  - click(): 滑鼠點一下
  - dblcilck(): 滑鼠點兩下
  - mouseenter() / mouseleave(): 滑鼠滑到物件上方 / 滑鼠離開物件上方
  - etc : mousedown(), mouseup(), hover(), focus(), blur()
  - on(): 可以附上多個方法, 範例為附上mouseenter, mouseleave, click
```
$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  }, mouseleave: function(){
    $(this).css("background-color", "lightblue");
  }, click: function(){
    $(this).css("background-color", "yellow");
  }

});
```

在 <a href="link" target="_blank"></a> 的中加入 event trigger 的話，會觸發 click 事件同時也觸發開啟連結

<a href="http://learn.jquery.com">Learn jQuery</a>
<script>
// 會觸發 click 事件同時也觸發開啟連結
$("a").get(0).click();
$("a")[0].click()
// 會觸發 a 的 click 事件但是不會觸發到開啟連結
$("a").click()
$("a").trigger("click")
</script>

Ref: Triggering Event Handlers

Effects

Hide/Show, Fade, Slide, Animate, stop(), Callback, Chaining
- hide() / show() / toggle(): 隱藏, 顯示, 隱藏跟顯示交替
- fadeIn() / fadeOut() / fadeToggle() : 漸漸顯現 / 淡出 / 顯現淡出交替
- fadeTo(): 不完全淡出. 範例: 淡出速度"慢" 程度(0~1)到 "0.15"
```
$("#div1").fadeTo("slow" ,0.15);
```
- Slide: slideDown(), slideUp()
- slideToggle(): 先向下再向上
除了w3schools的 , etc...方法外, 以下是對四個方向的silde
- !SlideDown: .animate({ height: 'show' });
- !SlideUp: .animate({ height: 'hide });
- !SlideRight: .animate({ width: 'show' });
- !SlideLeft: .animate({ width: 'hide' });
animation(): 客製化動畫特效
- 模組: $(selector).animate({params},speed,callback);
- Relative Values: 可以用連加、連減 etc ... 調整 css 裡面的屬性, 範例
```
$("button").click(function(){
  $("div").animate({
    left: '250px',height: '+=150px',width: '+=150px'
  });
}); 
```
Pre-defined Values: 除了可以填入數值，也可以填入 show, hide, toggle，範例
```
$("button").click(function(){
  $(".box").animate({
    width: 'toggle'
  });
});
```

Queue Functionality: jQuery 執行從上到下一步一步執行，範例

$("button").click(function(){
  var div = $("div");div.animate({left: '100px'}, "slow");    div.animate({fontSize: '3em'}, "slow");
});

stop(): 暫停動畫的進行，範例: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_stop_slide
Callback 功能:
- 情況: JS執行程式碼是一行一行執行，如果執行下一行的時候，上一行的特效還沒結束，下一行的特效卻開始執行，尤其是上下的特效是有關聯的時候，會造成錯誤。Callback()是為了解決這種情況的設計。
- 範例: $(selector).hide(speed,callback);
```
$("button").click(function(){
  $("p").hide("slow", function(){
    alert("The paragraph is now hidden");
  });

});
```
Chaining: 可以在同一行執行兩個以上的方法，先執行先寫的，在執行後面的
```
$("#p1").css("color", "red")
  .slideUp(2000).slideDown(2000);
```

HTML

Get : 拿取元素的內容

text(): 文字部分的內容(不包括tag)

<body>
<p>This is some <b>bold</b> and <i>italic</i> text.</p>
<script>
$(document).ready(function(){
  alert($("p").text());//result: This is some bold and italic         text.alert($("p").html());//result: <p>This is some <b>bold</    b>     and <i>italic</i> text.</p>
});
</script>
</body>

html(): 全部的內容(包括tag)

val(): 跟form 有關的tag (input, button, select, option, textarea, label, etc...) 的值

<body>
Name: <input type="text" value="Mickey Mouse">
<script>
$(document).ready(function(){
  $("input").val();//result: "Mickey Mouse"$("input").attr("val");//        result: "Mickey Mouse"
});
</script>
</body>

attr(): 拿取元素的屬性

Set

$("p").text(""): 設定<p>文字內容為""
$("p').html(""): 設定<p>的DOM輸出
$("input").val(""): 設定<input>的 value 屬性

<body>
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></       p>
<button id="btn1">Set Text</button>
<button id="btn2">Set HTML</button>
<button id="btn3">Set Value</button>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text("Hello world!");
  });$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
  });$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
  });
});
</script>
</body>

$("a").attr("href", "https://www.104.com.tw"): 設定<a>的屬性 href 值為"!https://www.104.com.tw"，範例為同時設定兩個屬性
```
$("#w3s").attr({
  "href" : "https://www.w3schools.com/jquery","title" : "W3Schools     jQuery Tutorial"
});
```
Note: Callback function for attr():
- Callback有兩個參數，i 為index of the current element, origValue 為the original (old) attribute value
```
$("button").click(function(){
  $("#w3s").attr("href", function(i, origValue){
    return origValue + "/jquery";
  });
});
```

Add Element

.append(): 在被選到的tag的child裡面，增加最後一個child
.prepend(): 在被選到的tag的child裡面，增加第一個child
增加多的元素的範例:

function appendText() {
  var txt1 = "<p>Text.</p>";               
// Create element with HTML  var txt2 = $("<p></p>").text("Text.");  
// Create with jQueryvar txt3 = document.createElement("p");  
// Create with DOMtxt3.innerHTML = "Text.";$("body").append(txt1,     txt2, txt3);
// Append the new elements
}

.after(): 增加在被選到的tag 的前面
.before(): 在被選到的tag 的後面
增加多的元素的範例:

function afterText() {
  var txt1 = "<b>I </b>";
// Create element with HTML  var txt2 = $("<i></i>").text("love ");
// Create with jQueryvar txt3 = document.createElement("b");
// Create with DOMtxt3.innerHTML = "jQuery!";$("img").after(txt1,     txt2, txt3);          
// Insert new elements after <img>
}

Remove Elements / Content
- .remove();: 刪除被選到的tag，包括自己與自己裡面的child
- $("p").remove(".test, .demo"):: 只刪除 class 為 test 與 demo 的
- .empty();: 刪除被選到的tag的child，不包括自己
CSS
- .addClass("")(增加""的class), .removeClass("")(移除""的class), .toggleClass("")(增加一次再移除一次""的class)
- .css("propertyname","value");: 設定css 的屬性，以下一次設定多個的範例:
```
$("p").css({"background-color": "yellow", "font-size": "200%"});
```
關於寬, 高的設定: width(), height(), innerWidth(), outerWidth(), innerHeight(), outerHeight() Dimensions

Traversing

jQuery Traversing: 利用樹狀結構的相對位子去找 tag

ancestor: 向上尋找
- .parent(): 向上一層
- .parents(): 所有上層
- .parents(""): 往上層找到""，路徑層不包括
- .parentUntil(""): 向上層找直到""，包括所有路徑層，不包含""
descendant: 向下尋找
- .children(): 下一層的所有tag
- $("div").children("p.first");: 下一層的第一個
- .find("span"): 往下找所有
- .$("div").find("*");: 往下的所有路徑
siblings: 在同一層尋找
- .siblings(): 同一層的所有tag
- .next() / .prev(): 同一層，被選的tag 的下/上一個tag
- .nextAll() / .prevAll(): 同一層，被選的tag 的下/上所有的tag
- .nextUntil("") / .prevUntil(""): 同一層，被選的tag 與 "" 下/上中間所有的tag，不包含""
Filtering
- .first() / .last():被選的tag 的下層第一個 / 最後一個 tag
- .eq(1): 被選的tag 的下層第 2 個tag (index 從0開始算)的所有元素，包含第2個tag以下的所有內容
- .filter(""): 可以根據id, class, tag 的名字選擇被選的tag 以下'''相同'''名字的 tag
- .not(): 可以根據id, class, tag 的名字選擇被選的tag 以下'''不相同'''名字的 tag

AJAX

AJAX = Asynchromous Javascript And XML
當從server拿資料時，可以將資料更新在頁面，而不用重新下載整個網頁
範例: Gmail, Google Maps, Youtube, Facebook tabs, etc...

$(selector).load(URL,data,callback);: 從server拿回資料，並把資料放入被選擇的 tag
- URL: 下載資料的地方
- data: specifies a set of querystring key/value pairs to send along with the request.??
- NOTE: Querystring是ASP.NET狀態管理機制中傳遞資料方式之一
- callback: 當資料下載後，才會開始執行的function
- callback 參數: function(responseTxt, statusTxt, xhr)
- responseTx: 當下載成功後，拿到的資料
- statusTxt: 下載狀態，判斷有沒有下載成功
- xhr: XMLHttpRequest object ??
$.get(URL,callback);
$.post(URL,data,callback);

NOTE: Javascript的預設是Sync
非同步(Asynchronous)與同步(Synchronous)的差異

noConflict()

當jQuery 為Javascript 的framework 之一，還有其他像是 Angular etc...，如果 $的符號衝突了?用$.noConflict(): 釋放出$，這樣在使用jQuery時就變成 jQuert("")
範例:

$.noConflict();
jQuery(document).ready(function(){

  jQuery("button").click(function(){
    jQuery("p").text("jQuery is still working!");
  });
});

其他解法: https://www.w3schools.com/jquery/jquery_noconflict.asp

小測驗

http://www.w3school.com.cn/quiz/quiz.asp?quiz=jquery

"this" in ES6 arrow function

(keyword: lexical this)
arrow function 中的 this 會指向定義函數時的參考物件。

$(document).ready(() => {
  $('h1').click(() => {
    $('h1').html('World'); // ok
  });
});

$(document).ready(() => {
  $('h1').click(function() {
    $(this).html('World'); // ok, this指到h1 element
  });
});

$(document).ready(() => {
  $('h1').click(() => {
    $(this).html('World'); // error, this指到window
  });
});

$(document).ready(function() {
  $('h1').click(() => {
    $('h1').html('World'); // error, this指到document
  });
});

$(document).ready(() => {
  $('h1').click((event) => {
    $(event.target).html('World'); // ok, 直接調用target
  });
});

Ref: