【JS教程】JS常用交互经验技巧篇（一）

为什么80%的码农都做不了架构师？>>>   

博客中基础知识太多，知识中又参杂太多的废话，所以打算来个汇总，算是对自己所掌握的JS基础知识的一个小总结。

1、阻止事件冒泡和默认动作

1)阻止事件冒泡,使成为捕获型事件触发机制.

function stopBubble(e) {
    //如果提供了事件对象，则这是一个非IE浏览器
    if ( e && e.stopPropagation )
        //因此它支持W3C的stopPropagation()方法
        e.stopPropagation();
    else
        //否则，我们需要使用IE的方式来取消事件冒泡
        window.event.cancelBubble =true;
//如果在jquery中，也可以采用返回false的方法触发
// return false;
}

2)当按键后,不希望按键继续传递给如HTML文本框对象时,可以取消返回值.即停止默认事件默认行为.

//阻止浏览器的默认行为
function stopDefault( e ) {
    //阻止默认浏览器动作(W3C)
    if ( e && e.preventDefault )
        e.preventDefault();
    //IE中阻止函数器默认动作的方式
    else
        window.event.returnValue =false;
    return false;
}

2、JS获取各种高度宽度：浏览器窗口滚动条的位置、元素的几何尺寸

1）关于 pageX, clienX,offsetX,layerX 

• pageX：鼠标在页面上的位置，从页面左上角开始，即是以页面为参考点，不随滑动条移动而变化

• clientX：鼠标在页面上可视区域的位置，从浏览器可视区域左上角开始，即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

• offsetX：IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 

• layerX：FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点，也就是当触发元素设置了相对或者绝对定位后,layerX和offsetX就相等。

2）关于元素尺寸、位置和溢出的更多信息

• 只读属性offsetWidth和offsetHeight：以css像素返回它的屏幕尺寸。返回尺寸包含元素的边框以内，出去外边距。

• offsetLeft和offsetTop属性：返回元素的X和Y坐标。offsetParent属性指定这个属性相对的父元素。

• ClientWidth和clientHeight：类似offsetWidth和offsetHeight，不同的是不包含边框大小，只包含内边距以内。如果浏览器在内边距和边框之间添加了滚动条，还不会包含滚动条。注意，<i>和<code>和<span>这类内联元素，clientWidth和clientHeight总是返回0；

• clientLeft和clientTop属性：没什么用，返回内边距的外边缘和边框的外边缘之间水平距离和垂直距离。

• scrollWidth和scrollHeight：内容+内边距+溢出。当无溢出时，和clientWidth和clientHeight相等。

• scrollLeft和scrollHeight：是滚动条位置。

3）查询元素的几何尺寸 

• 判断一个元素最简单的方法是调用它的getBoundingClientRect()方法。该方法在IE5中引入，而在现在所有浏览器中都实现了。返回一个有left  right top  bottom 等属性的对象。left top表示元素左上角的X和Y坐标，right bottom属性表示元素的右下角的X和Y坐标。

•  

4）判断浏览器窗口滚动条的位置

• 所有浏览器支持window.pageXOffset和window.pageYOffset. 除了IE8以下，所有支持scrollLeft和scrollTop;

• 
  

• document.compatMode // 有两种可能的返回值：BackCompat和CSS1Compat，对其解释如下： ［BackCompat］Standards-compliant mode is not switched on. (Quirks Mode) ［CSS1Compat］ Standards-compliant mode is switched on. (Standards Mode)
  

5）设置鼠标滚动值

• 方法一：scrollLeft和scrollTop属性可以用来设置浏览器滚动，如 document.body.scrollTop = 100；

• 方法二：在jquery中，使用.scrollTop(value) 和 .scrollLeft() 来设置scrollTop的值。

3、JS中的map遍历方法

    调用方法：

array1.map(callbackfn[, thisArg]);
function callbackfn(value, index, array1);

    详细说明：对于数组中的每个元素，map 方法都会调用 callbackfn 函数一次（采用升序索引顺序）。 不为数组中缺少的元素调用该回调函数。；除了数组对象之外，map 方法可由具有 length 属性且具有已按数字编制索引的属性名的任何对象使用。

