$(document).ready() 方法允許我們在文檔完全加載完后執行函數。
$(“p”).click(function(){ // 動作觸發后執行的代碼!! }); 當雙擊元素時,會發生 dblclick 事件。 當鼠標指針穿過元素時,會發生 mouseenter 事件。 當鼠標指針離開元素時,會發生 mouseleave 事件。 當鼠標指針移動到元素上方,并按下鼠標按鍵時,會發生 mousedown 事件。 當在元素上松開鼠標按鈕時,會發生 mouseup 事件。 hover()方法用于模擬光標懸停事件。當鼠標移動到元素上時,會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時,會觸發指定的第二個函數(mouseleave)。 當元素獲得焦點時,發生 focus 事件。 當元素失去焦點時,發生 blur 事件。
通過 jQuery,您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素:
$(selector).hide(speed,callback);$(selector).show(speed,callback);可選的 speed 參數規定隱藏/顯示的速度,可以取以下值:”slow”、”fast” 或毫秒。 可選的 callback 參數是隱藏或顯示完成后所執行的函數名稱。
通過 jQuery,您可以使用 toggle(speed ,callback ) 方法來切換 hide() 和 show() 方法。
jQuery fadeIn() 用于淡入已隱藏的元素。
$(selector).fadeIn(speed,callback);jQuery fadeOut() 方法用于淡出可見元素。
$(selector).fadeOut(speed,callback);jQuery fadeToggle() 方法可以在 fadeIn() 與 fadeOut() 方法之間進行切換。 如果元素已淡出,則 fadeToggle() 會向元素添加淡入效果。 如果元素已淡入,則 fadeToggle() 會向元素添加淡出效果。
jQuery fadeTo() 方法允許漸變為給定的不透明度(值介于 0 與 1 之間)。
$(selector).fadeTo(speed,opacity,callback);jQuery slideDown() 方法用于向下滑動元素。
$(selector).slideDown(speed,callback);$("#flip").click(function(){ $("#panel").slideDown(speed,callback);});panel.display == none //開始時jQuery slideToggle() 方法可以在 slideDown() 與 slideUp() 方法之間進行切換。 jQuery slideUp() 方法用于向上滑動元素。
jQuery animate() 方法用于創建自定義動畫。
$(selector).animate({params},speed,callback);必需的 params 參數定義形成動畫的 CSS 屬性。 可選的 speed 參數規定效果的時長。它可以取以下值:”slow”、”fast” 或毫秒。 可選的 callback 參數是動畫完成后所執行的函數名稱。 默認情況下,所有的 HTML 元素有一個靜態的位置,且是不可移動的。 如果需要改變為,我們需要將元素的 position 屬性設置為 relative, fixed, 或 absolute!
$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px'});animate() - 使用相對值: height:’+=150px’, width:’+=150px’
您甚至可以把屬性的動畫值設置為 “show”、”hide” 或 “toggle”: height:’toggle’
animate() - 使用隊列功能:按順序執行
var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow");jQuery stop() 方法用于停止動畫或效果,在它們完成之前。stop() 方法適用于所有 jQuery 效果函數
$(selector).stop(stopAll,goToEnd);可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false,即僅停止活動的動畫,允許任何排入隊列的動畫向后執行。 可選的 goToEnd 參數規定是否立即完成當前動畫。默認是 false。
Callback 函數在當前動畫 100% 完成之后執行。
jQuery 方法鏈接 下面的例子把 css()、slideUp() 和 slideDown() 鏈接在一起?!眕1” 元素首先會變為紅色,然后向上滑動,再然后向下滑動:
$("#p1").css("color","red").slideUp(2000).slideDown(2000);jQuery 擁有可操作 HTML 元素和屬性的強大方法。
text() - 設置或返回所選元素的文本內容 html() - 設置或返回所選元素的內容(包括 HTML 標記) val() - 設置或返回表單字段的值(輸入值或存在的值)
text(“xxx”) xxx為設置的內容 回調函數 回調函數有兩個參數:被選元素列表中當前元素的下標,以及原始(舊的)值。然后以函數新值返回您希望使用的字符串。
$("#test1").text(function(i,origText){ return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; });jQuery attr( href/id/name/style、、) 方法用于獲取屬性值。 attr(attribute,attribute value)設置屬性值
$("#runoob").attr("href","http://www.runoob.com/jquery") $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程"});回調同上:
$("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; });jQuery append() 方法在被選元素的結尾插入內容。
$("p").append("追加文本");jQuery PRepend() 方法在被選元素的開頭插入內容。 三種方式創建text/html
function appendText(){ var txt1="<p>文本。</p>"; // 使用 HTML 標簽創建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 創建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 創建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素}jQuery after() 方法在被選元素之后插入內容。 jQuery before() 方法在被選元素之前插入內容。
$("img").after("在后面添加文本");$("img").before("在前面添加文本");同上三種方法可以添加在元素之前和之后
jQuery remove() 方法刪除被選元素及其子元素。
$("#div1").remove();jQuery empty() 方法刪除被選元素的子元素。 jQuery remove() 方法也可接受一個參數,允許您對被刪元素進行過濾。
$("p").remove(".italic");//刪除 class="italic" 的所有 <p> 元素:addClass() - 向被選元素添加一個或多個類
$("#div1").addClass("important blue");removeClass() - 從被選元素刪除一個或多個類 toggleClass() 方法。該方法對被選元素進行添加/刪除類的切換操作
css() 方法設置或返回被選元素的一個或多個樣式屬性。 如需返回指定的首個匹配元素 CSS 屬性的值: css(“propertyname”); 如需設置指定的所有匹配元素 CSS 屬性, css(“propertyname”,”value”); 如需設置多個 CSS 屬性: css({“propertyname”:”value”,”propertyname”:”value”,…});
width() 方法設置或返回元素的寬度(不包括內邊距、邊框或外邊距)。 height() 方法設置或返回元素的高度(不包括內邊距、邊框或外邊距)。 innerWidth() 方法返回元素的寬度(包括內邊距)。 innerHeight() 方法返回元素的高度(包括內邊距)。 outerWidth() 方法返回元素的寬度(包括內邊距和邊框)。 outerHeight() 方法返回元素的高度(包括內邊距和邊框)。 outerWidth(true) 方法返回元素的寬度(全部)。 outerHeight(true) 方法返回元素的高度(全部)。
jQuery 遍歷,意為”移動”,用于根據其相對于其他元素的關系來”查找”(或選?。〩TML 元素。以某項選擇開始,并沿著這個選擇移動,直到抵達您期望的元素為止。 祖先 parent() 方法返回被選元素的直接父元素。 parents() 方法返回被選元素的所有祖先元素,它一路向上直到文檔的根元素。 使用可選參數來過濾對祖先元素的搜索
$("span").parents("ul");返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素parentsUntil() 方法返回介于兩個給定元素之間的所有祖先元素。
$("span").parentsUntil("div");返回介于 <span> 與 <div> 元素之間的所有祖先元素后代 children() 方法返回被選元素的所有直接子元素。 可選參數來過濾對子元素的搜索
$("div").children("p.1");返回類名為 "1" 的所有 <p> 元素,并且它們是 <div> 的直接子元素find() 方法返回被選元素的后代元素,一路向下直到最后一個后代。
$("div").find("span");返回屬于 <div> 后代的所有 <span> 元素: $("div").find("*");返回 <div> 的所有后代:同胞(水平遍歷) siblings() 方法返回被選元素的所有同胞元素。可選參數來過濾對同胞元素的搜索。 next() 方法返回被選元素的下一個同胞元素。 nextAll() 方法返回被選元素的所有跟隨的同胞元素。 nextUntil() 方法返回介于兩個給定參數之間的所有跟隨的同胞元素。 prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似,只不過方向相反而已:它們返回的是前面的同胞元素 遍歷過濾 first() 方法返回被選元素的首個元素。
$("div p").first();選取首個 <div> 元素內部的第一個 <p> 元素last() 方法返回被選元素的最后一個元素。 eq() 方法返回被選元素中帶有指定索引號的元素。
$("p").eq(1);索引號從 0 開始,選取第二個 <p> 元素(索引號 1)filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除,匹配的元素會被返回。
$("p").filter(".url");返回帶有類名 "url" 的所有 <p> 元素not() 方法返回不匹配標準的所有元素。
AJAX = 異步 javaScript 和 xml(Asynchronous Javascript and XML)。 load() 方法從服務器加載數據,并把返回的數據放入被選元素中。
$(selector).load(URL,data,callback);也可以把 jQuery 選擇器添加到 URL 參數。
$("#div1").load("demo_test.txt #p1");把 "demo_test.txt" 文件中 id="p1" 的元素的內容,加載到指定的 <div> 元素中callback 參數規定當 load() 方法完成后所要允許的回調函數
responseTxt - 包含調用成功時的結果內容statusTXT - 包含調用的狀態statusTxt==”success” or “error”xhr - 包含 xmlhttpRequest 對象GET 基本上用于從服務器獲得(取回)數據。注釋:GET 方法可能返回緩存數據。 POST 也可用于從服務器獲取數據。不過,POST 方法不會緩存數據,并且常用于連同請求一起發送數據。
$.get(URL,callback);$.post(URL,data,callback);noConflict() 方法會釋放會對$ 標識符的控制,這樣其他腳本(JavaScript其他框架)就可以使用它了。
$.noConflict();jQuery(document).ready(function(){ jQuery("button").click(function(){jQuery("p").text("jQuery 仍然在工作!"); });});創建自己的簡寫
var jq = $.noConflict();把美元 符號作為變量傳遞給 ready 方法,函數內使用 美元 符號了 - 而在函數外,依舊不得不使用 “jQuery”:
$.noConflict();jQuery(document).ready(function($){$("button").click(function(){$("p").text("jQuery 仍然在工作!");});});名稱 值/描述
async 布爾值,表示請求是否異步處理。默認是 true。beforeSend(xhr) 發送請求前運行的函數。cache 布爾值,表示瀏覽器是否緩存被請求頁面。默認是 true。complete(xhr,status) 請求完成時運行的函數(在請求成功或失敗之后均調用,即在 success 和 error 函數之后)。contentType 發送數據到服務器時所使用的內容類型。默認是:”application/x-www-form-urlencoded”。context 為所有 AJAX 相關的回調函數規定 “this” 值。data 規定要發送到服務器的數據。dataFilter(data,type) 用于處理 XMLHttpRequest 原始響應數據的函數。dataType 預期的服務器響應的數據類型。error(xhr,status,error) 如果請求失敗要運行的函數。global 布爾值,規定是否為請求觸發全局 AJAX 事件處理程序。默認是 true。ifModified 布爾值,規定是否僅在最后一次請求以來響應發生改變時才請求成功。默認是 false。jsonp 在一個 jsonp 中重寫回調函數的字符串。jsonpCallback 在一個 jsonp 中規定回調函數的名稱。passWord 規定在 HTTP 訪問認證請求中使用的密碼。processData 布爾值,規定通過請求發送的數據是否轉換為查詢字符串。默認是 true。scriptCharset 規定請求的字符集。success(result,status,xhr) 當請求成功時運行的函數。timeout 設置本地的請求超時時間(以毫秒計)。traditional 布爾值,規定是否使用參數序列化的傳統樣式。type 規定請求的類型(GET 或 POST)。url 規定發送請求的 URL。默認是當前頁面。username 規定在 HTTP 訪問認證請求中使用的用戶名。xhr 用于創建 XMLHttpRequest 對象的函數。新聞熱點
疑難解答