javascript 杂记

2022-12-30 16:12:15

博客

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(/\b\w+\b/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/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的取值。

码农公寓

博客