jQuery基礎學習

一：函式繫結
1:為DOM繫結方法有兩種方法，一種在js中根據DOM ID監聽，一種在Dom結構中繫結方法。其實都一樣，前者的Click當觸發時其實就是後者的onClick，而兩者都是在繫結中放了一個處理方法。根據DOM id在js中監聽，如下

<button id="Import"></button>

<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $("#Import").click(function () {
        console.log("根據Id監聽");
    });
--------------------------------------------------------------------------------------------------
    $("#Import").click(Import);   //Import為該方法的引用，click會在觸發後自動呼叫這個方法
    function Import() {
        console.log("根據Id監聽");
    }
</script>

在DOM中繫結，如下

<button onclick="Import()"></button>

<script src="js/jquery-3.2.1.min.js"></script>
<script>
    function Import() {
        console.log("根據Id監聽");
    }
</script>

可以在DOM方法中傳入this，這樣就可以在js中註冊方法裡使用this了。

<button onclick="Import(this)"></button>

<script src="js/jquery-3.2.1.min.js"></script>
<script>
function Import(that){        
  //js可直接操作that 因為this直接就是那個dom了，不需要再通過getE獲取該dom物件
  that.parentNode.style.display='none';
  $(that).parent.hide();                    //JQuery操作
  console.log("根據Id監聽");
}
</script>

2:自定義事件 || 觸發自定義事件

$('#btn').on('myClick',function(){
     console.log('自定義事件');
});
$('#btn').trigger('myClick');

這個事件是繫結在id為btn的這個元素上的。
----------------------------------------------------------------------------------------------
$('#btn').on('click',function(){
     console.log('自帶事件');
});
$('#btn').click();//此句是$('#btn').trigger('click')的簡寫,此句還是呼叫了trigger

3:JQuery中on和bind的區別低版本JQ繫結事件有bind、live、delegate三個方法，比較混亂。高版本出了on代替這三個。
二：this
1.function中的this指向方法外面那層作用域

//如果放在最外層作用域，及直接放在<script>中
function MyConsole() {    console.log(this);}MyConsole();    //windowvar HisConsole = function () {    console.log(this);    }HisConsole();     //window  

2.立即執行函式

(function(){
    console.log('body');     window
})();

三：建構函式自身方法 與 原型物件區別
1.建構函式裡的屬性了方法像模板一樣，每個例項都會複製一份。但是例項與例項之間不能共享這些。
2.原型物件是所有例項都能共享的。建構函式裡面的屬性和方法因為每個例項都有例項化一遍，故效能消耗較大，如果是所有例項共用的物件還是放在原型物件上這樣能節省效能。四：Call/apply
call()的官方解釋：呼叫一個物件的一個方法，以另一個物件替換當前物件

-----------------------例1---------------------------------
function a() {
    this.x = 'a方法的x'
}
function b() {
    console.log(this.x);
}
b.call(new a());    //a方法的x

-----------------------例2---------------------------------
function f() {
        this.a = 'a';
        this.b = function () {
            console.log('b');
        }
    }
    function e() {
        f.call(this);       //e繼承了f的屬性和方法
    }
    var c = new e();
    console.log(c.a);  //  'a'
    c.b();   //   'b'

五：JQuery收集Form表單資料

<form id="BallForm">
    <input id="myinput" name="MyInput">

    <br>
    <label>
        <input name="Select" type="radio" value="1">籃球
    </label>
    <label>
        <input name="Select" type="radio" value="2">足球
    </label>
    <label>
        <input name="Select" type="radio" value="3">排球
    </label>
    <label>
        <input name="Select" type="radio" value="4">網球
    </label>

    <br>
    <label>
        <input name="MulSelect" type="checkbox" value="shanghai">上海
    </label>
    <label>
        <input name="MulSelect" type="checkbox" value="beijing">北京
    </label>
    <label>
        <input name="MulSelect" type="checkbox" value="aomen">澳門
    </label>
    <label>
        <input name="MulSelect" type="checkbox" value="xianggang">香港
    </label>
</form>
<button id="MySubmit">提交</button>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
  $("#MySubmit").click(function(){
    console.log($('#BallForm').serializeArray());

    var a = [];
    var Final = {};
    $.each($('#BallForm').serializeArray(),function (I,Item) {
      Final[Item.name] = Item.value;
      if(Item.name == 'MulSelect'){
        a.push(Item.value);
      }
    })

    Final['MulSelect'] = a;
    console.log(Final);
  });
</script>