jQuery 簡單介紹

JavaScript 的 Library，jQuery 主要是用在 DOM 文件操作，包含快速選取元素(Element)與執行事件，例如隱藏元素、顯示元素等等。此外 jQuery 的核心程式還加強了非同步傳輸(AJAX)以及事件(Event)的功能。

使用 jQuery

jQuery 用 $(selector).action() 格式，指派元素到指定的事件。詳細來說， $(selector) 會呼叫 jQuery 選取 selector 元素，並指派它到稱作 .action() 事件。回傳值是 Array。可以直接用 for 或是 foreach 迴圈去處理。

e.g.

$("div").addClass("special");

範例是將先前所選取到的 <div> 元素都加上一個名為 “special” 的 class。

記號 $ 是被當成 jQuery 的縮寫。等同，

jQuery("div").addClass("special");

另一個例子

Code

$(document).ready(function(){  
   // 等所有的 HTML 都載入，且 DOM 都以建構完成執行 { } 內容，將所有 function();
   // 放入裡面是常見做法
  alert("Hello World!");         
  $("#blackBox").hide();
});

上面這段 jQuery 程式碼，會執行與這段原生 JavaScript 程式碼相同的事情：

Code

window.onload = function() {
  alert( "Hello World!" );
  document.getElementById("blackBox").style.display = "none";
};

選取元素

選取所有 `<div>` 元素

$("div")

$("#menu")

選取 class 為 content 的元素

$(".content")

選取 id 為 body 的 `<div>`

$("div#body")

選取 class 為 content 的 `<div>` 所包住的所有內層的 `<p>`

$("div.content p")

取得第index個子節點: eq(index)

$('ul').children.eq(3).text(); //取得第三個子節點

利用屬性內容找節點

$("input[name='A']"); //找出 name 屬性為 ‘A’ 的 input

操作元素

讀取和修改一個元素的HTML內容: html()

若是多個元素，只能讀取第一個元素的內容

讀取 <p> 元素的內容

$("p").html();

修改 <p> 元素的內容

$("p").html("Hello <b>world</b>!");

讀取和修改一個元素的純文本內容: text()

讀取 Element 的文本內容

$("Element").text();

修改 Element 的文本內容，Element 的 content 是 Hello <b>world</b>! 是文字格式，不是標籤元素

$("Element").text("Hello <b>world</b>!");

讀取和修改一個表單元素的 value 值: val()

若是多個元素，只能讀取第一個元素的內容。要使用 for 或 each 來讀取多個。

讀取

Code

//  讀取每一個被 checked 的值
$('input:checkbox[name=size]:checked').each(function()
  {
   alert($(this).val());
  });

修改

$("Element").val(value);

元素節點末端加入純文字或 HTML 語法(增加元素): append

Code

1 2	// 選取所有有 target 屬性的 `<a>`，並且在其節點下加入一段文字。 $("a[target]").append("(Opens in New Window)");

元素節點前端加上純文字或 HTML 語法(增加元素): prepend()

$(div).prepend("first");

修改 css 屬性: css

.css('border','3px solid red')

Code

$("#body").css({  
  border: "1px solid green",  
  height: "40px"  
});

class的新增: addClass()

$("#test").addClass("aaa");

class的移除: removeClass()

$("#test").removeClass("aaa");

移除多個

$("#test").removeClass("aaa bbb");

事件

事件寫法有兩種

$(selector).click(function(){})

$(selector).on('click', function(){})

// 動態綁定
$(selector).on('click', selector, function(){ })

ps. 補充有說明兩種的不同

點選元素: click

Code

//當 user 點選 id 為 open 的連結時，顯示 id 為 menu 的區塊，並回傳 false 避免瀏覽器真的換頁。
$("a#open").click(function() {  
  $("#menu").show();  
  return false;  
});

html

<style type="text/css">  
  #menu {display: none}  
</style>  
<a id="open" href="#">menu</a>  
<ul id="menu">  
  <li><a href="#1">a</a></li>  
  <li><a href="#2">b</a></li>  
  <li><a href="#3">c</a></li>  
</ul>

失焦並且內容改變: change()

聚焦: focus()

Code

1
2
3

$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

失焦(滑鼠游標移開): blur()

Code

1
2
3

$("input").blur(function(){
  $("input").css("background-color","#D6D6FF");
});

加上鍵值: keyup()

Code

('#target').keyup(function(event) {
if (event.keyCode == '13') {
  event.preventDefault();
  ...
  }
  ...
})

表單送出: submit

Code

//在網頁上的表單送出時加入一個判斷，如果 username 這個欄位是空值的話，就顯示 help 這個區塊內的文字。
$("form").submit(function() {  
  if ($("input#username").val() == "")  
    $("span.help").show();  
});

html

<style type="text/css">  
  .help {display: none}  
</style>  
<form>  
  <label for="username">請輸入姓名</label>  
  <input type="text" id="username" name="username" />  
  <span class="help">此欄位為必填</span>  
</form>

布幕動態效果: slideDown

Code

$("#menu").slideDown("fast");

html

