JQuery的部分用法詳解、帶示例

ps：做靜態網頁註冊表單的時候用到的一些JQ知識，只是挑了一些比較常用的做了總結，並不全面。詳細的可以查看api文檔，在此並不贅述。順便賺點積分用- -資源：jQuery api 1.4.1，如果實在沒有積分的私我，看到了私發你。

---

1.簡單示例

//1.js庫的引入
<script src="js/jquery-1.8.3.js"></script>
<script>
    //2.初始化函數
    $(function(){
        $("#id").click(function(){
            相應的操作;
        });
    });
</script>

---

2.基本選擇器

元素	用法	示例
id	$("#id")	$("#one").css("background-color", "pink");
element	$("element")	$("div").css("background-color", "pink");
.class	$(".class")	$(".mini").css("background-color", "pink");
*	$("*")	$("*").css("background-color", "pink");
selector1,selector2,selectorN	$("selector1,selector2,selectorN")	$("#two,div.mini").css("background-color", "pink");

---

3.層級選擇器

元素	用法	示例
ancestor descendant	$("ancestor descendant")	$("body div").css("background-color", "pink");//選擇body中的所有的div元素
parent > child	$("parent > child")	$("body>div").css("background-color", "pink");//選擇body中的第一級的孩子
prev + next	$("prev + next")	$("#two+*").css("background-color", "pink");//選擇id爲two的元素的下一個同級元素
prev ~ siblings	$("prev ~ siblings")	$("#one~*").css("background-color", "pink");//選擇id爲one的所有的兄弟元素

---

4.基本過濾選擇器

元素	用法	示例
:first	獲取便籤下的第一個元素	$("body div:first").css("background-color", "green");//選取body中的第一個div元素背景色設置爲綠色
:last	獲取便籤下的第一個元素	$("body div:last").css("background-color", "green");//選取body中的最後一個div元素背景色設置爲綠色
:odd	獲取奇數行的元素	$("tbody tr:odd").css("background-color","gold");//奇數行背景色設置爲金色
:even	獲取偶數行的元素	$("tbody tr:even").css("background-color","pink");//偶數行背景色設置爲金色

---

5.屬性選擇器

元素	示例
[attribute]	$("div[id]").css("background-color", "green");//選擇有id屬性的div
[attribute=value]	$("div[id='two']").css("background-color", "green");//選擇有id屬性的值爲two的div

---

6.表單屬性選擇器

元素	用法	示例
:checked	匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option)	$(“input:checked”)
:selected	匹配所有選中的option元素	$(“input:selected”)

---

7.文檔處理
1）內部插入

元素	作用
append(content)	向所有段落中追加一些HTML標記。 $(“p”).append(“Hello“);//向p標籤中內容的後邊添加Hello
appendTo(content)	把所有段落追加到content的元素中。 $(“p”).appendTo(“div”);//將p標籤及其中的內容添加到div塊內內容的後面

2）刪除

元素	作用	示例
empty()	刪除匹配的元素集合中所有的子節點。	$(“p”).empty();//刪除p標籤內所有的內容(保留p標籤)
remove()	從DOM中刪除所有匹配的元素。	$(“p”).remove();//刪除p標籤及其內所有的內容

---

8.事件

元素	作用
bind(“事件”，函數)	爲(標籤)綁定函數
unbind(“事件”)	爲(標籤)解綁定函數
click/dblclick	單擊/雙擊 事件
change	select標籤觸發
mouseover/mouseout	鼠標移到/移出
focusin/focusout	聚焦/失焦 事件

ps:JS事件和JQ事件的不同在於JQ事件在JS事件的基礎上去除了on前綴