<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">百度 CDN:
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">新浪 CDN:
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">菜鳥教程 CDN:
jQuery 語法
$(selector).action()
- 美元符號定義 jQuery
- 選擇符（selector）"查詢"和"查找" HTML 元素
- jQuery 的 action() 執行對元素的操作
文檔就緒事件
$(function(){ // 開始寫 jQuery 代碼... });
$(this)
$("p.intro") 選取 class 爲 intro 的 <p> 元素
$("p:first")
$("[href]")
$("a[target='_blank']") 選取所有 target 屬性值等於 "_blank" 的 <a> 元素
$(":button") 選取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 選取偶數位置的 <tr> 元素
$("tr:odd") 選取奇數位置的 <tr> 元素
常見 DOM 事件：
若div有自己的事件,也有委託事件,則會先執行委託事件,後執行自己的事件.
hide() 和 show() 方法來隱藏和顯示 HTML 元素
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
.可選的 speed 參數規定隱藏/顯示的速度，可以取以下值："slow"、"fast" 或毫秒。
.可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱。
toggle() 方法來切換 hide() 和 show() 方法 顯示被隱藏的元素，並隱藏已顯示的元素
jQuery hover() 方法
$(selector).hover(inFunction,outFunction)
等同於：$( selector ).mouseover( handlerIn ).mouseout( handlerOut );
等同於：$( selector ).on( "mouseover mouseout", handlerInOut );
jQuery Fading 淡入淡出效果
- fadeIn() 淡入已隱藏的元素
$(selector).fadeIn(speed,callback);
- fadeOut() 淡出可見元素
- fadeToggle() fadeIn() 與 fadeOut() 方法之間進行切換 淡出 淡入效果
- fadeTo() 漸變爲給定的不透明度（值介於 0 與 1 之間）
- $("#div1").fadeTo("slow",0.15);
jQuery 滑動方法
- slideDown() 向下滑動元素
- slideUp() 向上滑動元素
- slideToggle() 在 slideDown() 與 slideUp() 方法之間進行切換
jQuery 效果- 動畫
animate() 方法用於創建自定義動畫。
$(selector).animate({params},speed,callback);
必需的 params 參數定義形成動畫的 CSS 屬性。
可選的 speed 參數規定效果的時長。它可以取以下值："slow"、"fast" 或毫秒。
可選的 callback 參數是動畫完成後所執行的函數名稱。
$("button").click(function(){ $("div").animate({left:'250px'}); });
animate() - 操作多個屬性
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
animate() - 使用相對值
height:'+=150px',
width:'+=150px'
animate() - 使用預定義的值
可以把屬性的動畫值設置爲 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
animate() - 使用隊列功能
$("button").click(function(){
var
div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
jQuery 停止動畫
stop() 方法用於在動畫或效果完成前對它們進行停止
stop() 方法適用於所有 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。
$(selector).stop(stopAll,goToEnd);
Callback 回調方法
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落現在被隱藏了");
});
});
jQuery - 鏈(Chaining)
下面的例子把 css()、slideUp() 和 slideDown() 鏈接在一起。"p1" 元素首先會變爲紅色，然後向上滑動，再然後向下滑動：
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
jQuery - 獲取內容和屬性
DOM 操作 :都有回調函數
- text() - 設置或返回所選元素的文本內容
- html() - 設置或返回所選元素的內容（包括 HTML 標記）
- val() - 設置或返回表單字段的值
- attr() - 獲取屬性
$("#btn1").click(function(){
alert("Text:
" +
$("#test").text());
});
$("#btn2").click(function(){
alert("HTML:
" +
$("#test").html());
});
$("#btn1").click(function(){
alert("值爲:
" +
$("#test").val());
});
設置內容 - text()、html() 以及 val()
添加新的 HTML 內容
$("<div></div>") 這樣可以直接創建一個節點元素
- append() - 在被選元素的內部結尾插入內容
- appendTo(content) - 把所有匹配的元素追加到另一個指定的元素元素集合中。
- prepend() - 在被選元素的內部開頭插入內容
- prependTo(content)- 把所有匹配的元素前置到另一個、指定的元素元素集合中。
- after() - 在被選元素外部之後插入內容,作爲兄弟元素
- before() - 在被選元素外部之前插入內容作爲兄弟元素
通過 append() 和 prepend() 方法添加若干新元素
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);
// 追加新元素
}
刪除元素/內容
- remove() - 刪除被選元素（及其子元素）
- empty() - 從被選元素中刪除子元素,可以清空對應的事件.
- clone([Even[,deepEven]]) - 克隆匹配的DOM元素並且選中這些克隆的副本。（true 事件處理函數是會被複制 false 則不會）
- val("") - 是清空元素中的內容
//%("div").html(""); 這樣也可以清空div中的內容,但是,如果div上有事件的話,此事件並不會清空,則會引起內存泄露,所以jQuery中必須使用empty()
jQuery 操作 CSS類
- addClass() - 向被選元素添加一個或多個類
- removeClass() - 從被選元素刪除一個或多個類
- toggleClass() - 對被選元素進行添加/刪除類的切換操作
- css() - 設置或返回樣式屬性
jQuery 尺寸方法
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
向上遍歷 DOM 樹
- parent() 返回被選元素的直接父元素
- parents() 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>)
- parentsUntil() 返回介於兩個給定元素之間的所有祖先元素。
向下遍歷 DOM 樹
- children() 返回被選元素的所有直接子元素
- find() 被選元素的後代元素，一路向下直到最後一個後代。
- find("*")
在 DOM 樹中水平遍歷
- siblings() 返回被選元素的所有同胞元素。
- next() 返回被選元素的下一個同胞元素。
- nextAll() 返回被選元素的所有跟隨的同胞元素。
- nextUntil() 返回介於兩個給定參數之間的所有跟隨的同胞元素。
- prev()
- prevAll()
- prevUntil()
jQuery 遍歷- 過濾
first() 方法返回被選元素的首個元素
last() 方法返回被選元素的最後一個元素。
eq() 方法返回被選元素中帶有指定索引號的元素。
$(document).ready(function(){
$("p").eq(1);
});
filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
not() 方法返回不匹配標準的所有元素。
jQuery - AJAX load() 方法 有回調函數
$(selector).load(URL,data,callback);
必需的 URL 參數規定您希望加載的 URL。
可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
可選的 callback 參數是 load() 方法完成後所執行的函數名稱。
"demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中：
$("#div1").load("demo_test.txt #p1");
jQuery - AJAX get() 和 post() 方法
- GET - 從指定的資源請求數據
- POST - 向指定的資源提交要處理的數據
$.get() 方法
$.get(URL,callback);
必需的 URL 參數規定您希望請求的 URL。
可選的 callback 參數是請求成功後所執行的函數名。
$.post() 方法
$.post(URL,data,callback);
必需的 URL 參數規定您希望請求的 URL。
可選的 data 參數規定連同請求發送的數據。
可選的 callback 參數是請求成功後所執行的函數名。
jQuery - noConflict() 方法
//隱式迭代:
//設置操作的時候:會給jp內部的所有隊形都設置上相同的值.
//獲取的時候:只會返回第一個元素對應的值.
封裝插件方法
//$.fn = $.prototype,是給jQuery封裝插件用的.
$.fn.bgc
= function(color){
this.css("backgroundColor",
color);
return this;
//返回當前對象,可以實現鏈式編程,不返回則使用該方法後不能再鏈式下去.
};