1.jQuery1基本使用和選擇器

jQuery是封裝好的js庫，具有相容性好，鏈式程式設計的特點。在頁面引入jQuery使用的包。

<script src="jquery-1.11.1.js"></script>
//入口函式   
$(document).ready(function(){
	//獲取ID為btnshow的元素
	$("#btnshow").click(function(){
		//獲取所有div並顯示出來
		$("div").show();
	});
});

入口函式：$(document).ready(function(){});
				  $(funtion(){});
 

jquery->dom : $(selector)[0]
dom->jquery: $(domObject)

重點選擇器

#Id選擇器 $(“#btnShow”).css(“color”, “red”); 選擇id為btnShow的一個元素（返回值為jQuery物件，下同）
.類選擇器 $(“.liItem”).css(“color”, “red”); 選擇含有類liItem的所有元素
element 標籤選擇器 $(“li”).css(“color”, “red”); 選擇標籤名為li的所有元素

層級選擇器

空格 後代選擇器 $(“#j_wrap li”).css(“color”, “red”); 選擇id為j_wrap的元素的所有後代元素li
“>” 子代選擇器 $(“#j_wrap > ul > li”).css(“color”, “red”); 選擇id為j_wrap的元素的所有子元素ul的所有子元素li

基本過濾選擇器

:eq(index) 選擇匹配到的元素中索引號為index的一個元素，index從0開始 $(“li:eq(2)”).css(“color”, ”red”); 選擇li元素中索引號為2的一個元素
:odd 選擇匹配到的元素中索引號為奇數的所有元素，index從0開始 $(“li:odd”).css(“color”, “red”); 選擇li元素中索引號為奇數的所有元素
:even 選擇匹配到的元素中索引號為偶數的所有元素，index從0開始 $(“li:odd”).css(“color”, “red”); 選擇li元素中索引號為偶數的所有元素
篩選（方法）
find(selector) 查詢指定元素的所有後代元素（子子孫孫） $(“#j_wrap”).find(“li”).css(“color”, “red”); 選擇id為j_wrap的所有後代元素li
children() 查詢指定元素的直接子元素（親兒子元素） $(“#j_wrap”).children(“ul”).css(“color”, “red”); 選擇id為j_wrap的所有子代元素ul
siblings() 查詢所有兄弟元素（不包括自己） $(“#j_liItem”).siblings().css(“color”, “red”); 選擇id為j_liItem的所有兄弟元素
parent() 查詢父元素（親的） $(“#j_liItem”).parent(“ul”).css(“color”, “red”); 選擇id為j_liItem的父元素
eq(index) 查詢指定元素的第index個元素，index是索引號，從0開始 $(“li”).eq(2).css(“color”, “red”); 選擇所有li元素中的第二個

2.jQuery操作DOM

樣式屬性操作

設定單個樣式
$(selector).css("clorr"."red");
設定多個樣式
$(selector).css("color":"red","font-size":"30px");
獲取樣式屬性
$(selector).css("font-size");//返回font-size對應的屬性值

類操作

新增類樣式
$(selector).addClass("classname");
移除類樣式
$(selector).removeClass("classname");
不指定類表示移除指定樣式的所有類
$(selector).removeClass("");
判斷是否包含某一類
$(selector).hasClass("classname");//返回true，false
切換類樣式
$(selector).toggleClass("classname");

注意點：操作類樣式的所有類名都不帶(.)
樣式少可以用.css()方法實現，樣式多用類實現。

3.jQuery動畫

1顯示動畫

show方法：讓匹配的元素顯示出來
show(2000)//引數表示時長，在2000內顯示完畢
show(“slow”);//引數為字串 有三個定義slow，fast，normal 值為別為200 600 400。
show(2000,function(){});//動畫執行完成後立即執行回撥函式
show();//不帶引數沒有動畫效果

2.hide隱藏動畫

hide方法：讓匹配的元素隱藏
hide(2000)//引數表示時長，在2000內隱藏完畢
hide(“slow”);//引數為字串 有三個定義slow，fast，normal 值為別為200 600 400。
hide(2000,function(){});//動畫執行完成後立即執行回撥函式
hide();//不帶引數沒有動畫效果

3滑入滑出動畫（捲簾門）

slideDown(speed,callback);讓元素下拉動畫展現出來；引數省略或不合法，則預設使用400ms。
slideUp(speed,callback);讓元素以上拉效果隱藏
slideToggle(speed,callback);滑入滑出動畫切換效果

4淡入淡出效果

fadeIn(speed,callback);元素淡淡的進入視線
fadeOut(1000);元素淡淡的隱藏起來
fadeToggle(‘fast’,function(){});通過改變透明度切換顯示隱藏狀態
fadeTo(1000,.5)//0全透，1全不透
fadeTo(0,.5)//相當於.css(“opacity”,.5);

5自定義動畫

$(selector).animate({params},speed,callback);
第一個引數表示執行動畫的css屬性(必選)
第二個引數表示執行動畫時長（可選）
第三個引數表示執行完動畫後立即執行的回撥函式（可選）
stop()；停止正在執行的動畫

4.jQuery節點操作

動態建立元素

$()函式的另一個作用：動態建立元素
var $sapnNode = $(“我是動態建立的”);
append();在最後一個子元素下追加元素
不常用操作：
appendTo();作用 $(selector).appendTo(node);把selector追加到node prepend();作用：在元素的第一個子元素前面追加內容或節點$(selector).prepend(node);
after();作用：在元素被選之後，作為兄弟元素插入節點。 $(selector).after(node); before();作用：在元素被選之前，作為兄弟元素插入節點。$(selector).before(node);

html建立元素

//動態建立元素
$(selector).html(‘與js的innerHtml效果一樣’);
//獲取html內容
$(selector).html();
//清空指定元素的所有子元素
$(selector).empty();無引數
$(selector).html(" ");
把自己也刪除掉
$(selector).remove();
//複製元素
複製 $(selector)所匹配到的所有元素，返回複製的新元素
$(selector).clone();

5.操作form表單

$(selector).attr(“title”,“abc”);第一個引數表示屬性名稱，第二個屬性值
$(selector).attr(“title”);獲取屬性名稱對應的屬性值
$(selector).remove(“title”);移除的屬性名稱
注意：checked，selected，disabled要使用.prop()方法
prop方法：用來影響DOM元素的動態狀態，不是改變html屬性

6值和內容

val()方法；作用：設定或返回表單元素的值
$(selector).val()獲取匹配元素的值，只匹配第一個元素
$(selector).val(“具體值”)；設定所有匹配到的元素的值

text()方法：設定獲取匹配的文字內容
$(selector).text();獲取操作不帶引數，把匹配的內容拼接為字串
$(selector).text(“設定內容”);//引數表示要設定的文字內容

高度和寬度操作

height();獲取設定元素的高度
$(selector).height()；不帶引數表示獲取
$(selector).height(“200”)；帶引數表示設定
width()；設定獲取元素寬度
$(selector).width()；不帶引數表示獲取
$(selector).width(“200”)；帶引數表示設定
css獲取的寬度是string型別帶px，height()獲取的是number不帶px。

座標值操作

offset();作用：獲取設定元素相對文件的位置
$(selector).offset();無引數表示獲取；返回值為{left:num,top:num}
$(selector).offset({left:200,top:200});有引數表示設定

position()；作用：獲取相對最近的具有定位的父元素的位置，返回值為{left:num,top:num}
$(selector).position();只能獲取不能設定。

scrollTop();作用：表示設定或獲取元素垂直方向滾動的位置
無引數表示獲取偏移，有引數表示設定偏移，引數為值型別
$(selector).scrollTop(100);

scrollLeft();作用：表示設定或獲取元素水平方向滾動的位置
無引數表示獲取偏移，有引數表示設定偏移，引數為值型別
$(selector).scrollLeft (100);