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