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

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