2017年6月16号课堂笔记

2017年6月16号 星期五 空气质量：中度污染~轻度污染

内容：jQuery：remove，bind，attr，on和live，同辈和父辈节点的操作，

keyup/keypress/keydown,focus-blur应用，表单事件/键盘事件，

显示隐藏、淡入淡出，slideup和slidedown

备注：代课老师李老师

内容是自己对比着老师博客找的

一、remove和detach的区别

老师代码：

main
first
     

二、bind（绑定和解绑）

老师代码1：

老师代码2：

    

用户名：密码：登录解除绑定

三、attr(设置或返回被选元素的属性值)

老师代码：

四、on和live区别

老师代码：

 
全选
商品信息
宜美惠价
数量
操作
天堂雨伞
￥32.9元
删除
苹果手机iphone5
￥3339元
删除
添加

五、同辈和父辈节点的操作

 老师代码：

body
main
first1
second1
third1
first2
second2
first3
second3

六、keyup/keypress/keydown（键盘事件）

未找到老师代码，参考资料如下：

参考资料出自：http://www.cnblogs.com/leolai/archive/2012/08/01/2618386.html

用户在使用键盘时会触发键盘事件。目前，对键盘事件的支持主要遵循的是DOM0级。

　　在英文输入法下，所有浏览器都遵循以下三个事件：

1. keydown: 当用户按下任意键时触发，而且按住不放的话，会重复触发此事件。
2. keypress: 当用户按下字符键时触发，而且按住不放的话，会重复触发此事件。按下Esc键也会触发这个事件，Safari3.1之前的版本按下非字符键时也触发。
3. keyup: 当用户释放键时触发。

　　在中文输入法下，浏览器之间则表现得不一致，主要情况如下：

1. IE,Chrome,Safari：触发keydown和keyup， 不触发keypress。
2. Firefox：首次按下按键时触发keydown，不触发keypress。在停止输入法并改变文本框内容(如按下回车或者空格键)后会触发keyup。
3. Opera：keydown, keypress和keyup都不触发。
4. PS : 只有在触发keyup事件才能获得修改后的文本值。

　　所有元素都支持以上三个事件，一般情况下只有在文本框时才经常用到。

　　键盘事件的触发过程具体是这样的: 在用户按下键盘上的一个字符键时，首先会触发keydown事件，然后是keypress事件，最后是keyup事件。其中，keydown和keypress事件是在文本框发生变化之前被触发；而keyup在文本框发生变化之后被触发。如果用户按下一个键不放，就会重复触发keydown和keypress事件。在用户按下一个非字符键时，首先触发keydown事件，然后就是keyup事件。如果用户按下一个键不放，就会重复触发keydown。

　　当我们监听这三个事件时，最想得到的数据信息就是键码(keyCode)和字符编码(charCode)了。

　　键码(keyCode)

　　在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，keyCode属性的值就是小写字母或数字对应的ASCII码(点击这里查看ASCII码表)，在程序中可通过如下代码来获得keyCode值：

//EventUtil是一个封装的对象，用来处理跨浏览器事件
var textbox = document.getElementById('myText');
EventUtil.addHandler(textbox,'keydown',function(event){event = event || window.event;alert(event.keyCode);
});

　　以下是keydown和keypress事件存在的一些特殊情况：

• 在FF和Opera中，按分号键时keyCode值为59，但IE,Chrome和Safari则返回186
• 在Safari3之前的版本中，上、下、左、右箭头和上翻(PageUp)、下翻(PageDown)键返回大于63000的值。

　　字符编码(charCode)

　　在发生keypress事件时，FF、Chrome和Safari的event对象都支持一个charCode属性，charCode属性的值就是按下的字符键对应的ASCII编码，这个属性在按下非字符键或发生keydown和keyup事件时值为0；IE和Opera则是在keyCode中保存字符键的ASCII编码。所以，要想跨浏览器获得字符编码，代码如下：

//获取字符编码
var getCharCode = function(event){var charcode = event.charCode;if(typeof charcode == "number" && charcode != 0){return charcode;}else{//在中文输入法下 keyCode == 229 || keyCode == 197(Opera)return event.keyCode;}
};

　　这个方法首先检查charCode属性是否包含数值(在不支持这个属性的浏览器中，值为undefined)，在判断是否等于0(兼容keydown和keyup事件)，如果条件成立，则返回改值，否则返回keyCode的值。之前的例子获取字符编码如下：

var textbox = document.getElementById('myText');
EventUtil.addHandler(textbox,'keydown',function(event){event = event || window.event;alert(getCharCode(event));
});

　　在得到了字符编码后，可以使用String.fromCharCode()将其转换为实际的字符。

　　键盘事件的应用

　　1、 过滤输入——屏蔽某些字符的输入

　　达到的效果：只能输入数字，输入其他字符没有反应。不屏蔽辅助输入的按键，如退格键，方向键，复制，粘贴等。

　　原理很简单：在文本框修改前，获取字符编码，判断合理性，不成立则阻止键盘的默认事件。看起来很简单，但由于浏览器的兼容问题，实现起来还是有点难度。代码如下：

var handler= function(e){e = e || window.event;var charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;var re = /d/;//FF和safari3.1以前版本会对方向键、退格键、删除键触发keypress事件 charcode > 9 可修复此Bug//!e.ctrlKey 不屏蔽Ctrl+C,Ctrl+V if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){//阻止默认事件if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}                            }
};
EventUtil.addHandler(textbox,'keypress',handler);
//监听粘贴事件
EventUtil.addHandler(textbox,'paste',function(e){e = e || window.event;var clipboardData = e.clipboardData || window.clipboardData;if(!/^d*$/.test(clipboardData.getData('text'))){//阻止默认事件if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;}    }
});    

　　在这个例子的基础上加以修改和调整，就可以应用于放过或屏蔽任何输入文本框的字符。

　　很遗憾，还有一个bug未能解决，就是在中文输入法时keypress事件失效问题。

　　针对中文输入法的Bug，目前找到的解决办法是：在文本框加入属性style="ime-mode:disabled" IE和FF下可禁用输入法；在Chrome，Safar下可为文本框添加keydown事件，判断event.keyCode是否等于299，是的话就阻止keydown默认事件，这种方法对IE也有效。而对于Opera则没有找到解决办法。

 

七、表单事件应用

老师代码：

用户登录
用户名：
密码：
验证码：换一张
注册|忘记密码？

八、显示隐藏、淡入淡出

老师代码：

九、slideup和slidedown

老师代码：

手机通讯、数码电器
食品饮料、酒水、果蔬
进口食品、进口牛奶
美容化妆、个人护理
母婴用品、个人护理
厨卫清洁、纸、清洁剂
家居家纺、锅具餐具
生活电器、汽车生活
电脑、外设、办公用品

十、老师辛苦了！