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>