35-JQuery二

第三十五章.JQuery二

• append

 <div id="wrap">
    <p>已经存在的p</p>
  </div>
  <nav>nav标签</nav>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>
    document.querySelector("p").onclick = function(){
      console.log("哈哈哈哈");
    }

    /*
    * append()  添加子元素
    *   参数：
    *     - 普通文字字符串
    *     - 带标签的字符串
    *     - DOM对象
    *     - jQ对象
    *
    * */
    // $("#wrap").append("天气不错");
    // $("#wrap").append("<b>天气不错</b>");
    // $("#wrap").append( document.createElement("a") );
    // $("#wrap").append( $("nav") );
      
    /*
    <div id="wrap">
    <p>已经存在的p</p>
    "天气不错"
    <b>天气不错</b>
    <a></a>
    <nav>nav标签</nav>
    </div>
    */  
      

    let $b = $("<p><b>天气不错</b></p>");
    $b.css("color",'red');
    // $("#wrap").append( $b );

    $b.appendTo( $("#wrap") );

  </script>

• prepend

  <div id="wrap">
    <p>已经存在的p</p>
  </div>
  <nav>nav标签</nav>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>
      
    let $b = $("<p><b>天气真好</b></p>");
    $b.css("color",'red');
    $("#wrap").prepend( $b );//在前面加

      /*
      <div id="wrap">
      <p style="color: red;"><b>天气真好</b></p>
      <p>已经存在的p</p>
      </div>
      */
  </script>

• insertBefore

  <div id="wrap">
    <p>1111</p>
    <p>2222</p>
    <p>3333</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>

    // 要插入的jq对象.insertBefore( 已存在页面中的jq对象 )

    //兄弟关系  
    // $("p").eq(1).before( $("<b>bbbb</b>") );//在<p>2222<p>前面插入<p>bbbb</p>
    $("p").eq(1).after( $("<b>bbbb</b>") );    //在<p>2222<p>后面插入<p>bbbb</p>

    // $("<b>bbbb</b>").insertBefore( $("p").eq(1) );
    // $("<b>bbbb</b>").insertAfter( $("p").eq(1) );

  </script>

• empty 和 remove

 <div id="wrap">
    内容内容内容内容
    <p>ssss</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>
    // $("#wrap").empty();//<div id="wrap"></div> 清空内容，不需要参数

    $("#wrap").remove();//全部清除，自己也杀 清除了wrap盒子

  </script>

• clone

 <div id="wrap">
    <p>这是一个p <b>bbb</b></p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>

    let $p = $("#wrap p");
    $p.click(function(){
      alert("点击事件触发了！");
    });

    let $p1 = $p.clone(true);//进行克隆，传一个布尔值，若是false则只复制内容没有复制点击事件

    $("#wrap").append($p1);

  </script>

• 总结-文档处理：

  1. append
  2. prepend
  3. after
  4. before
  5. empty
  6. remove
  7. clone

• eq 筛选

 <div>
    <p>001</p>
    <p>002</p>
    <p>003</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>
    $("p").eq(1).css("color",'red');//正索引 002变红色
    $("p").eq(-1).css("color",'yellow');//负索引 003变黄色
  </script>

• hasClass 检测是否含有类名

 <div id="wrap" class="aa bb"></div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>
    console.log($("#wrap").hasClass("aa"));//true
    console.log($("#wrap").hasClass("bb"));//true
    console.log($("#wrap").hasClass("cc"));//false
  </script>

• filter过滤

 <div id="wrap">
    <p>0000001</p>
    <p class="aa">0000002</p>
    <p>0000003</p>
    <p class="aa">0000004</p>
    <i class="aa">iiiiiiii</i>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>

    $("p")
      .css("font-weight","bolder")
      .filter(".aa")
      .css("color" , 'red')
      //在p这个jq对象基础上先字体加粗，让会筛选出带有.aa类名的颜色变红色

    $("p")
      .css("font-weight","bolder")
      .not(".aa")
      .css("color" , 'red');
	//在p这个jq对象基础上先字体加粗，让会筛选出不带有.aa类名的颜色变红色
  </script>

• children parent parents offsetParent

 <div id="wrap">
    <p>0000001</p>
    <p class="aa">0000002</p>
    <p>0000003</p>
    <p class="aa">0000004</p>
    <i class="aa">iiiiiiii</i>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>
    console.log($("#wrap").children());//找它的孩子 [p, p.aa, p, p.aa, i.aa]
    console.log($("#wrap").parent());//找它的爸爸  [body]
    console.log($("#wrap").parents());//找它的所有父级之到html [body.html]  
    //console.log($("#wrap").parents("html"));//找到只满足筛选出的 [html] 
    console.log($("#wrap").offsetParent());//[html]
</script>

• find

 <div id="wrap">
    <p><b class="aa">bbbb</b></p>

    <i class="aa">iiiii</i>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>
    $("#wrap")
      .css({
        width : 100,
        height : 100
      })
      .find(".aa")//在wrap内部筛选带有类名aa的
      .css("color" ,'red')
  </script>

• siblings

 <div>
    <ul>
      <li>00001</li>
      <li>00002</li>
      <li>00003</li>
      <li>00004</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script>

    $("ul li").click(function(){

      $(this)
        .css("color" , 'red')
        .siblings()
        .css("color" , "black");

    });

  </script>