jQuery学习笔记

1. $() = $(document)  
2. //实现window.onload()效果  
3. $().ready(  
4.     function(){  
5.         //需要执行的内容  
6.     }  
7. );  
8. //获取DOM元素(返回值为jQuery对象)  
9. $("element") //相应元素名的  
10. $(".classname") //class值匹配的  
11. $("element.classname") //相应元素中，class值匹配的  
12. $("#id") //id匹配的  
13. $("element#id") //相应元素中，id匹配的  
14. $("element1 > element2") //元素一 下 的所有元素二（只包括儿子）  
15. $("element1 element2")      //元素一 中 的所有元素二（包括子孙等）  
16. $("element1 + element2")    //元素一 后 的所有元素二（代码后）  
17. $("element1 ~ element2")    //与元素一 并列 的所有元素二（兄弟元素二）  
18. $("#id").html("")   //设置 getElementById("id").innerHTML = ""  
19. $("#id").html()     //取出 getElementById("id").innerHTML  
20. //动画出现效果  
21. $("#id").show(speed, [callback])  
22. $("#id").slideDown(speed, [callback])  
23. ……  
24.   
25. /*========= 
26.  2009-1-16 
27. =========*/  
28. //在<p>外面包围另一个结构（html代码/元素）  
29. $("p").wrap("<div class='wrap'></div>")  
30. $("p").wrap(document.getElementById('content'))  
31. $("p").append("<b>Hello</b>");  //<p>I would like to say: <b>Hello</b></p>  
32. $("p").prepend("<b>Hello</b>"); //<p><b>Hello</b>I would like to say: </p>  
33. $("p").before("<b>Hello</b>");  //<b>Hello</b><p>I would like to say: </p>  
34. $("p").after("<b>Hello</b>");   //<p>I would like to say: </p><b>Hello</b>   
35. //【删除相应class的p元素】  
36. //<p class="classname">AAA</p> BBB <p>CCC</p>  
37. //BBB <p>CCC</p>  
38. $("p").remove(".classname");  
39. /*========= 
40.  2009-1-18 
41. =========*/  
42. //获取具有某属性值的相应元素  
43. $("input[name=qq]") //获取<input name="qq" type="text" />元素  
44. //属性与值关系  
45. =   //等于  
46. *=  //包含该值  
47. !=  //不包含该值  
48. ^=  //以该值开头  
49. $=  //以该值结尾  
50. //为每一个匹配的元素执行该函数  
51. $("element").each(function(){  
52.     //需要执行的内容  
53. })    
54. /*========= 
55.  2009-1-19 
56. =========*/  
57. /* 
58. jQuery中用post和get方法 
59. （ajax高层抽象方法，对ajax方法进行了封装） 
60. 【当JQ中用post方式】 
61. PHP用$_POST接收时，只有n2 
62. PHP用$_GET接收时，只有n1 
63. 【当JQ中用get方式】 
64. PHP用$_GET接收，n1 n2都有 
65. PHP用$_POST接收时，都没有 
66. */  
67. $.post("do.php?n1=a", {n2: "b"},      
68.     function(data){  
69.         ;  
70.     }  
71. );  
72. /*========= 
73.  2009-1-20 
74. =========*/  
75. //DOM对象 -> jQuery对象  
76. //$(DOM对象)  
77. var v = document.getElementById("id");  //DOM对象 v   
78. var $v = $(v); //jQuery对象 $v  
79. //jQuery对象 -> DOM对象  
80. //jQuery对象.get(0) 或者 jQuery对象[0]  
81. var $v = $("#id");  //jQuery对象 $v  
82. var v = $v.get(0); //DOM对象 v  
83. var v = $v[0]; //DOM对象 v  
84. $("element").get(); //获取指定元素的集合  
85. //jQuery用ajax方法（ajax低层方法）  
86. $.ajax({  
87.     type:   "POST", //POST时PHP中用$_POST接收，GET反之。  
88.     url:    "do.php",  
89.     data:   "n1="+x+"&n2="+y,  
90.     success: function(data){ ; }   
91. });  
92. /*========= 
93.  2009-1-21 
94. =========*/  
95. //序列表表格内容为请求字符串  
96. //返回值：（例）name=linvo&age=22  
97. $("form").serialize() //序列化整个表单元素内容  
98. $("input[type=text]").serialize() //序列化指定元素内容（例）  
99. $("element").empty(); //移除指定元素下所有元素  
100. /* 
101.  CSS设置 
102. */  
103. $("element").addClass("classname"); //为指定元素添加css样式  
104. $("element").removeClass("classname") //移除指定元素的css样式  
105. $("element").toggleClass("classname") //指定元素的css样式，有则删除，无则添加  
106. $("element").css("attname"); //获取指定元素相应属性的值（attname例：color）  
107. $("element").css("attname","value"); //设置……属性值（例："color","#FF0000"）  
108. $("element").css({ "margin-left": "10px", "background-color": "blue" });   
109. //使用“名/值对”进行批量设置……（例子见自身）  
110. /*========= 
111.  2009-1-22 
112. =========*/  
113. $("element1").next(element2) //与指定元素一 紧邻 的指定元素二  
114. $("element1").parent().is(element2) //元素一的父元素在元素二的集合中吗   
115. //模仿鼠标悬停事件  
116. //hover(over,out)  
117. //over:在上方执行 | out：移出时执行  
118. $("element").hover(  
119.     function(){  
120.         //在上方执行  
121.     }, function(){  
122.         //移出时执行  
123.     }  
124. ) 
     

Lad.li