• javascript 杂记


    博客

    http://www.cnblogs.com/onepixel/
    http://www.cnblogs.com/ahthw/p/4240220.html#javascript
    call、apply、bind方法。 http://www.cnblogs.com/shuiyi/p/5178742.html

    瀑布流式懒加载实现

    http://www.cnblogs.com/yisuowushinian/p/5208068.html

    数组操作

    http://www.cnblogs.com/zhangzt/archive/2011/04/01/2002213.html

    var a= new Array();
    var a= new Array([size]);
    var a= new Array([element0[, element1[, ...[, elementN]]]]);
    var a=[11,22,33];
    
    var v= a[1];
    a[1]=123;
    
    //3个属性
    a.length
    a.prototype   //类型原型的引用
    a.constructor  //创建对象的函数
    
    
    a.push([item1 [item2 [. . . [itemN ]]]]);   //添加到尾部
    a.unshift([item1 [item2 [. . . [itemN ]]]]); //添加到开头
    a.splice(insertPos,0,[item1 [item2 [. . . [itemN ]]]]);  //插入
    
    var v= a.pop(); //移除最后元素
    var v= a.shift(); //移除开头元素
    var a1= a.splice(deletePos, deleteCount); //删除中间元素
    
    var a1= a.slice(start, [end]);  //截取子数组
    var a1= a.concat([item1[, item2[, . . . [,itemN]]]]); //连接数组或多个值
    
    var a1= a.slice(0);  //clone
    var a1= a.concat();  //clonse
    
    var a1= a.reverse();
    var a1= a.sort();
    
    var str= a.join(separator);  //字符串化
    toLocaleString, toString, valueOf是join的特殊用法
    

    document.ready, window.onload

    http://www.cnblogs.com/a546558309/p/3478344.html

    document.ready

    $(document).ready(function(){});
    $(function(){});
    $().ready(function(){})
    这几个都是在文档树结构加载完成时执行(不包括图片等非文字媒体文件)

     document.ready = function (callback) {
                ///兼容FF,Google
                if (document.addEventListener) {
                    document.addEventListener('DOMContentLoaded', function () {
                        document.removeEventListener('DOMContentLoaded', arguments.callee, false);
                        callback();
                    }, false)
                }
                 //兼容IE
                else if (document.attachEvent) {
                    document.attachEvent('onreadytstatechange', function () {
                          if (document.readyState == "complete") {
                                    document.detachEvent("onreadystatechange", arguments.callee);
                                    callback();
                           }
                    })
                }
                else if (document.lastChild == document.body) {
                    callback();
                }
            }
    
    //调用
    document.ready(function(){});
    

    window.onload

    window.onload=function(){};
    文档树加载完成,并且所有文件也都加载完成时执行

    JSON

    a=[];
    a.push(o);
    a.data.pop(); //删除最后一项
    a.data.shift(); //删除第一项
    a.data.splice(0, 1); //删除指定子对象,参数:开始位置,删除个数
    a.data.splice(1, 0, e, f);//开始位置,删除个数,插入对象
    a.data.splice(0, 1, e, f);//开始位置,删除个数,插入对象
    
    h={};
    h['k']=v;
    

    获取url信息

    • window.location.href 整个URL字符串
    • window.location.protocal URL中协议
    • window.location.host 主机和端口
    • window.location.port URL中端口
    • window.location.pathname host与search之间部分
    • window.location.search ?后的查询字符串
    • window.location.hash #后的锚点

    其他

    • document.URL
    • document.location
    • document.location.href
    • self.location.href
    • top.location.href
    • parent.document.location
    • top.location.hostname
    • location.hostname

    页面跳转

    window.location = "login.aspx?xxxx=xxx";              //跳转后可后退
    window.location.replace("login.aspx?xxxx=xxx") ;      //跳转后不可后退
    window.open("login.aspx");                            //新窗口打开    
    window.open('login.aspx','','height=500,width=611,scrollbars=yes,status=yes');
    window.history.back(-1);                              //返回
    window.navigate("top.jsp");
    

    onclick事件

    <script>function func() {......}</script> 
    <input type="button" onclick="func" value="action"/> 
    <input type="button" onclick="location.href='login.aspx'" value="login"/> 
    <a href="javascript:history.go(-1)">返回</a>
    

    字符串操作

    var str=....
    var str1=str.substring(str.lastIndexOf('=')+1,url.length);
    substr()
    ......
    

    RegExp

    RegExp是Javascript中的内置对象。$1-$99表示第一个到第99个捕获组(括号语句),最可有99个。

    new RegExp("regex_expr").exec(str_content);
    var group2=RegExp.$2;
    

    stringObject.replace(regexp,replacement)

    • regexp参数为字符串时直接按字符串查找,而非正则。

    • replacement可以是字符串或函数。为字符串时其中的$符合具有特殊含义:

    • $1、$2、...、$99  与 regexp 中的第 1 到第 99 个子表达式相匹配的文本。

    • $& 与 regexp 相匹配的子串。

    • $` 位于匹配子串左侧的文本。

    • $' 位于匹配子串右侧的文本。

    • % 直接量符号。
      replacement为函数时,返回的字符串将作为替换文本,参数为:

    • 第一个参数是匹配模式的字符串;

    • 接下来的参数是与模式中的子表达式匹配的字符串(0个或多个);

    • 接下来的参数是一个整数,声明了匹配在 stringObject 中出现的位置;

    • 最后一个参数是 stringObject 本身。

    示例

    //直接文本匹配替换
    str.replace("abc", "123"); 
    
    //正则表达式匹配替换
    str.replace(/Microsoft/ig, "W3School")
    
    //子表达式(分组)引用
    name.replace(/(w+)s*, s*(w+)/, "$2 $1");     
    
    //所有单词首字母大写
    uw=name.replace(/w+/g, function(word){ 
      return word.substring(0,1).toUpperCase()+word.substring(1);} 
    ); 
    
    //使用RegExp对象
    var reger=new RegExp("[$]a[$]","gm"); 
    alert(str.replace(reger,'555888')); 
    

    闭包

    http://www.cnblogs.com/zhangzhongjie/p/5225690.html

    闭包是javascript语言中独有的概念。所谓的闭包就是可以创建一个独立的环境,每个闭包里面的环境都是独立的,互不干扰。
    创建闭包:一个函数中嵌套另外一个函数,并且将这个函数return出去,然后将这个return出来的函数保存到了一个变量中,那么就创建了一个闭包。

    不使用闭包的示例

    var arr = [];
    for(var i=0;i<2;i++){
        arr[i] = function(){
            console.log(i);
        }
    }
    arr[0](); //2
    arr[1](); //2
    

    这段代码实际输出结果都为2(arr数组中的函数在调用的时候才会执行函数体,才会确定变量i的值,而此时i的值已经是2了)。但是我们希望在任何需要的时候调用arr[0]和arr[1],输出都应该分别为0和1,这就要用到闭包了(闭包创建独立的环境,自然可以独立的保存变量)。

    for(var i=0;i<2;i++){
        arr[i] = a(i);
    }
    function a(i){
        return function(){
            console.log(i);
        }
    }
    arr[0](); //0
    arr[1](); //1
    arr[2](); //2
    

    匿名函数写法

    var arr = [];
    for(var i=0;i<3;i++){
        arr[i] = (function(i){
            return function(){
                console.log(i);
            }
        })(i)
    }
    

    for(var i=0;i<3;i++){
        (function(i){
            arr[i] = function(){
                console.log(i);
            }
        })(i)
    }
    

    另一个示例

    //这种写法输出都为3
    var lis = document.getElementsByTagName("li");
    for(var i=0;i<lis.length;i++){
        lis[i].onclick = function(){
            console.log(i); //3
        }
    }
    //使用闭包
    for(var i=0;i<lis.length;i++){
        (function(i){
            lis[i].onclick = function(){
                console.log(i);
            }
        })(i)
    }
    
    

    更多关于闭包的文章:
    http://www.cnblogs.com/onepixel/p/5062456.html
    http://bigdots.github.io/2015/12/22/了解闭包/

    匿名函数

    http://www.cnblogs.com/zhangzhongjie/p/5225690.html

    this和argument

    http://www.cnblogs.com/wsion/p/5225243.html

    this关键字指向的是当前上下文(context,下文中将会对此作专门的解释)的主体(subject),或者当前正在被执行的代码块的主体。
    。this关键字以同样的方式来引用当前方法(function,也可以称为函数)所绑定(bound)的对象。this不只引用对象,同时包含了对象的值。
    如果一个方法内部使用了this关键字,仅当对象调用该方法时this关键字才会被赋值。我们估且把使用了this关键字的方法称为“this方法”。
    在全局域中,代码在浏览器里执行,所有变量和方法都属于window对象。因而当我们在全局域中使用this关键字的时候,它会被指向(并拥有)全局变量window对象。如前所述,严格模式除外。window对象是JS一个程序或一张网页的主容器。
    我们可以使用apply方法来显式设置this的值。person.showFullName.apply(anotherPerson);

    当我们把一个使用了this关键字的方法当成参数作为其他对象的回函数的时候,麻烦就来了,this会变成其他对象,通过this就无法访问原来的属性了。我们可以使用Bind/ Apply/ Call等方法来强制改变this所指向的对象,如$("button").click (user.clickHandler.bind (user));

    闭包中的this: 在内部方法中,或者说闭包中使用this,是另一个很容易被误解的例子。我们必须注意的是,内部方法不能直接通过使用this关键字来访问外部方法的this变量,因为this变量 只能被特定的方法本身使用。因为匿名方法中的this不能访问外部方法的this,所以在非严格模式下,this指向了全局的window对象。解决办法是额外使用一个变量来引用外部方法的this。

    如果我们把一个使用了this关键字的方法赋值给外部的一个变量,调用时this也会改变。也要通过使用bind方法来显式设置this的值。

    借用方法时,this还是引用的原来的对象。使用apply方法的第一个参数进行传递。apply方法的第一个参数将会显式设置this的取值。

  • 相关阅读:
    关于调试 SharePoint 2010 中的爬网问题的疑难解答提示
    JS 获取 本周、本月、本季度、本年、上月、上周、上季度、去年
    jqGrid动态列
    【原创】博客“缘”
    讀取內部網站8/22
    開啟VS2005速度慢8/25
    仲秋節快樂
    外部表不是預期的格式8/28
    要考試10/17
    DataTable導入Excel 8/27
  • 原文地址:https://www.cnblogs.com/pixy/p/5227361.html
Copyright © 2020-2023  润新知