jquery事件与绑定事件

前端之家收集整理的这篇文章主要介绍了jquery事件与绑定事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1.首先,我们来看一下经常使用的添加事件的方式:

这样写在哪里都可以调用到这个方法

鼠标事件:

$("#aa").click(function(){ alert("点击事件"); }) $("#aa").dblclick(function(){ alert("双击事件"); }) $("#aa").mouSEOver(function(){ alert("鼠标移上") }); $("#aa").mouSEOut(function(){ alert("鼠标离开"); }) $("#aa").mousemove(function(){ alert("鼠标移动"); }) $("#aa").mouseup(function(){ alert("鼠标抬起"); }) $("#aa").mousedown(function(){ alert("鼠标按下"); }) 键盘按键按下:给id加没有作用,需要给整个页面加所以用$(document) $(document).KeyEvent(function(){ alert("鼠标离开"); })

表单元素事件:

$("#shao").focus(function(){ alert("获得焦点"); }) $("#shao").blur(function(){ alert("失去焦点"); }) $("#shao").change(function(){ alert("值发生变化,change事件"); }) $("#shao").keydown(function(){ alert("键盘按下"); })

2.绑定事件(挂事件):

可以动态的改变按钮的事件;

什么是动态绑定?

动态绑定是指动态添加的DOM节点或者html元素,他们最开始时运行的时候是不存在的。如果要给这些动态加入的节点增加事件,就必须要用jquery的on方法来绑定事件。

bind()向匹配元素添加一个或多个事件处理器。

使用方式:

$(selector).bind(event,data,function)

注:bind()函数只能针对已经存在的元素进行事件的设置

代码:首先写两个按钮:

首先操作点击挂上事件:

//挂事件, $("#btn1").click(function(){ //点击挂事件,给div绑定一个事件: $("#aa").bind("click",function(){ //bind绑定事件 alert("点击"); }); //括号里两个参数,第一个是事件类型(事件名称),第二个参数是要执行的代码 })

这样的话点击挂事件:

移除事件的按钮:

//移除事件; $("#aa").click(function(){ //点击移除事件;把div里面的事件移除掉 $("#aa").unbind("click"); //unbind移除绑定,填一个参数,要移除哪个事件 })

点击移除,取消aa得点击事件

3.事件数据

一般的事件包含事件源跟时间数据:

事件数据:出发这个时间,会传过来那些数据

js简化,可以不写事件源,因为可以取到

4.JSON语法:

JSON的结构:

json简单说就是javascript中的对象和数组,所以这两种结构就是对象和数组两种结构,通过这两种结构可以表示各种复杂的结构。

(1)对象:对象在js中表示为“{}”括起来的内容,数据结构为 {key:value,key:value,...}的键值对的结构,在面向对象的语言中,key为对象的属性,value为对应的属性值,所以很容易理解,取值方法为 对象.key 获取属性值,这个属性值的类型可以是 数字、字符串、数组、对象几种。

(2)数组:数组在js中是中括号“[]”括起来的内容,数据结构为 ["java","javascript","vb",...],取值方式和所有语言中一样,使用索引获取,字段值的类型可以是 数字、字符串、数组、对象几种。

经过对象、数组2种结构就可以组合成复杂的数据结构了。

json是一种轻量级的数据交换格式

全拼:

JavaScript Object Notation

定义语法:

取值方式:

取索引:

方法

点语法:

JSON也可以寸二维数组:

方法 //点语法: alert(j.one); alert(j.three.aa);

遍历JSON数据:

json不具有长度的属性,所以for循环不适应于json

但是for-in同样适应于数组

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/jquery/40657.html

猜你在找的jQuery相关文章