// Define the callback function. 
function threeChars(value, index, str) {     
// Create a string that contains the previous, current,     
// and next character.     
return str.substring(index - 1, index + 2); }  
// Create a string. 
var word = "Thursday";  
// Apply the map method to the string. 
// Each array element in the result contains a string that 
// has the previous, current, and next character. 
// The commented out statement shows an alternative syntax. 
var result = [].map.call(word, threeChars); 
// var result = Array.prototype.map.call(word, threeChars);  
console.info(result);  
// Output: 
// Th,Thu,hur,urs,rsd,sda,day,ay

4、循环中闭包的问题总结  

问题引入：闭包允许你引用父函数中的变量，但提供的值并非该变量创建时的值，而是在父元素范围内的最终值。

var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
     li[i].onclick=function(){alert(i);}
}

解决方案一：用一个匿名函数包含语句块，同时传入一个参数后执行，传如参数就成了局部变量。

for(var i=0;i<li.length;i++){
   (function(index){
    li[index].onclick=function(){alert(index);} 
   })(i);
}

解决方案二：通过dom元素绑定属性来记录下标。

for(var i = 0,len = lists.length;i < len;i++){
  lists[i].j = i;//通过dom的属性绑上j属性，即是i的索引，从而j就记录下了j
  lists[i].onclick= function(){
            alert(this.j);  //直接访问其dom属性
        };
    }

解决方案三:调用匿名函数自身的保存的i属性的变量。

var lists = document.getElementsByTagName("li"); 
for(var i = 0,len = lists.length;i < len;i++){
        (lists[i].onclick = function(){
            alert(arguments.callee.i);//匿名函数调用自身的属性的i
        }).i=i;
    }

解决方案四:在加一层闭包，返回一个函数作为响应事件。

for(var i = 0,len = lists.length;i < len;i++){
        lists[i].onclick = (function(j){ 
            return function(){//响应事件的函数，参数i作为j，这样i就成了响应事件的局部变量
                alert(j);
            }
        })(i);
    }
}

5、Microsoft.AlphaImageLoader滤镜  

语法：
filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )
属性：
enabled  :　 可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
true  :　 默认值。滤镜激活。 false  :　 滤镜被禁止。 
sizingMethod  :　 可选项。字符串(String)。设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式。
crop  :　 剪切图片以适应对象尺寸。 
image  :　 默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 
scale  :　 缩放图片以适应对象的尺寸边界。 
src  :　 必选项。字符串(String)。使用绝对或相对 url 地址指定背景图像。假如忽略此参数，滤镜将不会作用。
特性：
Enabled  :　 可读写。布尔值(Boolean)。参阅 enabled 属性。 
sizingMethod  :　 可读写。字符串(String)。参阅 sizingMethod 属性。 
src  :　 可读写。字符串(String)。参阅 src 属性。
说明：
在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式，则0%-100%的透明度也被提供。
PNG(Portable Network Graphics)格式的图片的透明度不妨碍你选择文本。也就是说，你可以选择显示在PNG(Portable Network Graphics)格式的图片完全透明区域后面的内容。
示例：
#idDiv{position:absolute; left:140px; height:400; width:400;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='rain1977.gif',sizingMethod='scale');}
.dream{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/earglobe.gif');}
P.S. 当想使用backgroundimage属性时，如果不想让图片原尺寸显示，而是类似于IMG width=100% heigth=100% 的效果，可以通过此filter实现。
Example：
span.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.jpg', sizingMethod='scale')";
引用：最后说说关于FF和IE效果调和问题。这个滤镜效果只适用于IE,在FF下面无法显示，我想这是前辈说他很难实现的最终问题了。以往我们用*或者_来修复IE下和FF的区别．这一次是要找方法修复FF不能实现的问题.
其实想到的话,也很简单了.就是先让FF正常显示该图片,然后,用*或_ 来清除IE下的显示效果，最后用*或_ 来做以上的滤镜效果。大功告成！
以上是官方的说明。事实上实际操作中需要注意:AlphaImageLoader滤镜会导致该区域的链接和按钮无效，一般情况下的解决办法是为链接或按钮添加：position:relative使其相对浮动要注意的是，当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议使用浮动办法处理。
具体操作：
为预览区域（比如要在某个 div 中预览）添加样式：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);。 
为 AlphaImageLoader 设置 src 属性。

