【JS教程】JS常用交互经验技巧篇（一）
博客中基础知识太多，知识中又参杂太多的废话，所以打算来个汇总，算是对自己所掌握的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 onload="opener.location.reload()"> 开窗时刷新
<body onUnload="opener.location.reload()"> 关闭时刷新
<script language="javascript">
window.opener.document.location.reload()
</script>
13、JavaScript加密解密原理详解
将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之后，会自动解码成可识别汉字字符。
将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（表示一行一行地写）也可以了。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("余弦函数")>。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);
}