1. 程式人生 > >jquery常用總結

jquery常用總結

tun mod ini 活動 一點 txt request rst world!


一。選擇器優先級:
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常用總結