jQuery 學習筆記

 

問題	回答
文檔就緒事件	$(document).ready( funA ) 或者 $( funcB )
標籤被點擊	$("p").click( funB ) ;
安裝jQuery	1 本地嵌入  <script src="jquery-1.10.2.min.js"></script> 2 用CDN  <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
隱藏當前元素	$(this).hide();
隱藏全部 <p> 元素	$("p").hide();
隱藏全部 class="test" 的 <p> 元素	$("p.test").hide();
隱藏全部 id="test" 的元素	$("#test").hide();
全部帶有 class="test" 屬性的元素都隱藏：	$(".test").hide();
選取第一個 <p> 元素	$("p:fisrt")
選取第一個 <ul> 元素的第一個 <li> 元素	$("ul li:first")
選取每一個 <ul> 元素的第一個 <li> 元素	$("ul li:first-child")
選取帶有 href 屬性的元素	$("[href]")
選取全部 target 屬性值等於 "_blank" 的 <a> 元素	$("a[target='_blank']")
選取全部 target 屬性值不等於 "_blank" 的 <a> 元素	$("a[target!='_blank']")
選取全部 type="button" 的 <input> 元素 和 <button> 元素	$(":button")
選取偶數位置的 <tr> 元素	$("tr:even")
選取奇數位置的 <tr> 元素	$("tr:odd")
單擊方法	click
雙擊方法	dblclick
穿過元素	mouseenter
鼠標指針離開元素	mouseleave
鼠標指針移動到元素上方  並按下鼠標按鍵時	mousedown
鬆開鼠標按鈕	mouseup
於模擬光標懸停事件	hover( funA, funB ) ;
當元素得到焦點時	focus
當元素失去焦點時	blur
hide show	$(selector).show(speed,callback); speed可取 slow fast 或毫秒數
切換顯隱	toggle()
淡入淡出效果	fadeIn() 可取 slow fast 毫秒數 $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback);
滑動效果	$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);
動畫	$("div").animate({left:'250px'}); 向右面移動250像素 使用相對值:   +=150px 使用預約值:    height:'toggle' 可隊列執行
中止動畫	$(selector).stop(stopAll,goToEnd); 可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。 可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。
chaining動畫	$("#p1").css("color","red").slideUp(2000).slideDown(2000);
得到內容	text() html() val()
獲取屬性	$("#id").attr("href");
設置內容	text() html() val()
text()、html() 以及 val() 的回調函數	$("#test1").text(function(i,origText){     return "Old text: " + origText + " New text: Hello world!     (index: " + i + ")";    });
設置屬性	$("#id").attr("href","www.baidu.com") ;
attr的回調函數	$("#id").attr("href", functionA ) ;
Create text with HTML	var txt1="<p>Text.</p>";
Create text with jQuery	var txt2=$("<p></p>").text("Text.");
Create text with DOM	var txt3=document.createElement("p"); txt3.innerHTML="Text.";
在被選元素的結尾插入內容	apend(), 可傳入多個元素
在被選元素的開頭插入內容	prepend
在被選元素以後插入內容	after
在被選元素以前插入內容	before
刪除被選元素（及其子元素）	$("p").remove();
刪除被選元素的子元素。	$(":p").empty();
過濾刪除	$(":p").remove(".italic");
向被選元素添加一個或多個類	addClass
從被選元素刪除一個或多個類	removeClass
對被選元素進行添加/刪除類的切換操做	toggleClass( "blue" )
返回首個匹配元素的 background-color 值	$("p").css("background-color")
設置多個 CSS 屬性	$("p").css({"background-color":"green", "font-size":200%} ) ; $("p").css("height": "500px" ) ;
padding border margin 的意義
innerWidth	width + padding * 2 ;
outerWidth()	width _ padding * 2 + border * 2
outerWidth(true)	width _ padding * 2 + border * 2 + margin * 2 ;
返回被選元素的直接父元素	parent();
返回被選元素的全部祖先元素	parents();
返回介於兩個給定元素之間的全部祖先元素	$("span").parentsUntil("div")
被選元素的全部直接子元素	$("div").children();
返回類名爲 "blue" 的全部 <p> 元素，而且它們是 <div> 的直接子元素：	$("div").children("p.blue") ;
返回被選元素的後代元素，一路向下直到最後一個後代, 找到全部	$("div").find("span");
返回 <div> 的全部後代	$("div").find("*");
什麼是同胞	有相同的父元素
返回被選元素的全部同胞元素	$("div").siblings();
返回屬於 <h2> 的同胞元素的全部 <p> 元素	$("h2").siblings("p");
返回被選元素的下一個同胞元素	$("h2").next();   // prev
返回被選元素的全部跟隨的同胞元素	$("h2").nextAll();  // prevAll();
返回介於兩個給定參數之間的全部跟隨的同胞元素	$("h2").nextUntil("h6") 不包含h6 // prevUntil();
選取首個 <div> 元素內部的第一個 <p> 元素	$("div p").fisrt();
選擇最後一個 <div> 元素中的最後一個 <p> 元素	$("div p").last();
選取第四個 <p> 元素	$("p").eq(3);
返回帶有類名 "intro" 的全部 <p> 元素	$("p").filter(".intro");
返回不帶有類名 "intro" 的全部 <p> 元素	$("p").not(".intro");
Ajax load語法	$("div").load("test.txt"); $(selector).load(URL,data,callback); $("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){});
把 "demo_test.txt" 文件中 id="p1" 的元素的內容，加載到指定的 <div> 元素中	$("div0").load( "demo_text.text #p1 ) ;
post  和 get 方法	$.post("/try/ajax/demo_test_post.php",     {       name:"Donald Duck",       city:"Duckburg"     },     function(data,status){       alert("Data: " + data + "\nStatus: " + status);     });
釋放會 $ 標識符的控制，這樣其餘腳本就能夠使用它了	$.noConflict();
noConflict() 可返回對 jQuery 的引用，您能夠把它存入變量，以供稍後使用	var myJQ = $.noConflict();
$的另外一種寫法	jQuery
JSONP	$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {});
class 爲 "intro" 或 "demo" 的全部元素	$(".intro,.demo")
生成被選元素的副本	clone()
檢查被選元素是否包含指定的 class 名稱	hasClass()
返回被選元素相對於文檔的偏移座標	offset()
返回元素的位置（相對於父元素）	position()
設置或返回被選元素的水平滾動條位置	scrollLeft()
設置或返回被選元素的垂直滾動條位置	scrollTop()
$.param( obj ) 的做用	序列化一個 key/value 對象： var params = { width:1900, height:1200 }; var str = jQuery.param(params); $("#results").text(str); 結果: width=1680&height=1050