6、window对象：.open、.alert、.comfirm、.prompt、.showModalDialog、.showModelessDialog

window.open(pageURL,name,parameters)  

pageURL 为弹出窗口路径  
name 为弹出窗口名称，也可以是系统自带的比如：_self, _blank,_top,_parent ...  
parameters 为窗口参数(各参数用逗号分隔) 
各项参数 
其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。 
    参数           | 取值范围      | 说明  

• alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后  

• alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上  

• depended | yes/no | 是否和父窗口同时关闭  

• directories | yes/no | Nav2和3的目录栏是否可见  

• height | pixel value | 窗口高度  

• hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键  

• innerHeight | pixel value | 窗口中文档的像素高度  

• innerWidth | pixel value | 窗口中文档的像素宽度  

• location | yes/no | 位置栏是否可见  

• menubar | yes/no | 菜单栏是否可见  

• outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度  

• outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度  

• resizable | yes/no | 窗口大小是否可调整  

• screenX | pixel value | 窗口距屏幕左边界的像素长度  

• screenY | pixel value | 窗口距屏幕上边界的像素长度  

• scrollbars | yes/no | 窗口是否可有滚动栏  

• titlebar | yes/no | 窗口题目栏是否可见  

• toolbar | yes/no | 窗口工具栏是否可见  

• Width | pixel value | 窗口的像素宽度  

• z-look | yes/no | 窗口被激活后是否浮在其它窗口之上 

常用示例：

• window.open ('page.html', 'newwindow', 'fullscreen') //全屏

• window.open ('page.html', '_self', 'fullscreen = yes , height=100, width=400, top=0, left=0,

• toolbar=no, menubar=no, scrollbars=no,resizable=no,location=no, status=no')   // 在当前页面弹出一个全屏的窗口，并有详细的设置

• popWin = window.open('test.jsp');// 获取弹出窗口对象，以便进行操作 

• popWin .focus(); // 聚焦窗口

window.alert()参数，只有一个，显示警告框的信息；无返回值。 

window.confirm() 参数就只有一个。显示提示框的信息。按确定,返回true；按取消返回false

window.prompt()参数,有两个，第一个参数，显示提示输入框的信息。第二个参数,用于显示输入框的默认值。返回，用户输入的值。

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框。window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。
showModalDialog()与showModelessDialog()的区别，在于showModalDialog()打开的窗口，置在父窗口上，必须关闭才能访问父窗口；showModelessDialog()，打开后不必关闭也可访问父窗口打开的窗口。

使用方法： 

• vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])    // ie4+

• vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])  // ie5+

参数说明： 

• sURL：必选参数，类型：字符串。用来指定对话框要显示的文档的URL。 

• vArguments：可选参数，类型：变体。用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 

• sFeatures：可选参数，类型：字符串。用来描述对话框的外观等信息，可以使用以下的一个或几个，用分号“;”隔开。 

• dialogHeight :对话框高度，不小于１００px，ＩＥ４中dialogHeight 和 dialogWidth 默认的单位是em，而ＩＥ５中是px，为方便其见，在定义modal方式的对话框时，用px做单位。 

• dialogWidth: 对话框宽度。 

• dialogLeft: 离屏幕左的距离。 

• dialogTop: 离屏幕上的距离。 

• center: {yes | no | 1 | 0 }：窗口是否居中，默认yes，但仍可以指定高度和宽度。 

• help: {yes | no | 1 | 0 }：是否显示帮助按钮，默认yes。 

• resizable: {yes | no | 1 | 0 } ［ＩＥ５＋］：是否可被改变大小。默认no。 

• status: {yes | no | 1 | 0 } ［IE5+］：是否显示状态栏。默认为yes[ Modeless]或no[Modal]。 

• scroll:{ yes | no | 1 | 0 | on | off }：指明对话框是否显示滚动条。默认为yes。

参数传递： 
要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如： 

//parent.htm 
<script> 
var obj = new Object(); 
obj.name="LOVEJS"; 
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 
</script> 
//modal.htm 
<script> 
var obj = window.dialogArguments ;
alert("您传递的参数为：" + obj.name) 
</script>

获取对象：
可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如： 

