jquery經常使用總結

一。選擇器優先級：
1.最高優先級是 (直接在標籤中的設置樣式，假設級別爲1000)<div style="color:Red;"></div>
2.次優先級是（ID選擇器 ,假設級別爲100） #myDiv{color:Red;}
3.其次優先級是（類選擇器，假設級別爲10） .divClass{color:Red;}
4.最後優先級是 （標籤選擇器，假設級別是 1） div{color:Red;}
5.那麼後代選擇器的優先級就能夠計算了啊
好比 .divClass span { color:Red;} 優先級別就是：10+1=11

二。jquery優先級
jquery 是沒有優先級的，jquery是按照你的條件遍歷一次DOM tree，因此寫條件的時候最好儘可能縮小範圍和用ID，避免要遍歷所有DOM，這樣效率是最快的
好比$('#idA')，$('div .classA')，$('.classA')，效率最好的是$('#idA')，而$('div .classA')又比$('.classA')的效率高，最後一個效率是最低的，由於jquery會遍歷整個TREE

三。jquery選擇器
元素選擇器
$("p.xxx") 選取全部class="intro"的<p>元素
$("p#demo") 選取全部id="demo"的<p>元素
$(".intro.demo")全部 class="intro" 且 class="demo" 的元素
$("p:first") 第一個 <p> 元素
$("p:last") 最後一個 <p> 元素
$("tr:even") 全部偶數 <tr> 元素
$("tr:odd") 全部奇數 <tr> 元素
$("ul li:eq(3)") 列表中的第四個元素（index 從 0 開始）
$("ul li:gt(3)") 列出 index 大於 3 的元素
$("ul li:lt(3)") 列出 index 小於 3 的元素
$("input:not(:empty)") 全部不爲空的 input 元素
$(":header") 全部標題元素 <h1> - <h6>
$(":contains('W3School')") 包含指定字符串的全部元素
$(":empty") 無子（元素）節點的全部元素
$("p:hidden") 全部隱藏的 <p> 元素
$("table:visible") 全部可見的表格
$("th,td,.intro") 全部帶有匹配選擇的元素
$("[href]") 全部帶有 href 屬性的元素
$(":input") 全部 <input> 元素
$(":radio") 全部 type="radio" 的 <input> 元素（radio可換成text,submit...）
$(":enabled") 全部激活的 input 元素
$(":disabled") 全部禁用的 input 元素
$(":selected") 全部被選取的 input 元素
$(":checked") 全部被選中的 input 元素
屬性選擇器
$("[href]") 選取全部帶href屬性的元素
$("[href='#']")選取全部帶有href值等於#的元素
$("[href！='#']")選取全部帶有href值不等於#的元素
$("[href$='.jpg']")選取全部href值以".jpg"結尾的元素

CSS選擇器
$("p").css("background-color", "red");

$("ul li:first")每一個<ul>的第一個<li>元素
$("div#xxx .yyy")id="xxx" 的 <div> 元素中的全部 class="yyy" 的元素

四。jquery事件
$(document).ready(function(){});
$("button").click(function(){}); 觸發或將函數綁定到被選元素的點擊事件
$("#xxx").val();
$("#xxx").text();
$("#xxx").html();
var jq=jQuery.noConflict();用本身的名稱（好比 jq）來代替 $ 符號。
$(selector).dblclick(function);觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function)觸發或將函數綁定到被選元素的得到焦點事件
$(selector).mouseover(function)觸發或將函數綁定到被選元素的鼠標懸停事件

