jQuery相关
1、jQuery中绑定事件用的on和bind有什么区别?
bind(type, [data], fn)//解绑用unbind
on(type,[selector],[data],fn)//解绑用off
区别在于:是否支持selector这个参数值。
由于javascript的事件冒泡特性,如果我们在父元素上注册了一个事件处理函数,当子元素上发生这个事件的时候,父元素上的事件处理函数也会被触发。如果使用on的时候,不设置selector,那么on与bind就没有区别了。
<div id="parent">
<input type="button" value="a" id="a"/>
<input type="button" value="b" id="b"/>
</div>
/*点击a的时候触发,点击b的时候不触发*/
$("#parent").on("click","#a",function(){
alert($(this).attr("id"));
});
on()函数的参数selector就是为了在事件冒泡的时候,让父元素能够过滤掉子元素上发生的事件。如果使用了bind,那么就没有这个能力,子元素上发生的事件一定会触发父元素事件。
bind()、unbind()、on()、off()的几个通性:(这里主要写bind和unbind)
①、JQuery中事件可以重复绑定,不会覆盖
//点击button1的时候,这2个事件处理函数都会触发
$("#button1").bind("click",function(){ alert("func1");});
$("#button1").bind("click",function(){ alert("func2");});
②、使用bind一次绑定多个事件和处理函数
//多个事件需要注册相同的处理函数
$("#button1").bind("mousedown mouseup",function(){
console.log(11);
});
//如果每个事件的处理函数不同,可以用json对象
$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
);
③、传递event对象和自定义参数
//如果我们指定了自定义的参数,那么JQuery会将它放在事件对象的data属性中,即通过eventObject.data就能够拿到我们传递的参数值
$("#button1").bind("click", {name:"aty"}, function(eventObject){
alert("params=" + eventObject.data.name);
});
④、事件取消的三种形式
unbind用来取消之前通过bind绑定的事件处理函数,总的来说有三种形式:取消所有事件、取消某种类型的事件、取消某种类型下的某个事件处理函数。
$("#button1").unbind()//取消button1上所有已经绑定的事件处理函数。
$("#button1").unbind("click")//只取消button1上绑定的click类型的事件处理函数。
取消某种类型下的某个事件处理函数:
/容易犯的错误写法
$("#button1").bind("click",function(eventObj){console.log("click1");});
$("#button1").bind("click",function(eventObj){console.log("click2");});
// 这种写法是错误的,虽然用的匿名函数的功能相同,但这两个函数不是同一个,它们占用的是不同的内存空间
$("#button1").unbind("click",function(eventObj){console.log("click2");});
/正确写法
$("#button1").bind("click",func1);
$("#button1").bind("click",func2);
// 这种做法不允许使用匿名函数,我们不得不暴露全局的函数,JQuery提供了事件命名空间机制
$("#button1").unbind("click",func2);
function func1(){console.log("click1");}
function func2(){console.log("click2");}
⑤、事件命名空间
事件类型后面以点语法附加一个别名,以便引用事件,如”click.a”,其中”a”就是click当前事件类型的别名,即事件命名空间。
$("#button1").bind("click.a",function(eventObj){console.log("click1");});
$("#button1").bind("click.b",function(eventObj){console.log("click2");});
// 使用命名空间,能够以一种更优雅的方式取消某种事件类型下的某个事件处理函数
$("#button1").unbind("click.a");
能够按照命名空间来取消事件$("#button1").unbind(".a");
2. jQuery和Vue使用起来有什么区别?
从jquery到vue或者说是到mvvm的转变则是一个思想想的转变,是将原有的直接操作dom的思想转变到操作数据上去。
从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染。
jQuery是使用选择器($)选取DOM对象,对其进行赋值、取值、事件绑定等操作,和原生的区别只在于可以更方便的选取和操作DOM对象,其数据和界面是在一起的。
Vue则是通过Vue对象将数据和View层分离开来。对数据进行操作不再需要引用相应的DOM对象,通过Vue对象这个vm实现相互的绑定。
vue适用的场景:复杂数据操作的后台页面,表单填写页面;vue侧重数据绑定;
jquery适用的场景:比如说一些html5的动画页面,一些需要js来操作页面样式的页面;jquery侧重样式操作,动画效果等;
3、jQuery 删除元素
// 移除本身
$(this).remove();
// 删除本身子元素
$(this).empty();