当前位置：首页 > 资讯 > 技术文档

jquery事件与绑定事件

时间：2022-07-14 13:01 编辑：来源：阅读：
扫一扫，手机访问

摘要：jquery事件与绑定事件

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

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

[b]我们最常用的是为元素添加onclick元素属性的方式来添加事件[/b] [b]这种方法的弊端是：[/b] [b]只能为一个事件处理函数，在事件处理函数方法中，获取事件对象的方式不同.[/b] [b]jQuery中的事件[/b] [b]ready事件：[/b] 当页面加载完成后，来执行function：

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

这样写在哪里都可以调用到这个方法； [b]鼠标事件：[/b]

<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>

[b]表单元素事件：[/b]

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

[b]2.绑定事件（挂事件）：[/b] 可以动态的改变按钮的事件； [b]什么是动态绑定？[/b] 动态绑定是指动态添加的DOM节点或者html元素，他们最开始时运行的时候是不存在的。如果要给这些动态加入的节点增加事件，就必须要用jquery的on方法来绑定事件。 bind()向匹配元素添加一个或多个事件处理器。 [b]使用方式：[/b] [code]$(selector).bind(event,data,function)[/code] 注：bind()函数只能针对已经存在的元素进行事件的设置 [b]代码：[/b]首先写两个按钮：

<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>

这样的话点击挂事件： [img]http://files.jb51.net/file_images/article/201703/201703161431203.png[/img] [b]移除事件的按钮：[/b]

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

点击移除，取消aa得点击事件 [b]3.事件数据[/b] 一般的事件包含事件源跟时间数据：事件数据：出发这个时间，会传过来那些数据 js简化，可以不写事件源，因为可以取到 [b]4.JSON语法：[/b] [b]JSON的结构：[/b] json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。（1）对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,...}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为对象.key 获取属性值，这个属性值的类型可以是数字、字符串、数组、对象几种。（2）数组：数组在js中是中括号“[]”括起来的内容，数据结构为 ["java","javascript","vb",...]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是数字、字符串、数组、对象几种。经过对象、数组2种结构就可以组合成复杂的数据结构了。 [b]json是一种轻量级的数据交换格式[/b] 全拼： JavaScript Object Notation [b]定义语法：[/b]

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

[b]取值方式：[/b] [b]取索引：[/b]

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

[b]点语法：[/b]

//点语法：
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同样适应于数组以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持编程素材网！

全部评论(0)

上一篇：Jquery倒计时源码分享
下一篇：教你用jquery实现iframe自适应高度

资讯排行榜
更多>>