jQuery常用方法

  1. jQuery是一个快速,简洁的JavaScript库,座右铭:少写,多做。
  2. 1. $()的四种类型参数的应用场景实例
  3. $(筛选器) : 获取dom对象,相当于document.querySelectorAll
  4. $(dom对象) : dom对象转化为jQuery对象
  5. $(html文本) : 创建dom元素,返回为jQuery对象
  6. $(callback) :当dom树加载完成后的回调
  7. <body>
  8. <ul>
  9. <li>item1</li>
  10. <li>item2</li>
  11. <li>item3</li>
  12. <li>item4</li>
  13. <li>item5</li>
  14. </ul>
  15. <script>
  16. // 1. $(筛选器) : 获取dom对象,相当于document.querySelectorAll
  17. console.log($('ul'));
  18. // 2. $(dom对象) : 把dom对象转化为jQuery对象
  19. console.log($(document.body) instanceof jQuery);
  20. // 3. $(html文本) : 创建dom元素,返回为jQuery对象
  21. $("<h2>Hello World</h2>").insertBefore($('ul'));
  22. // 4. $(callback) :当dom树加载完成后的回调
  23. $(() => $('h3').css('color', 'red'));
  24. </script>
  25. <h3>bye,bye</h3>
  26. </body>
  27. 2. jQuery常用方法
  28. attr(name, value) : 属性操作,单参数时是获取 同比:getAttribute, 双参数是设置 同比: setAttribute,设置多个属性时可使用对象传参
  29. removeAttr() : 移除属性 同比: removeAttribute
  30. <body>
  31. <ul name='lists' id="ul1" style="border: 1px solid #000;">
  32. <li>item1</li>
  33. <li>item2</li>
  34. <li>item3</li>
  35. <li>item4</li>
  36. <li>item5</li>
  37. </ul>
  38. </body>
  39. <script>
  40. const ul = $('ul');
  41. const li = $('li');
  42. // 获得属性
  43. console.log(ul.attr('name'));
  44. // 设置属性
  45. ul.attr('name', 'test');
  46. console.log(ul.attr('name'));
  47. // 多属性设置
  48. ul.attr({ 'name': 'test2', 'id': '1', 'data-index': 'shop' });
  49. console.log(ul.attr('id'));
  50. // 删除属性
  51. ul.removeAttr('id');
  52. console.log(ul.attr('id'));
  53. </script>
  54. css(name, value) : 样式操作,单参数时是获取 同比:style, 双参数是设置 同比: style.name = value,设置多个属性时可使用对象传参
  55. <body>
  56. <ul name='lists' id="ul1" style="border: 1px solid #000; color: lightgreen;">
  57. <li>item1</li>
  58. <li>item2</li>
  59. <li>item3</li>
  60. <li>item4</li>
  61. <li>item5</li>
  62. </ul>
  63. </body>
  64. <script>
  65. const ul = $('ul');
  66. // 获取样式
  67. console.log(ul.css('color'));
  68. // 设置样式
  69. $('li:nth-of-type(1)').css('backgroundColor', 'yellow');
  70. // 设置多个样式
  71. $('li:nth-of-type(2)').css({ 'font-size': '20', 'backgroundColor': 'red' });
  72. </script>
  73. addClass(name) : 添加样式类 同比:classlist.add
  74. removeClass(name) : 删除样式类 同比:classlist.remove
  75. hasClass(name) : 判断是否有某个样式类 同比:classlist.contains
  76. toggleClass(name) : 切换样式类 同比:classlist.toggle
  77. <style>
  78. .error {
  79. background-color: red;
  80. }
  81. .warning {
  82. background-color: orange;
  83. }
  84. </style>
  85. <body>
  86. <ul>
  87. <li>item1</li>
  88. <li class=" warning">item2</li>
  89. <li>item3</li>
  90. <li>item4</li>
  91. <li>item5</li>
  92. </ul>
  93. </body>
  94. <script>
  95. // 添加样式类
  96. $('li:nth-of-type(1)').addClass('error');
  97. // 删除样式类
  98. $('li:nth-of-type(2)').removeClass('warning');
  99. // 判断是否有类
  100. console.log($('li:nth-of-type(2)').hasClass('warning'));;
  101. // 切换样式类
  102. $('li:nth-of-type(2)').on('click', function () {
  103. $(this).toggleClass('warning');
  104. });
  105. </script>
  106. val() : 获取或者设置表单元素的value属性的值,无参获取, 有参数是设置
  107. html() : html文本处理 无参获取, 有参数是设置 同比: innerHTML
  108. text() : 文本处理 无参获取, 有参数是设置 同比:textContent
  109. <body>
  110. <form action="">
  111. <label for="" id="userlab">用户名:</label>
  112. <input type="text" id="username">
  113. <label for="" id="pwdlab">密码:</label>
  114. <input type="password" id="password">
  115. <div id='btn'></div>
  116. </form>
  117. </body>
  118. <script>
  119. // 设置value
  120. $('#username').val('php.com');
  121. // 获得value
  122. console.log($('#username').val());
  123. // 获得text
  124. console.log($('#userlab').text());
  125. // 设置text
  126. $('#pwdlab').text('password');
  127. // 设置html文本
  128. $('#btn').html('<Button type="button">提交在此</Button>');
  129. </script>
  130. 3. jQuery对象转js对象的方法
  131. 因为jQuery的限制性,无法完全替换js的一些操作或方法.需要将jQuery对象转为js对象.
  132. jQuery对象转换成DOM对象:
  133. jQuery对象.get(索引值);
  134. jQuery对象[索引值]
  135. jQuery对象是包装集(集合),从集合中取数据可以使用索引的方式
  136. DOM对象转换成jQuery对象:
  137. $(DOM对象) 只有这一种方法;
  138. <style>
  139. .cur {
  140. color: lightcoral;
  141. }
  142. .pre {
  143. color: lightgreen;
  144. }
  145. </style>
  146. <body>
  147. <ul>
  148. <li>item1</li>
  149. <li>item2</li>
  150. <li>item3</li>
  151. <li>item4</li>
  152. <li>item5</li>
  153. </ul>
  154. <script>
  155. // 同比于jQuery的addClass
  156. $('li')[3].classList.add('cur');
  157. $('li:nth-of-type(2)').addClass('pre');
  158. </script>
  159. </body>