1. 首先, 我们来看一下经常使用的添加事件的方式:
- <input type="button" id="btn" value="click me!" onclick="shao();" />
- <script type="text/javascript">
- function shao() {
- alert("msg is showing!");
- }
- </script>
我们最常用的是为元素添加 onclick 元素属性的方式来添加事件
这种方法的弊端是:
只能为一个事件处理函数,在事件处理函数方法中,获取事件对象的方式不同.
ready 事件:
当页面加载完成后,来执行 function:
- $(document).ready(function(e){
- alert(document.getElementById("aa").innerhtml);
- //若是要写function方法,不可以在里面写
- })
- //要在外面写
这样写在哪里都可以调用到这个方法;
鼠标事件:
- <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>
表单元素事件:
- $("#shao").focus(function(){
- alert("获得焦点");
- })
- $("#shao").blur(function(){
- alert("失去焦点");
- })
- $("#shao").change(function(){
- alert("值发生变化,change事件");
- })
- $("#shao").keydown(function(){
- alert("键盘按下");
- })
2. 绑定事件(挂事件):
可以动态的改变按钮的事件;
什么是动态绑定?
动态绑定是指动态添加的 DOM 节点或者 html 元素,他们最开始时运行的时候是不存在的。如果要给这些动态加入的节点增加事件,就必须要用 jquery 的 on 方法来绑定事件。
向匹配元素添加一个或多个事件处理器。
使用方式:
注: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 同样适应于数组
来源: http://www.cnblogs.com/xuan584521/p/6531581.html