站長資訊網(wǎng)
跨瀏覽器事件
跨瀏覽器添加事件
//跨瀏覽器添加事件 function addEvent(obj,type,fn){ if(obj.addEventListener){ obj.addEventListener(type,fn,false); }else if(obj.attachEvent){//IE obj.attchEvent('on'+type,fn); } }
跨瀏覽器移除事件
//跨瀏覽器移除事件 function removeEvent(obj,type,fn){ if(obj.removeEventListener){ obj.removeEventListener(type,fn,false); }else if(obj.detachEvent){//兼容IE obj.detachEvent('on'+type,fn); } }
跨瀏覽器阻止默認(rèn)行為
//跨瀏覽器阻止默認(rèn)行為 function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } }
跨瀏覽器獲取目標(biāo)對象
//跨瀏覽器獲取目標(biāo)對象 function getTarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcElement){//IE return window.event.srcElement; } }
跨瀏覽器獲取滾動條位置
//跨瀏覽器獲取滾動條位置，sp == scroll position function getSP(){ return{ top: document.documentElement.scrollTop || document.body.scrollTop, left : document.documentElement.scrollLeft || document.body.scrollLeft; } }
跨瀏覽器獲取可視窗口大小
//跨瀏覽器獲取可視窗口大小 function getWindow () { if(typeof window.innerWidth !='undefined') { return{ width : window.innerWidth, height : window.innerHeight } } else{ return { width : document.documentElement.clientWidth, height : document.documentElement.clientHeight } } },
js 對象冒充
<script type = 'text/javascript'> function Person(name , age){ this.name = name ; this.age = age ; this.say = function (){ return "name : "+ this.name + " age: "+this.age ; } ; } var o = new Object() ;//可以簡化為Object() Person.call(o , "zhangsan" , 20) ; console.log(o.say() );//name : zhangsan age: 20 </script>
js 異步加載和同步加載
異步加載也叫非阻塞模式加載，瀏覽器在下載js的同時(shí)，同時(shí)還會執(zhí)行后續(xù)的頁面處理。
在script標(biāo)簽內(nèi)，用js創(chuàng)建一個(gè)script元素并插入到document中，這種就是異步加載js文件了：
(function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();
同步加載
平常默認(rèn)用的都是同步加載。如：
<script src="http://yourdomain.com/script.js"></script>
同步模式又稱阻塞模式，會阻止流覽器的后續(xù)處理。停止了后續(xù)的文件的解析，執(zhí)行，如圖像的渲染。瀏覽器之所以會采用同步模式，是因?yàn)榧虞d的js文件中有對dom的操作，重定向，輸出document等默認(rèn)行為，所以同步才是最安全的。
通常會把要加載的js放到body結(jié)束標(biāo)簽之前，使得js可在頁面最后加載，盡量減少阻塞頁面的渲染。這樣可以先讓頁面顯示出來。同步加載流程是瀑布模型，異步加載流程是并發(fā)模型。
js獲取屏幕坐標(biāo)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <meta name="auther" content="fq" /> <title>獲取鼠標(biāo)坐標(biāo)</title> </head> <body> <script type="text/javascript"> function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev); document.getElementById('xxx').value = mousePos.x; document.getElementById('yyy').value = mousePos.y; } document.onmousemove = mouseMove; </script> X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /> </body> </html>
注釋：
1、documentElement 屬性可返回文檔的根節(jié)點(diǎn)。
2、scrollTop() 為滾動條向下移動的距離
3、document.documentElement.scrollTop 指的是滾動條的垂直坐標(biāo)
4、document.documentElement.clientHeight 指的是瀏覽器可見區(qū)域高度
DTD已聲明的情況下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果在頁面中添加這行標(biāo)記的話
IE
-
document.body.clientWidth ==> BODY對象寬度
-
document.body.clientHeight ==> BODY對象高度
-
document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?/p>
-
document.documentElement.clientHeight ==> 可見區(qū)域高度
Firefox
-
document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度
-
document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度
-
document.documentElement.scrollTop ==> 瀏覽器滾動部分高度
-
document.body.scrollTop ==>始終為0
-
document.documentElement.clientHeight ==>瀏覽器可視部分高度
-
document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度
Chrome
-
document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度
-
document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度
-
document.documentElement.scrollTop==> 始終為0
-
document.body.scrollTop==>瀏覽器滾動部分高度
-
document.documentElement.clientHeight ==> 瀏覽器可視部分高度
-
document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度
js拖拽效果
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title></title> <style type="text/css"> #login{ height: 100px; width: 100px; border: 1px solid black; position: relative; top:200px; left: 200px; background: red; } </style> </head> <body> <div id="login"></div> <script type="text/javascript"> var oDiv = document.getElementById("login"); oDiv.onmousedown = function(e){ var e = e || window.event; //window.event兼容IE,當(dāng)事件發(fā)生時(shí)有效 var diffX = e.clientX - oDiv.offsetLeft; //獲取鼠標(biāo)點(diǎn)擊的位置到所選對象的邊框的水平距離 var diffY = e.clientY - oDiv.offsetTop; document.onmousemove = function(e){ //需設(shè)為document對象才能作用于整個(gè)文檔 var e = e||window.event; oDiv.style.left = e.clientX - diffX + 'px'; //style.left表示所選對象的邊框到瀏覽器左側(cè)距離 oDiv.style.top = e.clientY -diffY + 'px'; }; document.onmouseup = function(){ document.onmousemove = null; //清除鼠標(biāo)釋放時(shí)的對象移動方法 document.onmouseup = null; } } </script> </body> </html>
offsetTop 返回的是數(shù)字，而 style.top 返回的是字符串，除了數(shù)字外還帶有單位：px。
js獲取圖片原始大小尺寸
var img = $("#img_id"); // Get my img elem var pic_real_width, pic_real_height; $("<img/>") // Make in memory copy of image to avoid css issues .attr("src", $(img).attr("src")) .load(function() { pic_real_width = this.width; // Note: $(this).width() will not pic_real_height = this.height; // work for in memory images. });
js循環(huán)遍歷數(shù)組
<script> //循環(huán)遍歷數(shù)組 var animals = ["cat",'dog','human','whale','seal']; var animalString = ""; for(var i = 0;i<animals.length;i++){ animalString += animals[i] + " "; } alert(animalString); //輸出數(shù)組里的每個(gè)項(xiàng) </script>
遍歷二維數(shù)組
<script> var arr=[[0,0,0,0,0,0],[0,0,1,0,0,0],[0,2,0,3,0,0],[0,0,0,0,0,0]]; for(var i=0;i<arr.length;i++){ //遍歷每一個(gè)具體的值 for(var j=0;j<arr[i].length;j++){ document.writeln(arr[i][j]+" "); } document.writeln("<br/>"); } </script>
阻止表單重復(fù)提交
有兩種方法可以解決：一是提交之后，立刻禁用點(diǎn)擊按鈕；第二種就是提交之后取消后續(xù)的表單提交操作。
document.getElementById("btn").disabled = true;//第一次提交后，將按鈕禁用
這種方式只能用于通過提交按鈕防止重復(fù)提交，還可以使用如下方式：
var flag = false;//設(shè)置一個(gè)監(jiān)聽變量 if(flag ==true)return;//退出事件 flag = true;//表示提交過一次了
字符串部分
在字符串中查找子字符串
<script type="text/javascript"> var test = 'Welcome to my blog!'; var value = 'blog'; var subValue = test.indexOf(value); console.log(subValue);//14,子字符串的索引 </script>
Number和Math部分
數(shù)字可以是一個(gè)直接量，也可以是一個(gè)對象，但是Math對象不同，他沒有構(gòu)造函數(shù)，并且其所有的屬性和方法都是直接通過這個(gè)對象來訪問的
把十進(jìn)制轉(zhuǎn)化為一個(gè)十六進(jìn)制值
var num = 255; console.log(num.toString(16));//ff
js中，十進(jìn)制數(shù)字以0x開頭，八進(jìn)制數(shù)字總是以0開頭
隨機(jī)產(chǎn)生顏色
<script type="text/javascript"> function randomVal(val){ return Math.floor(Math.random()*(val + 1)); } function randomColor(){ return 'rgb(' + randomVal(255) + ',' + randomVal(255) + ',' + randomVal(255) + ')'; } </script>
目前，所有瀏覽器都支持RGB表示法和十六進(jìn)制表示法，除了IE7，它只支持十六進(jìn)制表示法
在角度和弧度之間轉(zhuǎn)換
var rad = degrees*(Math.PI/180); var degrees = rad*(180/Math.PI);
數(shù)組部分
創(chuàng)建多維數(shù)組
<script type="text/javascript"> var arrayLength = 3;//設(shè)置數(shù)組長度 //創(chuàng)建數(shù)組 var multiArray = new Array(arrayLength); for(var i =0;i<multiArray.length;i++){ multiArray[i] = new Array(arrayLength); } //給第一個(gè)數(shù)組索引添加項(xiàng) multiArray[0][0] = 'phone'; multiArray[0][1] = 'book'; multiArray[0][2] = 'TV'; //第二個(gè) multiArray[1][0] = 2; multiArray[1][1] = 1; multiArray[1][2] = 98; //第三個(gè) multiArray[2][0] = ['java','python']; multiArray[2][1] = ['js','C++']; multiArray[2][2] = ['Haskell','php']; </script>
排序數(shù)組
<script type="text/javascript"> var fruits = ['banana','apple','orange','strawberry']; console.log(fruits.sort());//Array [ "apple", "banana", "orange", "strawberry" ] var num = [32,43,2,5,-23,0,4]; console.log(num.sort());//Array [ -23, 0, 2, 32, 4, 43, 5 ] </script> Array對象的sort方法會按照字母順序來排序數(shù)組元素。對于數(shù)字，是按照字符編碼的順序進(jìn)行排序 function compare(a,b){ return a-b; } var num = [32,43,2,5,-23,0,4]; console.log(num.sort(compare));//Array [ -23, 0, 2, 4, 5, 32, 43 ]
Date日期時(shí)間部分
js計(jì)算時(shí)間差
var date1=new Date(); //開始時(shí)間，當(dāng)前時(shí)間 var date2=new Date(); //結(jié)束時(shí)間，需傳入時(shí)間參數(shù) var date3=date2.getTime()-date1.getTime(); //時(shí)間差的毫秒數(shù) //計(jì)算出相差天數(shù) var days=Math.floor(date3/(24*3600*1000)); //計(jì)算出小時(shí)數(shù) var leave1=date3%(24*3600*1000); //計(jì)算天數(shù)后剩余的毫秒數(shù) var hours=Math.floor(leave1/(3600*1000)); //計(jì)算相差分鐘數(shù) var leave2=leave1%(3600*1000); //計(jì)算小時(shí)數(shù)后剩余的毫秒數(shù) var minutes=Math.floor(leave2/(60*1000)); //計(jì)算相差秒數(shù) var leave3=leave2%(60*1000); //計(jì)算分鐘數(shù)后剩余的毫秒數(shù) var seconds=Math.round(leave3/1000); console.log(" 相差 "+days+"天 "+hours+"小時(shí) "+minutes+" 分鐘"+seconds+" 秒");
正則部分
js實(shí)現(xiàn)千分位分隔
<script type="text/javascript"> function cc(s){ if(/[^0-9.]/.test(s)) return "invalid value"; s=s.replace(/^(d*)$/,"$1."); s=(s+"00").replace(/(d*.dd)d*/,"$1"); s=s.replace(".",","); var re=/(d)(d{3},)/; while(re.test(s)) s=s.replace(re,"$1,$2"); s=s.replace(/,(dd)$/,".$1"); return "￥" + s.replace(/^./,"0.") } </script> <input onchange="this.value=cc(this.value)" />
js判斷傳入?yún)?shù)是否為質(zhì)數(shù)
function fn(input) { input = parseInt(input,10); return isPrime(input) ? 'is prime' : 'not prime'; } function isPrime(input) { if (input < 2) { return false; } else { for (var i = 2; i <= Math.sqrt(input); i++) { if (input % i == 0) { return false; } } } return true; }
js判斷字符串出現(xiàn)最多的字符，并統(tǒng)計(jì)次數(shù)
//js實(shí)現(xiàn)一個(gè)函數(shù)，來判斷一個(gè)字符串出現(xiàn)次數(shù)最多的字符，并統(tǒng)計(jì)這個(gè)次數(shù) function countStr(str){ var obj = {}; for(var i = 0, l = str.length,k; i < l ;i++){ k = str.charAt(i); if(obj[k]){ obj[k]++; }else{ obj[k] = 1; } } var m = 0,i=null; for(var k in obj){ if(obj[k] > m){ m = obj[k]; i = k; } } return i + ':' + m; }
