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( )