<style type="text/css">  
  #menu {display: none}  
</style>  
<ul id="menu">  
  <li><a href="#1">a</a></li>  
  <li><a href="#2">b</a></li>  
  <li><a href="#3">c</a></li>  
</ul>

animate 函數

Code

//將所有的 <div> 漸變為寬 300px、文字與邊界寬 20px
$("div").animate({  
    width: '300px',  
    padding: '20px'  
  }, 'slow');  

HTML

<div style="width: 100px; border: solid 1px red;">  
  Hello world!  
</div>

顯示: show()

$('.target').show(); //顯示target

隱藏: hide()

Code

/*所有的 <div> 以 0.5 秒的動態效果隱藏後，再以 0.5 秒的動態效果顯示。hide() 的第二個參數就是一個 callback 函數，其中 $(this) 是原本程式所處理的各個元素。*/
$("div").hide(500, function(){  
  // $(this) 是每一個別的 <div>  
  $(this).show(500);  
});  

HTML

<div style="width: 100px; border: solid 1px red;">  
  Hello world!  
</div>  
<div style="width: 100px; border: solid 1px red;">  
  jsGears.com!  
</div>

切換: toggle()

toggle() 方法用於綁定兩個或多個事件處理器函式，以響應被選元素的輪流的 click 事件。該方法也可用於切換被選元素的 hide() 與 show() 方法。

Code

// 切換背景色
$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

Code

// 按下 Hello 元素第一次會文字會是綠，第二次會是藍色
$('#mydiv').toggle(
	function(){
	  $(this).css({"color": "green"});
	},
	function(){
	  $(this).css({"color": "blue"});
	},
);

html 

<div id="mydiv">Hello</div>

Ajax

ajax

Code

$.ajax({
type: "GET", //指定method
 url: 'ajax/test.html',
 success: function(data) {
  $('.result').html(data);
  alert('Load was performed.');
  }
});

取得 HTML: load()

$("#htmDoc").load("test.html");

取得 XML 格式的資料

Code

$.get("test.xml",function(xml){
var text = $("title",xml).text();
$("#xmlDoc").html(text);
});

取得 TXT 格式的資料

Code

1
2
3

$.get("test.txt",function(txt){
alert(txt);
});

取得 JSON 格式的資料: getJSON()

Code


$.getJSON("test.json", function(data){  
  for (var idx in data)  
    $("#menu").append("<li>" + data[idx] + "</li>");  
});  

HTML

<ul id="menu">  
  <li>a</li>  
</ul>  

test.json

[  
  "Hello world!",   
  "jsGears.com!"  
]

連續使用函數

如果想將所有的 <div> 隱藏，並修改文字顏色，再用布幕動態效果顯示出來的話，可用下方程式碼處理：

Code

1
2
3

$("div").hide();  
$("div").css("color", "green");  
$("div").slideDown();

上方三行程式碼可簡化成

$("div").hide().css("color", "blue").slideDown();

另一個範例：

選取第三個 <li> 加上 5px 的紅色邊框，並在 <li> 裡面加上文字 A
$('li:nth-child(3)').css('border','5px solid red').append('A');

jQuery plugin 應用

下載 jQuery 的 js 和要使用的 plugin
打開 HTML 檔，在 <header> 加上 <link>，分別為套件的 *.css 與自己的 *.css 檔

e.g.

<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

在 body 加上官網上給的使用語法

在 </body> 之前加上 jquery.min.js、套件的*.js檔與套件使用的 js 語法。

e.g.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

依照套件的教學及範例，基本上就可以使用了。

document ready 事件

有時，在網頁下載完成後，要立即執行一些程式的話。可以用 window.onload 來處理，或是直接在 <body> 標籤上加入 onload 的事件處理函式。 jQuery 提供了 .ready() 來處理這類情況。

e.g.

Code

// 網頁下載完成後立即執行 alert()
$(document).ready(function() {  
  alert('Hello');  
});

jQuery 的 document ready 事件是模擬 W3C DOM 標準的 DOMContentLoaded 事件，DOMContentLoaded 和 window.onlad 的差異在於前者是在 DOM 文件下載完成後觸發，而後者是文件和所有文件內的元件，包含圖檔等等全部下載完成後才會觸發。因此通常 window.onload 的發生時間要比 DOMContentLoaded 晚一點。

而 DOMContentLoaded 和 window.onload 的另一個差異在於 window.onload 並沒有辦法多次指定不同的函數來執行，最後指定的那個函數會複寫掉先前的。但 jQuery 的 document ready 函數並不會有覆寫的情況發生。

document ready 函數也有更精簡的寫法，如下：

Code

1
2
3

$(document).ready(function() {  
  alert('Hello');  
});

可改寫成

Code

1
2
3

$(function() {  
  alert('Hello');  
});

別名

jQuery 本身提供一個函式來避免 $() 的衝突，使用 jQuery 函式前，加上 jQuery.noConflict();

Code

jQuery.noConflict();
$(document).ready(function() {  
  alert('Hello');  
});

或是另外設定名稱

Code

