标签：
平稳退化
如果正确的使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览网站。这就是平稳退化，即虽然某些功能无法使用，但最基本的操作仍能顺利完成。
平稳退化的经典例子：（比较以下几条语句）
1 <a href="javascript:popUp(‘http://www.example.com/‘);">Example</a> 2 <a href="#" onclick="popUp(‘http://www.example.com/‘);return false;">Example1</a> 3 <a href="http://www.example.com/" onclick="popUp(‘http://www.example.com/‘);return false;">Example2</a> 4 <a href="http://www.example.com/" onclick="popUp(this.getAttribute(‘href‘));return false;">Example3</a> 5 <a href="http://www.example.com/" onclick="popUp(this.href);return false;">Example4</a>
在把href属性设置为真是存在的URL地址后，即使javascript已被禁用，这个链接也是可用的。虽然这个链接没有打开一个新窗口，但它没有彻底失效。这就是一个经典的平稳退化的例子。
window.open（）创建新的浏览器窗口
语法：window.open（url，name，features）
第一个参数：想在新浏览器窗口里打开的网页地址。（如果省略这个参数，屏幕上将弹出一个空白的浏览器窗口）
第二个参数：新窗口的名字。（代码里可以通过这个名字与新窗口进行通信）
第三个参数：新窗口的各种属性，以逗号分隔的字符串。（属性包括新窗口的尺寸以及新窗口被启用或禁用的各种浏览器功能（工具条，菜单条，初始位置等））
"javascript:"伪协议
“真”协议用来在因特尔上的计算机之间传输数据包，如http协议，ftp协议等。
伪协议是一种非标准化的协议。
“javascript：”伪协议让我们通过一个链接来调用JavaScript函数。
例如：
<a href="javascript:popUp(‘http://www.example.com/‘);">Example</a>
这条语句在支持“javascript：”伪协议的浏览器中运行正常，较老的浏览器会尝试打开链接但失败，支持这种为协议但是禁用了javascript功能的浏览器什么也不做。
结构与样式的分离
文档结构与样式的分离可以确保网页都能平稳退化。
渐进增强
所谓渐进增强就是用一些额外的信息层去包裹原始数据。按照渐进增强原则创建出来的网页几乎都符合平稳退化原则。
类似于CSS，JavaScript和DOM提供的所有功也应该构成一个额外的指令层。CSS代码负责提供关于“表示”的信息，JavaScript负责提供关于“行为”的信息。行为层的应用方式与表示层一样。
分离JavaScript
在JS文件里把一个事件添加到某个元素上
语法：element.event = action
例如：想把一个事件添加到某个带有特定id属性的元素上：getElementById（“idName”）.event = action
在JS文件里把一个事件添加到有特定属性的一组元素上（如所有的class=“popup”的a标签）
具体步骤：把文档里所有的链接全放入一个数组中——>遍历数组——>如果某个链接的class属性等于popup，就把这个链接的href属性值传给popUp函数——>并取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。（return false即可）
例如：
1 function prepareLinks(){ 2 var links = document.getElementsByTagName("a"); 3 for(var i = 0; i < links.length; i++){ 4 if(links[i].getAttribute("calss") === "popup"){ 5 //匿名函数 6 links[i].onclick = function(){ 7 popUp(this.getAttribute("href")); 8 return false; 9 } 10 } 11 } 12 }
window.onload()事件——HTML文档全部加载完触发的事件
必须让上面的给a标签添加事件的代码在HTML文档全部加载到浏览器后马上开始执行。
HTML文档全部加载完毕时将触发一个事件，这个时间有自己的事件处理函数。
文档被加载到浏览器窗口里，document对象又是window对象的一个属性。当window对象触发onload事件时，document对象已经存在。
所以可以这样添加上面的函数到window对象的onload事件上去，如下所示：
window.onload = prepareLinks；
向后兼容
对象检测
只要把某个方法打包在一个if语句里，就可以根据这个语句的条件表达式的求求值结果是true（这个方法存在）还是false（这个方法不存在）来决定采取怎样的行动。这种检测叫做对象检测。
语法：if（method）{ statement }
注意：在对象检测时一定要删掉方法名后面的圆括号，不删掉的话，测试的将是方法的结果，无论方法是否存在。
使用对象检测是为了让脚本有良好的向后兼容性，确保“古老”的浏览器不会因为脚本代码而出现问题。
遵循渐进增强的原则，可以确切的知道添加的事件都能平稳退化，网页在老版本的浏览器中也能正常浏览，那些只支持一部分JavaScript功能但不支持DOM的浏览器仍然可以访问网页的内容。
浏览器嗅探技术
浏览器嗅探指的是通过提取浏览器供应商提供的信息来解决向后兼容问题。
理论上讲，可以通过JavaScript代码检索关于浏览器品牌和版本信息，这些信息可以用来改善JavaScript脚本代码的向后兼容性，但是这是一项风险较大的技术。
首先，有些浏览器会把自己报告为另一种浏览器，还有一些浏览器允许用户任意修改这些信息。
其次，为了适应多种不同的浏览器，要让浏览器嗅探脚本跨平台工作，就必须测试所有可能出现的供应商和版本号的组合。测试的组合情况非常多，脚本代码冗长复杂。
性能考虑
尽量减少访问DOM和尽量减少标记
不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM书，从中查找可能匹配的元素。更好的办法是把第一次搜索到的结果保存在一个变量中，然后在循环里重用这个结果。
尽量减少文档中的标记数量，过多不必要的元素只会增加DOM树的规模，进而增加遍历DOM树以查找特定元素的时间。
合并并放置脚本
合并脚本可以减少加载页面时发送请求的数量，而减少发送请求的数量通常是性能优化时首先要考虑的。
脚本在标记中的位置对页面初次加载时间也有很大的影响。位于head块中的脚本会导致浏览器无法并行加载其他文件（如图像或其他脚本）。
根据http规范，浏览器每次从同一域名中最多只能同时下载两个文件。而在下载脚本呢期间，浏览器不会下载其它文件，即使是来自同一域名的文件。所有其他资源必须等脚本加载完毕后才能加载。
把所有script脚本放在文档的末尾，</body>标签的前面，就可以让页面变得更快。
这样，在加载脚本时，window对象的load事件依然可以执行对文档进行的各种操作。
压缩脚本
压缩脚本指的是把脚本中不必要的字节，如空格和注释统统删除。使用代码压缩工具可以达到这个目的，有的甚至会重写你得部分代码，使用更短的变量名，从而减少整体文件的大小。
代码压缩工具有：JSMin（Douglas Crockford）、YUI Compressor（雅虎）、Closure Compiler（谷歌）
JS添加行为的一个重要准则
不应该让JavaScript代码对这个网页的结构有任何的依赖。
结构化程序设计
结构化程序设计中有一条原则是：函数应该只有一个入口和一个出口。
如果一个函数有多个出口，只要这个出口集中出现在函数的开头部分，也是可以接受的。
匿名函数
定义匿名函数是一种可以在代码执行时创建函数的办法。
共享onload事件
每个事件处理函数只能绑定一条指令。当有不止一个函数主要在网页加载完毕后立刻执行时，需要共享onload事件。此时有两种方法可以共享onload事件。
1.先创建一个匿名函数来容纳这几个要执行的函数，然后把该匿名函数绑定在onload事件上。如：
window.onload = function(){ firstFunction(); secondFunction(); }
2.弹性最佳解决方案：把那些在页面加载完成后要立刻执行的函数创建为一个队列。addLoadEvent函数就是一种选择，它只有一个参数：打算在页面加载完毕时执行的函数名。
这个函数完成的操作是：首先，把现有的window.onload事件处理函数的值存入变量oldonload；然后判断，如果在这个处理函数上还没有绑定任何函数，则把新函数添加给它；如果在这个处理函数上已经绑定了一些函数，那么就把新函数追加到现有指令的末尾。代码清单如下：
1 function addLoadEvent(func){ 2 var oldonload = window.onload; 3 if(typeof window.onload != ‘function‘){ 4 window.onload = func; 5 } else { 6 window.onload = function(){ 7 oldonload(); 8 func(); 9 } 10 } 11 }
在使用时只要写出以下代码即可：addLoadEvent（firstFunction）；addLoadEvent（secondFunction）
三元操作符
if/else语句的一种变体形式。
语法：variable = condition ? if true : if false;
表示在条件成立时，变量被赋值为第一个表达式，如果条件不成立，变量就赋值为第二个表达式。
nodeName属性
返回节点的名字，而且返回的值总是显示为大写字母，即使在html文档里是小写字母。
例如：if （placeholder.nodeName != "IMG"） return false; 表示如果placeholder不是img标签的话返回false。
onkeypress事件
onkeypress事件处理函数是专门来处理键盘事件的。按下键盘上的任何一个按键都会触发这个onkeypress事件。
想让onkeypress事件与onclick事件触发同样的行为，可以把有关的指令复制一遍，也可以用node.onclick = node.onkeypress代码实现。
注意：onkeypress事件处理函数很容易出现的问题是用户每按下一个键都会触发它，在某些浏览器中甚至包括Tab键，这意味着如果绑定在onkeypress时间上的处理函数上返回的是false，那些只使用键盘访问的用户将永远无法离开当前连接。
不过，在几乎所有的浏览器中，用Tab键移动到某个链接然后按下回车键的动作也会触发onclick事件。
onclick事件处理函数已经能满足需要的情况下，最好不使用onkeypress事件处理函数。
DOM Core 和 HTML-DOM
getElementById、getElementsByTagName、getAttribute、setAttribute等方法都是DOM Core的组成部分。它们并不专属于JavaScript，支持DOM的任何一种程序设计语言都可以使用。它们的用途也并非仅限于处理网页，可以用来处理任何一种标记语言（如XML）编写出来的文档。
相应的也有HTML_DOM可以使用。
例如：
document.getElementsByTagName("form")等价于document.form
element.getAttribute("src")等价于element.src
这样，在代码编写过程中，有些地方就可以使用HTML-DOM来简化代码。
啊，介个，最近吧，老是有博客园的好友问我有么有男盆友喔~
介个嘛，我有男盆友喔~（据说这样会掉粉，/(ㄒoㄒ)/~~，不过没关系你们随意哈）
他是我研究生的直系学长，高我两级~
他也是程序猿啊喂，不过比我牛掰太多了~鼓掌！
but！我们还在艰苦的异地恋中/(ㄒoㄒ)/~~
but！！！本宝宝即将去上海实习了，也就是异地恋最多还有一个多月就要结束~鼓掌！
而且，这中间还要过个端午节！要放假了哈哈哈！！！
粉开心粉开心！！！
另外呢，谢谢大家喜欢我写的这些并不怎么样的笔记，我主要是为了晚上睡前复习用的。
还要谢谢大家的指导~
希望以后还是能跟博客园的你们交流问题，提高自己~
阿里嘎多！！！
祝愿这里的每个人都找到心仪的另一半~嘻嘻，，六一快乐！
这两天准备考试没有看多少书，也没有太多的练习，除了小案例以外看着书自己也做了一个图片库，代码和运行结果在下边，高能预警喔！！做的不好，希望你们不嫌弃
HTML
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="gb2312" /> 5 <title>Our Images Gallery</title> 6 <link rel="shortcut icon" href="../images/heart.png" type="image/x-icon" /> 7 <link rel="stylesheet" href="../css/wg_gallery.css" media="screen" /> 8 </head> 9 <body> 10 <h1>Our Images Gallery_GW</h1> 11 <ul id="imagegallery"> 12 <li> 13 <a href="../images/wang.jpg" title="我家的帅学长、sa狍子、维尼·王。"> 14 <img src="../images/wang_small.jpg" alt="Wang"/> 15 </a> 16 </li> 17 <li> 18 <a href="../images/me.jpg" title="你可不可爱不重要，重要的是有人懂你的可爱。"> 19 <img src="../images/me_small.jpg" alt="Me"/> 20 </a> 21 </li> 22 <li> 23 <a href="../images/lundu.jpg" title="我们在轮渡上，去外滩。"> 24 <img src="../images/lundu_small.jpg" alt="LunDu"/> 25 </a> 26 </li> 27 <li> 28 <a href="../images/railway.jpg" title="等地铁。"> 29 <img src="../images/railway_small.jpg" alt="Railway"/> 30 </a> 31 </li> 32 <li> 33 <a href="../images/night.jpg" title="你在身边的夜晚。"> 34 <img src="../images/night_small.jpg" alt="Night"/> 35 </a> 36 </li> 37 <li> 38 <a href="../images/flowers.jpg" title="世界那么大，我们穿着大花袄去看看啊。"> 39 <img src="../images/flowers_small.jpg" alt="Flowers"/> 40 </a> 41 </li> 42 <li> 43 <a href="../images/shoes.jpg" title="情侣款。"> 44 <img src="../images/shoes_small.jpg" alt="Shoes"/> 45 </a> 46 </li> 47 <li> 48 <a href="../images/weini.jpg" title="爱就是想给TA做好吃的，我说要学做菜把你喂成维尼这样。"> 49 <img src="../images/weini_small.jpg" alt="WeiNi"/> 50 </a> 51 </li> 52 </ul> 53 <br/> 54 <img id="placeholder" src="../images/shoes.jpg" alt="my image gallery" /> 55 <div id="right"> 56 <p id="verse"> 57 Don‘t worry about looking handsome or being strong and brave. 58 Just as you love me unconditionally,I love you just the same. 59 </p> 60 <p id="description">情侣款。</p> 61 </div> 62 <script type="text/javascript" src="../js/wg_gallery.js"></script> 63 </body> 64 </html>
css
1 body { 2 font-family:?¬Ме,"Helvetica","Arial",serif; 3 color:#333; 4 background-color:#ccc; 5 margin:1em 10%; 6 } 7 8 h1 { 9 color:#333; 10 background-color:transparent; 11 } 12 13 a { 14 color:#c60; 15 background-color:transparent; 16 font-weight:bold; 17 font-size:20px; 18 text-decoration:none; 19 } 20 21 ul { 22 padding:0; 23 } 24 25 li { 26 float:left; 27 padding-top:1em; 28 padding-bottom:1em; 29 padding-right:2em; 30 padding-left:0; 31 list-style:none; 32 } 33 34 img { 35 display:inline-block; 36 clear:both; 37 } 38 39 #description { 40 display:inline-block; 41 width:800px; 42 font-size:35px; 43 font-weight:bold; 44 padding-left:30px; 45 margin-top:0; 46 margin-bottom:0; 47 text-indent:2em; 48 position:absolute; 49 bottom:10px; 50 } 51 52 #imagegallery { 53 list-style:none; 54 } 55 56 #imagegallery li { 57 display:inline; 58 } 59 60 #imagegallery li a img { 61 border:0; 62 } 63 64 #verse { 65 margin-top:0; 66 margin-bottom:0; 67 width:600px; 68 height:300px; 69 line-height:60px; 70 position:absolute; 71 top:-380px; 72 left:80px; 73 font-size:30px; 74 font-weight:bold; 75 font-family:New Romans; 76 text-indent:2em; 77 } 78 79 #right { 80 position:relative; 81 display:inline-block; 82 }
js
1 function addLoadEvent(func){ 2 //把现有的window.onload事件处理函数的值存入变量oldonload中 3 var oldonload = window.onload; 4 //如果这个处理函数中没有绑定任何函数，就把新函数添加给它 5 if(typeof window.onload != ‘function‘){ 6 window.onload = func; 7 }else{//一定要用花括号括起来 8 //如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有指令的末尾 9 window.onload = function(){ 10 oldonload(); 11 func(); 12 } 13 } 14 } 15 //有其他函数需要在页面加载完毕执行的话，直接添加下面的一句代码即可 16 addLoadEvent(prepareGallery); 17 18 function prepareGallery(){ 19 //对象检测 20 if(!document.getElementsByTagName){ 21 return false; 22 } 23 if(!document.getElementById){ 24 return false; 25 } 26 if(!document.getElementById("imagegallery")){ 27 return false; 28 } 29 //取得ul元素 30 var gallery = document.getElementById("imagegallery"); 31 //取得a标签数组 32 var links = gallery.getElementsByTagName("a"); 33 //循环遍历为a标签设置onclick事件处理函数 34 for(var i = 0; i < links.length; i++){ 35 //匿名函数 36 links[i].onclick = function(){ 37 //根据showPic(this)是否返回true决定取消还是不取消a标签的onclick默认行为（即打开新窗口跳转到指定的链接） 38 //return showPic(this) ? false : true; 39 if(showPic(this)){ 40 return false; 41 }else{ 42 return true; 43 } 44 } 45 } 46 } 47 48 function showPic(whichpic){ 49 //检查id为placeholder的元素是否存在 50 if(!document.getElementById("placeholder")){ 51 return false; 52 } 53 var source = whichpic.getAttribute("href"); 54 var placeholder = document.getElementById("placeholder"); 55 //如果id为placeholder的元素不是图片则返回false 56 if(placeholder.nodeName != "IMG"){ 57 return false; 58 } 59 //placeholder元素是图片则设置显示新的图片 60 //placeholder.src = source; 61 placeholder.setAttribute("src",source); 62 //如果id为description的元素存在，则执行操作 63 if(document.getElementById("description")){ 64 if(whichpic.getAttribute("title")){ 65 var text = whichpic.getAttribute("title"); 66 }else{ 67 var text = ""; 68 } 69 //var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; 70 var description = document.getElementById("description"); 71 //检查description元素的第一个子元素是不是一个文本节点 72 if(description.firstChild.nodeType === 3){//注意数值不加双引号 73 description.firstChild.nodeValue = text; 74 } 75 } 76 //id为description的元素不存在，则忽略，仍旧会显示图片，但没有文本显示 77 return true; 78 } 79 80 /* 81 function countBodyChildren(){ 82 var body_element = document.getElementsByTagName("body")[0]; 83 //alert(body_element.childNodes.length);//等于7不等于3，因为childNodes返回的数组包含所有类型的节点而不仅仅是元素节点。 84 //事实上文档中的每一样东西都是一个节点，甚至空格和换行符都会被解释为节点。 85 //alert(body_element.nodeType); 86 } 87 window.onload = countBodyChildren; 88 */
运行结果
然后……继续准备明后天的考试去了……
fighting！O(∩_∩)O~
各位大叔大婶哥哥姐姐弟弟妹妹们，刚刚收到了360运维实习生的面试邀请，求指点啊，有木有懂的人来点拨一下我，具体一点的，后天就面试了，急急急
Web前端学习第十六天·fighting_JavaScript（DOM编程艺术5-6章）
标签：
原文地址：http://www.cnblogs.com/Candy1029/p/5548874.html
