《js笔记》

1.判断浏览器是否启用cookie：

if (navigator.cookieEnabled==true)
    {
    alert("已启用 cookie")
    }
else
    {
    alert("未启用 cookie")
    }
}

1.从url中获取参数的值：

<script type="text/javascript">
    function getQueryString( name ){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if( r!=null ) return  unescape(r[2]); return null;
    }
</script>

代码解释：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js正则表达式</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
</style>
</head>
<body>

</body>
<script type="text/javascript">
 function getQueryString(name){
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

    var r = window.location.search.substr(1);
    var result = r.match(reg);

    console.log(r);
    console.log(reg);
    console.log(result);

    if(result!=null){
        return unescape(result[2]);
    }

    return null;

}

var age = getQueryString("age");

console.log(age);

//代码解释：
正则表达式为:/(^|&)age=([^&]*)(&|$)/
分析它匹配的：
^age=10&
^age=10$
&age=10&
&age=10$

待匹配的字符串：
id=123&age=10&sb=1&hu=abc

匹配的结果：
&age=10&
整个&age=10&为第0组; 
第1组为&
第2组为10
第3组为&

</script>
</html>

View Code

本地调试，浏览器输入：file:///G:/test_demo/queryString.html?id=123&age=10&sb=1&hu=abc

console打印：

unescape函数：

escape("Visit W3School!")
"Visit%20W3School%21"
unescape("Visit W3School!")
"Visit W3School!"
unescape("Visit%20W3School%21")
"Visit W3School!"
encodeURIComponent("Visit W3School!")
"Visit%20W3School!"
decodeURIComponent("Visit W3School!")
"Visit W3School!"
encodeURI("Visit W3School!")
"Visit%20W3School!"

注释：ECMAScript v3 已从标准中删除了 unescape() 函数，并反对使用它，因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。

2.改变窗口大小、触发改变窗口大小事件：

<body id="box">

</body>
<script type="text/javascript">
var winWidth = 0;
function addEventOnResize() {
    $(window).resize(function () {
        winWidth = $(this).width();
        var dom = document.getElementById('box');
        if (!dom) {
            return;
        }
        if (winWidth > 1366) {
            dom.className = 'box1240';
        } else {
            dom.className = 'box1000';
        }
    }).resize();
}
addEventOnResize();

</script>

w3上介绍resize的用法：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
$(document).ready(function(){
  $(window).resize(function() {
    $("span").text(x+=1);
  });
  $("button").click(function(){
    $(window).resize();
  });
});
</script>
</head>
<body>
<p>窗口的大小被调整了 <span>0</span> 次。</p>
<p>请试着调整浏览器窗口的大小。</p>
<button>触发窗口的 resize 事件</button>
</body>
</html>

3.动态加载js代码：　　　　　　　　　　　　

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js代码学习</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
</style>
</head>
<body>


<script type="text/javascript">
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?df0a72cf81dd321c00f5baefc3c4855d";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();

</script>
</body>
</html>

View Code

运行完成之后：

insertBefore用法：http://www.w3school.com.cn/jsref/met_node_insertbefore.asp

insertBefore() 方法在您指定的已有子节点之前插入新的子节点。

<!DOCTYPE html>
<html>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮向列表插入一个项目。</p>

<button onclick="myFunction()">试一下</button>

<script>
function myFunction()
{
var newItem=document.createElement("LI")
var textnode=document.createTextNode("Water")
newItem.appendChild(textnode)

var list=document.getElementById("myList")
list.insertBefore(newItem,list.childNodes[0]);
}
</script>

<p><b>注释：</b><br>首先请创建一个 LI 节点，<br>然后创建一个文本节点，<br>然后向这个 LI 节点追加文本节点。<br>最后在列表中的首个子节点之前插入此 LI 节点。</p>

</body>
</html>

View Code

再来一个动态加载css的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>动态加载js和css</title>
</head>
<body>

<button class="btn btn-danger">bootstrap样式按钮</button>

<script src="jquery/jquery.min.js"></script>
<script type="text/javascript">
//动态加载os.js
var js = document.createElement("script");
js.type = "text/javascript";
js.src="os.js";
document.getElementsByTagName("head")[0].appendChild(js);

//动态加载css
var css = document.createElement("link");
css.type = "text/css";
css.href = "bootstrap/bootstrap.min.css";
css.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(css);

