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. } );

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券