2017年6月16号 星期五 空气质量：中度污染~轻度污染
内容：jQuery：remove，bind，attr，on和live，同辈和父辈节点的操作，
keyup/keypress/keydown,focus-blur应用，表单事件/键盘事件，
显示隐藏、淡入淡出，slideup和slidedown
备注：代课老师李老师
内容是自己对比着老师博客找的
一、remove和detach的区别
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
var $first=$("#first");
//获取点击事件
$first.click(function(){
alert("first");
})
//清空节点 empty $first.empty();
//删除节点 $first.remove();
$first.detach(); // 删除节点但是 保留了 事件
$first.prependTo("body");
});
</script>
</head>
<body>
<div id="main">
main
<div id="first">first</div>
</div>
</body>
</html>
二、bind（绑定和解绑）
老师代码1：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
/* $("input").mouseover(function(){
alert("mouseover");
}) */
//同时绑定多个事件
$("input").bind(
{
mouseover:function(){
alert("mouseover");
},
mouseout:function(){
alert("mouseout");
},
click:function(){
alert("click");
}
})
});
</script>
</head>
<body>
<input type="button" value="bind">
</body>
</html>
老师代码2：
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
//给button按钮绑定事件
$("button").bind(
{
mouseover:mb,
mouseout:ob,
click:cb
}
);
//获取解除绑定的按钮
$("[type='button']").click(function(){
// $("button").unbind("mouseover");解除一个
// $("button").unbind("mouseover").unbind("click");解除两个
$("button").unbind("mouseover click");//解除两个 多个使用空格隔开
})
});
function mb(){
$("button").css("color","red");
}
function ob(){
$("button").css("color","blue");
}
function cb(){
alert("大家辛苦了！");
}
</script>
</head>
<body>
<form action="#" method="get">
用户名：<input type="text" name="userName" placeholder="请输入用户名">
密码：<input type="password" name="pwd" placeholder="请输入密码">
<button type="submit">登录</button>
<button type="button">解除绑定</button>
</form>
</body>
</html>
三、attr(设置或返回被选元素的属性值)
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
$("img").click(function(){
alert($(this).attr("src")); //获取指定的属性值
// $(this).attr("title","这是一个可爱的小猫咪！"); 增加单个属性
$(this).attr({"title":"斗地主","alt":"大家一起斗地主！","src":"images/1.gif"}); //json格式设置多个属性
alert($(this).attr("src"));
//removeAttr
$(this).removeAttr("src");
})
});
</script>
</head>
<body>
<img src="images/cat.jpg"/>
</body>
</html>
四、on和live区别
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<style type="text/css" >
*{
font-size:12px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
//删除当前行商品元素 这种 只能删除 之前页面存在的元素
/* $(".del").click(function(){
$(this).parent().parent().remove();
}) */
$(document).on("click",".del",function(){
$(this).parent().parent().remove();
})
//1.9之后的版本 废除了 此方法
/* $(".del").live("click",function(){//可以删除新增元素和之前存在的元素
$(this).parent().parent().remove();
}) */
//新增一行
$(".add").click(function(){
//创建节点
var $newRow= $("<tr>"
+" <td> "
+" <input name='' type='checkbox' value=''/> "
+" </td> "
+" <td> "
+" <img src='images/sang.gif' class='products'/><a href='#'>天堂雨伞</a></td><td>￥32.9元 "
+" </td> "
+" <td> "
+" <img src='images/subtraction.gif' width='20' height='20'/> "
+" <input type='text' class='quantity' value='1'/> "
+" <img src='images/add.gif' width='20' height='20'/> "
+" </td> "
+" <td> "
+" <a href='#' class='del'>删除</a> "
+" </td> "
+"</tr> ");
//在table中新增节点
$("table").append($newRow);
})
})
</script>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th><input type='checkbox' />全选</th>
<th>商品信息</th>
<th>宜美惠价</th>
<th>数量</th>
<th>操作</th>
</tr>
<tr>
<td>
<input name="" type="checkbox" value=""/>
</td>
<td>
<img src="images/sang.gif" class="products"/><a href="#">天堂雨伞</a></td><td>￥32.9元
</td>
<td>
<img src="images/subtraction.gif" width="20" height="20"/>
<input type="text" class="quantity" value="1"/>
<img src="images/add.gif" width="20" height="20"/>
</td>
<td>
<a href="#" class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input name="" type="checkbox" value=""/>
</td>
<td>
<img src="images/iphone.gif" class="products"/><a href="#">苹果手机iphone5</a></td><td>￥3339元
</td>
<td>
<img src="images/subtraction.gif" width="20" height="20"/>
<input type="text" class="quantity" value="1"/>
<img src="images/add.gif" width="20" height="20"/>
</td>
<td>
<a href="#" class="del">删除</a>
</td>
</tr>
</table>
<a href="#" class="add">添加</a>
</body>
</html>
五、同辈和父辈节点的操作
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
//获取body的子元素个数 alert("body的子元素个数:"+$("body").children().length);
//获取下个同辈元素 $("#first1").next().css("color","red");
//获取上个同辈元素 $("#first3").prev().css("color","red");
//获取上下所有的同辈元素 $("#first2").siblings().css("color","red");
//获取父辈元素 $("#second1").parent().parent().css("color","red");
//获取祖先元素 parents()查询的boby
$("#third1").parents().css("color","red");
});
</script>
</head>
<body>
body
<div id="main">
main
<div id="first1">
first1
<div id="second1">
second1
<div id="third1">
third1
</div>
</div>
</div>
<div id="first2">
first2
<div id="second2">
second2
</div>
</div>
<div id="first3">
first3
<div id="second3">
second3
</div>
</div>
</div>
</body>
</html>
六、keyup/keypress/keydown（键盘事件）
未找到老师代码，参考资料如下：
参考资料出自：http://www.cnblogs.com/leolai/archive/2012/08/01/2618386.html
用户在使用键盘时会触发键盘事件。目前，对键盘事件的支持主要遵循的是DOM0级。
在英文输入法下，所有浏览器都遵循以下三个事件：
- keydown: 当用户按下任意键时触发，而且按住不放的话，会重复触发此事件。
- keypress: 当用户按下字符键时触发，而且按住不放的话，会重复触发此事件。按下Esc键也会触发这个事件，Safari3.1之前的版本按下非字符键时也触发。
- keyup: 当用户释放键时触发。
在中文输入法下，浏览器之间则表现得不一致，主要情况如下：
- IE,Chrome,Safari：触发keydown和keyup， 不触发keypress。
- Firefox：首次按下按键时触发keydown，不触发keypress。在停止输入法并改变文本框内容(如按下回车或者空格键)后会触发keyup。
- Opera：keydown, keypress和keyup都不触发。
- 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则没有找到解决办法。
七、表单事件应用
老师代码：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表单事件</title>
<style type="text/css">
#login{
400px;
height: 250px;
background-color: #f2f2f2;
border:1px solid #DDDDDD;
padding: 5px;
}
#login fieldset {
border: none;
margin-top: 10px;
}
#login fieldset legend{
font-weight: bold;
}
#login fieldset p{
display: block;
height: 30px;
}
#login fieldset p label {
display: block;
float:left;
text-align: right;
font-size: 12px;
90px;
height: 30px;
line-height: 30px;
}
#login fieldset p input {
display: block;
float:left;
border: 1px solid #999;
250px;
height: 30px;
line-height: 30px;
}
#login fieldset p input.code{
60px;
}
#login fieldset p img{
margin-left: 10px;
}
#login fieldset p a{
color: #057BD2;
font-size: 12px;
text-decoration: none;
margin: 10px;
}
#login fieldset p input.btn{
background: url("./images/login.gif") no-repeat;
98px;
height: 32px;
margin-left: 60px;
color: #ffffff;
cursor: pointer;
}
#login fieldset p input.input_focus{
background-color: #BEE7FC;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//鼠标事件 click事件提交表单
$(".btn").click(function(){
alert("表单提交");
$("#login").submit();
});
//鼠标移至按钮，按钮字体变粗。移出按钮则字体为正常字体
$(".btn").hover(function(){
$(this).css("font-weight","bold");
},function(){
$(this).css("font-weight","normal");
});
//用户名输入框的焦点事件
$("[name='member']").focus(function(){
$(this).addClass("input_focus");
});
$("[name='member']").blur(function(){
$(this).removeClass("input_focus");
});
//键盘事件，敲击回车键进行表单提交,keyCode的数值代表不同的键盘按键
$(document).keypress(function(key){
if(key.keyCode==13){
$("#login").submit();
}
});
});
</script>
</head>
<body>
<form id="login">
<fieldset>
<legend>用户登录</legend>
<p>
<label>用户名：</label>
<input name="member" type="text" />
</p>
<p>
<label>密码：</label>
<input name="password" type="text" />
</p>
<p>
<label>验证码：</label>
<input name="code" type="text" class="code" />
<img src="images/code.gif" width="80" height="30" /><a href="#">换一张</a>
</p>
<p>
<input name="" type="button" class="btn" value="登录" />
<a href="#">注册</a><span>|</span><a href="#">忘记密码？</a>
</p>
</fieldset>
</form>
</body>
</html>
八、显示隐藏、淡入淡出
老师代码：
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
//显示速度 有 slow normal fast 还可以是具体的时间 单位是 毫秒
$("#showImg").click(function(){
//$("img").show("slow");
$("img").fadeIn(3000);
})
$("#hideImg").click(function(){
// $("img").hide("fast");
$("img").fadeOut(3000);
})
});
</script>
</head>
<body>
<input type="button" id="showImg" value="显示">
<input type="button" id="hideImg" value="隐藏">
<img src="images/cat.jpg" style="opacity:1"/>
</body>
</html>
九、slideup和slidedown
老师代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css" >
ul{
list-style:none;
padding:5px;
210px;
border:1px solid red;
}
a{
text-decoration:none;
line-height: 30px;
}
.menu_style li{
border-bottom:1px solid #666;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
//让li下标大于5的显示和隐藏 toggle 也可以让元素 显示或者隐藏
/* $("input").click(function(){
$("li:gt(5):not(:last)").toggle();
}) */
//动态改变高度
$("input").toggle(function(){
$("li:gt(5):not(:last)").slideUp("slow");
},function(){
$("li:gt(5):not(:last)").slideDown("slow");
});
});
</script>
</head>
<body>
<div id="menu" class="menu_style">
<ul>
<li><a href="#">手机通讯、数码电器</a></li>
<li><a href="#">食品饮料、酒水、果蔬</a></li>
<li><a href="#">进口食品、进口牛奶</a></li>
<li><a href="#">美容化妆、个人护理</a></li>
<li><a href="#">母婴用品、个人护理</a></li>
<li><a href="#">厨卫清洁、纸、清洁剂</a></li>
<li id="menu_07" class="element_hide"><a href="#">家居家纺、锅具餐具</a></li>
<li id="menu_08" class="element_hide"><a href="#">生活电器、汽车生活</a></li>
<li id="menu_09" class="element_hide"><a href="#">电脑、外设、办公用品</a></li>
<li class="btn">
<input name="more_btn" type="button" value="展开或关闭菜单项" />
</li>
</ul>
</div>
</body>
</html>
十、老师辛苦了！
