jquery事件与绑定事件
2018-06-22 05:11:48来源：未知 阅读 ()
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同样适应于数组
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
- PHP静态延迟绑定和普通静态效率的对比 2020-03-28
- 详细解析:关于PHP事件驱动问题 2019-06-21
- PHPCMS v9 手机端栏目绑定模板 2018-12-25
- [日常]nginx与网络事件模型 2018-11-13
- 移动端事件 2018-06-22
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
