2017年6月16号课堂笔记
生活随笔
收集整理的這篇文章主要介紹了
2017年6月16号课堂笔记
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
2017年6月16號(hào) 星期五 空氣質(zhì)量：中度污染~輕度污染
內(nèi)容：jQuery：remove，bind，attr，on和live，同輩和父輩節(jié)點(diǎn)的操作，
keyup/keypress/keydown,focus-blur應(yīng)用，表單事件/鍵盤事件，
顯示隱藏、淡入淡出，slideup和slidedown
備注：代課老師李老師
內(nèi)容是自己對(duì)比著老師博客找的
一、remove和detach的區(qū)別
老師代碼：
<!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");//獲取點(diǎn)擊事件$first.click(function(){alert("first");})//清空節(jié)點(diǎn) empty $first.empty();//刪除節(jié)點(diǎn) $first.remove(); $first.detach(); // 刪除節(jié)點(diǎn)但是 保留了 事件$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");}) *///同時(shí)綁定多個(gè)事件$("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");解除一個(gè)// $("button").unbind("mouseover").unbind("click");解除兩個(gè)$("button").unbind("mouseover click");//解除兩個(gè) 多個(gè)使用空格隔開})});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="請(qǐng)輸入用戶名">密碼：<input type="password" name="pwd" placeholder="請(qǐng)輸入密碼"><button type="submit">登錄</button><button type="button">解除綁定</button>
</form>
</body>
</html> 三、attr(設(shè)置或返回被選元素的屬性值)
老師代碼：
<!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","這是一個(gè)可愛的小貓咪！"); 增加單個(gè)屬性$(this).attr({"title":"斗地主","alt":"大家一起斗地主！","src":"images/1.gif"}); //json格式設(shè)置多個(gè)屬性alert($(this).attr("src"));//removeAttr$(this).removeAttr("src");})});
</script>
</head>
<body><img src="images/cat.jpg"/>
</body>
</html> 四、on和live區(qū)別
老師代碼：
<!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(){//刪除當(dāng)前行商品元素 這種 只能刪除 之前頁面存在的元素
/* $(".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(){//創(chuàng)建節(jié)點(diǎn)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中新增節(jié)點(diǎn)$("table").append($newRow); })})</script>
</head>
<body> <table border="1" cellpadding="0" cellspacing="0"><tr><th><input type='checkbox' />全選</th><th>商品信息</th><th>宜美惠價(jià)</th><th>數(shù)量</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="#">蘋果手機(jī)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> 五、同輩和父輩節(jié)點(diǎn)的操作
?老師代碼：
<!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的子元素個(gè)數(shù) alert("body的子元素個(gè)數(shù):"+$("body").children().length);//獲取下個(gè)同輩元素 $("#first1").next().css("color","red");//獲取上個(gè)同輩元素 $("#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
用戶在使用鍵盤時(shí)會(huì)觸發(fā)鍵盤事件。目前，對(duì)鍵盤事件的支持主要遵循的是DOM0級(jí)。
在英文輸入法下，所有瀏覽器都遵循以下三個(gè)事件：
- keydown: 當(dāng)用戶按下任意鍵時(shí)觸發(fā)，而且按住不放的話，會(huì)重復(fù)觸發(fā)此事件。
- keypress: 當(dāng)用戶按下字符鍵時(shí)觸發(fā)，而且按住不放的話，會(huì)重復(fù)觸發(fā)此事件。按下Esc鍵也會(huì)觸發(fā)這個(gè)事件，Safari3.1之前的版本按下非字符鍵時(shí)也觸發(fā)。
- keyup: 當(dāng)用戶釋放鍵時(shí)觸發(fā)。
在中文輸入法下，瀏覽器之間則表現(xiàn)得不一致，主要情況如下：
- IE,Chrome,Safari：觸發(fā)keydown和keyup， 不觸發(fā)keypress。
- Firefox：首次按下按鍵時(shí)觸發(fā)keydown，不觸發(fā)keypress。在停止輸入法并改變文本框內(nèi)容(如按下回車或者空格鍵)后會(huì)觸發(fā)keyup。
- Opera：keydown, keypress和keyup都不觸發(fā)。
- PS : 只有在觸發(fā)keyup事件才能獲得修改后的文本值。
所有元素都支持以上三個(gè)事件，一般情況下只有在文本框時(shí)才經(jīng)常用到。
鍵盤事件的觸發(fā)過程具體是這樣的: 在用戶按下鍵盤上的一個(gè)字符鍵時(shí)，首先會(huì)觸發(fā)keydown事件，然后是keypress事件，最后是keyup事件。其中，keydown和keypress事件是在文本框發(fā)生變化之前被觸發(fā)；而keyup在文本框發(fā)生變化之后被觸發(fā)。如果用戶按下一個(gè)鍵不放，就會(huì)重復(fù)觸發(fā)keydown和keypress事件。在用戶按下一個(gè)非字符鍵時(shí)，首先觸發(fā)keydown事件，然后就是keyup事件。如果用戶按下一個(gè)鍵不放，就會(huì)重復(fù)觸發(fā)keydown。
當(dāng)我們監(jiān)聽這三個(gè)事件時(shí)，最想得到的數(shù)據(jù)信息就是鍵碼(keyCode)和字符編碼(charCode)了。
鍵碼(keyCode)
在發(fā)生keydown和keyup事件時(shí)，event對(duì)象的keyCode屬性會(huì)包含一個(gè)代碼，keyCode屬性的值就是小寫字母或數(shù)字對(duì)應(yīng)的ASCII碼(點(diǎn)擊這里查看ASCII碼表)，在程序中可通過如下代碼來獲得keyCode值：
//EventUtil是一個(gè)封裝的對(duì)象，用來處理跨瀏覽器事件
var textbox = document.getElementById('myText');
EventUtil.addHandler(textbox,'keydown',function(event){event = event || window.event;alert(event.keyCode);
}); 以下是keydown和keypress事件存在的一些特殊情況：
- 在FF和Opera中，按分號(hào)鍵時(shí)keyCode值為59，但I(xiàn)E,Chrome和Safari則返回186
- 在Safari3之前的版本中，上、下、左、右箭頭和上翻(PageUp)、下翻(PageDown)鍵返回大于63000的值。
字符編碼(charCode)
在發(fā)生keypress事件時(shí)，FF、Chrome和Safari的event對(duì)象都支持一個(gè)charCode屬性，charCode屬性的值就是按下的字符鍵對(duì)應(yīng)的ASCII編碼，這個(gè)屬性在按下非字符鍵或發(fā)生keydown和keyup事件時(shí)值為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;}
}; 這個(gè)方法首先檢查charCode屬性是否包含數(shù)值(在不支持這個(gè)屬性的瀏覽器中，值為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()將其轉(zhuǎn)換為實(shí)際的字符。
鍵盤事件的應(yīng)用
1、 過濾輸入——屏蔽某些字符的輸入
達(dá)到的效果：只能輸入數(shù)字，輸入其他字符沒有反應(yīng)。不屏蔽輔助輸入的按鍵，如退格鍵，方向鍵，復(fù)制，粘貼等。
原理很簡(jiǎn)單：在文本框修改前，獲取字符編碼，判斷合理性，不成立則阻止鍵盤的默認(rèn)事件。看起來很簡(jiǎn)單，但由于瀏覽器的兼容問題，實(shí)現(xiàn)起來還是有點(diǎn)難度。代碼如下：
var handler= function(e){e = e || window.event;var charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode;var re = /\d/;//FF和safari3.1以前版本會(huì)對(duì)方向鍵、退格鍵、刪除鍵觸發(fā)keypress事件 charcode > 9 可修復(fù)此Bug//!e.ctrlKey 不屏蔽Ctrl+C,Ctrl+V if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){//阻止默認(rèn)事件if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;} }
};
EventUtil.addHandler(textbox,'keypress',handler);
//監(jiān)聽粘貼事件
EventUtil.addHandler(textbox,'paste',function(e){e = e || window.event;var clipboardData = e.clipboardData || window.clipboardData;if(!/^\d*$/.test(clipboardData.getData('text'))){//阻止默認(rèn)事件if(e.preventDefault){e.preventDefault();}else{e.returnValue = false;} }
}); 在這個(gè)例子的基礎(chǔ)上加以修改和調(diào)整，就可以應(yīng)用于放過或屏蔽任何輸入文本框的字符。
很遺憾，還有一個(gè)bug未能解決，就是在中文輸入法時(shí)keypress事件失效問題。
針對(duì)中文輸入法的Bug，目前找到的解決辦法是：在文本框加入屬性style="ime-mode:disabled" IE和FF下可禁用輸入法；在Chrome，Safar下可為文本框添加keydown事件，判斷event.keyCode是否等于299，是的話就阻止keydown默認(rèn)事件，這種方法對(duì)IE也有效。而對(duì)于Opera則沒有找到解決辦法。
?
七、表單事件應(yīng)用
老師代碼：
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表單事件</title>
<style type="text/css">
#login{width: 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;width: 90px;height: 30px;line-height: 30px;
}
#login fieldset p input {display: block;float:left;border: 1px solid #999;width: 250px;height: 30px;line-height: 30px;
}
#login fieldset p input.code{width: 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;width: 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 () {//鼠標(biāo)事件 click事件提交表單$(".btn").click(function(){alert("表單提交");$("#login").submit();});//鼠標(biāo)移至按鈕，按鈕字體變粗。移出按鈕則字體為正常字體$(".btn").hover(function(){$(this).css("font-weight","bold");},function(){$(this).css("font-weight","normal");});//用戶名輸入框的焦點(diǎn)事件$("[name='member']").focus(function(){$(this).addClass("input_focus");});$("[name='member']").blur(function(){$(this).removeClass("input_focus");});//鍵盤事件，敲擊回車鍵進(jìn)行表單提交,keyCode的數(shù)值代表不同的鍵盤按鍵$(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>驗(yàn)證碼：</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="#">注冊(cè)</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 還可以是具體的時(shí)間 單位是 毫秒$("#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;width: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下標(biāo)大于5的顯示和隱藏 toggle 也可以讓元素 顯示或者隱藏
/* $("input").click(function(){$("li:gt(5):not(:last)").toggle();}) *///動(dòng)態(tài)改變高度$("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="#">手機(jī)通訊、數(shù)碼電器</a></li><li><a href="#">食品飲料、酒水、果蔬</a></li><li><a href="#">進(jìn)口食品、進(jìn)口牛奶</a></li><li><a href="#">美容化妝、個(gè)人護(hù)理</a></li><li><a href="#">母嬰用品、個(gè)人護(hù)理</a></li><li><a href="#">廚衛(wèi)清潔、紙、清潔劑</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="#">電腦、外設(shè)、辦公用品</a></li><li class="btn"><input name="more_btn" type="button" value="展開或關(guān)閉菜單項(xiàng)" /></li></ul>
</div>
</body>
</html> 十、老師辛苦了！
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/wsnedved2017/p/7027161.html
總結(jié)
以上是生活随笔為你收集整理的2017年6月16号课堂笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 求充个蓝宝石
- 下一篇： Java笔记(25)：设计模式概述