原生javascript常用方法

其他 2018-07-31 18:23:43 阅读次数: 0

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

猜你喜欢

转载自www.cnblogs.com/hualuo-sign/p/9397403.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022