代码改变世界

JS小记

2010-07-26 20:49  音乐让我说  阅读(407)  评论(0)  编辑  收藏  举报
  1. 判断方法是否存在，存在就调用它。if (typeof (LoginShow) != "undefined") { LoginShow(); }
  2. 打开一个窗口。 
    window.open("UploadImageManager.aspx?Id="+userId,"uploadImageManager","width=850px,height=560px,top=50px,left=100px,location=no,menubar=no,resizable=no,status=no,toolbar=no,scrollbars=yes");
  3. 打开一个模式窗口： 
    ///<summary>打开模式窗口</summary>
///<param name="url">URL</param>
///<param name="width">模式窗口的宽度</param>
///<param name="height">模式窗口的高度</param>
///<return>模式窗口返回值</return>
function OpenWindowByURLReturnValue(url,width,height)
{
    return window.showModalDialog(url,"","help=no;dialogWidth="+ width +"px; dialogHeight="+ height +"px;status=no;scroll=no;");
}
  4. 给Javascript 的String对象增加Trim方法： 
    ///<summary>用正则表达式将前后空格，用空字符串替代。</summary>
String.prototype.trim = function() {
    return this.replace(/(^\s*)|(\s*$)/g, "");
}
  5. 让JS暂停： 
    ///<summary>让JS暂停</summary>
///<param name="obj">当前，一般传如This就可以了</param>
///<param name="secon">暂停的毫秒数</param>
///<remark>这样调用：wait(this,2000);this.nextFun=function(){alert("测试");}</remark>
function wait(obj,secon)
{
    if (window.eventList==null)
    {
        window.eventList=new Array();
    }   
    var con = -1;
    for (var i=0;i<window.eventList.length;i++)
    {
        if (window.eventList[i]==null)
        {
            window.eventList[i]=obj;
            con=i;
            break;
        }
    }
    if (con==-1)
    {
        con=window.eventList.length;
        window.eventList[con]=obj;
    }
    setTimeout("exec(" + con + ")",secon); //当然还是需要借助setTimeout了
}
///<summary>让JS暂停</summary>
///<param name="con">整形参数</param>
function exec(con)
{
    var obj=window.eventList[con];
    window.eventList[con]=null;
    if (obj.nextFun) 
    {
        obj.nextFun();//在这里调用下一步的动作
    }
    else
    {
        obj();
    }
}

///<summary>当把数据提交到服务器后，服务器处理完成后调用的JS</summary>
///<param name="message">更新结果，如“添加成功！”</param>
function OnUpdatedXXX(message)
{
    document.getElementById("spanShowLoadingText").innerText = message + "系统正在准备刷新本页面...";
    wait(this,2000);
    this.nextFun=function(){window.location.reload();}
}
  6. 网页高度： 
    网页可见区域宽： document.body.clientWidth			(如果分辨率为1024*768，那么将显示1003)	
网页可见区域高： document.body.clientHeight			(如果分辨率为1024*768，那么将显示600)
网页可见区域宽： document.body.offsetWidth (包括边线的宽)	(如果分辨率为1024*768，那么将显示1003)
网页可见区域高： document.body.offsetHeight (包括边线的高)	(如果分辨率为1024*768，那么将显示600)
网页正文全文宽： document.body.scrollWidth			(如果分辨率为1024*768，那么将显示1003)
网页正文全文高： document.body.scrollHeight			(比较有用)
网页被卷去的高： document.body.scrollTop			(如果分辨率为1024*768，那么将显示0)
网页被卷去的左： document.body.scrollLeft			(如果分辨率为1024*768，那么将显示0)	
网页正文部分上： window.screenTop				(如果分辨率为1024*768，那么将显示112)			
网页正文部分左： window.screenLeft				(如果分辨率为1024*768，那么将显示0)
屏幕分辨率的高： window.screen.height				(如果分辨率为1024*768，那么将显示768)
屏幕分辨率的宽： window.screen.width				(如果分辨率为1024*768，那么将显示1024)
屏幕可用工作区高度： window.screen.availHeight;			(如果分辨率为1024*768，那么将显示738)
屏幕可用工作区宽度： window.screen.availWidth;			(如果分辨率为1024*768，那么将显示1024)
  7. 由于Javascript中的方法没有重载，所以： 
    function GetRandom(minNum,maxNum)
{
	if(arguments.length != 2)
	{
		//说明传入的参数个数不为2
	}
}
  8. 关于parseInt： 
    parseInt("09",10)得到结果为9，如果不加上第二个参数（即10，表示10进制），那么就会按8进制转换，得到的结果为0
  9. 对于函数内部未声明过的变量，如果给它赋值，会隐式的将它声明为全局变量。比如： 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