const $j = jQuery.noConflict();
$j(document).ready(function() {  
  alert('Hello');  
});

補充

.click(function()) 及.on(‘clcik’,function())，這兩者間到底有什麼不一樣？

Code

<ul>
   <li><span>click me</span></li>
   <li><span>click me</span></li>
   <li><span>click me</span></li>
</ul>

.click(function())
若是使用$('li span').click(function(){alert('hi')});的話，它只對於你現在 HTML 上所指定的全部元素進行事件綁定，
如果你在後來透過 jQuery 或其他方式所增加的元素都不會出現在這個事件所綁定的範圍裡，所以 .click 是沒有辦法幫助你做到動態的事件綁定。

.on
基本上 .click 能做到的事情，透過.on(‘click’)的方式一樣都能做到，但是 .on() 能做到動態事件綁定，以上述的例子而言，我們可能會寫 $('li span').on('click',function(){alert('hi')});
這時你會發現，在動態事件這種方式會跟上述的.click事件處理方式一樣沒反應，那到底 .on() 要怎麼做到動態事件綁定？.on()方法有提供第二個參數「childSelector」
$('li').on('click','span',function(){alert('hi')}); childSelector 的原理就是事件冒泡 event bubbling ，在你點擊子元素 span 時，子元素 span 一樣是在父元素 li 裡面，所以你樣是有點擊到父元素 li，而事件的傳遞會從子元素先發生接著向父元素傳遞，但是實際上我們這邊事件一樣是綁定在父元素 li 上，所以它會再去而找到相對應的子元素，來進行事件處理。這兩者間最大的差異，大概就在動態事件處理上，當然還有像是一些小差異像是

.on() 所佔用的記憶體會比.click還少
.on() 為Namespaced Events，可以做到事件命名的管理。

一般來說，如果不會用到 append … 等這些插入元件控制用的語法。使用第三個程式寫法就行了，不需要用到 on 處理。在某些情況下，on 最好還是少用。不得已非要用到的情況才去使用它會比較好。

blur 事件會觸發兩次

jQuery 解決使用 blur 事件時，會觸發兩次的問題 (好像用 focus 事件也會)。因為在綁定 onblur 事件的時候都會被觸發兩次，原因不明…..網路上有找到解法，但好像不是用 on 來綁，是用一般的 blur(無法動態綁定)，若是 dom 都是動態產生的，這個沒法用。

可用此方式試試

e.g.

$('#gradeUpdate').blur()

改成這樣就可以了

$('#gradeUpdate')[0].blur()

參考：
https://jquery.com/
https://www.j2h.tw/bbs/bbs16/511.html
https://developer.mozilla.org/zh-TW/docs/Glossary/jQuery
https://ithelp.ithome.com.tw/articles/10197512
http://greenkm.blogspot.com/2016/03/jquery_8.html
https://jjnnykimo.pixnet.net/blog/post/21585448
https://felixx.pixnet.net/blog/post/36966403
http://shioulo.eu5.org/node/256
https://sweeteason.pixnet.net/blog/post/42677633-jquery-%E8%A7%A3%E6%B1%BA%E4%BD%BF%E7%94%A8-blur-%E4%BA%8B%E4%BB%B6%E6%99%82%EF%BC%8C%E6%9C%83%E8%A7%B8%E7%99%BC%E5%85%A9%E6%AC%A1%E7%9A%84%E5%95%8F
http://skaih.logdown.com/posts/712464-jquery-click-on-the-where-different
https://ithelp.ithome.com.tw/questions/10191601
https://www.w3cplus.com/blog/134.html

jQuery 簡單介紹

使用 jQuery

選取元素

選取所有 <div> 元素

選取 id 為 menu 的元素

選取 class 為 content 的元素

選取 id 為 body 的 <div>

選取 class 為 content 的 <div> 所包住的所有內層的 <p>

取得第index個子節點: eq(index)

利用屬性內容找節點

操作元素

讀取和修改一個元素的HTML內容: html()

讀取和修改一個元素的純文本內容: text()

讀取和修改一個表單元素的 value 值: val()

元素節點末端加入純文字或 HTML 語法(增加元素): append

元素節點前端加上純文字或 HTML 語法(增加元素): prepend()

修改 css 屬性: css

class的新增: addClass()

class的移除: removeClass()

事件

點選元素: click

失焦並且內容改變: change()

聚焦: focus()

失焦(滑鼠游標移開): blur()

加上鍵值: keyup()

表單送出: submit

布幕動態效果: slideDown

animate 函數

顯示: show()

隱藏: hide()

切換: toggle()

Ajax

ajax

取得 HTML: load()

取得 XML 格式的資料

取得 TXT 格式的資料

取得 JSON 格式的資料: getJSON()

連續使用函數

jQuery plugin 應用

document ready 事件

別名

補充

.click(function()) 及.on(‘clcik’,function())，這兩者間到底有什麼不一樣？

blur 事件會觸發兩次

選取所有 `<div>` 元素

選取 id 為 body 的 `<div>`

選取 class 為 content 的 `<div>` 所包住的所有內層的 `<p>`