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

<input type="button" id="btn" value="click me!" onclick="shao();" />
<script type="text/javascript">
function shao() {
alert("msg is showing!");
}
</script>

我们最常用的是为元素添加onclick元素属性的方式来添加事件

这种方法的弊端是:

只能为一个事件处理函数,在事件处理函数方法中,获取事件对象的方式不同.

jQuery中的事件

ready事件:

当页面加载完成后,来执行function:

<script>
$(document).ready(function(e){
alert(document.getElementById("aa").innerHTML);
//若是要写function方法,不可以在里面写
})
//要在外面写
</script> 

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

鼠标事件:

<script>
$("#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("鼠标离开");
}) </script> 

表单元素事件:

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

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

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

什么是动态绑定?

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

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

使用方式:
$(selector).bind(event,data,function)

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

代码:首先写两个按钮:

<body>
<div id="aa" style="width: 100px; height: 100px; background-color: blueviolet;">hello</div>
<!--<input type="text" id="shao" />-->
<input type="button" id="btn1" value="挂事件" />
<input type="button" id="btn2" value="移除事件" />
</body>

首先操作点击挂上事件:

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

这样的话点击挂事件:

移除事件的按钮:

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

点击移除,取消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

定义语法:

var  j = {
"one":"111111",
"two":"22222"
};

取值方式:

取索引:

//数组的取值方式:
alert(j["one"]);//直接取索引的方法

点语法:

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

JSON也可以寸二维数组:

var  j = {
"one":"111111",
"two":"22222",
"three":{"aa":"33333"},
};
//数组的取值方式:
//alert(j["one"]);//直接取索引的方法 //点语法:
alert(j.one);
alert(j.three.aa);

遍历JSON数据:

//遍历
for(var v in j)
{
//定义一个变量v,把j拿到v里面,关键字不是”as“了,是”in“,
alert(v);
// 这样便利的是索引
alert(j[v]);
// 这样是根据索引来取值
}

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

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

jquery事件与绑定事件的更多相关文章

  1. 关于Jquery的delegate绑定事件无效

    今天在做一个页面,用的是easyui页面有很多的tabs,里面都放了iframe 需要在load事件动态调整iframe高度 发现始终无法使用delegate来绑定load事件. 纠结了一下午发现了问 ...

  2. jQuery学习-事件之绑定事件(三)

    在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event ...

  3. jQuery学习-事件之绑定事件(二)

    在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

  4. JQuery Mobile - 为什么绑定事件后会被多次执行?

    JQuery Mobile 在绑定事件时候,发现会被多次执行,为什么啊? 原来,jquery click  不是替换原有的function ,而是接着添加,所以才会执行次数越来越多,怎么办才能按需实现 ...

  5. jquery-10 jquery中的绑定事件和解绑事件的方法是什么

    jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...

  6. 2017年3月25日工作日志:Jquery使用小结[绑定事件判断、select标签、军官证正则]

    jQuery获取DOM绑定事件 在1.8.0版本之前,我们要想获取某个DOM绑定的事件处理程序可以这样: $.data(domObj,'events');//或者$('selector').data( ...

  7. jQuery添加html绑定事件

    jQuery添加html绑定事件 $("#xxx").on("click",".dev",function(){ });

  8. jquery中on绑定事件

    之前项目中动态创建的标签元素  在绑定事件的时候  都是无效  无论如何都不能触发 eg:在页面加载完成之后   再由脚本动态创建的<div>元素  在绑定事件的时候 例如click事件 ...

  9. jquery之on()绑定事件和off()解除绑定事件

    off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...

  10. jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案

    jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...

随机推荐

  1. 滚动视图(ScrollView)的功能与用法

    滚动视图ScrollView由FrameLayout派生而出,它就是一个用于为普通组件添加滚动条的组件.ScrollView里最多只能包含一个组件,而ScrollVew的作用就是为该组件添加垂直滚动条 ...

  2. Unable to find setter method for attribute: 属性名

    tld文件里面的名称和标签内的属性名要一致.

  3. android:在ViewPager中使用Button

    最近在项目用用到ViewPager ,其中页面包含有Button,因为之前也有使用个ViewPager ,所以这个也照搬之前的方式,测试后发现点击button无法执行,这个button是在第一页面的默 ...

  4. Java内存回收优化及配置

    原文链接:http://eol.cqu.edu.cn/eol/jpk/course/preview/jpkmaterials_folder_txtrtfview.jsp?resId=23156& ...

  5. 【js 编程艺术】小制作四

    1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  6. 安装Ubuntu时的硬盘分区

    根目录 大小:60G~100G(用来安装程序) 新分区的类型:主分区 新分区的位置:空间起始位置 用于:EXT4日志文件系统 挂载点:"/" 大小:4G 新分区的类型:逻辑分区 新 ...

  7. MyBatis 源码分析——SqlSession接口和Executor类

    mybatis框架在操作数据的时候,离不开SqlSession接口实例类的作用.可以说SqlSession接口实例是开发过程中打交道最多的一个类.即是DefaultSqlSession类.如果笔者记得 ...

  8. 如何用webbrowser获取ajax动态生成的网页的源码?

    1.步骤一:修改IE内核的版本(这个方法厉害了) public Form1() { InitializeComponent();int BrowserVer, RegVal; // get the i ...

  9. C++编程练习(6)----“实现简单的队列的链式存储结构“

    队列的链式存储结构,其实就是线性表的单链表,只不过它只能尾进头出.简称链队列. 实现代码如下: /* LinkQueue.h 头文件 */ #include<iostream> #defi ...

  10. 软通动力C语言机试题

    #include <stdio.h> int charCount(char *str) { int iCount = 0; int i, j, k=0; char *p = str; ch ...