</script>
</body>
</html>

View Code

其外链接的os.js:

/**
*   判断客户端操作系统类型
*/
(function() {
    var agent = navigator.userAgent.toLowerCase();
    var os_type = "";
    if (/android/i.test(navigator.userAgent)) {
        var index = agent.indexOf("android");
        version = agent.substr(index + 8, 3);
        os_type = "Android " + version;
    }
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        var index = agent.indexOf("os");
        version = agent.substr(index + 3, 3);
        os_type = "iOS " + version;
    }
    if (/Linux/i.test(navigator.userAgent) && !/android/i.test(navigator.userAgent) && !/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        os_type = "Linux";
    }
    if (/windows|win32/i.test(navigator.userAgent)) {
        os_type = "windows32";
    }
    if (/windows|win64/i.test(navigator.userAgent)) {
        os_type = "windows64";
    }
    console.log("客户端类型：" + os_type);
})();

View Code

运行结果，观察console和bootstrap样式是否生效：

4.获取客户端操作系统类型

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js代码学习</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
</style>
</head>
<body>

<script type="text/javascript">
var OSType = detectOS(); //操作系统

console.log(OSType);        


//获取客户端操作系统类型
function detectOS() {
    var sUserAgent = navigator.userAgent;
    var isWin = (navigator.platform === "Win32") || (navigator.platform === "Windows");
    var isMac = (navigator.platform === "Mac68K") || (navigator.platform === "MacPPC") || (navigator.platform === "Macintosh") || (navigator.platform === "MacIntel");
    var bIsIpad = sUserAgent.match(/ipad/i) === "ipad";
    var bIsIphoneOs = sUserAgent.match(/iphone os/i) === "iphone os";
    var isUnix = (navigator.platform === "X11") && !isWin && !isMac;
    var isLinux = (String(navigator.platform).indexOf("Linux") > -1);
    var bIsAndroid = sUserAgent.toLowerCase().match(/android/i) === "android";
    var bIsCE = sUserAgent.match(/windows ce/i) === "windows ce";
    var bIsWM = sUserAgent.match(/windows mobile/i) === "windows mobile";
    if(isMac) return "Mac";
    if(isUnix) return "Unix";
    if(isLinux) {
        if(bIsAndroid) {
            return "Android";
        } else {
            return "Linux";
        }
    }
    if(bIsCE || bIsWM) {
        return 'wm';
    }
    if(isWin) {
        var isWin2K = sUserAgent.indexOf("Windows NT 5.0") > -1 || sUserAgent.indexOf("Windows 2000") > -1;
        if(isWin2K) return "Win2000";
        var isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1 || sUserAgent.indexOf("Windows XP") > -1;
        if(isWinXP) return "WinXP";
        var isWin2003 = sUserAgent.indexOf("Windows NT 5.2") > -1 || sUserAgent.indexOf("Windows 2003") > -1;
        if(isWin2003) return "Win2003";
        var isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1 || sUserAgent.indexOf("Windows Vista") > -1;
        if(isWinVista) return "WinVista";
        var isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1 || sUserAgent.indexOf("Windows 7") > -1;
        if(isWin7) return "Win7";
        var isWin8 = sUserAgent.indexOf("Windows NT 6.2") > -1 || sUserAgent.indexOf("Windows 8") > -1;
        if(isWin8) return "Win8";
        var isWin10 = sUserAgent.indexOf("Windows NT 10.0") > -1 || sUserAgent.indexOf("Windows 10") > -1;
        if(isWin10) return "Win10";
    }
    return "other";
}


/*
代码解释：
sUserAgent：
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.86 Safari/537.36"

navigator.platform:
"Win32"

*/
</script>
</body>
</html>

View Code

运行后，console打印：

5.判断浏览器类型和版本：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js代码学习</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
</style>
</head>
<body>

<script src="jquery/jquery.min.js"></script>
<script type="text/javascript">
var browserType = explorerType(); //浏览器

console.log(browserType);

