1、get( )   需获取原生元素时使用(应用较少)

<body>
    <div class = "demo">1</div>
    <div class = "demo">2</div>
    <div class = "demo">3</div>

    <script src = "./jquery.js"></script>
    <script> 
      //(get 是获取的意思,并且获取的是原生dom)
      //0 1 2 3
      //-1 -2 -3
      //null undefined 或不传参 返回[dom,dom,dom] 原生数组
      console.log( $('.demo').get() );
    </script>
</body>

get( ) 方法的源码(原理):

      jQuery.prototype.get = function(num){
           if (num == null){
             return Array.prototype.slice.call(this,0);
             //一般写简化写法 return [].slice.call(this,0)
           }else{
             if (num >= 0) {
                 return this[num];
             }else {
                return this[num + this.length]
             }
           }
      }

简化写法:

  jQuery.prototype.get = function(num){
      return num !=null ? (num >= 0 ? this[num] : this[num + this.lenght]) : [].slice.call(this,0);
}

 2、eq( ) 

  $('.demo:eq()') =  $('.demo').eq() //后者更灵活(jQ的精髓是链式调用)
  $('.demo').css().eq(0).css()  //可分段给样式

3、find( )   (在原有基础上往下查找)

<body>
    <div class = "wrapper">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script src = "./jquery.js"></script>
    <script> 
        //find() 可放置 css selector  jquery unique selector  dom  $()
        $('.wrapper')
            .css({position:'relative'})
                .find('ul')
                   .css({listStyle:'none'})
                     .find('li')
                       .css({color:'red'})
    </script>
     
</body>

4、.filter( )  过滤    (在前面的基础上针对选择的东西进行限制)

<body>
    <div class = "wrapper">
        <ul>
            <li>1</li>
            <li class = 'demo'>2</li>
            <li>3</li>
            <li>4</li>
            <li class = 'demo'>5</li>
        </ul>
    </div>
    <ul>
        <li>1</li>
        <li class = 'demo'>2</li>
        <li>3</li>
        <li>4</li>
        <li class = 'demo'>5</li>
    </ul>
    <script src = "./jquery.js"></script>
    <script> 
         // css selector  jquery unique selector 
         $('.wrapper ul').find('ul').filter('.demo') //过滤出第一块div里class为demo的li元素
         // function
        $('.wrapper ul li').filter(function(index,ele){
            return index % 2 == 0;
        }).css({color:'red'})
        //index为索引 ele为元素 并且是原生的
        //filter 强大在自定义function功能上
    </script>
</body>
    $('.wrapper ul')
        .find('li') 
           .flter(':odd')
            .css({color:'red'})  //在Li元素中过滤   (过滤是在前面的基础上进行筛选)

5、not 方法与 filter 方法相反   (fliter 是过滤出符合条件的元素 ,not 是过滤出不符合条件的)

6、has( )  筛选

    <ul>
        <li>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script src = "./jquery.js"></script>
    <script> 
         $('li').has('ul').css()  //选出后代元素有ul的li (选择什么元素就先写在$()里)
    </script>
</body>

7、is ( )

    <div class="wrapper">
         <sapn class="demo">span-1</sapn>
         <sapn class="demo">span-2</sapn>
         <p class="demo">p-1</p>
         <sapn class="demo">span-3</sapn>
    </div>
    <script src = "./jquery.js"></script>
    <script> 
         $('.wrapper .demo').is('span'); //前后有交集就返回true     
    </script>

is应用:

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src = "./jquery.js"></script>
    <script> 
        $('ul').click(function(e){
             if ( $(e.target).is('li') ){
                 alter( $(e.target).text() )
             }eles{
                 alter( $(this.target).text() )
             }
        })   //点击ul显示全部文本  点击li显示各自文本
    </script>

8、add( ) 集中操作

    <div class = "wrapper">          
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    </div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script src = "./jquery.js"></script>
    <script> 
        $('.wrapper').add('ul').css() //可以把不相关的元素集中在一起操作
    </script>

9、end( )    回退操作

    <div class = "wrapper">          
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    </div>
    <script src = "./jquery.js"></script>
    <script> 
        $('.wrapper')
            .css({position:'relative'})
               .find('ul')
                  .css({position:'absolute'})
                     .end()
                        .css({position:'absolute'})
                //end 回退到ul的prevobject指向的wrapper
    </script>