Day 28 (Jq)

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());