jQuery 常用方法参考

- 日理万妓 2022-05-30 02:41 311阅读 0赞

### 一：jQuery 属性操作方法 ###

下面列出的这些方法获得或设置元素的 DOM 属性。

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-addclass.html" title="jQuery HTML - addClass() 方法" rel="nofollow">addClass()</a></td> 
   <td>向匹配的元素添加指定的类名。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-attr.html" title="jQuery HTML - attr() 方法" rel="nofollow">attr()</a></td> 
   <td>设置或返回匹配元素的属性和值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-hasclass.html" title="jQuery HTML - hasClass() 方法" rel="nofollow">hasClass()</a></td> 
   <td>检查匹配的元素是否拥有指定的类。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-html.html" title="jQuery HTML - html() 方法" rel="nofollow">html()</a></td> 
   <td>设置或返回匹配的元素集合中的 HTML 内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-removeattr.html" title="jQuery HTML - removeAttr() 方法" rel="nofollow">removeAttr()</a></td> 
   <td>从所有匹配的元素中移除指定的属性。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-removeclass.html" title="jQuery HTML - removeClass() 方法" rel="nofollow">removeClass()</a></td> 
   <td>从所有匹配的元素中删除全部或者指定的类。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-toggleclass.html" title="jQuery HTML - toggleClass() 方法" rel="nofollow">toggleClass()</a></td> 
   <td>从匹配的元素中添加或删除一个类。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-val.html" title="jQuery HTML - val() 方法" rel="nofollow">val()</a></td> 
   <td>设置或返回匹配元素的值。</td> 
  </tr> 
 </tbody> 
</table>

