jQuery学习笔记

 

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