//判断浏览器
function explorerType() {
    var brow = getBrowser();
    var mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
    // $.browser.mozilla = /firefox/.test(navigator.userAgent.toLowerCase());
    // $.browser.webkit = /webkit/.test(navigator.userAgent.toLowerCase());
    // $.browser.opera = /opera/.test(navigator.userAgent.toLowerCase());
    // $.browser.msie = /msie/.test(navigator.userAgent.toLowerCase());
    var bInfo = "非主流浏览器";

    if(brow.msie) {
        bInfo = "MicrosoftInternetExplorer" + brow.version;
    }
    if(brow.mozilla) {
        bInfo = "MozillaFirefox" + brow.version;
    }
    if(brow.safari) {
        bInfo = "AppleSafari" + brow.version;
    }
    if(brow.opera) {
        bInfo = "Opera" + brow.version;
    }
    if(brow.chrome) {
        bInfo = "chrome" + brow.version;
    }
    return bInfo;
}

//navigator.userAgent中取浏览器和版本
function uaMatch(e){
    e=e.toLowerCase();
    console.log(e);

    var t=/(chrome)[/]([w.]+)/.exec(e)
        ||/(webkit)[/]([w.]+)/.exec(e)
        ||/(opera)(?:.*version|)[/]([w.]+)/.exec(e)
        ||/(msie) ([w.]+)/.exec(e)
        ||e.indexOf("compatible")<0 && /(mozilla)(?:.*? rv:([w.]+)|)/.exec(e)
        ||[];

    console.log(t);
    
    return {
            browser:t[1]||"",
            version:t[2]||"0"
           }
}

//获取浏览器信息
function getBrowser(){
    var e = uaMatch(navigator.userAgent);
    var t = {};
    if(e.browser){
        t[e.browser] = !0;
        t.version = e.version;
    }

    if(t.chrome){
        t.webkit = !0;
    }else{
        t.webkit&&(t.safari=!0);        //这句话有点问题，因为我是从min.js中翻译出来的，这句话不懂。应该是判断safari
    }

    console.log(t);    

    return t;
}
</script>
</body>
</html>

View Code

运行，console打印：

6.获取网站来源，从哪个网站跳转过来的：

<script type="text/javascript">
var from = ''; //来源（备选参数）

var to = window.location.host + window.location.pathname; //当前url
if(to.indexOf("http://") <= -1) {
    to = "http://" + to;
}
var fr_url = document.referrer; //来源
if(fr_url == '' || fr_url == 'null') {
    fr_url = 'null';
} else {
    fr_url = fr_url.split("?");
    fr_url = String(fr_url[0]);
}
from = fr_url;

console.log(from);


</script>

View Code

7.获取uid的一种写法：

<script type="text/javascript">
var uid = uid();

console.log(uid);    //打印 15062136704724854


//获取UID
function uid() {
    u_id = (+new Date()) + Math.random().toString(10).substring(2, 6);
    return u_id;
}

/*
(+new Date()):
1506213347503

Math.random().toString(10):
"0.44199265208142435"

toString()函数用于将当前对象以字符串的形式返回。

该方法属于Object对象，由于所有的对象都"继承"了Object的对象实例，因此几乎所有的实例对象都可以使用该方法。

所有主流浏览器均支持该函数。

number.toString(radix)
radix: 可选。规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。但是要注意，如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。
2 - 数字以二进制值显示
8 - 数字以八进制值显示
16 - 数字以十六进制值显示

例子：
var num = 15; num.toString();
"15"
var num = 15; num.toString(2);
"1111"
var num = 15; num.toString(8);
"17"

*/

</script>

View Code

8.体育网站上写的一种ajax请求，jsonp，error函数中的处理：

//请求传递数据
function getData_ajax(url) {
    $.ajax({
        type: 'get',
        url: url + '?param=' + encodeURI(param),
        dataType: 'jsonp',
        jsonp: 'callback',
        timeout: 6000,
        beforeSend: function() {
            // 加载提示
            $('#ajax_tips').show();
        },
        success: function(data) {
            //数据传递验证成功后执行的操作
            console.log("scc-data="+JSON.stringify(data));
        },
        complete: function() {},
        error: function(jqXHR, textStatus, errrorThrown) {
            if(errrorThrown == 'Not Found') {
                console.log('Your requested address is not found.');
            } else if(textStatus == 'timeout') {
                console.log('Verify the request timeout, please refresh the page and try again');
            } else {
                console.log('Your requested address is not found.');
            }
        }
    });
}

9.效仿体育网站动态加载js，加载js完成后执行回调函数；

加载广告js等：

