jquery常用總結

標籤：width   selected   attr   內容   指定   切換   選中   nim   效率   

一。選取器優先順序：
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()
十四。ajax
1.$(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 請求從伺服器上請求資料。

 

jquery常用總結