jquery常用方法及使用示例汇总

2020-05-19 07:32:40易采站长站整理

    $(‘ul.one’).find(“.two”).css(“color”,”red”).end().find(‘.three’).css(“background”,”blue”);
</script>

end()方法在这里是 返回调用 find() 之前的状态,也就是$(‘ul.one’)

toggleClass()

    `toggleClass()方法:`如果在元素中指定类名称不存在,则添加指定类名称;如果元素已经拥有指定
类名称,则从元素中删除指定类名称。
  css(name,value)方法:设定指定的值到每个已匹配元素的指定的css样式属性

wrap()和wrapInner()

    `wrap()和wrapInner():`前者把所有匹配的元素用其他元素的结构化标记包裹起来;
后者将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来。
看下面一个wrap()的例子:
用原先div的内容作为新div的class,并将每一个元素包裹起来

HTML 代码:


<div class=”container”>
  <div class=”inner”>Hello</div>
  <div class=”inner”>Goodbye</div>
</div>

jQuery 代码:


$(‘.inner’).wrap(function() {
  return ‘<div class=”‘ + $(this).text() + ‘” />’;
});

结果:


<div class=”container”>
  <div class=”Hello”>
    <div class=”inner”>Hello</div>
  </div>
  <div class=”Goodbye”>
    <div class=”inner”>Goodbye</div>
  </div>
</div>

接着再看下面一个wrapInner()的例子:

用原先div的内容作为新div的class,并将每一个元素包裹起来

HTML 代码:


<div class=”container”>
  <div class=”inner”>Hello</div>
  <div class=”inner”>Goodbye</div>
</div>

jQuery 代码:


$(‘.inner’).wrapInner(function() {
  return ‘<div class=”‘ + $(this).text() + ‘” />’;
});

结果:


<div class=”container”>
  <div class=”inner”>
    <div class=”Hello”>Hello</div>
  </div>
  <div class=”inner”>
    <div class=”Goodbye”>Goodbye</div>
  </div>
</div>

detach、empty和remove方法

.detach( [selector ] ):从DOM中去掉所有匹配的元素。当需要移走一个元素,不久又将该元素插入DOM时,就需要用到detach方法。