<script language="javascript" type="text/jscript">
function Validate()
{
	i = 1;
	ShowResult(i + 10);
}
function ShowResult(v)
{
	alert(v);
	alert(i);
}
Validate();
</script>
</head>

<body>
对于函数内部未声明过的变量，如果给它赋值，会隐式的将它声明为全局变量。
</body>
</html>
  10. 处理JSON中的Date日期类型（已经提取出公共方法，见 19）： 
                $("#btnGetData").click(function()
            {
                $.getJSON("/Home/LoadJson", { id: 100, name: "张三", randomNum: Math.random() }, function(data)
                {
                    $.each(data, function()
                    {
                        var beginIndex = this.Birthday.indexOf("(") + 1;
                        var endIndex = this.Birthday.indexOf(")");
                        var birthdayDateNum = this.Birthday.substring(beginIndex, endIndex);
                        var birthdayDate = new Date(parseInt(birthdayDateNum, 10));

                        var messageCode = $.format("<br/>信息如下：{0}、{1}、{2}<br/>", this.UserId, this.UserName, birthdayDate.toLocaleString()); //$.format方法由jquery.validate扩展
                        $("p:first").append(messageCode);

                        //return false; //立即表示停止循环，后面的语句也不会执行，相当与for循环中的break
                    });
                });
            });
  11. 关于eval解析json字符串时，不能解析大写的 False 和 True： 
    var jsonStr = "LoginStatus: False, Message : \"用户名或密码错误\"";
var jsonObj = eval('('+jsonStr+')'); //大写的 False 各大浏览器竟然不能解析，无语
alert(jsonObj.Message);


应该这样：

var jsonStr = "LoginStatus: false, Message : \"用户名或密码错误\"";
var jsonObj = eval('('+jsonStr+')'); 
alert(jsonObj.Message);
  12. Javascript 得到当前 URL 的参数： 
        <script type="text/javascript">
        
        var parts = document.location.search.slice(1).split("&");
        var partsLength = parts.length;
        
        var current;
        for (var i = 0; i < partsLength; i++)
        {
            current = parts[i].split("=");
            alert("Key：" + current[0] + "\nValue：" + current[1]);
        }
    </script>
  13. 关于如何在Javascript中使用键值对： 
    var maps = { 1: "人民币", 2: "港币", 3: "美元" };

        for (var key in maps)
        {
            alert("Key:" + key + "，Value:" + maps[key]);
        }

        var hashMaps = new Array();
        hashMaps["cn"] = "中国";
        hashMaps["us"] = "美国";
        hashMaps["ca"] = "加拿大";
        for(var k in hashMaps)
        {
            alert("Key:" + k + "，Value:" + hashMaps[k]);
        }
  14. jQuery 版的简单 Tabs 选项卡切换效果 
        jQuery(document).ready(function ()
    {
        // 切换 Tab
        var liTabsArray = ["liTab1", "liTab2", "liTab3", "liTab4"];  // 选项卡 li 分别对应的 Id
        var divContentsArray = ["divRecite", "divGrading", "divRecite2", "divGrading2"];  // 选项卡 li 分别对应的内容 DIV 的 Id
        var liClassName = "tab-on";
        // TabSwitch("click", liTabsArray, divContentsArray, liClassName);
        TabSwitch("mouseover", liTabsArray, divContentsArray, liClassName);
    });
    
    /// <summary>
    /// 给 Tabs 选项卡绑定切换效果
    /// </summary>
    /// <param name="tabEvent">Tab Item 的事件，比如 click、mouseover</param>
    /// <param name="liTabsArray">Tab Item 的 ID 数组</param>
    /// <param name="divContentsArray">Tab Item 分别对应的 DIV 的 ID 数组</param>
    /// <param name="liClassName">Tab Item 的选中样式</param>
    function TabSwitch(tabEvent, liTabsArray, divContentsArray, liClassName)
    {
        jQuery(liTabsArray).each(function (i, item)
        {
            jQuery("#" + item).bind(tabEvent, function ()
            {
                // 下面这个遍历是为了去掉所有 li 上的“选中”样式
                jQuery(liTabsArray).each(function (j, childItem)
                {
                    jQuery("#" + childItem).removeClass(liClassName);
                });
                jQuery(this).addClass(liClassName); // 给当前选中的 Tab li 加样式
                // 下面这个遍历是为了隐藏所有的内容 DIV
                jQuery(divContentsArray).each(function (k, contentItem)
                {
                    jQuery("#" + contentItem).hide();
                });
                var showDivId = divContentsArray[i];
                jQuery("#" + showDivId).show();
            });
        });
    }

     

  15. 在新窗口中打开 HTML 代码 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function showCodeInWindow()
        {
            var topFrameStr = '<!DOCTYPE html><html><head><title>测试</title></head><body>'
                                + '<h2 style="color:green">测试在新窗口中打开 HTML 代码</h2>'
                                + '</body>'
                                + '</html>';
            var topFrameset = self.open("about:blank", "_blank");
            topFrameset.opener = window.self;
            topFrameset.document.write(topFrameStr);
            topFrameset.document.close();
            return;
        }
    </script>
