jQuery相关

Posted by CodingWithAlice on October 24, 2024

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