常用js整理

<script src="jquery.js"></script>


1. 关闭当前页面：
<a href="javascript:window.close();">关闭当前页面</a>

2. 页面跳转：
<a href="javascript:window.location.href='?';">跳转到当前页面</a>

<a href="javascript:window.history.back()">返回上一页</a>

如果是表单提交的时候，使用前者返回则表单会清空，而后者返回的时候表单可以保留刚才提交前的的数据。不仅仅可以使用window.location.href实现跳转页面，如果写成top.location.href则可以用于frameset的页面跳转，可以避免页面只在某一个框架内跳转。同理，top对象之外还有parent，self等特定对象，都可以实现相应的功能。

3. 弹出新窗口：
<a href="javascript:popNewWin('popup.html');">弹出新窗口</a>

<script>
function popNewWin(myurl){
var winProperty = "width=500,height=200, left=0 , top=0, toolbar=no , location=no, status=no, resizable=yes , scrollbars=yes";
window.open(myurl , '' , winProperty);
}
</script>

关闭弹出的窗口，并让父窗口刷新。见下面的代码。


4. 刷新当前页面.
<a href="javascript:window.location.reload();">刷新当前页面</a>

如果是页面刷新，使用window.location.reload();如果是关闭弹出的窗口，并让父窗口刷新，那么就需要使用opener.location.reload();
opener指的就是弹出新窗口的父页面。

<a href="javascript:window.close();opener.location.reload();">关闭当前新弹出的窗口，并且让父窗口刷新。</a>


同上述所讲的，不仅仅可以使用window.location.reload(),如果更换成top，parent等也可以实现相应的功能。

如果是在一个frameset页面中，想让某一个框架实现刷新，那么可以使用:框架的name.location.reload();


5.确认操作提示:
<a href="javascript:if(confirm('确认删除该信息吗?')) {alert('ok');}">确认删除吗？</a>
这个操作经常用于后台操作的时候。


6. 特殊的页面跳转。
一般情况下使用window.location.href='url';来实现页面跳转，但是特殊情况下使用以下书写来实现特定的页面刷新。window.location.href=document.referrer;
备注：请理解document.referrer的含义。


7. 只允许输入数字的表单控件：
填写11位手机号码<input type="text" size='50' onkeyup="this.value=this.value.replace(/\D/g,'')" onfocus="this.value=this.value.replace(/\D/g,'')"
onblur="this.value=this.value.replace(/\D/g,'')"
>
备注：这个效果主要是利用了正则的知识。非常实用！对于客户端js表单验证很有帮助。

8. 去除带超链图片周围的虚线：<br>
<a href="#" onfocus="this.blur();"><img src="abc.jpg" border=0></a>


如果应用在input控件上，那么可以防止用户对文本框中输入文本:
<input type="text" name='' value='' onfocus="this.blur()">


9. 屏蔽鼠标的拷贝操作：<br>
<a href='javascript:start();'>启动</a>
<!--body oncontextmenu='return false';
onmouseup='document.selection.empty()';
onselect='document.selection.empty()';
ondragstart = 'return false';
onselectstart = 'return false';
onbeforecopy='return false';
ondragenter = 'return false';
oncut = 'return false';
onpaste='return false';
oncopy='return false';
-->


<script language="javascript">
function start(){
function document.oncontextmenu() {return false;}
function document.oncopy() {return false;}
function document.onpaste() {return false;}
function document.oncut() {return false;}
function document.ondragstart() {return false;}
function document.onselectstart() {return false;}
}
</script>

<br><br><hr>



10. 切换图片：
<a href="#"><img src="abc.jpg" border=0 onmouseover=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='123.jpg';" onmouseout=""http://blog.51cto.com/viewpic.php?refimg=" + this.src='abc.jpg';"></a>


<a href="#"><img src="abc.jpg" border=0 onmouseover="if("http://blog.51cto.com/viewpic.php?refimg=" + this.src.indexOf('123.jpg')>0) "http://blog.51cto.com/viewpic.php?refimg=" + this.src='abc.jpg'; else "http://blog.51cto.com/viewpic.php?refimg=" + this.src='123.jpg';"></a>



11.可以变换长度的input控件：
输入email：<input type="text" name="email" id="email">
<span style="cursor:hand;" onclick="if(email.size<100) email.size = email.size+4">+</span>
<span style="cursor:hand;" onclick="if(email.size>10) email.size = email.size-4">-</span>




12.字体大小：<a href='javascript:changeSize(18);'>【大】</a>
<a href='javascript:changeSize(12);'>【中】</a>
<a href='javascript:changeSize(10);'>【小】</a>

<div id="zoom">
这里的内容可以设置字体大小。当点击上方的字体大小后，这里的内容会相应改变。
</div>


<script>
function changeSize(mysize){
//document.getElementById('zoom').style.fontSize = mysize + "px";
$('#zoom').css("font-size" , mysize + "px");
}
</script>


13.变换样式：<a href='javascript:changeStyle("class01");'>【样式1】</a>
<a href='javascript:changeStyle("class02");'>【样式2】</a>
<a href='javascript:changeStyle("class03");'>【样式3】</a>


<div id="mydiv">
这里的内容可以变换样式。当点击上方的样式选项后，这里的内容不仅仅会变化字体大小，还可以自由设置相应的样式。
</div>
<style>
.class01{font-size:12px; color:red; padding:10px; border:solid 1px red;}
.class02{font-size:14px; color:blue; padding:10px; border:solid 1px blue;}
.class03{font-size:16px; color:green; padding:10px; border:solid 1px green;}
</style>