</head>
<body>
<a href="javascript:showCodeInWindow();">测试在新窗口中打开 HTML 代码</a>
</body>
</html>

     

  16. 新浪 IP 接口： 
    http://counter.sina.com.cn/ip?ip=121.35.30.86

-- 返回的结果，比如：

var ILData = new Array("121.35.30.86","中国", "广东省", "深圳市", "电信"); if (typeof(ILData_callback) != "undefined") { ILData_callback(); }

     

  17. 得到 Url 中参数的值（可惜参数名的大小写必须一致）： 
                /// <summary>
            /// 得到 Url 中参数的值，比如：/test.html?ID=7，那么利用本函数，将得到 17
            /// </summary>
            /// <param name="name">参数名</param>
            /// <returns></returns>
            function getUrlParam(name)
            {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
                var r = window.location.search.substr(1).match(reg);  //匹配目标参数
                if (r != null) return unescape(r[2]); return null; //返回参数值
            }

     

  18. 得到 Url 中的参数的值（新，不区分大小写）: 
    <script type="text/javascript">
    var helper = {
        // 下面这个方法是得到 Url 中的 参数，不区分大小写。第一个参数：参数名。第二个参数：window 对象，可为空，也可传入 parent.window
        getUrlParam: function (j, k)
        {
            var l = new RegExp('(?:[?&]|&amp;)' + j + '=([^&]+)', 'i'),
                m = (k || window).location.search.match(l);
            return m && m.length > 1 ? m[1] : null;
        }
    };
</script>

     或者（来自与腾讯问卷调查里面的）：

        function getUrlParam(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r!=null) return unescape(r[2]); return null; //返回参数值
    }

     

  19. 日期 ToString： 
                /// <summary>
            /// 将 javascript 中的日期对象转换为标准的 yyyy-MM-dd 格式的字符串
            /// </summary>
            /// <param name="jsDateObj">日期</param>
            /// <returns></returns>
            function toNormalDateString(jsDateObj)
            {
                var year = jsDateObj.getFullYear();
                var month = jsDateObj.getMonth() + 1;
                var date = jsDateObj.getDate();
                return year + "-" + (month < 10 ? ("0" + month) : month) + "-" + (date < 10 ? ("0" + date) : date);
            }

            /// <summary>
            /// 将 javascript 中的日期对象转换为标准的 yyyy-MM-dd HH:mm:ss 格式的字符串
            /// </summary>
            /// <param name="jsDateObj">日期</param>
            /// <returns></returns>
            function toNormalDateTimeString(jsDateObj)
            {
                var hour = jsDateObj.getHours();
                var minutes = jsDateObj.getMinutes();
                var seconds = jsDateObj.getSeconds();
                return toNormalDateString(jsDateObj) + " " + (hour < 10 ? ("0" + hour) : hour) + ":" + (minutes < 10 ? ("0" + minutes) : minutes) + ":" + (seconds < 10 ? ("0" + seconds) : seconds);
            }
     

     

  20. 从 json 的日期类型转换为 javascript 中的日期： 
                /// <summary>
            /// 从 json 的日期类型转换为 javascript 中的日期
            /// </summary>
            /// <param name="jsonDate">json 日期</param>
            /// <returns>javascript 中的 Date 对象</returns>
            function convertJsonDateToJavascriptDate(jsonDate)
            {
                var beginIndex = jsonDate.indexOf("(") + 1;
                var endIndex = jsonDate.indexOf(")");
                var jsonDateNum = jsonDate.substring(beginIndex, endIndex);
                return new Date(parseInt(jsonDateNum, 10));
            }

     

  21. 用JavaScript添加和删除class 
    //Add Class
document.getElementById("MyElement").className += " MyClass";

