我的jQuery第二天 -- DOM操作

jQuery实例方法-DOM操作

• 进一步选择元素相关方法：

1. .get()
2. .eq()
3. .find()
4. .filter
5. .not()
6. .has()
7. .is()
8. .add()
9. .end()

get()

• 该方法可以获取元素，里面可以传参数，传的是几就对应哪个元素，如果不写就返回一个数组。返回的都是原生元素

<div class="dome">1</div>
    <div class="dome">2</div>
    <div class="dome">3</div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>

        console.log($('.dome').get());
        //不穿参数返回所有原生元素数组
    </script>

eq()

• 该方法可以获取元素，里面可以传参数，传的是几就对应哪个元素，如果不写就返回空。
  返回的都是jQuery对象

  <div class="dome">1</div>
    <div class="dome">2</div>
    <div class="dome">3</div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>

        console.log($('.dome').find());
    </script>

find()

• 在原有的基础上往下查找可以传css selector jQuery

 <div class="wapper">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>

       $('.wapper')
            .css({position : 'relative'})
            .find('ul')
                .css({listStyle : 'none'})
                    .find('li')
                        .css({color: 'red'})
    //采用链式选择了这些元素再给样式
    </script>

filter

• 根据筛选条件来过滤选择元素传css selector jQuery function

<div class="wapper">
        <ul>
            <li class = 'dome'>1</li>
            <li>2</li>
            <li>3</li>
            <li class = 'dome'>4</li>
        </ul>
    </div>
    <ul>
            <li class = 'dome'>1</li>
            <li>2</li>
            <li>3</li>
            <li class = 'dome'>4</li>
        </ul>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('.wapper ul').find('li').filter('.dome')
        </script>

not()

• 根据筛选条件来过滤进行反向选择元素传css selector jQuery function

<div class="wapper">
        <ul>
            <li class = 'dome'>1</li>
            <li>2</li>
            <li>3</li>
            <li class = 'dome'>4</li>
        </ul>
    </div>
    <ul>
            <li class = 'dome'>1</li>
            <li>2</li>
            <li>3</li>
            <li class = 'dome'>4</li>
        </ul>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('.wapper ul').find('li').filter('.dome')
        //会选择相反的
        </script>

has()

• 在元素条件的新基础上选择元素

<ul>
        <li>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('li').has('ul').css({backgroundColor: 'red'})
        //选的元素li必须后面子元素是有ul的
    </script>

is()

• 会返回一个布尔值，如果前后有交集就会返回true

    <div class="wapper">
        <span class="dome">span-1</span>
        <span class="dome">span-2</span>
        <p class="dome">p-1</p>
        <span class="dome">span-3</span>
    </div>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
     $('ul').click(function(e){
    if($(e.target).is('li')){
        alert($(e.target).text());
    }else{
        alert($(this).text() )
    }
})
    </script>
</body>

add()

• 集中操作

<div>11
    </div>
<ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul>
   <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        $('div')//选择div元素
            .add('ul')//把ul与div集合
                .css({backgroundColor: 'red'})//俩都有一样的样式
    </script>

end()

• 回退操作

<div>11
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
   
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>

$('div')
            .css({color:'blue'})
                .find('ul')
                    .css({color:'black'})
                        .end()
                            .css({backgroundColor: "red"})