//parent.htm 
<script> 
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 
alert(str); 
</script> 
//modal.htm 
<script> 
window.returnValue="在这里进行你要的操作"; 
</script>

个人认为showModalDialog和showModelessDialog用处很大，特别是从弹出页面中取返回值，比如弹出的页面是个多选的checkbox或是单选的radio返回一行数据。

7、JS监控窗口关闭事件

说明：javascript捕获窗口关闭事件有两种方法 onbeforeunload()，onUnload()。两个方法在 页面关闭、刷新、转向新页面时都触发。

区别：onUnload方法是在关闭窗口之后执行；onbeforeUnload方法是在关闭窗口之前执行

用法：

• function      window.onbeforeunload()      {      alert("关闭窗口")}
  function      window.onunload()      {      alert("关闭窗口")}

• 在body 标签里加入onUnload事件
  <body onUnload="myClose()">
  然后在javascript里定义myClose()方法

8、JS获取节点方法汇总

获取父节点方法：

    1）通过顶层document节点获取

•  document.getElementById(elementId)：若有多个相同id，返回第一个节点

• document.getElementsByName(elementName)：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。

• document.getElementsByTagName(tagName)

• document.getElementsByClassName(className)：ie没有该方法

• document.querySelector(".SpaceList")  // 选择器中的类别跟jquery相同，低版本浏览器不支持

• document.querySelectorAll("div")  // 选择器中的类别跟jquery相同，低版本浏览器不支持
  

     2）通过父节点获取

• parentObj.firstChild

• parentObj.lastChild

• parentObj.childNodes：注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。

• parentObj.children：注意：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。

• parentObj.getElementsByTagName(tagName)

     3）通过临近节点获取

• neighbourNode.previousSibling

• neighbourNode.nextSibling

     4）通过子节点获取

• childNode.parentNode

9、JS中call与apply用法

• call( thisArg [，arg1，arg2，… ] );       // 参数列表，arg1，arg2，...

• apply(thisArg [，argArray] );                 // 参数数组，argArray

     实例演示：

<!doctype html>
<html>
	<head>
		<title> call - apply for inherit </title>
	</head>	
	<body>
		<script type="text/javascript">
			function baseA()		// base Class A
			{
				this.member = "baseA member";
				this.showSelfA = function()
				{
					window.alert(this.member);
				}
			}
			
			function baseB()		// base Class B
			{
				this.member = "baseB member";
				this.showSelfB = function()
				{
					window.alert(this.member);
				}
			}
			
			function extendAB()		// Inherit Class from A and B
			{
				baseA.call(this);	// call for A
				baseB.call(this);	// call for B
			}
			
			window.onload = function()
			{
				var extend = new extendAB();	
				extend.showSelfA();		// show A
				extend.showSelfB();		// show B
			}
		</script>
	</body>
</html>

//运行结果：
//baseB member
//baseB member

//测试环境：Google Chrome 10.0.648.45

//结果分析：baseB.call(this); 时，将extend的member属性覆盖了

10、JS中的全局属性和函数

顶层函数（全局函数）  FF: Firefox, IE: Internet Explorer

函数	描述	FF	IE
decodeURI()	解码某个编码的 URI。	1	5.5
decodeURIComponent()	解码一个编码的 URI 组件。	1	5.5
encodeURI()	把字符串编码为 URI。	1	5.5
encodeURIComponent()	把字符串编码为 URI 组件。	1	5.5
escape()	对字符串进行编码。	1	3
eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。	1	3
getClass()	返回一个 JavaObject 的 JavaClass。
isFinite()	检查某个值是否为有穷大的数。	1	4
isNaN()	检查某个值是否是数字。	1	3
Number()	把对象的值转换为数字。	1
parseFloat()	解析一个字符串并返回一个浮点数。	1	3
parseInt()	解析一个字符串并返回一个整数。	1	3
String()	把对象的值转换为字符串。	1
unescape()	对由 escape() 编码的字符串进行解码。	1	3

顶层属性（全局属性）  FF: Firefox, IE: Internet Explorer

方法	描述	FF	IE
Infinity	代表正的无穷大的数值。	1	4
java	代表 java.* 包层级的一个 JavaPackage。
NaN	指示某个值是不是数字值。	1	4
Packages	根 JavaPackage 对象。
undefined	指示未定义的值。	1	5.5

