jq的基本操作

遍历子元素

遍历方法 each( ) ：规定为每个匹配元素规定运行的函数

each 回调函数里面的第一个参数表示元素的索引
回调函数里面的第二个参数表示每一个遍历的原生元素❤

 // $('li').each(function(i,e){
        //     console.log(e);
        // })

• filter 过滤 在集合元素中过滤出指定的元素

 // let lis = $('li').filter('.tt1');
        // console.log(lis);

• parent()：获取元素的父级元素

 // let f = $('.tt1').parent()
        // console.log(f);

• parents()：返回元素的所有祖先元素

      // let fs = $('.tt1').parents();
        // console.log(fs);

• siblings()用于获取位于匹配元素前面和后面的所有同辈元素 除了他自己 前面后面的都被选中了

   // $('li').click(function(){
        //     $(this).css('background','#ccc').siblings().css('background','')
        // })

• next() 用于获取紧邻匹配元素之后的元素 有多个.tt 会返回一个紧邻匹配元素之后的元素的集合

 // let d = $('.tt').next()
        // console.log( d );

next prev方法 获取不到元素 会返回jq对象 document

• prev() 用于获取紧邻匹配元素之前的元素

  // let d = $('.yu').prev()
        // console.log( d );

• children()方法可以用来获取元素的所有子元素

   //    let lis = $('ul').children('.tt')
    //    console.log(lis.length);
      /* children获取不到元素会返回jq对象 document */
    //    let c = $('.box').children('.tt')

• find 可以获取后代的元素

  // let c = $('.box').find('span')
        // console.log(c);

获取与设置元素属性

• attr是获取元素的自定义属性
• prop是获取元素自身的属性

  /* 自定义属性 */
        /* attr 来获取属性值 */
        // console.log( $('li:eq(0)').attr('data-a') )
        // /* attr 来设置属性值 */
        // $('li:eq(1)').attr('data-b','祝福中国滑冰队')

        /* 获取图片原有的属性 */
        // console.log( $('img').attr('alt') )
        /* 设置图片的宽高 */
        // $('img').attr('width','100px')
        // $('img').attr('height','100px')
        // /* 删除图片的属性 */
        // $('img').click(function(){
        //     $(this).removeAttr('width')
        //     $(this).removeAttr('height')
        // })

 //     console.log( $(this).prop('checked') );
        // })

节点的删除

• remove 删除整个节点

        //     // $('li:eq(0)').remove();
        //     $(this).remove()
        // })
           /* remove 可以自己删除自己 */
        // $('li:eq(0)').click(function(){
        //     $(this).remove()
        // })

• empty 清空节点内容

        //     $('li:eq(0)').empty();
        // })

• detach()：删除整个节点，保留元素的绑定事件、附加的数据

            alert('你好')
        })
        
        $('button').click(function(){
           let liDel = $('li:eq(0)').detach();
           $('ul').append(liDel)
        })

empty remove 和 detach 执行完之后都有返回值 返回删除的节点