jQuery之必會增刪改查Dom操作

.next  .prev

    <button>change</button>
    <span class = '.demo'>aaa</span>
    <p class = '.demo'>bbb</p>
    <script src="./jquery.js"></script>
    <script>
      $('button').click(function(){
          $(this).next().css({fontSize:'20px',color:'orange'})
      })
      // next中可以傳參數  如：next('p') 如果下一個兄弟元素節點不是p則不顯示
      //prev 同理 next

 nextAll( )  prevAll(  )

 nextAll
  <div class="wrapper">
       全選：<input type="checkbox"></input>
       banana：<input type="checkbox">
       apple：<input type="checkbox">
       orange：<input type="checkbox">
       <input type="submit" value = "login"></input>
   </div>
   <script src = "./jquery.js"></script>
   <script>
       $('input[type="checkbox"]').eq(0).click(function(){
          if( $(this).prop('checked')){
              $(this).nextAll().prop('checked',true)
          }else{
            $(this).nextAll().prop('checked',false)
          }
       })
       //(在控制台輸出) $('input:last').prop('checked') 返回true
       //但是最后submit不需要被選擇 所以在nextAll中需添加'input[type="checkbox"]'
       $('input[type="checkbox"]').eq(0).click(function(){
          if( $(this).prop('checked')){
              $(this).nextAll('input[type="checkbox"]').prop('checked',true)
          }else{
            $(this).nextAll('input[type="checkbox"]').prop('checked',false)
          }
       })
   </script>

nextUntil   直到什么為止

   <div class="wrapper">
       <h1>水果</h1>
       全選：<input type="checkbox"></input>
       banana:<input type="checkbox">
       apple:<input type="checkbox">
       orange:<input type="checkbox">

       <h1>nba</h1>
       全選：<input type="checkbox"></input>
       Rose:<input type="checkbox">
       Curry:<input type="checkbox">
       James:<input type="checkbox">
       <input type="button" value = "submit">
   </div>
   <script src = "./jquery.js"></script>
   <script>
       $('h1').next().click(function(){
          if( $(this).prop('checked')){
              $(this).nextUntil('h1','input[type="checkbox"]').prop('checked',true)
          }else{
              $(this).nextUntil('h1','input[type="checkbox"]').prop('checked',false)
          }
       });
       //nextUntil兩個參數 第一個表示到哪為止 第二個是限定條件，也就是找哪個屬性
   </script>

小練習

   <div class="wrapper">
       all: <input type="checkbox"></input>
       <h1>吃貨清單</h1>
       all: <input type="checkbox"></input>
       <h2>水果</h2>
       全選：<input type="checkbox"></input>
       banana:<input type="checkbox">
       apple:<input type="checkbox">
       orange:<input type="checkbox">

       <h2>蔬菜</h2>
       全選：<input type="checkbox"></input>
       tomato:<input type="checkbox">
       egg:<input type="checkbox">
       potato:<input type="checkbox">
       <h2></h2>
       <h1>明星清單</h1>
       all: <input type="checkbox"></input>
       <h2>nba</h2>
       全選：<input type="checkbox"></input>
       Rose:<input type="checkbox">
       Curry:<input type="checkbox">
       James:<input type="checkbox">
   </div>
   <script src = "./jquery.js"></script>
   <script>
     $('input').eq(0).click(function(){
         if( $(this).prop('checked')){
             $(this).nextAll('input[type="checkbox"]').prop('checked',true)
         }else{
            $(this).nextAll('input[type="checkbox"]').prop('checked',false)
         }
     })
     $('h1').next().click(function(){
         if($(this).prop('checked')){
            $(this).nextUntil('h1','input[type="checkbox"]').prop('checked',true)
         }else{
            $(this).nextUntil('h1','input[type="checkbox"]').prop('checked',false)
         }
     })
     $('h2').next().click(function(){
         if($(this).prop('checked')){
            $(this).nextUntil('h2','input[type="checkbox"]').prop('checked',true)
         }else{
            $(this).nextUntil('h2','input[type="checkbox"]').prop('checked',false)
         }
     })
   </script>

siblings

   <ul>
       <span>span1</span>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <span>span2</span>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <span>span3</span>
       <li>9</li>
       <li>10</li>
   </ul>
   <script src = "./jquery.js"></script>
   <script>
      $('li').eq(4).css('backgroundColor','red').siblings().css('backgroundColor','orange')
      //所以兄弟元素節點
      $('li').eq(4).css('backgroundColor','red').siblings('span').css('backgroundColor','orange')
      //傳參代表過濾  (只選span標簽)
      
   </script>