转载于原文： [https://www.w3cschool.cn/jquery/jquery-ref-attributes.html][https_www.w3cschool.cn_jquery_jquery-ref-attributes.html]

###     ###

### 二：jQuery 文档操作方法 ###

这些方法对于 XML 文档和 HTML 文档均是适用的，除了：html()。

<table> 
 <tbody> 
  <tr> 
   <th style="width:30%;">方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-addclass.html" title="jQuery HTML - addClass() 方法" rel="nofollow">addClass()</a></td> 
   <td>向匹配的元素添加指定的类名。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-after.html" title="jQuery HTML - after() 方法" rel="nofollow">after()</a></td> 
   <td>在匹配的元素之后插入内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-append.html" title="jQuery HTML - append() 方法" rel="nofollow">append()</a></td> 
   <td>向匹配元素集合中的每个元素结尾插入由参数指定的内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-appendto.html" title="jQuery HTML - appendTo() 方法" rel="nofollow">appendTo()</a></td> 
   <td>向目标结尾插入匹配元素集合中的每个元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-attr.html" title="jQuery HTML - attr() 方法" rel="nofollow">attr()</a></td> 
   <td>设置或返回匹配元素的属性和值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-before.html" title="jQuery HTML - before() 方法" rel="nofollow">before()</a></td> 
   <td>在每个匹配的元素之前插入内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-clone.html" title="jQuery HTML - clone() 方法" rel="nofollow">clone()</a></td> 
   <td>创建匹配元素集合的副本。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-detach.html" title="jQuery HTML - detach() 方法" rel="nofollow">detach()</a></td> 
   <td>从 DOM 中移除匹配元素集合。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-empty.html" title="jQuery HTML - empty() 方法" rel="nofollow">empty()</a></td> 
   <td>删除匹配的元素集合中所有的子节点。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-hasclass.html" title="jQuery HTML - hasClass() 方法" rel="nofollow">hasClass()</a></td> 
   <td>检查匹配的元素是否拥有指定的类。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-html.html" title="jQuery HTML - html() 方法" rel="nofollow">html()</a></td> 
   <td>设置或返回匹配的元素集合中的 HTML 内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-insertafter.html" title="jQuery HTML - insertAfter() 方法" rel="nofollow">insertAfter()</a></td> 
   <td>把匹配的元素插入到另一个指定的元素集合的后面。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-insertbefore.html" title="jQuery HTML - insertBefore() 方法" rel="nofollow">insertBefore()</a></td> 
   <td>把匹配的元素插入到另一个指定的元素集合的前面。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-prepend.html" title="jQuery HTML - prepend() 方法" rel="nofollow">prepend()</a></td> 
   <td>向匹配元素集合中的每个元素开头插入由参数指定的内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-perpendto.html" title="jQuery HTML - prependTo() 方法" rel="nofollow">prependTo()</a></td> 
   <td>向目标开头插入匹配元素集合中的每个元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-remove.html" title="jQuery HTML - remove() 方法" rel="nofollow">remove()</a></td> 
   <td>移除所有匹配的元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-removeattr.html" title="jQuery HTML - removeAttr() 方法" rel="nofollow">removeAttr()</a></td> 
   <td>从所有匹配的元素中移除指定的属性。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-removeclass.html" title="jQuery HTML - removeClass() 方法" rel="nofollow">removeClass()</a></td> 
   <td>从所有匹配的元素中删除全部或者指定的类。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-replaceall.html" title="jQuery HTML - replaceAll() 方法" rel="nofollow">replaceAll()</a></td> 
   <td>用匹配的元素替换所有匹配到的元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-replacewith.html" title="jQuery HTML - replaceWith() 方法" rel="nofollow">replaceWith()</a></td> 
   <td>用新内容替换匹配的元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-text.html" title="jQuery HTML - text() 方法" rel="nofollow">text()</a></td> 
   <td>设置或返回匹配元素的内容。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-toggleclass.html" title="jQuery HTML - toggleClass() 方法" rel="nofollow">toggleClass()</a></td> 
   <td>从匹配的元素中添加或删除一个类。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-unwrap.html" title="jQuery HTML - unwrap() 方法" rel="nofollow">unwrap()</a></td> 
   <td>移除并替换指定元素的父元素。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/attributes-val.html" title="jQuery HTML - val() 方法" rel="nofollow">val()</a></td> 
   <td>设置或返回匹配元素的值。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-wrap.html" title="jQuery HTML - wrap() 方法" rel="nofollow">wrap()</a></td> 
   <td>把匹配的元素用指定的内容或元素包裹起来。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-wrapall.html" title="jQuery HTML - wrapAll() 方法" rel="nofollow">wrapAll()</a></td> 
   <td>把所有匹配的元素用指定的内容或元素包裹起来。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/manipulation-wrapinner.html" title="jQuery HTML - wrapinner() 方法" rel="nofollow">wrapinner()</a></td> 
   <td>将每一个匹配的元素的子内容用指定的内容或元素包裹起来。</td> 
  </tr> 
 </tbody> 
</table>

转载于 [https://www.w3cschool.cn/jquery/jquery-ref-manipulation.html][https_www.w3cschool.cn_jquery_jquery-ref-manipulation.html]

### 三：jQuery 效果方法 ###

下面的表格列出了所有用于创建动画效果的 jQuery 方法。

<table> 
 <tbody> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-animate.html" rel="nofollow">animate()</a></td> 
   <td>对被选元素应用"自定义"的动画</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-clearqueue.html" rel="nofollow">clearQueue()</a></td> 
   <td>对被选元素移除所有排队函数（仍未运行的）</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-delay.html" rel="nofollow">delay()</a></td> 
   <td>对被选元素的所有排队函数（仍未运行）设置延迟</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-dequeue.html" rel="nofollow">dequeue()</a></td> 
   <td>移除下一个排队函数，然后执行函数</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-fadein.html" rel="nofollow">fadeIn()</a></td> 
   <td>逐渐改变被选元素的不透明度，从隐藏到可见</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-fadeout.html" rel="nofollow">fadeOut()</a></td> 
   <td>逐渐改变被选元素的不透明度，从可见到隐藏</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-fadeto.html" rel="nofollow">fadeTo()</a></td> 
   <td>把被选元素逐渐改变至给定的不透明度</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-fadetoggle.html" rel="nofollow">fadeToggle()</a></td> 
   <td>在 fadeIn() 和 fadeOut() 方法之间进行切换</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-finish.html" rel="nofollow">finish()</a></td> 
   <td>对被选元素停止、移除并完成所有排队动画</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-hide.html" rel="nofollow">hide()</a></td> 
   <td>隐藏被选元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-queue.html" rel="nofollow">queue()</a></td> 
   <td>显示被选元素的排队函数</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-show.html" rel="nofollow">show()</a></td> 
   <td>显示被选元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-slidedown.html" rel="nofollow">slideDown()</a></td> 
   <td>通过调整高度来滑动显示被选元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-slidetoggle.html" rel="nofollow">slideToggle()</a></td> 
   <td>slideUp() 和 slideDown() 方法之间的切换</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-slideup.html" rel="nofollow">slideUp()</a></td> 
   <td>通过调整高度来滑动隐藏被选元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-stop.html" rel="nofollow">stop()</a></td> 
   <td>停止被选元素上当前正在运行的动画</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jquery/eff-toggle.html" rel="nofollow">toggle()</a></td> 
   <td>hide() 和 show() 方法之间的切换</td> 
  </tr> 
 </tbody> 
</table>

转载于 [https://www.w3cschool.cn/jquery/jquery-ref-effects.html][https_www.w3cschool.cn_jquery_jquery-ref-effects.html]

[https_www.w3cschool.cn_jquery_jquery-ref-attributes.html]: https://www.w3cschool.cn/jquery/jquery-ref-attributes.html
[https_www.w3cschool.cn_jquery_jquery-ref-manipulation.html]: https://www.w3cschool.cn/jquery/jquery-ref-manipulation.html
[https_www.w3cschool.cn_jquery_jquery-ref-effects.html]: https://www.w3cschool.cn/jquery/jquery-ref-effects.html