jQuery筆記，jquery
jQuery是一個JavaScript函數庫
jQuery庫包含也上特性：
1、HTML元素選取
2、HTML元素操作
3、CSS操作
4、HTML事件函數
5、JAVASCRIPT特效和動畫
6、AJAX
7、Utilites
JavaScript是HTML5以及所有現代瀏覽器中的預設指令碼語言！
使用Google或微軟的jQuery，有一個很大的優勢：
許多使用者在訪問其他網站時，已經從Google或微軟載入過jQuery。所有結果是，當他們訪問的網站時，會從緩衝中載入jQuery，這宋可以減少載入時間。同時，大多數CDN都可以確保當使用者向其請求檔案時，會從離使用者最近的伺服器上返迴響應，這樣也可以提高載入速度。
jQuery文法執行個體
$(this).hide() 隱藏當前的HTML元素。
$("#test").hide() 隱藏id="test"的元素。
$("p").hide() 隱藏所有<p>元素。
$(".test").hide() 隱藏所有class="test"的元素。
jQuery使用的文法是XPath與CSS選擇文法的組合。
jQuery函數在一個document ready函數中，這是為了防止文檔在完全載入（就緒）之前運行jQuery代碼。如果在文檔沒有完全載入之前就運行函數，操作可能失敗。
如：1、試圖隱藏一個不存在的元素
2、獲得未完全載入的映像的大小
jQuery元素選取器和屬性選取器允許您通過標籤名、屬性名稱或內容對HTML元素進行選擇。
選取器允許您對HTML元素組或單個元素進行操作。
jQuery元素選取器
jQuery使用CSS選取器來選取HTML元素。
$("p")選擇<p>元素。
$("p.intro")選取所有class="intro"的<p>元素。
$("p#demo")選取所有id="demo"的<p>元素。
jQuery屬性選取器
jQuery使用XPath運算式來選擇帶有給定屬性的元素。
$("[href]")選取所有帶有href屬性的元素。
$("[href='#']")選取所有帶有href值等於"#"的元素。
$("[href='.jpg']")選取所有href值以“.jpg”結尾的元素。
jQuery CSS選取器可用於改變HTML元素的CSS屬性
把所有P元素的背景色列改為紅色
$("p").css("backgroud-color","red");
$("ul li:first")每個<ul>的第一個<li>元素
$("href$='.jpg'")所有帶有以“.jpg”結尾的屬性值的href屬性
$("div#intro.head")id="intro"的<div>元素中的所有class=“head”的元素
jQuery名稱衝突
var jq = jQuery.noConflict()，協助您使用自己的名稱(比如jq)來代替$符號。
jQuery事件
$(document).ready(function)將函數綁定到文檔的就緒事件
$(selector).click(function)觸發或將函數綁定到被選元素的點擊事件
$(selector).dbclick(function)觸發或將函數綁定到被選元素的雙點擊事件
$(selector).click(function)觸發或將函數綁定到被選元素的點擊事件
$(selector).mouseover(function)觸發或將函數綁定到被選元素的滑鼠移至上方事件
$(selector).hide(speed,callback);speed參數規定隱藏/顯示的速度，可以取slow ,fast或毫秒
$(selector).show(speed,callback);callback參數是隱藏或顯示完成後所熱行的函數名稱。
jQuery，可以通過toggle()方法來切換hide()和show()方法
jQuery擁有下面四種fade方法
fadeIn()淡入
fadeOut()淡出
fadeToggle()在淡入淡出方法之間進行切換
fadeTo()允許漸層為給定的不透明度(值介於0與1)
slideDown()向下滑動元素
slideUp()向上滑動元素
slideToggle()用於向上向下滑動之間
$(selector).animate({params},speed,callback);用於建立自訂動畫
必需的params參數定義形成動畫的CSS屬性。
可選的speed參數規定效果的時間長度
可選的callback參數是動畫完成後所執行的函數名稱。
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
$(selector).stop(stopAll,goToEnd);
可選的stopAll參數規定是否應該項清除動畫隊列。
可選擇的goToEnd參數規定是否立即完成當前動畫。
Callback函數在當前動畫100%完成之後執行。
用於DOM操作的jQuery方法：
text()--設定或返回所選元素的常值內容
html()--設定或返回所選元素的內容
val()--設定或返回表單欄位的值
jQuery attr()方法用於擷取屬性值。
$("button").click(function(){
alert($("#w3s").attr("href"));
})
通過jQuery，可以很容易地添加新元素/內容
append()-在被選元素的結尾插入內容
prepend()-在被選元素的開頭插入內容
after()-在被選元素之後插入內容
before()-在被選元素之前插入內容
刪除元素
remove()-刪除被選元素（及其子項目）
empty()-從被選元素中刪除子項目
jQuery操作CSS
addClass()-向被選元素添加一個或多個類
removeClass()-從被選元素刪除一個或多個類
toggleClass()-對被選元素進行添加/刪除類的切換操作
css()-設定或返回樣式屬性
jQuery尺寸的方法
width()
height()
不包括內邊距，邊框，外邊距
innerWidth()方法返回元素的寬度
innerHeigh()方法返回元素的高度
包括內邊距
outerWidth()方法返回元素的寬度
outerHeight()方法返回元素的高度
包括內邊距的邊框
outerWidth(true)方法返回元素的寬度
outerHeight(true)方法返回元素的高度
包括內邊距，邊框和外邊距離
jQuery提供了多種遍曆DOM的方法，最大的種類是樹遍曆（tree-traversal）
向上遍曆DOM樹
這些jQuery方法很有用，它們用於向上遍曆DOM樹：
parent() 返回被選元素的直接父元素，該方法只會向上一級對DOM樹進行遍曆
返回每個<span>元素的直接父元素
$(document).ready(function(){
$("span").parent();
})
parents() 返回被選元素的所有祖先元素，它一路向上直到文檔的根項目<html>
返回所有<span>元素的所有祖先
$(document).ready(function(){
$("span").parents();
})
返回所有<span>元素的所有祖先，並且它是<ul>元素
$(document).ready(function(){
$("span").parents("ul");
})
parentsUntil()返回介於兩個給定元素之間的所有祖先元素
返回介於<span>與<div>元素之間的所有祖先元素
$(document).ready(function(){
$("span").parentsUntil("div");
})
向下遍曆DOM樹，以尋找元素的後代
children()返回被選元素的所有直接子項目
返回類名為“1”的所有<p>元素，並且它們是<div>的直接子項目
$(document).ready(function(){
$("div").children("p.1");
})
find()返回被選元素的所代元素，一路向下直到最後一個後代。
返回屬於<div>後代的所有<span>元素
$(document).ready(function(){
$("div").find("span");
})
返回<div>的所有後代
$(document).read(function(){
$("div").find("*");
})
在DOM樹中水平遍曆
siblings()返回被選元素的所有同胞元素
返回屬於<h2>的同胞元素的所有<p>元素
$(document).ready(function(){
$("h2").siblings("p");
})
next()返回被選元素的下一個周胞元素
$(document).ready(function(){
$("h2").next();
});
nextAll()返回被選元素的所有跟隨的同胞元素。
返回<h2>的所有跟隨的同胞元素
$(document).ready(function(){
$("h2").nextAll();
})
nextUntil()返回介於兩個給定參數之間的所有跟隨的同胞元素
介於 <h2> 與 <h6> 元素之間的所有同胞元素
$(document).ready(function(){
$("h2").nextUtil("h6");
})
prev()
prevAll()
prevUntil()
以上三個都是返回前面的同胞元素
jQuery遍曆-過濾
縮寫搜尋元素的範圍
first()返回被選元素的首個元素
選取首個<div>元素內部的第一個<p>元素
$(document).ready(function(){
$("div p").first();
})
last()返回被選元素的最後一個元素
選取最後一個<div>元素內部的最後一個<p>元素
$(document).ready(function(){
$("div p").last();
})
eq()返回被選元素中帶有指定索引號的元素，索引號從0開始
選擇取第二個<p>元素（索引號1）
$(document).ready(function(){
$("p").eq(1);
})
filter()允許您規定一個標準，不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回
返回帶有類名“intro”的所有<p>元素
$(document).ready(function(){
$("p").filter("intro");
})
not()返回不匹配標準的所有元素，not()方法和filter()方法相反
返回不帶有類名"intro"的所有<p>元素
$(document).ready(function(){
$("p").not("intro");
})
jQuery--AJAX簡介
AJAX是與伺服器交換資料的藝術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
AJAX=非同步javaScript和XML
不重載整個網頁的情況下，AJAX通過後台載入資料，並在網頁上進行顯示。
load() 從伺服器載入資料，並把返回的資料放入被選元素中
$(selector).load(URL,data,callback);
必需的URL 希望載入的URL
可選的data 與請求一同發送的查詢字串鍵/值對集合
可選的callback參數是load()方法完成後所執行的函數名稱
$("#div1").load("demo_test.txt"); 把檔案的內容載入到指定的<div>元素中
$("#div1").load("demo_test.txt #p1"); 把檔案中的 id="p1"的元素的內容，載入到指定的<div>元素中
callback 回呼函數可以設定不同的參數：
1 responseTxt - 包含調用成功的結果內容
2 statusTxt - 包含調用的狀態
3 xhr - 包含XMLHttpRequest對象
$.get() 通過HTTP GET請求從伺服器上請求資料
$.get(URL,callback);
必需的URL 希望請求的URL
可選的callback請求成功後所執行的函數名
下面方法從服務哭喪著臉上的一個檔案中取回資料
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data:"+data+"\nStatus:"+status);
})
})
$.post()方法通過HTTP POST請求從伺服器上請求資料
$.post(URL,data,callback);
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data:"+data+"\nStatus:"+status);
});
});
noConflict()方法會釋放$標識的控制，這樣其他指令碼就可以使用它了。
$.noConflict();
jQuery(document).ready(function(){
jQuery("button").click(function(){
jQuery("p").text("jQuery 仍在運行！");
});
});
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text
})
})
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