11、JS获取浏览器信息和判断浏览器类型示例

     navigator中包含浏览器信息的属性：

• 浏览器代码名称：navigator.appCodeName

• 浏览器名称：navigator.appName

• 浏览器版本号：navigator.appVersion               // 可用于判断浏览器版本

• 对Java的支持：navigator.javaEnabled()

• MIME类型（数组）：navigator.mimeTypes

• 系统平台：navigator.platform

• 插件（数组）：navigator.plugins      

• 用户代理：navigator.userAgent                      // 可用于判断浏览器类型

      判断浏览器的简单范例：

     1）jquery方法$.browser：使用$.browser可以方便的获取浏览器类型以及版本号

• alert($.browser.msie);  //如果是IE浏览器则返回true 现在我们来了解一下$.browser的所有属性，使用for in方法遍历该对象，

• for(b in $.browser) alert(b);  //你将看到$.browser的所有属性上面遍历后会返回version，safari，opera，msie，mozilla这五个属性，其中第一个属性version返回浏览器版本，而后面四个属性则返回布尔值

     2）js原生方法

function  getBrowserVersion() {  
    var  browser = {};  
    var  userAgent = navigator.userAgent.toLowerCase();  
    var  s;  
    (s = userAgent.match(/msie ([/d.]+)/))  
            ? browser.ie = s[1]  
            : (s = userAgent.match(/firefox//([/d.]+)/))  
                    ? browser.firefox = s[1]  
                    : (s = userAgent.match(/chrome//([/d.]+)/))  
                            ? browser.chrome = s[1]  
                            : (s = userAgent.match(/opera.([/d.]+)/))  
                                    ? browser.opera = s[1]  
                                    : (s = userAgent  
                                            .match(/version//([/d.]+).*safari/))  
                                            ? browser.safari = s[1]  
                                            : 0;  
    var  version =  "" ;  
    if  (browser.ie) {  
        version = 'msie '  + browser.ie;  
    } else   if  (browser.firefox) {  
        version = 'firefox '  + browser.firefox;  
    } else   if  (browser.chrome) {  
        version = 'chrome '  + browser.chrome;  
    } else   if  (browser.opera) {  
        version = 'opera '  + browser.opera;  
    } else   if  (browser.safari) {  
        version = 'safari '  + browser.safari;  
    } else  {  
        version = '未知浏览器' ;  
    }  
    return  version;  
}

12、JS刷新当前页面和框架

      Javascript刷新页面的几种方法：

• history.go(0) 

• location.reload() 

• location=location 

• location.assign(location) 

• document.execCommand('Refresh') 

• window.navigate(location) 

• location.replace(location) ：
  location.replace(location.href);          // 刷新当前页面
  location.replace(document.referrer);   // 返回并刷新页面，document.referrer －前一个页面的URL
  

• document.URL=location.href 

     自动刷新页面的方法:

• 页面自动刷新：把如下代码加入<head>区域中，其中20指每隔20秒刷新一次页面.
  <meta http-equiv="refresh" content="20">

• 页面自动跳转：把如下代码加入<head>区域中，其中20指隔20秒后跳转到http://www.wyxg.com页面
  <meta http-equiv="refresh" content="20;url=http://www.wyxg.com">

• 页面自动刷新js版
  <script language="JavaScript">
  function myrefresh()
  {
         window.location.reload();
  }
  setTimeout('myrefresh()',1000); //指定1秒刷新一次
  </script>

     JS刷新框架：

• 刷新包含该框架的页面用   
  <script language=JavaScript>
     parent.location.reload();
  </script>   

• 子窗口刷新父窗口
  <script language=JavaScript>
      self.opener.location.reload();
  </script>
  (　或　<a href="javascript:opener.location.reload()">刷新</a>   )
  

• 刷新另一个框架的页面用   
  <script language=JavaScript>
     parent.另一FrameID.location.reload();
  </script>
  

• 关闭窗口时刷新或者想开窗时刷新，在<body>中调用以下语句即可。
  <body οnlοad="opener.location.reload()"> 开窗时刷新
  <body onUnload="opener.location.reload()"> 关闭时刷新
  <script language="javascript">
  window.opener.document.location.reload()
  </script>
  

13、JavaScript加密解密原理详解

1. 将eval改为alert（通用）：
   <SCRIPT LANGUAGE="JavaScript">
   eval("\x64\x6f\x63\x75\x6d\x65\x6e\x74\x2e\x77\x72\x69\x74\x65\x28\x22\u4f59\u5f26\u51fd\u6570\x22\x29")
   </SCRIPT>
   运行这段代码后，页面出现“余弦函数”四个字。上面被加密的代码能够运行是托了eval函数的福，改为alert之后，会自动解码成可识别汉字字符。
   

2. 将eval改为document.write：（<>这之内的无法解密出来）
   document.write无法将<>之内的字符串呈现在我们面前！因为<>之内的字符串被浏览器当作正常标签解释了，所以我们看不到<>之内的字符串。根据这个原理被加密的代码可以通过document.write而被浏览器解释。为了形象的说明，我将上面代码eval("")中的字符串前面添加\x3c（加密后的<），后面添加\x3e（加密后的>）。得到下面的代码：
   <SCRIPT LANGUAGE="JavaScript">
   eval("\x3c\x64\x6f\x63\x75\x6d\x65\x6e\x74\x2e\x77\x72\x69\x74\x65\x28\x22\u4f59\u5f26\u51fd\u6570\x22\x29\x3e")
   </SCRIPT>
   这时将eval换成document.write就不行了！因为这段被加密的代码存在<>之内！被浏览器解释后，我们是看不到的！这种解密方法失败，而浏览器却成功解释<>之内的代码。所以，document.write也可以执行加密后的代码，以便浏览器可以解释。当然document.writeline（表示一行一行地写）也可以了。

3. document.getElementById大法：（似乎仅对\转义符加密的有效）
   虽然有局限性，不过这个方法如能解密成功，将是非常的方便，因为我们知道alert方法是以弹出窗口的方式解密出代码的！这样解密出的代码我们就无法复制下来了……而document.getElementById大法将可以办到这一点。不解释原理了，直接看下面的代码：
   <TEXTAREA id=xx rows=30 cols=90></TEXTAREA>
   <script language="javascript">
   document.getElementById("xx").innerText="\x3c\x64\x6f\x63\x75\x6d\x65\x6e\x74\x2e\x77\x72\x69\x74\x65\x28\x22\u4f59\u5f26\u51fd\u6570\x22\x29\x3e"
   </script>
   将要解密的字符复制到innerText=""中，保存此代码为jiemi.htm。运行后就可以看到解密后的代码解密"\x3c\x64\x6f\x63\x75\x6d\x65\x6e\x74\x2e\x77\x72\x69\x74\x65\x28\x22\u4f59\u5f26\u51fd\u6570\x22\x29\x3e"为：<document.write("余弦函数")>。

4. object.toString()大法：（这个方法可以解密JScript.Encode加密的字符串）
   “alert("余弦函数")”通过JScript.Encode加密后为：余弦函数==^#~@，直接看解密代码：
   function decode(){
       //#@~^FgAAAA==@#@==^#~@
   }
   alert(decode.toString());
   识别字符串是否是通过JScript.Encode解密的，可以搜索字符串“JScript.Encode”与“execScript”，只要有满足的，就可以判断了。

     注意：这4个方法并不能解密所有加密的字符串！

14、JS自定义对象(面向对象式编程)

     参见周老师的《javascript编程实践和语言精粹》

15、离开jquery，照样$和ready

     利用querySelector querySelectorAll实现$

document.querySelector(DOM);  

function $(query) {    
     return document.querySelectorAll(query);    
}

     实现ready及事件绑定范例：

var readyFuns = [];    
function DOMReady(){    
    for(var i=0,l=readyFuns.length;i<l;i++){    
      readyFun[i]();    
    }    
    readyFuns = null;
    // 回调方法执行完毕之后，解除ready的事件绑定
    document.removeEventListener('DOMContentLoaded',DOMReady,false);    
}    
function readyFun(fn){    
    // 只在第一次添加回调方法时，执行绑定操作
    if(readyFuns.length == 0){    
       document.addEventListener('DOMContentLoaded',DOMReady,false);    
    }    
    readyFuns.push(fn);    
}

转载于:https://my.oschina.net/maomi/blog/174214