1.意義

(1)jQuery = ƒ (函式庫)

      console.log(typeof jQuery);  //ƒ

ƒ舉例($)

        var list = ["dog", "egg"];
        // indexInArray: number, valueOfElement: T
        $.each(list, function (index, item) {
          console.log("--開始--");
          console.log(index); // 0 1 (第幾個)
          console.log(item); // dog egg(誰?) item不是物件
          console.log(this); //string
          console.log("--結束--");
        });

(2)jQuery() = {}物件 (=屬性+方法)

      var temp2 = jQuery(); 
      console.log(temp2);    //{}

物件舉例

      var apple = {
        //key1:value1 屬性
        chinese: 100,
        english: 90,
        math: 70,
      };

      console.log(apple.english); //90
      console.log(apple);

(3)jQuery = $

      console.log($ = = = jQuery);  //true

(4)jQuery() = $() = {}物件
所以大家都寫$()

2.怎麼選擇 (jQuery Syntax)

$(selector).action() = $(CSS的選擇方式)物件 . 選到的元素做甚麼動作JQ(function名稱)
$(CSS選擇|jQuery選擇).動作()
https://www.w3schools.com/jquery/jquery_syntax.asp

有九種方式可以選，[]可有可無 Jq (Js的可有可無:?)
https://api.jquery.com/jQuery/

      jQuery( selector [, context ] )    // selectorCSS的選擇方式 , [可有可無]
      jQuery( element )
      jQuery( elementArray )
      jQuery( object )
      jQuery( selection )
      jQuery()
      jQuery( html [, ownerDocument ] )
      jQuery( html, attributes )
      jQuery( callback )

3.版本

公司用舊版本就跟著用舊著，不要去替換上新版本(上課使用3.4.1)

4.利用CSS樣式選擇器選擇元素，但有例外 EX:input type

     var temp = $("h4");
     var temp = $("#ulist");
     var temp = $("li:first")

    var temp = $("input[type=button]") 
  = var temp = $(":button");  //jQuery特有


    :input	$(":input")	All input elements
    :text	$(":text")	All input elements with type="text"
    :password$(":password")	All input elements with type="password"
    :radio	$(":radio")	All input elements with type="radio"
    :checkbox$(":checkbox")	All input elements with type="checkbox"
    :submit	$(":submit")	All input elements with type="submit"
    :reset	$(":reset")	All input elements with type="reset"
    :button	$(":button")	All input elements with type="button"

:的意義?
CSS:=>虛擬

     input[type=button]:hover

jQuery: => CSS: + :input type

     var temp = $("li:first-of-type")
     var temp = $(":button")

5.$().text() 和 $().html() 的差異

(1)text() = innerText()
(2)html() = innerHTML

       var temp = $("p").text("<b>cat</b>"); //內容
       console.log(temp);
   
       var temp = $("p").html("<b>cat</b>"); //語法
       console.log(temp);

6. 物件才可以用.找東西

     <p>測試 attr ===><span id="testAttr"> </span></p>
     testAttr.innerText = "豬排";

7. $(CSS選擇|jQuery選擇).動作()

     $('input[name="age"]:checked').val(); //選擇.val()動作

8. attr vs. prop

先用prop測試看看，如果不理想就用attr

(1)innerText
attr可以抓預設的資料 不會更新 attributeName
prop可以即時抓到資料 propertyName

        testAttr.innerText = $("#userName").attr("value"); 
        testProp.innerText = $("#userName").prop("value");

(2)checkbox checked
2-1 attr在這比較正常 因為根本沒有checked
2-2 checked時可以看看自己想要怎麼使用

無checked

      <input id="test" type="checkbox" />
      console.log($("#test").attr("checked")); // undefined。 沒有checked
      console.log($("#test").prop("checked")); // false

有checked

     <input id="test_2" type="checkbox" checked />
     console.log($("#test_2").attr("checked")); // checked 預設有勾
     console.log($("#test_2").prop("checked")); // true 有勾

結論：先用prop測試看看，如果不理想就用attr

9. .的使用=>裝甚麼，拿東西出來

字串.分割
陣列.join
{}.屬性、值

10.簡化

Js-->CSS選法

       var js = document.querySelector('input[name="age"]:checked').value;

JQ

       var jq = $('input[name="age"]:checked').val();  //val()取得value的方法

10.簡化-2

       var temp = $("ol").html();
       console.log(temp);
       $("ol").append(temp); //越按越多~
       //同前
       $("ol").append($("ol").html());