下載
http://jquery.com/download/
http://jqueryui.com/download/
-----------------------------------------------------------------------------------------------------
google ajax library
https://developers.google.com/speed/libraries/?csw=1#jquery
使用方式 jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
使用方式 jqueryui
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
$('#container a'); 取得 id 為 container 之元素其內部的所有連結 <a>
$('div > p'); 取得 div 父元素其下所有的 p 子元素
$('tr:first'); 取得第一個找到的 tr 標籤元素
$('input[name="email"]')
$('input:radio[name="bar"]:checked').val() 取得 radio 欄位的選取值
所有input的name只要是 nextSign 開頭的都抓出來
$('form[name="form1"] input[name^="nextSign"]').each(function(){
alert( $(this).val() );
})
input[name*="nextSign"] 只要出現value關鍵字
input[name$="nextSign"] value關鍵字結尾
input[name!="nextSign"] value關鍵字不能出現
-----------------------------------------------------------------------------------------------------
.css("color","red")
.attr("title","test") removeAttr("title")
.addClass("c1 c2") removeClass("c1 c2")
.val("test")
.after($("<p>test</p>"))
.html()
.text()
$('.inner').wrap('<div class="new"></div>') - 各別包住匹配到的元素
$('.inner').wrapAll('<div class="new" />') - 一起包住所有匹配到的元素
$('.inner').wrapInner('<div class="new"></div>') - 各別包到匹配的元素裡面
$('.hello').empty() - 刪除匹配到的元素其所有子節點
$('.hello').remove() $('div').remove('.hello') - 從 DOM 中刪除所有匹配到的元素
$('.hello').clone().appendTo('.goodbye') 複製匹配元素的副本, 如果想要連綁定的事件一起複製，則加個 true 參數 .clone(true)
$('p').height(100)
$('p').width(100)
$('p').eq(2); 取得匹配的第 3 個元素
$('p').not('.green, #blueone') 刪除掉類別為 green 的及 id 為 blueone 的元素
-----------------------------------------------------------------------------------------------------
插入內容
.append(content) - 在每個匹配的元素內部最後面加入內容 (內部插入)
.prepend(content) - 在每個匹配的元素內部最前面加入... (內部插入)
.before(content) - 在每個匹配的元素前面加入... (外部插入)
.after(content) - 在每個匹配的元素後面加入... (外部插入)
-----------------------------------------------------------------------------------------------------
$("div").filter("#div1").css('background-color', 'blue')
$('div').filter(function(index) {
if(index % 2 == 0){ //雙數
return true;
}
}).css('background-color', 'blue')
$('div').filter(function(index) {
return $("b", this).length == 1; //with 'b' tag</b>
}).css('background-color', 'blue')
-----------------------------------------------------------------------------------------------------
將 li 的父元素 (可能是 <ul> 或 <ol>) 背景改為紅色
$('li').parent().css('background-color', 'red')
將 li 的所有祖先元素背景都改為紅色 (直到 <html> 元素)
$('li').parents().css('background-color', 'red')
將 li 的所有 <p> 祖先元素背景都改為紅色
$('li').parents('p').css('background-color', 'red')
將有 .selected class 的 div 所有子元素顏色改為藍色
$('div').children('.selected').css('color', 'blue')
$('p').find('span:last') .find() 跟 .children() 有點像，差別在 .children() 只會找下一層的元素而已
取得全部的子元素 (含 text nodes)
$("div").contents().filter("em").wrap("<b/>")
-----------------------------------------------------------------------------------------------------
.bind("click",function(){})是針對HtmlElement綁定事件
.live("click",function(){})是對HtmlDocument綁定事件
-----------------------------------------------------------------------------------------------------
事件 事件處理函數中的 this 為被觸發的「DOM元素」，而非 jQuery 物件
$('p').click(function() {
$(this).css('background-color', 'blue');
});
var handler = function() { alert('hi'); };
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);
$('#foo').bind('myEvent', doSomething)
$('#foo').trigger('myEvent');
$('#foo').trigger('click')
只是觸發 "一次" 事件
$('#foo').one('click', function() {
alert('This will be displayed only once.');
});
從 jQuery 1.7 開始 .on() 是主要推薦使用的事件處理綁定函式，也用來取代 .bind(), .live() 和 .delegate()
==================
$('#dataTable tbody').on('click', 'tr', function() {
console.log( $(this).text() );
});
$('p').off('click'); 移除所有 p 元素的 click 事件處理
事件別名
$('#foo').on('click.name', function() { alert(1); })
$('#foo').trigger('.name')
$('#foo').off('.name')
-----------------------------------------------------------------------------------------------------
$(function(){}) 等同
$(document).ready(function(){})
-----------------------------------------------------------------------------------------------------
事件 觸發條件
blur 物件失去焦點時
change 物件內容改變時
click 滑鼠點擊物件時
dblclick 滑鼠連點二下物件時
error 當圖片或文件下載產生錯誤時
focus 當物件被點擊或取得焦點時
keydown 按下鍵盤按鍵時
keypress 按下並放開鍵盤按鍵後
keyup 按下並放開鍵盤按鍵時
load 網頁或圖片完成下載時
mousedown 按下滑鼠按鍵時
mousemove 介於over跟out間的滑鼠移動行為
mouseout 滑鼠離開某物件四周時
mouseover 滑鼠離開某物件四周時
mouseup 放開滑鼠按鍵時
resize 當視窗或框架大小被改變時
scroll 當捲軸被拉動時
select 當文字被選取時
submit 當按下送出按紐時
beforeunload 當使用者關閉 (或離開) 網頁之前
unload 當使用者關閉 (或離開) 網頁之後
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
動畫
顯示/隱藏
$('p').show(5000);
$('p').hide('fast')
輪流顯示
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
$('button').click(function() {
$('p').toggle();
});
滑動顯示/隱藏
$('p').slideDown(5000);
$('p').slideUp(3000, function() {
alert('隱藏完成')
});
淡入淡出
$('p').fadeIn('slow')
$('p').fadeOut(3000)
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
Ajax
$('#result').load('ajax/test.html') 載入 ajax/test.html 網頁的內容放到 #result 中
$('#result').load('ajax/test.html #container') 將 ajax/test.html 網頁裡面的 #container 元素內容，載入到 #result 中
$.ajax({
type: 'POST',
url: 'some.php',
data: {name: 'John', location: 'Boston'},
success: function(msg) {
alert('Data Saved: ' + msg);
}
});
var jqxhr = $.ajax('example.php')
.done(function() {
alert('成功');
})
.fail(function() {
alert('失敗');
})
.always(function() {
alert('結束');
});
http://jquery.com/download/
http://jqueryui.com/download/
-----------------------------------------------------------------------------------------------------
google ajax library
https://developers.google.com/speed/libraries/?csw=1#jquery
使用方式 jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
使用方式 jqueryui
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
$('#container a'); 取得 id 為 container 之元素其內部的所有連結 <a>
$('div > p'); 取得 div 父元素其下所有的 p 子元素
$('tr:first'); 取得第一個找到的 tr 標籤元素
$('input[name="email"]')
$('input:radio[name="bar"]:checked').val() 取得 radio 欄位的選取值
所有input的name只要是 nextSign 開頭的都抓出來
$('form[name="form1"] input[name^="nextSign"]').each(function(){
alert( $(this).val() );
})
input[name*="nextSign"] 只要出現value關鍵字
input[name$="nextSign"] value關鍵字結尾
input[name!="nextSign"] value關鍵字不能出現
-----------------------------------------------------------------------------------------------------
.css("color","red")
.attr("title","test") removeAttr("title")
.addClass("c1 c2") removeClass("c1 c2")
.val("test")
.after($("<p>test</p>"))
.html()
.text()
$('.inner').wrap('<div class="new"></div>') - 各別包住匹配到的元素
$('.inner').wrapAll('<div class="new" />') - 一起包住所有匹配到的元素
$('.inner').wrapInner('<div class="new"></div>') - 各別包到匹配的元素裡面
$('.hello').empty() - 刪除匹配到的元素其所有子節點
$('.hello').remove() $('div').remove('.hello') - 從 DOM 中刪除所有匹配到的元素
$('.hello').clone().appendTo('.goodbye') 複製匹配元素的副本, 如果想要連綁定的事件一起複製，則加個 true 參數 .clone(true)
$('p').height(100)
$('p').width(100)
$('p').eq(2); 取得匹配的第 3 個元素
$('p').not('.green, #blueone') 刪除掉類別為 green 的及 id 為 blueone 的元素
-----------------------------------------------------------------------------------------------------
插入內容
.append(content) - 在每個匹配的元素內部最後面加入內容 (內部插入)
.prepend(content) - 在每個匹配的元素內部最前面加入... (內部插入)
.before(content) - 在每個匹配的元素前面加入... (外部插入)
.after(content) - 在每個匹配的元素後面加入... (外部插入)
-----------------------------------------------------------------------------------------------------
$("div").filter("#div1").css('background-color', 'blue')
$('div').filter(function(index) {
if(index % 2 == 0){ //雙數
return true;
}
}).css('background-color', 'blue')
$('div').filter(function(index) {
return $("b", this).length == 1; //with 'b' tag</b>
}).css('background-color', 'blue')
-----------------------------------------------------------------------------------------------------
將 li 的父元素 (可能是 <ul> 或 <ol>) 背景改為紅色
$('li').parent().css('background-color', 'red')
將 li 的所有祖先元素背景都改為紅色 (直到 <html> 元素)
$('li').parents().css('background-color', 'red')
將 li 的所有 <p> 祖先元素背景都改為紅色
$('li').parents('p').css('background-color', 'red')
將有 .selected class 的 div 所有子元素顏色改為藍色
$('div').children('.selected').css('color', 'blue')
$('p').find('span:last') .find() 跟 .children() 有點像，差別在 .children() 只會找下一層的元素而已
取得全部的子元素 (含 text nodes)
$("div").contents().filter("em").wrap("<b/>")
-----------------------------------------------------------------------------------------------------
.bind("click",function(){})是針對HtmlElement綁定事件
.live("click",function(){})是對HtmlDocument綁定事件
-----------------------------------------------------------------------------------------------------
事件 事件處理函數中的 this 為被觸發的「DOM元素」，而非 jQuery 物件
$('p').click(function() {
$(this).css('background-color', 'blue');
});
var handler = function() { alert('hi'); };
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);
$('#foo').bind('myEvent', doSomething)
$('#foo').trigger('myEvent');
$('#foo').trigger('click')
只是觸發 "一次" 事件
$('#foo').one('click', function() {
alert('This will be displayed only once.');
});
從 jQuery 1.7 開始 .on() 是主要推薦使用的事件處理綁定函式，也用來取代 .bind(), .live() 和 .delegate()
==================
$('#dataTable tbody').on('click', 'tr', function() {
console.log( $(this).text() );
});
$('p').off('click'); 移除所有 p 元素的 click 事件處理
事件別名
$('#foo').on('click.name', function() { alert(1); })
$('#foo').trigger('.name')
$('#foo').off('.name')
-----------------------------------------------------------------------------------------------------
$(function(){}) 等同
$(document).ready(function(){})
-----------------------------------------------------------------------------------------------------
事件 觸發條件
blur 物件失去焦點時
change 物件內容改變時
click 滑鼠點擊物件時
dblclick 滑鼠連點二下物件時
error 當圖片或文件下載產生錯誤時
focus 當物件被點擊或取得焦點時
keydown 按下鍵盤按鍵時
keypress 按下並放開鍵盤按鍵後
keyup 按下並放開鍵盤按鍵時
load 網頁或圖片完成下載時
mousedown 按下滑鼠按鍵時
mousemove 介於over跟out間的滑鼠移動行為
mouseout 滑鼠離開某物件四周時
mouseover 滑鼠離開某物件四周時
mouseup 放開滑鼠按鍵時
resize 當視窗或框架大小被改變時
scroll 當捲軸被拉動時
select 當文字被選取時
submit 當按下送出按紐時
beforeunload 當使用者關閉 (或離開) 網頁之前
unload 當使用者關閉 (或離開) 網頁之後
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
動畫
顯示/隱藏
$('p').show(5000);
$('p').hide('fast')
輪流顯示
<button>Toggle</button>
<p>Hello</p>
<p style="display: none">Good Bye</p>
$('button').click(function() {
$('p').toggle();
});
滑動顯示/隱藏
$('p').slideDown(5000);
$('p').slideUp(3000, function() {
alert('隱藏完成')
});
淡入淡出
$('p').fadeIn('slow')
$('p').fadeOut(3000)
-----------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------
Ajax
$('#result').load('ajax/test.html') 載入 ajax/test.html 網頁的內容放到 #result 中
$('#result').load('ajax/test.html #container') 將 ajax/test.html 網頁裡面的 #container 元素內容，載入到 #result 中
$.ajax({
type: 'POST',
url: 'some.php',
data: {name: 'John', location: 'Boston'},
success: function(msg) {
alert('Data Saved: ' + msg);
}
});
var jqxhr = $.ajax('example.php')
.done(function() {
alert('成功');
})
.fail(function() {
alert('失敗');
})
.always(function() {
alert('結束');
});