原生javascript經常使用方法

JS函數修改html的元素內容,及修改屬性內容
document.getElementById("aid").innerHTML="World";
document.getElementById("aid").href="http://www.jikexueyuan.com";
document.getElementById("aid").style="width:120px";
document.getElementById("aid").style.color="blue";
document.getElementById("aid").setAttribute("class", "abc");
document.getElementById("aid").className ="abc";
 
JS操做自定義屬性
<input type="text" id="txtBox" displayName="123456" />
獲取自定義屬性值:
document.getElementById("txtBox").getAttribute("displayName");
document.getElementById("txtInput").attributes["displayName"].nodeValue
設置自定義屬性值:
document.all.txtBox.setAttribute("displayName ","123456");
document.getElementById("txtInput").attributes["displayName"].nodeValue = "123456"
 
JS動態添加html元素,以及屬性的簡單實例
function test(){
 //建立節點div
 var lswt_2=document.createElement("div");
 //設置節點id
 lswt_2.id='lswtColse';
 //設置節點屬性
 lswt_2.style.width='11px';
lswt_2.style.height='10px';
lswt_2.style.top='0px';
lswt_2.style.right='0px';
lswt_2.style.position='absolute';
lswt_2.style.background='url(7.gif)';
lswt_2.style.backgroundRepeat='no-repeat';
 //爲這個節點添加點擊事件
 lswt_4.addEventListener("click",loc,false);
 //把這個節點放到那裏？放到id爲lswt的元素下
 var element_2=document.getElementById("lswt");
 //插入這個節點
 element_2.appendChild(lswt_2);
 }
 
JS操做cookie
$.cookie('productid', $(this).attr("pid")); 寫入
$(".country-selectinput").html($.cookie('productname')); 讀取
 
JS把返回的json字符串轉換成json數組
var serData = $.parseJSON(data);
 
JS判斷是否Touch屏幕
function isTouchScreen(){
    return (('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch);
}
 
JS獲取移動設備初始化大小
function getInitZoom(){
    if(!this._initZoom){
        var screenWidth = Math.min(screen.height, screen.width);
        if(this.isAndroidMobileDevice() && !this.isNewChromeOnAndroid()){
            screenWidth = screenWidth/window.devicePixelRatio;
        }
            this._initZoom = screenWidth /document.body.offsetWidth;
        }
    return this._initZoom;
}
 
JS獲取cookie值
function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]);
    return null
}
JS設置cookie值
function setCookie(name, value, Hours) {
    var d = new Date();
    var offset = 8;
    var utc = d.getTime() + (d.getTimezoneOffset() * 60000);
    var nd = utc + (3600000 * offset);
    var exp = new Date(nd);
    exp.setTime(exp.getTime() + Hours * 60 * 60 * 1000);
    document.cookie = name + "=" + escape(value) + ";path=/;expires=" + exp.toGMTString() + ";domain=360doc.com;"
}
 
JS判斷鼠標滾輪向上向下滾動
var initTop = $(window).scrollTop();
$(window).scroll(function () {
    var scrollTop = $(document).scrollTop();
     if(scrollTop > initTop){
        //向下滾動
     } else {
        //向上滾動
     }
     initTop = scrollTop;
})
 
JS按樣式表名稱搜索getElementsByClassName
function getElementsByClassName(name) {
    var tags = document.getElementsByTagName('*') || document.all;
    var els = [];
    for (var i = 0; i < tags.length; i++) {
        if (tags.className) {
            var cs = tags.className.split(' ');
            for (var j = 0; j < cs.length; j++) {
                if (name == cs[j]) {
                    els.push(tags);
                    break
                }
            }
        }
    }
    return els
}
 
JS清除html代碼中的腳本
function clear_script(){
    K1.value=K1.value.replace(/<script.*?>[\s\S]*?<\/script>|\s+on[a-zA-Z]{3,16}\s?=\s?"[\s\S]*?"|\s+on[a-zA-Z]{3,16}\s?=\s?'[\s\S]*?'|\s+on[a-zA-Z]{3,16}\s?=[^ >]+/ig,"");
}
動態執行JavaScript腳本
 function javascript(){
    try{
      eval(K1.value);
    }catch(e){
      alert(e.message);
    }
}
 
JS實現base64解碼
function base64_decode(data){
    var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,ac = 0,dec = "",tmp_arr = [];
    if (!data) { return data; }
    data += '';
    do {
            h1 = b64.indexOf(data.charAt(i++));
            h2 = b64.indexOf(data.charAt(i++));
            h3 = b64.indexOf(data.charAt(i++));
            h4 = b64.indexOf(data.charAt(i++));
            bits = h1 << 18 | h2 << 12 | h3 << 6 | h4;
            o1 = bits >> 16 & 0xff;
            o2 = bits >> 8 & 0xff;
            o3 = bits & 0xff;
            if (h3 == 64) {
                    tmp_arr[ac++] = String.fromCharCode(o1);
            } else if (h4 == 64) {
                    tmp_arr[ac++] = String.fromCharCode(o1, o2);
            } else {
                    tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);
            }
    } while (i < data.length);
    dec = tmp_arr.join('');
    dec = utf8_decode(dec);
    return dec;
}
 
