您的位置：首页 > Web前端 > JavaScript

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

2014-02-07 15:34 337 查看

常用技巧篇

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')
6window.navigate(location)
7 location.replace(location)
8 document.URL=location.href

Javascript刷新框架或窗口方法：

刷新包含该框架的页面：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

[b]9、关于attribute 和 prototype[/b]

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];
});
}
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航