【JS教程】JS常用交互经验技巧篇（二）
常用技巧篇
1、不刷新页面提交表单
当然这种页面肯定不难想象是使用ajax来做，页面中有个地方是单独上传图片，然后并不保存到数据库，而是有一个提前预览的效果。那就是先把图片 upload到服务器上的一个临时目录，并给出页面上一个预览效果。等用户保存，在把图片移到真正的上传图片目录并把地址写入数据库。单独上传图片的这个 地方，是可以用ajax来实现的。但是我们用了一个提交的form，即当用户点击预览的时候，用form传统的post的方式传递数据。代码片断如下：
<form enctype = 'multipart/form-data' method="post" action=/front/imageupload name='imageupload' id='imageupload' target="uploadcallback"> <input name="userfile" type="file" size="15" /> <input type="hidden" name="pictureId" value="item_img"> </form> <iframe name="uploadcallback" id="uploadcallback" src="<?php echo ' http://localhost".$this->baseUrl."/slot/imageupload';?>" style="display:none;"></iframe>
iframe 所指向的页面中，可以直接调用表单所在页面的方法（如下 DEMO 所示）：
<script type="text/javascript">if(window.parent){window.parent.uploadCallback("'.$arrayData['photo_url'].'");}</script>
这样无论target设置成什么，提交以后都会跳转到域名/front /imageupload/。为了不让提交以后页面跳转，我们在页面底部增加了一个隐藏得frame。
在把form中的target属性改成隐藏iframe的name。这样就看不到页面的跳转了。兼容性注释
在 HTML 4.01 中，不赞成使用 form 元素的target 属性；在XHTML 1.0 Strict DTD 中，不支持该属性。
语法< form target=" value">属性值值描述_blank在新窗口中打开。_self默认。_parent在父框架集中打开。_top在整个窗口中打开。 framename在指定的框架中打开。
2、刷新页面方法大全
自动刷新页面的方法:
页面自动刷新：<meta http-equiv="refresh" content="20"> 其中20指每隔20秒刷新一次页面.
页面自动跳转：<meta http-equiv="refresh" content="20;url=http://www.***.com"> 其中20指隔20秒后跳转到http://www.***.com/页面
Javascript刷新页面的几种方法：
1 history.go(0)
2 location.reload()
3 location=location
4 location.assign(location)
5 document.execCommand('Refresh')
6 window.navigate(location)
7 location.replace(location)
8 document.URL=location.hrefJavascript刷新框架或窗口方法：
刷新包含该框架的页面：parent.location.reload();
子窗口刷新父窗口：self.opener.location.reload();
刷新另一个框架的页面：parent.另一FrameID.location.reload();
如果想关闭窗口时刷新或者想开窗时刷新的话，在<body>中调用以下语句即可。
<body onload="opener.location.reload()"> 开窗时刷新 <body onUnload="opener.location.reload()"> 关闭时刷新 <script language="javascript"> window.opener.document.location.reload(); </script>
3、JS获取来路链接地址 document.referrer
用途：可用来检测来路，防止盗链。
问题：用console.info() 和 alert()方法输出这个变量时，提示undefined。但在控制台直接打印，可以看到来路。也可以将其值正常写入Cookie中。
4、JS批量修改元素样式
// 单个修改设置
var head= document. getElementById("head");
head.style.width = "200px";
head.style.height = "70px";
head.style.display = "block";
// 直接重写样式，会清空旧的样式
head.style.cssText="width:200px;height:70px;display:bolck";
使用该方法在IE9/Firefox/Safari/Chrome/Opera中没什么问题，但由于 IE6/7/8中cssText返回值少了分号，需要检测返回值，如果cssText返回值没";"则补上。
5、阻止事件冒泡和默认动作
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;
}
6、JS获取各种高度宽度：浏览器窗口滚动条的位置、元素的几何尺寸
7、离开jquery，照样$和ready & 各浏览器中querySelector和querySelectorAll的实现差异
利用querySelector querySelectorAll实现$
1 |
document.querySelector(DOM); |
2 |
3 |
function $(query) { |
4 |
return document.querySelectorAll(query); |
5 |
} |
实现ready及事件绑定范例：
01 |
var readyFuns = []; |
02 |
function DOMReady(){ |
03 |
for(var i=0,l=readyFuns.length;i<l;i++){ |
04 |
readyFun[i](); |
05 |
} |
06 |
readyFuns = null; |
07 |
// 回调方法执行完毕之后，解除ready的事件绑定 |
08 |
document.removeEventListener('DOMContentLoaded',DOMReady,false); |
09 |
} |
10 |
function readyFun(fn){ |
11 |
// 只在第一次添加回调方法时，执行绑定操作 |
12 |
if(readyFuns.length == 0){ |
13 |
document.addEventListener('DOMContentLoaded',DOMReady,false); |
14 |
} |
15 |
readyFuns.push(fn); |
16 |
} |
w3c：http://www.w3.org/TR/selectors-api/#nodeselector
javascript高级选择器querySelector和querySelectorAll
转：http://www.hujuntao.com/archives/javascript-selector-queryselector-and-queryselectorall.html
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。
目前几乎主流浏览器均支持了他们。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera。
querySelector 和 querySelectorAll 在规范中定义了如下接口：
module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };
从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。
获取页面I属性D为test的元素：
1 |
document.getElementById("test"); |
2 |
//or |
3 |
document.querySelector("#test"); //or |
4 |
document.querySelectorAll("#test")[0]; |
获取页面class属性为”red”的元素:
1 |
document.getElementsByClassName('red') |
2 |
//or |
3 |
document.querySelector('.red') |
4 |
//or |
5 |
document.querySelectorAll('.red') |
Element.querySelector和Element.querySelectorAll和jQuery(element).find(selector)选择器的区别：
01 |
<div id="test1"><a href="http://www.hujuntao.com/">设计蜂巢</a></div> |
02 |
<p id="bar">111</p> |
03 |
<script> |
04 |
var d1 = document.getElementById('test1'), |
05 |
obj1 = d1.querySelector('div a'), |
06 |
obj2 = d1.querySelectorAll('div a'); |
07 |
obj3 = $(d1).find('div a'); |
08 |
console.log(obj1) //<a href="http://www.hujuntao.com/">设计蜂巢</a> |
09 |
console.log(obj2.length) //1 |
10 |
console.log(obj3) //null |
11 |
</script> |
querySelectorAll 在文档内找全部符合选择器描述的节点包括Element本身
jQuery(element).find(selector) 在文档内找全部符合选择器描述的节点不包括Element本身
-------------------------------------------------------------------------------------------------------
转：http://www.cnblogs.com/snandy/archive/2011/03/30/1999388.html
querySelector和querySelectorAll是W3C提供的 新的查询接口
module dom {
[Supplemental, NoInterfaceObject]
interface NodeSelector {
Element querySelector(in DOMString selectors);
NodeList querySelectorAll(in DOMString selectors);
};
Document implements NodeSelector;
DocumentFragment implements NodeSelector;
Element implements NodeSelector;
};
从接口定义可以看到Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象，querySelectorAll返回的一个集合(NodeList)。
目前 IE8/9及Firefox/Chrome/Safari/Opera 的最新版已经支持它们。
如想获取页面class属性为"red"的元素，除了使用document.getElementsByClassName('red')还可以使用document.querySelector('.red')和document.querySelectorAll('.red')。
但Element.querySelector和Element.querySelectorAll的实现有错误，如下
?
1 2 3 4 5 6 7 8 9 10 11 |
<div id="d1"> <p><a href=" http://www.sina.com.cn">SINA</a></p> </div> <script type="text/javascript"> function $(id){return document.getElementById(id);} var d1 = $('d1'); var obj1 = d1.querySelector('div a'); var obj2 = d1.querySelectorAll('div a'); alert(obj1); // -> http://www.sina.com.cn/ alert(obj2.length); // -> 1 </script> |
在支持这两个方法的浏览器可以看到分别弹出了“http://www.sina.com.cn/”，和 “1”。说明查询到了想要的元素或元素集合。这与W3C的定义却是不合的，根据定义应该是在元素d1范围内查找"div a"，而d1内压根没有div。因此应该分别返回null，空集合。
jQuery1.4.2 及之前版本中只使用了document.querySelectorAll，没有使用Element.querySelectorAll。 jQuery1.4.3 后使用了Element.querySelectorAll，但做了修复。在选择器前加了"#__sizzle__"以强制其在指定元素内查找（3903-3918行）。简化下
?
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function $(id){return document.getElementById(id);} var d1 = $('d1'); var obj1 = d1.querySelector('div a'); var obj2 = d1.querySelectorAll('div a'); var old = d1.id, id = d1.id = "__sizzle__"; try { var query = '#' + id + ' div a'; alert(d1.querySelector( query )); alert(d1.querySelectorAll( query ).length); } catch(e) { } finally { old ? d1.id = old : d1.removeAttribute( "id" ); } |
实现很巧妙，指定范围的元素如果有id，将其保留在old，"__sizzle__"赋值其作为临时id，在选择器"div a"前指定查找范围为"#__sizzle__"，即d1。finally语句来最后清理，如果指定范围的元素本身有id将其恢复为old，没有则去掉临时的id属性"__sizzle__"。
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、关于attribute 和 prototype
getAttribute 的潜规则，对部分属性（如，checked、value）获取到的是属性的初始值，
.value 获取到的是当前对象的属性值。
$("#inputWeixin").val()
// "100"
$("#inputWeixin").attr("value")
// "100"
document.getElementById("inputWeixin").value
// "100"
document.getElementById("inputWeixin").getAttribute("value")
// null
10、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原生方法
01 |
function getBrowserVersion() { |
02 |
var browser = {}; |
03 |
var userAgent = navigator.userAgent.toLowerCase(); |
04 |
var s; |
05 |
(s = userAgent.match(/msie ([/d.]+)/)) |
06 |
? browser.ie = s[1] |
07 |
: (s = userAgent.match(/firefox//([/d.]+)/)) |
08 |
? browser.firefox = s[1] |
09 |
: (s = userAgent.match(/chrome//([/d.]+)/)) |
10 |
? browser.chrome = s[1] |
11 |
: (s = userAgent.match(/opera.([/d.]+)/)) |
12 |
? browser.opera = s[1] |
13 |
: (s = userAgent |
14 |
.match(/version//([/d.]+).*safari/)) |
15 |
? browser.safari = s[1] |
16 |
: 0; |
17 |
var version = "" ; |
18 |
if (browser.ie) { |
19 |
version = 'msie ' + browser.ie; |
20 |
} else if (browser.firefox) { |
21 |
version = 'firefox ' + browser.firefox; |
22 |
} else if (browser.chrome) { |
23 |
version = 'chrome ' + browser.chrome; |
24 |
} else if (browser.opera) { |
25 |
version = 'opera ' + browser.opera; |
26 |
} else if (browser.safari) { |
27 |
version = 'safari ' + browser.safari; |
28 |
} else { |
29 |
version = '未知浏览器' ; |
30 |
} |
31 |
return version; |
32 |
} |
去处字符串中的空格
String.prototype.trim = function(){return this.replace(/^\s+|\s+$/g, "");};
Verify that a given argument is a number
function isNumber(n){
return !isNaN(parseFloat(n)) && isFinite(n);
}
17 – Verify that a given argument is an array
Object.prototype.toString.call(obj) === '[object Array]’
Array.isArray(obj); // its a new Array method
arr instanceof Array; // false
Get the max or the min in an array of numbers
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
var maxInNumbers = Math.max.apply(Math, numbers);
var minInNumbers = Math.min.apply(Math, numbers);
19 – Empty an array
var myArray = [12 , 222 , 1000 ];
myArray.length = 0; // myArray will be equal to [].
随机打乱数组
var numbers = [5, 458 , 120 , -215 , 228 , 400 , 122205, -85411];
numbers = numbers.sort(function(){ return Math.random() - 0.5});
11 – Generate a random set of alphanumeric characters
function generateRandomAlphaNum(len) {
var rdmString = "";
for( ; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
return rdmString.substr(0, len);
}
20.给XMLHttpRequests设置timeouts
如果一个XHR需要花费太长时间，你可以终止链接（例如网络问题），通过给XHR使用setTimeout()解决。
[js] view plaincopy
var xhr = new XMLHttpRequest ();
xhr.onreadystatechange = function () {
if (this.readyState == 4) {
clearTimeout(timeout);
// do something with response data
}
}
var timeout = setTimeout( function () {
xhr.abort(); // call error callback
}, 60*1000 /* timeout after a minute */ );
xhr.open('GET', url, true);
xhr.send();
此外，通常你应该完全避免同步Ajax调用。
21.处理WebSocket超时
一般来说，当创建一个WebSocket链接时，服务器可能在闲置30秒后链接超时，在闲置一段时间后，防火墙也可能会链接超时。
为了解决这种超时问题，你可以定期地向服务器发送空信息，在代码里添加两个函数：一个函数用来保持链接一直是活的，另一个用来取消链接是活的，使用这种方法，你将控制超时问题。
添加一个timeID……
[js] view plaincopy
var timerID = 0;
function keepAlive() {
var timeout = 15000;
if (webSocket.readyState == webSocket.OPEN) {
webSocket.send('');
}
timerId = setTimeout(keepAlive, timeout);
}
function cancelKeepAlive() {
if (timerId) {
cancelTimeout(timerId);
}
}
keepAlive()方法应该添加在WebSocket链接方法onOpen()的末端，cancelKeepAlive()方法放在onClose()方法下面。
5、简单的 clone 方法
function clone(object) { function OneShotConstructor(){}; OneShotConstructor.prototype= object; return new OneShotConstructor(); } clone(Array).prototype ; // []
18.一个HTML escaper函数
[js] view plaincopy
function escapeHTML(text) {
var replacements= {"<": "<", ">": ">","&": "&", "\"": """};
return text.replace(/[<>&"]/g, function(character) {
return replacements[character];
});
}