JS實現utf8解碼
function utf8_decode(str_data){
    var tmp_arr = [],i = 0,ac = 0,c1 = 0,c2 = 0,c3 = 0;str_data += '';
    while (i < str_data.length) {
            c1 = str_data.charCodeAt(i);
            if (c1 < 128) {
                    tmp_arr[ac++] = String.fromCharCode(c1);
                    i++;
            } else if (c1 > 191 && c1 < 224) {    
                    c2 = str_data.charCodeAt(i + 1);
                    tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63));
                    i += 2;
            } else {
                    c2 = str_data.charCodeAt(i + 1);
                    c3 = str_data.charCodeAt(i + 2);
                    tmp_arr[ac++] = String.fromCharCode(((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));
                    i += 3;
            }
    }
    return tmp_arr.join('');
}
 
JS獲取窗體可見範圍的寬與高
function getViewSize(){
    var de=document.documentElement;
    var db=document.body;
    var viewW=de.clientWidth==0 ?  db.clientWidth : de.clientWidth;
    var viewH=de.clientHeight==0 ?  db.clientHeight : de.clientHeight;
    return Array(viewW ,viewH);
}
 
JS阻止瀏覽器默認事件
function stopDefault( ev ) {
    //阻止默認瀏覽器動做(W3C)
    if ( ev && ev.preventDefault )
        ev.preventDefault();
    //IE中阻止函數器默認動做的方式
    else
        window.event.returnValue = false;
    return false;
};
 
