常用js整理

<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="abc.jpg"  border=0 onmouseover="this.src='123.jpg';" onmouseout="this.src='abc.jpg';"></a>  <a href="#"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="abc.jpg"  border=0 onmouseover="if(this.src.indexOf('123.jpg')>0) this.src='abc.jpg'; else this.src='123.jpg';"></a>    11.可以变换长度的input控件：输入email：<input type="text" name="email" id="email"><span  onclick="if(email.size<100) email.size = email.size+4">+</span><span  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[i].name == "orders") {                    document.myform.elements[i].checked = true;                    flag=true;                }            }        } else {            for(var i = 0; i < document.myform.length; i++) {                if(document.myform.elements[i].name == "orders") {                    document.myform.elements[i].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[i].name的用法。这个用法实际上是获取该控件的name值；4）. 注意document.myform.elements[i].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[i].name == "orders") {                    document.uform.elements[i].checked = true;                    flag=true;                }            }        } else {            for(var i = 0; i < $('#uform > input').length; i++) {                if(document.uform.elements[i].name == "orders") {                    document.uform.elements[i].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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="*.html"></iframe></noscript>   26.ENTER键可以让光标移到下一个输入框:<input onkeydown="if(event.keyCode==13)event.keyCode=9">