Day 29 (Jq)

1.empty、remove、detach比较

(1)empty vs remove

empty() 清空元素的内容(innerText)

      $(".hello").empty();

remove() 连同元素删除

      <div class="hello">Hello</div>

      $(".goodbye").remove();

(2)remove vs detach

结论:
js加入事件 + remove + append => alert ok
js加入事件 + detach + append => alert ok
jq加入事件 + remove + append => alert (X)
jq加入事件 + detach + append => alert ok

      // demo.onclick = function (){
      //     alert('我是第一种JS写法的事件');
      // }

      $("#demo").on("click", function () {
        alert("第二种用jq写法的事件");
      });

remove()

      btnTest.onclick = function () {
        // 先移除 後加入
        var temp = $("#demo");
        $("#demo").remove(); // remove、detach
        $("div:first").append(temp);
      };

detach()

      btnTest.onclick = function () {
        // 先移除 後加入
        var temp = $("#demo");
        $("#demo").detach(); // remove、detach
        $("div:first").append(temp);
      };

2.比较:$().each()、jQuery.each()

$() vs $ => {}、f

(1)
$().each(function):{}
jQuery function执行後的jQuery物件里面的each function (物件里面)
用途:已经拿到物件的里面的each(要自己造物件)
jQuery function
jQuery 物件

(2)
jQuery.each(): = $.each():
jQuery函式库里面的each function (函式库)
用途:用函式库里面的
jQuery 函式库

https://api.jquery.com/each/
**** index, element 不是关键字是变数，但是变数要命名有意义！ ****

(1)$().each(function):{}
(此时this = element)

        <h3>apple</h3>
        <h3>bee</h3>
        <h3 id="cat_1">cat</h3>

.
拿自己做的物件并使用 each方法
拿到 f(顺序、内容)

        $("h3").each(function (index, element) {
          //<h3>apple</h3> <h3>bee</h3> <h3>cat</h3>=console.log(this);
          console.log(element);
          
          console.log(element == this); //true

          // 4 种  // apple bee cat
          console.log($(element).text());
          console.log($(this).text());
          console.log(element.innerText);
          console.log(this.innerText);

          // 将所有 h3 元素的文字改为斜体
          $(this).html(`<i>${$(this).text()}</i>`);
        });

(2)jQuery.each(): = $.each():

        var list = ["dog", "egg"];

.
使用jQuery"函式库里面"的each function，告诉他我要用哪(list)

        $.each(list, function (index, item) {
          console.log("--开始--");
          console.log(index); // 0 1 (第几个)
          console.log(item); // dog egg(谁?)
          console.log(this); //string
          console.log("--结束--");
        });

3.$().each(function):{} 下， 4种读取innerText方式

        $("h3").each(function (index, element) {
          console.log(element == this);  //true
          // 4 种  // apple bee cat
          console.log($(element).text());
          console.log($(this).text());
          console.log(element.innerText);
          console.log(this.innerText);

          // 将所有 h3 元素的文字改为斜体
          $(this).html(`<i>${$(this).text()}</i>`);
        });

4.寻找元素

变数:
idx=>第几个
elm=>谁?
之前的抓法

     .each(function (idx, elm) {
            temp.push($(elm).text());
            temp.push(elm.tagName);
          });

1. filter   ===> $().filter()   //只抓该「元素」内的 
   filter用function抓的方法
        $("li")
          .filter(function (a, b) {
            // 里面只能放booling
            //https://api.jquery.com/prevUntil/#prevUntil-selector-filter

            // 1.全部都要
             return true;

            // 2.全部都不要
             return false;

            // 3.自己设定条件要或者不要 ==> 小玉西瓜
             if (a == 3) {
               return true;
             } else {
               return false;
             }
             return a == 3 //同3. 简写

            // 4.
            return b.innerText.indexOf("草莓") > -1 || a == 0; 
            //如果有草莓indexOf会是0 OR 0以上
            console.log(indexOf("草莓"));
            })
            .each(function (idx, elm) {
              temp.push(elm.innerHTML);
            });
            
2. find     ===> $().find()                   //找标签外的小孩 不找自己

          $("ul").find("b").each(function (idx, elm) {
         temp.push($(elm).text());
           });

3. children  ===> $().children()               //只找两层 不会找到孙 (没<b>)
4. parent    ===> $().parent()                 //爸爸是谁？
5. closest   ===> $().closest()                //找到为止
6. eq        ===> $().eq()                     //抓第几个
7. contents  ===> $().contents()  
//每个人我都要看! 但是他会抓到空白的元素== (要删除空白。)
8. :contains ===> $(selector:contains(text))  // text内容有的我就抓
9. :has()    ===> $(selector:has(selector))   
// ＜＞或 .class...有的我就抓 但只抓孩子