//Remove Class
document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/(?:^|\s)MyClass(?!\S)/,'');

     

  22. 根据日计算年龄 
    function getAge(dateString) 
{
    var today = new Date();
    var birthDate = new Date(dateString);
    var age = today.getFullYear() - birthDate.getFullYear();
    var m = today.getMonth() - birthDate.getMonth();
    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
        age--;
    }
    return age;
}
console.log(getAge("2005,8,1"));//6

     

  23. 在javascript中==（相等）操作符会进行类型自动转换，而===（全等）操作符则不会进行类型自动转换，只有当比较的双方完全相等（相同类型相同值）时，才会返回true。比如： 
        var num = "11";
    alert("string 类型的 \"11\" 大于 Number 类型的 10 ，小于 Number 类型的 12 吗？" + (num > 10) + "," + (num < 12)); // Result: true, true

    alert("用 ==（普通相等） 判断呢？" + (num == 11)); // true
    alert("用 === （全等（类型和值都要相等））判断呢？" + (num === 11)); // false

     

  24. javascript 中的 call、apply、this 的使用 Demo 
        function printObject(obj)
    {
        var showMessages = new Array();
        showMessages.push("对象 obj 包含的属性与值分别为：");
        for(var key in obj)
        {
            showMessages.push(key + " : " + obj[key]);
        }
        alert(showMessages.join('\n'));
    }

    var myObject = {};

    var myFunction = function (param1, param2)
    {

        //setviacall()'this'points to my Object when function is invoked
        this.firstName = param1;
        this.lastName = param2;

        //logs Object{foo = 'bruce', bar = 'liu'}
        printObject(this);
    };

    alert("通过 call 来调用函数：");
    // invokes function, set this value to myObject
    myFunction.call(myObject, 'bruce', 'liu'); 
    // call 方法的第一个参数是必须的，
    // 表示 myFunction 要在哪个对象上调用（默认为 window），
    // 后面的参数是一个或多个可选参数。
        
    alert("通过 apply 来调用函数：");
    myFunction.apply(myObject, ['baby', 'face']);
    // apply 方法的第一个参数是必须的，
    // 表示 myFunction 要在哪个对象上调用（默认为 window），
    // 后面一个参数是可选的，与 call 方法差别不大

    alert("直接打印结果：");
    // logs Object {foo = 'baby', bar = 'face'}
    printObject(myObject);

     

  25. 关闭网页时，提示“确实要离开本页吗？” 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模仿百度知道</title>
    <script language="javascript" type="text/javascript">
        var message = "您真的要离开本系统吗?";
         var pb_blnCloseWindow = false;
         function ConfirmClose() 
         {
             window.event.returnValue = message;
             pb_blnCloseWindow = true;
         }
         function ShowConfirmClose(blnValue)
         {
             if(blnValue)
             {
                 document.body.onbeforeunload = ConfirmClose;
             } 
             else
             {
                 document.body.onbeforeunload = null;
             }
         }
    </script>
</head>
<body onload="ShowConfirmClose(true);">
    <input type="button" value="取消提示" onclick="ShowConfirmClose(false);window.opener=null;window.close();"/>
</body>
</html>

     

  26. 检测是否是移动设备： 
    $(document).ready(function () 
{
    if (window.DeviceMotionEvent==undefined) 
   {
      alert("请用移动设备访问，谢谢！");
      return;
 });

     

  27. 判断浏览器是否支持 HTML 5 的 Canvas 
    <script type="text/javascript">
    window.onload = function () {
        if (canvasSupported()) {
            alert('canvas supported');
        }
    };
        
    function canvasSupported() {
        var canvas = document.createElement('canvas');
        return (canvas.getContext && canvas.getContext('2d'));
    }
</script>

     

  28. VS 的智能感知如果失效了的话，试试建立一个比如叫“”的文件，写入下面的语句，然后在页面中引用它。 
    /// <reference path="a.js" />
/// <reference path="b.js" />

     

  29. 判断是否是合法的url地址：@"^\w+://.+$"
  30. 关闭网页前提示。如果提交时，不想要这个提示，可以把 window.onbeforeunload 又设置为 null。 
    window.onbeforeunload = function ()
{
    return "警告：关闭或刷新本窗口会清空您编辑的试题数据，您确定要关闭吗？"
}

     

  31. 判断 Javascript  变量是否已经申明，或者已经存在： 
    if(typeof (user) != "undefined"  && typeof (user.name) != "undefined")
{
    alert("user 对象和 user.name 都存在！");
}
else
{
    alert("对象不存在");
}
// 结果：弹出“对象不存在”

     

  32. 生成随机字符串，类似于 GUID 
    // 生成随机字符串，类似于 GUID
function generateRandomAlphaNum(len) {
    var rdmString = "";
    for (; rdmString.length < len; rdmString += Math.random().toString(36).substr(2));
    return rdmString.substr(0, len);
}

  33. 重写原生浏览器方法以实现新功能 
    // 覆盖 window.alert 方法。
(function() {
    var oldAlert = window.alert,
        count = 0;
    window.alert = function(a) {
        count++;
        oldAlert(a + "\n You've called alert " + count + " times now. Stop, it's evil!");
    };
})();
alert("Hello World");

     

  34. Newtonsoft.Json高级用法   点击这里
  35. 谢谢浏览！