JQuery的部分用法详解、带示例

ps：做静态网页注册表单的时候用到的一些JQ知识，只是挑了一些比较常用的做了总结，并不全面。详细的可以查看api文档，在此并不赘述。顺便赚点积分用- -资源：jQuery api 1.4.1，如果实在没有积分的私我，看到了私发你。

---

1.简单示例

//1.js库的引入

---

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前缀