JS提取頁面代碼中全部網址
var aa = document.documentElement.outerHTML.match(/(url\(|src=|href=)[\"\']*([^\"\'\(\)\<\>\[\] ]+)[\"\'\)]*|(http:\/\/[\w\-\.]+[^\"\'\(\)\<\>\[\] ]+)/ig).join("\r\n").replace(/^(src=|href=|url\()[\"\']*|[\"\'\>\) ]*$/igm,"");
alert(aa);
 
JS返回頂部的通用方法
function backTop(btnId) {
    var btn = document.getElementById(btnId);
    var d = document.documentElement;
    var b = document.body;
    window.onscroll = set;
    btn.style.display = "none";
    btn.onclick = function() {
        btn.style.display = "none";
        window.onscroll = null;
        this.timer = setInterval(function() {
            d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
            b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
            if ((d.scrollTop + b.scrollTop) == 0) clearInterval(btn.timer, window.onscroll = set);
            }, 10);
    };
    function set() {
        btn.style.display = (d.scrollTop + b.scrollTop > 100) ? 'block': "none"
    }
};
backTop('goTop');
 
JS得到URL中GET參數值
// 用法：若是地址是 test.htm?t1=1&t2=2&t3=3, 那麼能取得：GET["t1"], GET["t2"], GET["t3"]
function get_get(){
    querystr = window.location.href.split("?")
    if(querystr[1]){
        GETs = querystr[1].split("&");
        GET = [];
        for(i=0;i<GETs.length;i++){
              tmp_arr = GETs.split("=")
              key=tmp_arr[0]
              GET[key] = tmp_arr[1]
        }
    }
    return querystr[1];
}
 
JS判斷瀏覽器種類（IE firefox chrome opera safari）
function isBrowser(){
    var Sys={};
    var ua=navigator.userAgent.toLowerCase();
    var s;
    (s=ua.match(/msie ([\d.]+)/))?Sys.ie=s[1]:
    (s=ua.match(/firefox\/([\d.]+)/))?Sys.firefox=s[1]:
    (s=ua.match(/chrome\/([\d.]+)/))?Sys.chrome=s[1]:
    (s=ua.match(/opera.([\d.]+)/))?Sys.opera=s[1]:
    (s=ua.match(/version\/([\d.]+).*safari/))?Sys.safari=s[1]:0;
    if(Sys.ie){//Js判斷爲IE瀏覽器
        alert('http://www.phpernote.com'+Sys.ie);
        if(Sys.ie=='9.0'){//Js判斷爲IE 9
        }else if(Sys.ie=='8.0'){//Js判斷爲IE 8
        }else{
        }
    }
    if(Sys.firefox){//Js判斷爲火狐(firefox)瀏覽器
        alert('http://www.phpernote.com'+Sys.firefox);
    }
    if(Sys.chrome){//Js判斷爲谷歌chrome瀏覽器
        alert('http://www.phpernote.com'+Sys.chrome);
    }
    if(Sys.opera){//Js判斷爲opera瀏覽器
        alert('http://www.phpernote.com'+Sys.opera);
    }
    if(Sys.safari){//Js判斷爲蘋果safari瀏覽器
        alert('http://www.phpernote.com'+Sys.safari);
    }
}
 
Jquery中$.post和$.ajax的用法
$.ajax({
    type:'get',
    url:'http://www.www.phpernote.com/rss',
    beforeSend:function(XMLHttpRequest){
        //ShowLoading();
    },
    success:function(data,textStatus){
        $('.ajax.ajaxResult').html('');
        $('item',data).each(function(i,domEle){
            $('.ajax.ajaxResult').append('<li>'+$(domEle).children('title').text()+'</li>');
        });
    },
    complete:function(XMLHttpRequest,textStatus){
        //HideLoading();
    },
    error:function(){
        //請求出錯處理
    }
});
 
JS固定在網頁頂部不隨瀏覽滾動而消失的DIV層
/*
*滾動條滑動，位置不變的DIV層
*div_id：DIV的ID屬性值，必填參數
*offsetTop：滾動條滑動時DIV層距頂部的高度，可選參數
*/
function fixDiv(div_id,offsetTop){
    var Obj=$('#'+div_id);
    if(Obj.length!=1){return false;}
    var offsetTop=arguments[1]?arguments[1]:0;
    var ObjTop=Obj.offset().top;
    var isIE6=$.browser.msie && $.browser.version == '6.0';
    if(isIE6){
        $(window).scroll(function(){
            if($(window).scrollTop()<=ObjTop){
                    Obj.css({
                        'position':'relative',
                        'top':0
                    });
            }else{
                Obj.css({
                    'position':'absolute',
                    'top':$(window).scrollTop()+offsetTop+'px',
                    'z-index':1
                });
            }
        });
    }else{
        $(window).scroll(function(){
            if($(window).scrollTop()<=ObjTop){
                Obj.css({
                    'position':'relative',
                    'top':0
                });
            }else{
                Obj.css({
                    'position':'fixed',
                    'top':0+offsetTop+'px',
                    'z-index':1
                });
            }
        });
    }
}
 
jquery 獲取checkbox的選中值（一組和單個）
var id_array=new Array();
$('input[name="id"]:checked').each(function(){
    id_array.push($(this).val());//向數組中添加元素
});
var idstr=id_array.join(',');//將數組元素鏈接起來以構建一個字符串
alert(idstr);
 
JQuery獲取iframe對象
$(window.frames["frame1"].document); //獲取iframe對象
//例如
$(window.frames["xxxxx"].document).find('#xxx').val();
 
JS產生一段隨機字符串
function(size) randomString {
    size = size || 6;
    var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', // 62個字符
        maxNum = chars.length,
        ret = '';
    while (size > 0) {
        ret += chars.charAt(Math.floor(Math.random() * maxNum));
        size--;
    }
    return ret;
}
 
JS頁面跳轉
onClick="location.href='http://www.ddhbb.com/'"
 
JS確認對話框
javascript:drop_confirm('你肯定要結束活動嗎，結束後不可再開啓本活動!', 'http://baidu.com');
if(confirm("確認要將用戶移動到分組"+group+"?")){
    }else{
      event.returnValue = false;
    }
 
JS把php輸出的時間戳轉換爲日期（解決出現NaN的問題）
var s = '1379934802'; //php time()函數輸出的時間戳
var d = new Date(parseInt(s) * 1000); //必須乘以1000，不然出現NaN
var dateStr = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
alert(dateStr);
 
JS控制各行換色
$('div:odd').css("background-color", "#F4F4F8");
$('div:even').css("background-color", "#EFF1F1");
 
JS網頁打印內容
javascript:window.print();
 
Jquery 獲取一組checkbox元素 並獲取選中的個數
var items =  $("input[name='check']:checked");  //獲取name爲check的一組元素,而後選取它們中選中(checked)的。
alert( "選中的個數爲："+items.length  );
<input type="checkbox" value="1" name="check" checked/>
<input type="checkbox" value="2" name="check" />
<input type="checkbox" value="3" name="check" checked/>
 
JS實現表格隔行背景色加深
<script type="text/javascript">
window.onload = function(){ //頁面全部元素加載完畢
    var item  =  document.getElementById("tb");         //獲取id爲tb的元素(table)
    var tbody =  item.getElementsByTagName("tbody")[0]; //獲取表格的第一個tbody元素
    var trs =   tbody.getElementsByTagName("tr");           //獲取tbody元素下的全部tr元素
    for(var i=0;i < trs.length;i++){//循環tr元素
        if(i%2==0){        //取模. (取餘數.好比 0%2=0 , 1%2=1 , 2%2=0 , 3%2=1)
            trs[i].style.backgroundColor = "#AAA"; // 改變 符合條件的tr元素 的背景色.
        }
    }
}
</script>
 
jQuery無刷新訪問ajax post方法
$.post("test.php", { "func": "getNameAndTime" },
   function(data){
     alert(data.name);
     alert(data.time);
   }, "json");
 
jQuery無刷新訪問ajax get方法
$.get("test.jsp", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });