jQuery使用的几个主要函数 _Web前端

jQuery应用的几个主要函数

1. 清空元素

????? empty();???????? //内容删除，但元素还存在

$(document).ready(function(){
                //触发onclick事件
                $("#testbutton").click(
                    function(){
                        $("p#second").empty();      //删除子节点
                    }
                );
    });?

2.删除元素

???? remove([expr]);?????? //元素和内容都删除

$(document).ready(function(){
                //触发onclick事件
                $("#testbutton").click(
                    function(){
                        $("p#second").remove();     //删除匹配元素
                    }
                );
    });

或：

$(document).ready(function(){
                //触发onclick事件
                $("#testbutton").click(
                    function(){
                        $("p").remove("#second");
                    }
                );
    });

3. 获得父元素

??????? parent(?[expr] );???? //获得唯一父元素的元素集合

<div><p>Hello</p><p>Hello</p></div> 
//查找每个段落的父元素
$("p").parent() ;

[ <div><p>Hello</p><p>Hello</p></div>] 


<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div> 
//查找段落的父元素中每个类名为selected的父元素。 
$("p").parent(".selected") ;

[ <div class="selected"><p>Hello Again</p></div> ]

??????? parents(?[expr] );???? //取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）

<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html> 
//找到每个span元素的所有祖先元素。 
$("span").parents() ;
//找到每个span的所有是p元素的祖先元素。
$("span").parents("p") ;

???? parentsUntil(?[expr] );????? //查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

<ul class="level-1">
    <li class="item-i">I</li>
    <li class="item-ii">II
      <ul class="level-2">
        <li class="item-a">A</li>
        <li class="item-b">B
          <ul class="level-3">
            <li class="item-1">1</li>
            <li class="item-2">2</li>
            <li class="item-3">3</li>
          </ul>        
        </li>        
        <li class="item-c">C</li>
      </ul>
    </li>
    <li class="item-iii">III</li>
  </ul>

//查找item-a的祖先，但不包括level-1
$('li.item-a').parentsUntil('.level-1')      
.css('background-color', 'red');