• jQuery之dom操作


    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>
  • 相关阅读:
    python 合并 Excel 单元格
    python 设置 Excel 表格的行高和列宽
    Python 用 openpyxl 模块统计 Excel 表格中的数据,以字典形式写入 py 文件
    python 打印字母阶梯和金字塔
    python 用 openpyxl 读取 Excel 表格中指定的行或列
    Python 的 filter() 函数
    Python 的 map() 函数
    python 之 range() 函数
    python 的 reduce() 函数
    python 之 lambda 函数
  • 原文地址:https://www.cnblogs.com/tianya-guoke/p/10162940.html
Copyright © 2020-2023  润新知