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

Js

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

Jq

      $("#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...有的我就抓 但只抓孩子

5. .的意義:

css class selector
object.attritube
../../
小數點
函式庫.函示
函式庫.PI(圓周率)

函式庫:Math、JQuery

6.老師主觀感受:

畫面的東西才叫element
在變數裡面沒有展示在畫面上item