五。效果
1.顯示隱藏
$("p").hide();
$("p").show();
$("p").toggle();顯示被隱藏的元素，並隱藏已顯示的元素：
$(selector).toggle(speed,callback);可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。
可選的 callback 參數是 toggle() 方法完成後所執行的函數名稱。
2.下面是四個淡入淡出，可選參數speed,callback：
fadeIn()
fadeOut()
fadeToggle()
$(selector).fadeTo(speed,opacity,callback);容許漸變爲給定的不透明度（值介於 0 與 1 之間）。
3.滑動
$(selector).slideDown(speed,callback);下
$(selector).slideUp(speed,callback);上
$(selector).slideToggle(speed,callback);若是上就下，下就上
4.動畫
$(selector).animate({params},speed,callback);
必需的 params 參數定義造成動畫的 CSS 屬性。
例：$("button").click(function(){
$("div").animate({left:'250px'});
});
複雜一點：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
使用相對值
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
預約義值
$("button").click(function(){
$("div").animate({
height:'toggle'或者"show"、"hide"
});
});
隊列
$("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");
});
5.
$(selector).stop(stopAll,goToEnd); 方法用於中止動畫或效果，在它們完成以前
可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。
可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。
6.chain
Chaining 容許咱們在一條語句中容許多個 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);

六。ajax
url
type
timeout
async 全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false
cache
data
dataType xml,html,script,json,jsonp,text
beforeSend 要求爲Function類型的參數，發送請求前能夠修改XMLHttpRequest對象的函數，例如添加自定義HTTP頭
complete 要求爲Function類型的參數，請求完成後調用的回調函數（請求成功或失敗時均調用）
success 請求成功後調用的回調函數，有兩個參數。(1)由服務器返回，並根據dataType參數進行處理後的數據。(2)描述狀態的字符串。
error 請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)
contentType 當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。
dataFilter 給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數
global 默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用於控制各類ajax事件。
ifModified 默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false，即忽略頭信息。
jsonp
username
password
processData
scriptCharset

$.each()以一個數組或者對象做爲第1個參數，以一個回調函數做爲第2個參數。回調函數擁有兩個參數：第1個爲對象的成員或數組的索引，第2個爲對應變量或內容。

七。添加元素
append() - 在被選元素的結尾插入內容 $("p").append(txt1,txt2,txt3);
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素以後插入內容
before() - 在被選元素以前插入內容

八。遍歷
parent() 方法返回被選元素的直接父元素。
parents() 方法返回被選元素的全部祖先元素，它一路向上直到文檔的根元素 (<html>)。
parentsUntil() 方法返回介於兩個給定元素之間的全部祖先元素。$("span").parentsUntil("div");
children() 方法返回被選元素的全部直接子元素
find() 方法返回被選元素的後代元素，一路向下直到最後一個後代
siblings() 方法返回被選元素的全部同胞元素。
next() 方法返回被選元素的下一個同胞元素。
nextAll() 方法返回被選元素的全部跟隨的同胞元素
nextUntil() 方法返回介於兩個給定參數之間的全部跟隨的同胞元素
prev(), prevAll() 以及 prevUntil() 方法的工做方式與上面的方法相似，只不過方向相反而已：
first() 方法返回被選元素的首個元素。
last() 方法返回被選元素的最後一個元素。
eq() 方法返回被選元素中帶有指定索引號的元素。
filter() 方法容許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回$("p").filter(".intro");返回帶有類名 "intro" 的全部 <p> 元素：
not() 方法返回不匹配標準的全部元素。

九。通配符
*=包含xx $= 以xx結束 ^=以xx開始

十。獲取以及設置
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
html();
val();
attr();
十一。刪除
empty() 方法刪除被選元素的子元素
remove() 方法也可接受一個參數，容許您對被刪元素進行過濾。$("p").remove(".italic");刪除全部clss="italic"的全部p
十二。樣式
addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操做
css() - 設置或返回樣式屬性
css({"propertyname":"value","propertyname":"value",...});

十三。尺寸width()height()innerWidth()innerHeight()outerWidth()outerHeight()十四。ajax1.$(selector).load(URL,data,callback);從服務器加載數據，並把返回的數據放入被選元素中。$("#btn1").click(function(){$('#test').load('/example/jquery/demo_test.txt');})$("#div1").load("demo_test.txt #p1");把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中：可選的 callback 參數規定當 load() 方法完成後所要容許的回調函數。回調函數能夠設置不一樣的參數：responseTxt - 包含調用成功時的結果內容statusTXT - 包含調用的狀態xhr - 包含 XMLHttpRequest 對象2.$.get(URL,callback);經過 HTTP GET 請求從服務器上請求數據。3.$.post(URL,data,callback);經過 HTTP POST 請求從服務器上請求數據。