<script>
function changeStyle(cssname){
$('#mydiv').removeAttr("class");
$('#mydiv').addClass(cssname);
}
</script>



14. 取出窗体中表单控件的数量:
document.forms.length;
备注：forms为form表单的name。

15. 判断表单控件全选与取消：
<script>
var flag = false;
function selectAll() {
if(flag==false) {
for(var i = 0; i < document.myform.length; i++) {
if(document.myform.elements.name == "orders") {
document.myform.elements.checked = true;
flag=true;
}
}
} else {
for(var i = 0; i < document.myform.length; i++) {
if(document.myform.elements.name == "orders") {
document.myform.elements.checked = false;
flag=false;
}
}
}
}
</script>

<form name="myform">
<input name="orders" type="checkbox" value="1" >选项1
<input name="orders" type="checkbox" value="2" >选项2
<input name="orders" type="checkbox" value="3" >选项3
<input name="orders" type="checkbox" value="4" >选项4
</form>
<a href="javascript:selectAll();">全选</a>

备注：
1）. myform为form表单的name；
2）. 注意document.myform.length的用法；
3）. 注意document.myform.elements.name的用法。这个用法实际上是获取该控件的name值；
4）. 注意document.myform.elements.checked的用法，可以给该属性赋值true或者false，就表示被选中或者取消选中。



15.2. 判断表单控件全选与取消：jQuery做法
<script>
var flag = false;
function selectAll2() {
if(flag==false) {
for(var i = 0; i < $('#uform > input').length; i++) {
if(document.uform.elements.name == "orders") {
document.uform.elements.checked = true;
flag=true;
}
}
} else {
for(var i = 0; i < $('#uform > input').length; i++) {
if(document.uform.elements.name == "orders") {
document.uform.elements.checked = false;
flag=false;
}
}
}
}
</script>

<form name="uform" id="uform">
<input name="orders" type="checkbox" value="1" >选项1
<input name="orders" type="checkbox" value="2" >选项2
<input name="orders" type="checkbox" value="3" >选项3
<input name="orders" type="checkbox" value="4" >选项4
</form>
<a href="javascript:selectAll2();">全选</a>



16. javascript中常用的函数：

1）.indexOf()的用法：
返回字符串2在字符串1中出现的位置:string1.indexOf("string2")。返回数值，如果返回-1表示string2没有在string1中存在。

2）. substring()的用法：
取出字符串中指定起点和终点的子字符串:
substr(start[,length])的用法：
取出从第几位到指定长度的字符串.
例如："abcdefghi".substring(2,6) 返回"cdef";
"abcdefghi".substr(2,6) 返回"cdefgh"
备注：。
substring(start,end)必须有两个参数，终点位置不包含在内。substr(start[,length])第二个参数是可选，如果不写，则返回从指定位置到字符串结束位置的字符串，如果有第二个参数则表示取多长的字符串


3). string.toLowerCase()使字符串全部变为小写.
string.toUpperCase()使全部字符变为大写.


17. js的日期形式：
new Date()获取当前时间，以下分别是获取当前年份，上一个月，当前日期，星期，小时，分钟，毫秒的方法。
<script>
/*
alert(new Date().getYear());
alert(new Date().getMonth());
alert(new Date().getDay());
alert(new Date().getDate());
alert(new Date().getHours());
alert(new Date().getMinutes());
alert(new Date().getTime());
*/
</script>

18. 调用操作系统默认打印：
window.print();


19. 加为收藏：
<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.iplay.com');">加为收藏</a>
备注：将需要收藏的url地址放置在相应的位置即可。


20. 设为首页：
<a href="javascript:window.external.AddFavorite('http://www.iplay.com/','爱耍网')">设为首页</a>
<br>
备注：将需要设置的url地址和网站名称放置在相应的位置即可。


21. 正则表达式在js中的使用：[见源码]
<script>
//下例中是判断是否是中文字的函数
function isChineseWords(arg) {
var pattern = /^[\u4e00-\u9fa5]+$/;
if(pattern.test(arg) == false) return false;
else return true;
}

//该函数是判断是否是电话号码的函数
function isTelnum(arg) {
var pattern = /^0\d{2,4}-?\d{7,8}(-\d{2,6})?$/;
if(pattern.test(arg) == true) return true;
else return false;
}

//上述函数也可以使用下述写法
function isTelnum(arg) {
var pattern = /^0\d{2,4}-?\d{7,8}(-\d{2,6})?$/;
if(arg.match(pattern) == true) return true;
else return false;
}
</script>


22. 在状态栏显示內容:
window.status = "需要显示的內容";



23. 判断浏览器类型：[见源码]
<script>
var str = window.navigator.userAgent.toLowerCase();

if(str.indexOf('msie')>0) {
alert('ie浏览器');
} else {
if(str.indexOf('firefox')>0) {
alert('firefox浏览器');
}
}
</script>



24. 防止被人frame:
<script>
if(top.location != self.location) top.location=self.location;
</script>



25. 网页将不能被另存为:
<noscript><iframe src="*.html"></iframe></noscript>



26.ENTER键可以让光标移到下一个输入框:
<input onkeydown="if(event.keyCode==13)event.keyCode=9">