parent（）（上一級父級）  可以不傳參   傳參為過濾條件

   <!-- <div class="shop" data-id = "101">
       <p>basketball-nike</p>
      <button>add</button>
   </div>
   <div class="shop" data-id = "102">
        <p>basketball-adidas</p>
       <button>add</button>
    </div> -->


    <div class="wrapper">

    </div>
   <script src = "./jquery.js"></script>
   <script>
      var showArrs = [
          {
             name:'nike',
             id:'101'
          },{
            name:'adidas',
            id:'102'
          }
      ];  //把數據寫成上面注釋的形式
      var str = '';
      showArrs.forEach(function(ele,index){
          str += '<div class="shop" data-id=" '+ ele.id +' "><p> '+ ele.name +'</p><button>add</button></div>';
      });
      $('.wrapper').html(str);
      var carArr = [];
      $('button').click(function(){
          carArr.push( $(this).parent().attr('data-id') );
      });
   </script>

parents( ) 獲取多個父級  可以不傳參  也可以傳參過濾

 

closest  離你最近的滿足條件的父級

父級重復可以使用closest  找到最近的父級

 

offsetParent

  <style>
      .wrapper{
          position:absolute;
      }
  </style>
<body>
    <div class="wrapper">
          <div class="box">
              <span>123</span>
          </div>
    </div>
    <script src = "./jquery.js"></script>
   <script>
         console.log($('span').offsetParent());//找離他最近有定位的父級  （是wrapper）
   </script>

.slice()  截取

 

insertBefoe( )、 before( )

insertAfter( ）、after( )

 

appendTo( )   append( )

prependTo( )   prepend(  )

    <style>
        .wrapper{
            border:1px solid black;
            width:200px;
            padding:10px;
        }
        .wrapper div{
            width:200px;
            height:100px;
        }
        .wrapper .box1{
           background:red;
        }
        .wrapper .box2{
           background:orange;
        }
        .content{
            width:200px;
            height:50px;
            background:blue;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="box1">box1</div>
        <div class="box2">box2</div>
    </div>
    <div class="content">content</div>
    <script src = "./jquery.js"></script>
    <script>
        $('.content').insertBefore('.box1');//插入content在box1的前面
        $('.box1').before($('.content'));//填在before里的內容在前面
        //兩個方法結果相同 選用哪個取決於想對哪個元素進行鏈式操作 第一種對.content進行操作，第二種對box1操作
        //insertAfter( ）、after( )用法相同

        $('.content').appendTo('.wrapper');//把前面的添加到后面的里
        $('.wrapper').append( $('.content') );//意思與上面相同

        $('.wrapper').prepend( $('.content') );
        $('.content').prependTo('.wrapper'); //在什么前面添加
        
    </script>

 

remove( )  detach( )

    <style>
        div{
            width:100px;
            height:100px;
            background:orange;
        }
    </style>
</head>
<body>
    <div></div>
    <script src = "./jquery.js"></script>
    <script>
        $('div').click(function(){
            alert(0);
        })
    //控制台中輸出：
    $('div').remove().appendTo( $('body') ) //將div刪除再添加回來，原來的點擊事件也沒了
    $('div').detach().appendTo( $('body') )//原來的點擊事件保留
    </script>

$( ) 參數：標簽字符串    可以創建元素

    <style>
        div{
            width:100px;
            height:100px;
            background:orange;
        }
    </style>
</head>
<body>
    
    <script src = "./jquery.js"></script>
    <script>
        $('<div></div>').appendTo( $('body'));//可以創建標簽
        $('<div><span style="color:red;">aaa</span></div>').appendTo( $('body'));//可以創建復雜的
        $('<div><span style="color:red;">aaa</span></div><p></p>').appendTo( $('body'));//同級的標簽（p）也可以放在后面
    </script>

.wrap( )   .wraplnner( )    wrapAll   unWrap

 .wrap( )
   <div class="demo"></div>
    <div class="box"></div>
    <script src = "./jquery.js"></script>
    <script>
        //wrap 創建父級
        $('.demo').warp('<div></div>');//參數可以傳字符串這種創建對象的形式
        $('.demo').warp('<div class="wrapper"></div>');//可添加屬性
        $('.demo').warp( $('<div class="wrapper"></div>') );//也可創建對象這種形式
        $('.demo').warp( $('.box') );//選中已有的標簽是復制
        //wrap() 也可填函數

 .wraplnner( )
   <div class="demo">
        <span></span>
        <span></span>
    </div>
    <script src = "./jquery.js"></script>
    <script>
        //wrapInner  內部標簽加父級
        $('.demo').wrapInner('<div/>'); //demo里的span就會被div包裹住
        //也可以是函數的形式
        $('.demo').wrapInner(function(index){
            return '<div class="wrapper' + index + '"></div>'
        });
    </script>

wrapAll 統一加上父級  wrap是分別加上  （比如有兩個class為demo 的div 統一給div里的元素加上一個父級  用wrap就是分別給兩個div里的元素加一個父級）
unWrap 把直接父級刪掉  一直調用一直往上刪 （到body為止）

.clone( )