jq---方法总结

1. 1. 什么是jQuery
2. 在使用jQuery之前，我们必须先了解什么是jQuery，它能够干什么(不然我们为啥要用它)。
3. jQuery是一个非常流行的快速、小巧、功能强大的开源JavaScript库。就像官方所宣称的那样——"Write less，do more"，它使得我们常用的HTML文档遍历、DOM操作、事件处理、动画效果、Ajax、工具方法等功能代码的实现变得非常简单。更重要的是，它还为我们做了跨浏览器的兼容。绝大多数时候，妈妈再也不用担心我的JS兼容问题了(由于浏览器bug等因素，jQuery也无法100%地实现跨浏览器兼容，官方对这些少数API一般也作了特殊说明，而且这种情况极少遇到，因此可以忽略不计)。
4. 2.版本的区别
5. jQuery库的js文件一般有两个版本：一个是jquery-version.js(这里的version表示具体版本号，下同)，一个是jquery-version.min.js。
6. 前者是jQuery库的源代码版本，它带有注释信息，建议你在开发环境中使用该文件，以便于调试或阅读源代码。
7. 后者是前者经过压缩处理后的版本，它去除了多余的注释、空白字符等信息，并缩短了变量的名称，以减小js文件的体积。建议你在生产环境中使用该文件，以便于用户浏览器能够更快地加载jQuery库。
8. 3.文档加载完毕后执行的处理函数？
9. 一：$(document).ready(function(){
10. // 在这里编写我们希望在DOM准备就绪后执行的代码
11. jQuery的ready()函数可以重复调用
12. });
13. 二：$( function(){
14. // 在这里编写我们希望在DOM准备就绪后执行的代码
15. } );
16. 4.jQuery 核心：选取元素
17. $("#uid"); // 选取id属性为"uid"的单个元素
18. $("p"); // 选取所有的p元素
19. $(".test"); // 选择所有带有CSS类名"test"的元素
20. $("[name=books]"); // 选择所有name属性为"books"的元素
21. ：针对input元素
22. // jQuery特有的选择器，当然也可以和其他选择器任意组合使用
23. $(":checkbox"); // 选取所有的checkbox元素
24. $(":text"); // 选取所有type为text的input元素
25. $(":password"); // 选取所有type为password的input元素
26. $(":checked"); // 选取所有选中的radio、checkbox、option元素
27. $(":selected"); // 选取所有选中的option元素
28. $(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素)
29. 五：将HTML字符串封装为jQuery对象
30. // 你同样可以使用jQuery对象的方法对这些临时的DOM元素进行操作，或者将它们插入到文档的指定位置。
31. $('<span></span>'); // 包含一个临时的span元素
32. $('<span/>'); // 包含一个临时的span元素，和上一行代码的作用相同
33. $('<div id="mydiv"><p class="foo bar">Hello CodePlayer</p></div>'); // 包含一个临时的div元素，其内嵌一个子节点p元素
34. 六：元素的筛选
35. // 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素
36. $("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)
37. $("ul li").first(); // 选取ul li中匹配的第一个元素
38. $("ul li").last(); // 选取ul li中匹配的最后一个元素
39. $("ul li").slice(1, 4); // 选取第2 ~ 4个元素
40. $("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素
41. $("div").find("p"); // 选取所有div元素的所有后代p元素
42. $("div").children(); // 选取所有div元素的所有子代元素
43. $("div").children("p"); // 选取所有div元素的所有子代p元素
44. $("span").parent(); // 选取所有span元素的父元素
45. $("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素
46. $("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素
47. $("#uid").next(); // 选取id为uid的元素之后紧邻的同辈元素
48. 七：基本方法
49. // 传入了value参数，设置所有匹配元素的value值为"CodePlayer"
50. uid.val("CodePlayer");
51. $lis.attr("class"); // 只获取第一个匹配的li元素的class属性
52. $("selector").removeAttr("class"); // 移除所有匹配元素的class属性
53. find("ul") // 返回匹配这些div元素中的所有后代ul元素的jQuery对象
54. children() // 返回匹配这些ul元素中的所有子代元素的jQuery对象
55. $("selector").val("Hello"); // 设置所有匹配元素的value值为"Hello"
56. $("selector").html("Hello"); // 设置所有匹配元素的innerHTML值为"Hello"
57. $("selector").text("Hello"); // 设置所有匹配元素的innerText值为"Hello"
58. $("selector").prop("checked"); // 获取第一个匹配元素的checked属性值
59. $("selector").prop("checked", true); // 设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框)
60. $("selector").removeProp("className"); // 移除所有匹配元素的className属性
61. 八：文档处理
62. $A.before( $B ); // 在$A之前插入$B
63. $A.after( $B ); // 在$A之后插入$B
64. $A.insertBefore( $B ); // 将$A插入到$B之前的位置
65. $A.insertAfter( $B ); // 将$A插入到$B之后的位置
66. $A.append( $B ); // 在$A内部的末尾位置追加$B
67. $A.appendTo( $B ); // 将$A追加到$B内部的末尾位置
68. $A.prepend( $B ); // 在$A内部的开头位置追加$B
69. $A.prependTo( $B ); // 将$A追加到$B内部的开头位置
70. $A.replaceAll( $B ); // 用$A替换$B
71. $A.replaceWith( $B ); // 用$B替换$A
72. $A.wrap( $B ); // 在$A的外侧包裹$B
73. $A.unwrap( ); // 只移除$A的父元素的标签
74. $A.wrapAll( $B ); // 在整个$A的外侧用单个$B将其包裹起来
75. $A.wrapInner( $B ); // 在$A的内侧包裹$B
76. $A.empty(); // 清空$A的所有内容
77. $A.remove(); // 删除$A及其绑定的事件、附加数据等
78. $A.detach(); // 删除$A，但保留其绑定的事件、附加数据等
79. $A.clone(); // 克隆一个$A
80. 九：动画处理
81. $("selector").show(); // 显示隐藏的元素，默认不带过渡动画效果
82. $("selector").show( 400 ); // 显示隐藏的元素，带有400毫秒的过渡动画效果
83. $("selector").show( "fast" ); // 显示隐藏的元素，带有200毫秒的过渡动画效果
84. $("selector").show( "slow" ); // 显示隐藏的元素，带有600毫秒的过渡动画效果
85. $("selector").hide(); // 隐藏显示的元素，其用法与show()相同
86. $("selector").toggle(); // 切换显示/隐藏元素(如果显示就隐藏，隐藏就显示)，其用法与show()类似
87. /* 下面的slide*、fade*系列方法与上面的show()、hide()、toggle()等方法作用相同，
88. * 用法也类似，只是带有不同的动画效果
89. */
90. $("selector").slideDown(); // 显示隐藏的元素，带有向下滑动的过渡动画效果
91. $("selector").slideUp(); // 隐藏显示的元素，带有向上滑动的过渡动画效果
92. $("selector").slideToggle(); // 切换显示/隐藏的元素，带有向上/下滑动的过渡动画效果
93. $("selector").fadeIn(); // 显示隐藏的元素，带有淡入的过渡动画效果
94. $("selector").fadeOut(); // 隐藏显示的元素，带有淡出的过渡动画效果
95. $("selector").fadeToggle(); // 隐藏显示的元素，带有淡出的过渡动画效果
96. / 设置所有匹配元素的css样式"width: 200px; height: 100px"，并执行一个当前样式到指定样式的过渡动画效果
97. // 动画的执行时间为 1000 毫秒
98. $("selector").animate( { width: "200px", height: "100px" }, 1000 );
99. 十：事件
100. // 以下方法均可为所有匹配元素的click事件绑定处理函数
101. $("selector").click( handler );
102. $("selector").bind( "click", handler );
103. $("selector").live( "click", handler ); // 该方法已过时，不建议使用
104. $(document).delegate( "selector", "click", handler );
105. $("selector").on( "click", handler );
106. $("selector").one( "click", handler ); // 用于绑定一次性事件，第一次触发后就自动解除绑定
107. $dblclick() //双击事件
108. focus()、聚焦的时候事件
109. change()、输入域改变的时候
110. hover()、移入的时候
111. submit()(仅限于<form>表单元素)
112. 、mousedown()、鼠标按下的事件
113. mouseover()、移动至元素的时候
114. keydown()、键盘按下的时候
115. keypress() 键盘起来的时候
116. ：手机端的事件
117. // 触发所有匹配元素上的click事件
118. $("selector").trigger("click");
119. // 触发所有匹配元素上的change事件
120. $("selector").trigger("change");
121. // 触发所有匹配元素上绑定在foo命名空间下的mouseout事件的处理函数
122. $("selector").trigger("mouseout.foo");
123. ：移除事件
124. //主要用于解除通过click()、dblclick()等直接事件方法以及bind()、one()等方法绑定的处理函数
125. $("selector").unbind("click");
126. //主要用于解除通过live()方法绑定的处理函数
127. $("selector").die("click");
128. //主要用于解除通过delegate()方法绑定的处理函数
129. $(document).undelegate("selector", "click");
130. //主要用于解除通过on()方法绑定的处理函数
131. $("selector").off("click");
132. 十一：jQuery辅助工具方法
133. ar str1 = $.trim( " abc d " ); // "abc d" //去除空格
134. var str2 = $.trim( null ); // ""
135. // 判断是否是数组
136. var isArray1 = $.isArray( [] ); // true
137. var isArray2 = $.isArray( new Array() ); // true
138. // 判断是否是函数
139. var result1 = $.isFunction( function(){} ); // true
140. var result2 = $.isFunction( new Function() ); // true
141. // 检索数组中是否存在指定值，并返回其第一次出现的索引
142. var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3
143. var index2 = $.inArray( 3, [ 2 ] ); // -1 (不存在返回-1)
144. // 将JSON字符串转为对应的JS对象
145. var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' );
146. var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );
147. 十二：遍历数组
148. // $.each()用于遍历数组元素或对象属性
149. var array = [ 12, "jQuery", true ];
150. $.each( array, function(i, value){
151. // i 表示当前迭代元素的索引或对象的属性名称
152. // value 表示当前迭代的数组元素或对象的属性值
153. // this 与 value 相同
154. alert( i + " = " + value );
155. // 如果函数return false，将终止遍历
156. });
157. // $.map()用于遍历数组元素或对象属性，并将每次执行遍历函数的返回值封装为数组返回
158. var obj = { name: "jQuery", age: 20, isAdmin: true };
159. var resultArray = $.map( obj, function(value, i){ // 注意参数顺序与each()不同
160. // value 表示当前迭代的数组元素或对象的属性值
161. // i 表示当前迭代元素的索引或对象的属性名称
162. // this 指向全局对象(window)
163. if( typeof value === "number"){
164. return null; // 如果函数返回null或undefined，则不会添加到结果数组中
165. }else{
166. return value;
167. }
168. } );
169. // resultArray 为 [ "jQuery", true ]
170. //$.grep()用于遍历数组元素，并根据函数的返回值(true/false)来过滤数组元素
171. var array2 = [ "Hello", 12, "jQuery", true ];
172. var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序与each()不同
173. // value 表示当前迭代的数组元素
174. // i 表示当前迭代元素的索引
175. // this 指向全局对象(window)
176. return i % 2 == 0; // 保留返回值不为false的元素
177. } );