jQuery 基础

浏览数：17 / 时间：2015年06月09日

创建节点

a . 用 $() 创建节点

示例

1        <script>
2           var p = $(‘<p>创建节点</p>‘); //p元素节点
3        </script>

插入节点

A . 内部插入

a . append() 向每个匹配元素的尾部插入节点

b . appendTo() 与上一个相同

c . prepend() 向每个匹配元素的头部插入节点

d . prependTo() 与上一个相同

B . 外部插入

a . after() 向每个匹配元素的后面插入节点

b . before() 向每个匹配元素的前面插入节点

包裹节点

a . wrap() 将所有匹配元素单独包裹

示例

 $(‘p‘).wrap(‘<div></div>‘);   //将所有P标签用div标签包裹

b . wrapAll() 将多个匹配元素用一个元素包裹

      //HTML代码
      <p>1</p>
      <p>2</p>
      <p>3</p>
       
       
       <script>
           $(‘p‘).wrapAll(‘<div></div>‘);  //将所有匹配的p标签用一个div包裹
       </script>

结果 : 
<div>
   <p>1</p>
   <p>2</p>
   <p>3</p>
</div>

c . wrapInner() 将所有匹配的元素的子内容用其他标签包裹

<script>
      $(‘p‘).wrapInner(‘<div></div>‘);
</script>

删除节点

a . remove() 删除节点

 $(‘p‘).remove();  //删除所有p标签

b . empty() 清空节点的所有子节点

 $(‘p‘).empty();  //删除所有p标签的内容

c . detach() 删除节点,与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

复制节点

a . clone(bool) 克隆节点,参数默认是false,如果是true 则事件也会被复制.

$("b").clone().prependTo("p");  //将b标签克隆并追加到p标签里

替换节点

a . replaceWith()

          //将p标签替换成div标签,内容保留
           $(‘p‘).replaceWith(function(){
              return ‘<div>‘ + $(this).text() + ‘</div>‘;
           });
            
          //将p标签替换成b标签,内容不保留
          $(‘p‘).replaceWith(‘<b>替换了</b>‘);

节点属性

a . attr(key,value) 设置或返回被选元素的属性值

b . removeAttr(key) 从每一个匹配的元素中删除一个属性

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jQuery 基础