<script type="text/javascript">

/**
 * type 为广告类型
 * 0：百度ssp正常加载方式
 * 1：淘宝afp加载
 * 2：防屏蔽代码加载方式
 * 3：百度ssp广告异步加载方式
 * 4:防屏蔽广告立即加载方式
 * @type type
 */
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null)
        return  unescape(r[2]);
    return null;
}

$.eastday = {
    qid: function () {
        return getQueryString('qid') ? getQueryString('qid') : "";
    },
    //加载js，并且js加载完成后执行回调函数
    getScript: function(url, callback, element) {
        var head = document.getElementsByTagName('head')[0],
            js = document.createElement('script');

        js.setAttribute('type', 'text/javascript');
        js.setAttribute('src', url);
        if(element){
            element.appendChild(js);
        } else {
            head.appendChild(js);
        }
        //执行回调
        var callbackFn = function(){
            if(typeof callback === 'function'){
                callback();
            }
        };

        if (document.all) { // IE
            js.onreadystatechange = function() {
                if (js.readyState === 'loaded' || js.readyState === 'complete') {
                    callbackFn();
                }
            };
        } else {
            js.onload = function() {
                callbackFn();
            };
        }
    },
    //ssp正常加载方式
    ssp_writer:function (corp_id,data_id) {
        var s = "_" + Math.random().toString(36).slice(2);
        document.write('<div class="eastday_da" data_id="' + data_id + '" id="' + s + '"></div>');
        (window.slotbydup=window.slotbydup || []).push({id: corp_id, container: s, display: 'display'});
    },
    //ssp普通加载方式
    ssp_normal : function (corp_id,data_id){
        if(data_id == 'news_content_ad_top'){
            this.ssp_writer(corp_id,data_id)
            return
        }
        var width = parseInt(__da_size[data_id]["width"]) || 0;
        if(!width){
            this.ssp_writer(corp_id,data_id)
            return
        }
        document.write('<iframe   class="iframeDA" style="border:0 none; '+__da_size[data_id].width+'px; height:'+0+'px; " frameborder="0"  scrolling=no src="/asspd.html?corp_id='+corp_id+'&data_id='+data_id+'"></iframe>')
    },
    //ssp JS动态加载方式
    ssp_dynamic : function (corp_id,data_id){
        return '<iframe  style="border:0 none; '+__da_size[data_id].width+'px; height:'+__da_size[data_id].height+'px;" frameborder="0"  scrolling=no src="/asspd.html?corp_id='+corp_id+'&data_id='+data_id+'"></iframe>';
        },
    //afp JS动态加载方式
    afp_dynamic : function(corp_id,data_id){
        //淘宝AFP广告
        var width = parseInt(__da_size[data_id]["width"]) || 0;
        var height = parseInt(__da_size[data_id]["height"]) || 0;
        var dom = $('<iframe  style=" '+__da_size[data_id].width+'px; height:'+__da_size[data_id].height+'px;" frameborder="0" scrolling="no"  src="/mmad.html?mmid='+corp_id+'"></iframe>');
        return dom;
    },
    //防屏蔽代码正常加载方式，本身为异步
    fangpingbi : function (corp_id,data_id){
        document.write('<script type="text/javascript" src="//tt123.eastday.com/' + corp_id + '.js"></script>');
    },
    //防屏蔽代码JS动态加载方式，本身为异步
    fangpingbi_dynamic: function (corp_id,data_id){
        var s = "_" + Math.random().toString(36).slice(2);
        var dom = $('<div id="'+data_id+'+s+'"></div>');
        dom.ready(function () {
            $.eastday.getScript('//tt123.eastday.com/' + corp_id + '.js', function(){}, dom[0]);
        });
        return dom;
    }
};

// 广告位高度自适应
window.setInterval(function () {
    $('.iframeDA').each(function (k,iframe) {
        if(iframe.contentWindow.document.body){
            var bHeight = iframe.contentWindow.document.body.scrollHeight;
            var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
            var height = Math.max(bHeight, dHeight);
            iframe.style.height = height+'px';
        }
    });
}, 200);

</script>

View Code

代码解释：

appendChild() 方法：

<!DOCTYPE html>
<html>
<body>

<ul id="myList"><li>Coffee</li><li>Tea</li></ul>

<p id="demo">请点击按钮向列表中添加项目。</p>

<button onclick="myFunction()">亲自试一试</button>

<script>
function myFunction()
{
var node=document.createElement("LI");
var textnode=document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
</script>

<p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p>

</body>
</html>

View Code

scrollHeight: 参考网站 http://www.cnblogs.com/nanshanlaoyao/p/5964730.html

10.另一种获取客户端操作系统的方法：

<script type="text/javascript">
/**
*   判断客户端操作系统类型
*   不过没有看到windows xp的。不是很全
*/
function getOsType() {
    var agent = navigator.userAgent.toLowerCase();
    
    console.log(agent);

    var os_type = "";
    if (/android/i.test(navigator.userAgent)) {
        var index = agent.indexOf("android");
        version = agent.substr(index + 8, 3);
        os_type = "Android " + version;
    }
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        var index = agent.indexOf("os");
        version = agent.substr(index + 3, 3);
        os_type = "iOS " + version;
    }
    if (/Linux/i.test(navigator.userAgent) && !/android/i.test(navigator.userAgent) && !/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        os_type = "Linux";
    }
    if (/windows|win32/i.test(navigator.userAgent)) {
        os_type = "windows32";
    }
    if (/windows|win64/i.test(navigator.userAgent)) {
        os_type = "windows64";
    }
    return os_type;
};

var a = getOsType();

console.log(a);

</script>

View Code

11.效仿体育网站，一个回到顶部的例子：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js代码学习</title>
<link rel="stylesheet" type="text/css" href="bootstrap/bootstrap.min.css">
<style type="text/css">
body{
    height: 2000px;
}
.back-top {
    position: fixed;
    left: 50%;
    z-index: 99;
    bottom: 50px;
}
.back-top .zd {
     68px;
    height: 68px;
    float: left;
    text-align: center;
    line-height: 68px;
    border: 1px solid #ccc;
}

</style>
</head>
<body>
<div class="back-top">
    <a class="zd" id="gotop_btn">回到顶部</a>
</div>

<script src="jquery/jquery.min.js"></script>
<script type="text/javascript">
//global_sider 全局侧边栏
(function () {
    //绑定页面滚动事件
    $(window).bind('scroll', function () {
        var len = $(this).scrollTop();
        if (len >= 400) {

            //显示回到顶部按钮
            $('.back-top').show();
        } else {
            //影藏回到顶部按钮
            $('.back-top').hide();
        }
    });
    //顶部
    $('body').on('click', '#gotop_btn', function () {
        $('html').animate({scrollTop: 0})
        $("html, body").filter(':not(:animated)').animate({
            scrollTop: 0
        });
    });
})();


</script>
</body>
</html>

View Code

12.jsonp怎么用呢？

1.
    adAjax: function () {
        var self = this;
        $.ajax({
            type: 'get',
            url: self.recommend_param(),
            timeout: 3000,
            dataType: 'jsonp',
            jsonp: 'jsonp',
            success: function (data) {
                self.addDom(data, self)
            }
        })
    }

View Code

13.比较两个数组是否完全相等：

<script type="text/javascript">
var array1 = ['a', 'c', 'b'];
var array2 = ['a', 'c', 'b'];
console.log(isArrayEql(array1, array2));
console.log(array1);

//true
//["a", "b", "c"]

/* 比较两个数组是否完全相等 */
function isArrayEql(arr1, arr2){
    if(arr1 instanceof Array && arr2 instanceof Array){
        var len1 = arr1.length;
        var len2 = arr2.length;
        if(len1 == len2){
            arr1 = arrSort(arr1);
            arr2 = arrSort(arr2);
            return arr1.toLocaleString() == arr2.toLocaleString();
        }else{
            return false;
        }
    }else{
        return false;
    }
}

/* 
 *    对数组排序
 *  order排序规则，asc- 升序，默认  desc - 倒序  
 */
 function arrSort(arr, order){
     if(arr instanceof Array){
         arr.sort(function(v1, v2){
             if(v1 < v2){
                 return order=='desc'? 1:-1;
             }else if(v1 > v2){
                 return order=='desc'? -1:1;
             }else{
                 return 0;
             }
         });
         return arr;
     }else{
         return arr;
     }
 }
</script>

注意：上面代码的一个弊端也是：比较完大小之后，把array1的顺序排序了。

14.

---------