一:函数绑定
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>