jQuery文法是為HTML元素的選取編制的,能夠對元素運作某些操作。
基礎文法是:$(selector).action()
+美元符号定義 jQuery
+選擇符(selector)“查詢”和“查找” HTML 元素
+jQuery 的 action() 運作對元素的操作
示範樣例:
$("p").hide()--隐藏全部段落
$(this).hide()--隐藏目前元素
jQuery選擇器:
元素選擇器:
$("p")--選取<p>元素
$("p.intro")--選取全部class=“intro”的<p>元素
$("p#intro")--選取全部id=“ontro”的<p>元素
屬性選擇器:
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素。
$("[href]") 選取全部帶有 href 屬性的元素。
$("[href='#']") 選取全部帶有 href 值等于 "#" 的元素。
$("[href!='#']") 選取全部帶有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 選取全部 href 值以 ".jpg" 結尾的元素
CSS選擇器:
$("p").css("background-color","red");
jQuery 名稱沖突:
jQuery使用$符号作為jQuery的簡稱方式。
某些其它JavaScript庫(比方Prototype)也是用相同的符号。
那麼此時,jQuery使用noConflict()的方法來解決此問題。
Var jq=jQuery.noConflict(); //幫助你使用自己的名稱來使用jQuery
jQuery是為事件處理專門設計的。
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
jQuery hide()和show()
文法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed隐藏動作所運作速度。它能夠取值:“slow”.“fast”和毫秒值
callback隐藏後回調函數
jQuery toggle():顯示被隐藏的元素,隐藏已顯示的元素
jQuery效果:淡入淡出
淡入:$(selector).fadeIn(speed,callback)
淡出:$(selector).fadeOut(speed,callback)
淡入淡出切換:$(selector).fadeToggle(speed,callback)
漸變為給定不透明度:$(selector).fadeTo(speed,opacity,callback)
speed:動作運作速度。
它能夠取值:“slow”.“fast”和毫秒值
opacity:參數将淡入淡出效果設定為給定的不透明度(值介于 0 與 1 之間)。
jQuery滑動效果
向下滑動:$(selector).slideDown(speed,callback);
向上滑動:$(selector).slideUp(speed,callback);
上下切換:$(selector).slideToggle(speed,callback);
可選的 speed 參數規定效果的時長。它能夠取下面值:"slow"、"fast" 或毫秒。
jQuery 動畫 animate()
文法:$(selector).animate({params},speed,callback);
patams:必須參數,定義形成的動畫css屬性
speed :可選參數,規定效果的時長。它能夠取下面值:"slow"、"fast" 或毫秒。
注:預設情況下。全部 HTML 元素的位置都是靜态的。而且無法移動。
如需對位置
進行操作,記得首先把元素的 CSS position 屬性設定為 relative、fixed 或
absolute。
jQuery:stop()--停止函數,動畫或效果。
文法:$(selector).stop(stopAll,goToEnd);
可選的 stopAll 參數規定是否應該清除動畫隊列。預設是 false,
即僅停止活動的動畫,同意不論什麼排入隊列的動畫向後運作。
可選的 goToEnd 參數規定是否馬上完畢目前動畫。預設是 false。
Chaining能夠把動作方法連結起來:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery擁有可操作HTMML元素的屬性的強慷慨法。
三個簡單有用的用于 DOM 操作的 jQuery 方法:
text() - 設定或傳回所選元素的文本内容
html() - 設定或傳回所選元素的内容(包含 HTML 标記)
val() - 設定或傳回表單字段的值
attr() - 擷取連結中href屬性的值
ps:括号無值為擷取,有值為設定
jQuery-加入元素
append() - 在被選元素的結尾插入内容(内部)
prepend() - 在被選元素的開頭插入内容(内部)
after() - 在被選元素之後插入内容(外部)
before() - 在被選元素之前插入内容(外部)
jQuery-删除元素
remove() - 删除被選元素(及其子元素)
empty() - 從被選元素中删除子元素
jQuery-擷取并設定CSS類
addClass() - 向被選元素加入一個或多個類
removeClass() - 從被選元素删除一個或多個類
toggleClass() - 對被選元素進行加入/删除類的切換操作
css() - 設定或傳回樣式屬性,可設定多個css屬性。例如以下:
css({"propertyname":"value","propertyname":"value",...});
jQuery-尺寸
width() 方法設定或傳回元素的寬度(不包含内邊距、邊框或外邊距)。
height() 方法設定或傳回元素的高度(不包含内邊距、邊框或外邊距)。
innerWidth() 方法傳回元素的寬度(包含内邊距)。
innerHeight() 方法傳回元素的高度(包含内邊距)。
outerWidth() 方法傳回元素的寬度(包含内邊距和邊框)。
outerHeight() 方法傳回元素的高度(包含内邊距和邊框)。
jQuery-周遊
向上周遊 DOM 樹
這些 jQuery 方法非常實用。它們用于向上周遊 DOM 樹:
parent() 方法傳回被選元素的直接父元素。
parents() 方法傳回被選元素的全部祖先元素,它一路向上直到文檔的根元素 (<html>)。
能夠使用可選參數來過濾對祖先元素的搜尋。
parentsUntil() 方法傳回介于兩個給定元素之間的全部祖先元素。
例:
$("span").parents("ul");
向下周遊 DOM 樹
以下是兩個用于向下周遊 DOM 樹的 jQuery 方法:
children()方法傳回被選元素的全部直接子元素。
能夠使用可選參數來過濾對子元素的搜尋。
find()方法傳回被選元素的後代元素,一路向下直到最後一個後代。
$("div").children("p.1");
在 DOM 樹中水準周遊
有很多實用的方法讓我們在 DOM 樹進行水準周遊:
siblings()方法傳回被選元素的全部同胞元素。
next()方法傳回被選元素的下一個同胞元素。
nextAll()方法傳回被選元素的全部尾随的同胞元素。
nextUntil()方法傳回介于兩個給定參數之間的全部尾随的同胞元素。
prev()
prevAll()
prevUntil()
jQuery 周遊-過濾
first() 方法傳回被選元素的首個元素。
$("div p").first();
last() 方法傳回被選元素的最後一個元素。
eq() 方法傳回被選元素中帶有指定索引號的元素。
filter() 方法同意您規定一個标準。不比對這個标準的元素會被從集合中删除,
比對的元素會被傳回。
not() 方法傳回不比對标準的全部元素。與 filter() 相反。
jQuery - AJAX
AJAX = 異步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
簡短地說,在不重載整個網頁的情況下,AJAX 通過背景載入資料。并在網頁上進行顯示。
使用 AJAX 的應用程式案例:谷歌地圖、騰訊微網誌、優酷視訊、人人網等等。
jQuery - AJAX load() 方法(簡單但強大的AJAX方法),
從server載入資料,并把傳回的資料放入被選的元素中。
文法: $(selector).load(URL,data,callback);
必需的 URL 參數規定您希望載入的 URL。
可選的 data 參數規定與請求一同發送的查詢字元串鍵/值對集合。
可選的 callback 參數是 load() 方法完畢後所運作的函數名稱。
執行個體:
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容載入成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
jQuery $.get() 方法
$.get() 方法通過 HTTP GET 請求從server上請求資料。
$.get(URL,callback);
$.get("/example/jquery/demo_test.asp",function(data,status){
alert("資料:" + data + "\n狀态:" + status);
});
jQuery $.post() 方法
$.post() 方法通過HTTP POST 請求從server上請求資料
$post(URL,data,callback);
必需的 URL 參數規定您希望請求的 URL。
可選的 data 參數規定連同請求發送的資料。
可選的 callback 參數是請求成功後所運作的函數名。
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
本文轉自mfrbuaa部落格園部落格,原文連結:http://www.cnblogs.com/mfrbuaa/p/5325212.html,如需轉載請自行聯系原作者