js总结（一）

1.浏览器渲染完毕事件

第一种监测方式：

window.onload=function(){};

执行时机：必须等待网页中的所有内容加载完毕后（包括图片）才能执行
编写个数：不能同时编写多个，多个一起执行时只能执行最后一个
第二种监测方式：

$(document).ready(function(){});可简写为：$(function(){});

执行时机：网页中所有的DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完
编写个数：能同时编写多个，多个一起执行时结果均可以输出

---

2.script标签的位置

(1)放置在head中，但是必须使用window.onload
(2)放置在body的底部
(3)外部引用

---

3.自动获取距离

(1)offsetLeft 距离浏览器左端的距离
(2)offsetTop 当前标签距离浏览器上方或上方控件的距离
(3)clientHeight内容可视区域的高度，比如一个输入框的高度

---

4.定义一个变量没有赋值，那么默认值是undefined

---

5.innerHTML是JS中是双向功能

(1)通过document.getElementById("aa").innerHTML来获取id为aa对象的内容
(2)也可以对某对象插入或修改内容 document.getElementById("abc").innerHTML="这是被插入或者修改的内容" id为abc的对象插入或者修改

---

6.设置或读取样式

(1)设置样式
标签.style.xxx=”“;
例如document.getElementById("abc").style.color="orange";
(2)读取样式
标签.style.xxx
例如document.getElementById("abc").style.width

---

7.字符串(String类型)

(1)charAt( ) 返回在指定位置的字符
例如

 var str="hello word"alert(str.charAt(1));//"e"

还可以使用方括号加数字索引来访问字符串中的特定字符

alert(str[1]);    //"e"

(2)charCodeAt() 返回在指定位置的字符串编码

alert(str.charCodeAt(1));//输出"101"

(3)concat()连接字符串
例如 var a="hello"

var b=a.concat("world");alert(a)   //"hello"alert(b)   //"hello world"

还可以连接多个字符串

var a="hello"var b=a.concat("world","!");alert(b)    //"hello world!"

(4)slice() 提取字符串片段，并在新的字符串中返回被提取的部分

      var a="hello world";alert(a.slice(3));     // "lo world"alert(a.slice(3,7));    //"lo w"alert(a.slice(-3));     //"rld"  -3+11=8alert(a.slice(3,-4))   //"lo w" 

(5)substr() 从起始索引号提取字符串中指定数目的字符

var a="hello world"alert(a.substr(3));  //"lo world"alert(a.substr(3,7))  //"lo worl"alert(a.substr(-3));   //"rld"alert(a.substr(3,-4));  //""(空字符串)

【注】substr将负的第一个参数加上字符串的长度，将负的第二个参数转换为0

(6)substring() 提取字符串中两个指定的索引号之间的字符

var a="hello world"alert(a.substring(3));  //"lo world"alert(a.substring(3,7); //"lo w"alert(a.substring(-3)); //"hello world"alert(a.substring(3,-4));  //"hel"

【注】substring会把所有的负值参数转化为0,substring(3,-4) 中负值转换为0，即substring(3,0),这个方法会将较小的数作为开始位置，较大的数作为结束位置，所以变为substring(0,3)

(7)indexOf() 和 lastIndexOf() 检索字符串/从后向前检索字符串

var a="hello world"alert(a.indexOf("o"));  //4alert(a.lastindexOf("o"));  //7

这两个方法都可以接收可选的第二个参数，表示从字符串的哪个位置开始搜索

alert(a.indexOf("o",6));   //7alert(a.lastindexOf("o",6));  //4

【注】indexof是从位置6向后搜索，在第7位找到了o
lastIndexof是从位置6向前搜索，在第4位找到了o

(8)trim() 创建一个字符串的副本，删除前置以及后缀的所有空格

var a="  hello world  "alert(a.trim());  //"hello world"alert(a);     //"  hello world  "

(9)
toLocalUpperCase() 将字符串转换为大写
toUpperCase() 将字符串转换为大写
toLocalLowerCase() 将字符串转换为小写
toLowerCase() 将字符串转换为小写

(10)split() 把字符串分割成字符串数组,接收可选的第二个参数，用于指定数组的大小

var a="aa-bb-cc"alert(a.split("-"));   //["aa","bb","cc"]var b="dd ee ff";alert(b.spilt(" ")); //["dd","ee","ff"]

括号里是什么就按什么分割字符串数组，如果没有就将每一项分割成数组

---

8.数组（Array类型）

创建数组的两种方式：

1.使用Array()构造函数

var arr=new Array();

2.使用数组字面量表示法

var colors=["red","yellow","green"]

对象方法
(1) concat() 连接两个或更多的数组，并返回结果

var a=[1,2,3],b=[4,5];a.concat(b);   //[1,2,3,4,5]

(2)join() 只接收一个参数，即作为分隔符的字符串，然后返回包含所有数组项的字符串

var colors=["red","yellow","green"];a.join("，")；    //red,yellow,greena.join("||")；    //red||yellow||green

【注】如果不给join()方法里传入任何值，或者给它传入undefined，则使用逗号作为分隔符

(3)pop() 数组末尾移除一项，返回移除项

var a=[1,2,3]a.pop();   //3输出a   //[1,2]

(4)push() 数组末尾添加，返回数组的长度

var a=[1,2]a.push(3);   //3输出a         //[1,2,3]

(5)shift() 移除数组中的第一项并返回该项
unshift() 向数组的开头添加一个或更多元素，并返回新的长度

var a=["red","green","yellow"];a.shift();    //"red"输出a     //["green","yellow"]

(6)reverse() 颠倒数组中元素的顺序，返回值是经过排序后的数组

var a=[1,2,3,4,5]a.reverse();     //[5,4,3,2,1]

(7)sort() 从小到大排序，比较字符串, 返回值是经过排序后的数组

var arr=[0,1,5,10,15]arr.sort();       //[0,1,10,15,5]此时需要使用比较函数function compare(a,b){    return a-b;}arr.sort(compare);//a,b表示数组中的任意两个元素，//a-b 输出从小到大排序//b-a 输出从大到小排序

(8)slice() 返回从该参数指定位置开始到当前数组末尾的所有项
如果由两个参数，该方法返回起始和结束位置之间的项但不包括结束位置的项
【注】slice方法不会影响原始数组

var colors=["blue","green","red","orange"];colors.slice(1);   //["green","red","orange"]colors.slice(1,3);  //["green","red"]

(9)splice() 向数组的中部插入项

1.删除

可以删除任意数量的项，2个参数：要删除的第一项的位置和要删除的项数

splice(0,2)会删除数组中的前两项

2.插入

可以向指定位置插入任意数量的项，3个参数：起始位置，0（要删除的项数），要插入的项


splice(2,0,"red","green")会从当前数组的位置2开始插入字符串"red"和"green"

3.替换

可以向指定位置插入任意数量的项，且同时删除任意数量的项，3个参数：起始位置，要删除的项数，要插入的任意数量的项。插入的项数不必与删除的项数相等

splice(2,1,"red","green")会删除当前数组位置2的项，然后再从位置2开始插入字符串"red"和"green"

一些程序

1.最大最小值

最大值：var arr=[1,4,2,7,6]function maxArr(num){    var maxNum=num[0];    for(var i=0;i<arr.length-1;i++){            if(maxNum<num[i]){                maxNum=num[i]        };      };    return maxNum;};document.write(maxArr(arr));

2.收缩展开

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            div{width:500px;border:5px solid #ddd;padding:10px;}        </style>    </head>    <body>        <div>            <p class="demo">教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。</p>            <input class="command" type="button" value="收缩" onclick="clickOut()"/>        </div>        <script>            //var dom=document.getElementsByTagName("p");            //var content=dom[0].innerHTML            var dom=document.querySelector(".demo");            var obtn=document.querySelector(".command");            var content=dom.innerHTML;            var hasclass=true;            function clickOut(){                if(hasclass){                    dom.innerHTML=content.substring(0,50);                    obtn.value="展开";                }else{                    dom.innerHTML=content;                    obtn.value="收缩";                }                hasclass=!hasclass;            }        </script>    </body></html>

3.简单排序，冒泡排序

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>简单排序，冒泡排序</title>    </head>    <body>        <script type="text/javascript">            var temp=0;            var arr=[12,2,4,23,56,15,3];            function compare(){                for(var i=0;i<arr.length-1;i++){                    for(var j=0;j<arr.length-i;j++){                        if(arr[j]>arr[j+1]){                            temp=arr[j];                            arr[j]=arr[j+1];                            arr[j+1]=temp;                        }                    }                }            return arr;        };        document.write(compare(arr));        </script>    </body></html>

4.切换

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            *{padding:0px;margin:0px;}            div{width:100px;height:100px;border:1px solid #ccc;float:left;}            p{padding:20px;}            p{clear:both;}            .active{background:red}        </style>    </head>    <body>        <div onclick="clickDiv1()">我是div1</div>        <div onclick="clickDiv2()">我是div2</div>        <p >div1的内容</p>        <p>div2的内容</p>        <script>                var dom1=document.querySelectorAll("div")[0];                var dom2=document.querySelectorAll("div")[1];                var op=document.getElementsByTagName("p");                function clickDiv1(){                        dom1.className="active";                    //dom1.setAttribute("class","active");                     dom2.className="";                     op[0].style.display="block";                     op[1].style.display="none";                }                function clickDiv2(){                        dom2.className="active";                     dom1.className="";                     op[1].style.display="block";                     op[0].style.display="none";                }        </script>    </body></html>

5.查找

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            *{margin:0px;padding:0px;}            .wrapper{width:500px;height:400px;border:5px solid orange;margin:20px auto;}            p{background:#ccc;padding:20px;margin-bottom:20px;line-height:20px;}            div .demo{width：60px;height:30px;line-height:30px;cursor:pointer;}            .active{background:red}            .float-l{float:left;}            .clear{clear:both;}        </style>    </head>    <body>        <div class="wrapper">            <p>教养和文化是两回事，有的人很有文化，但是很没教养，有的人没有什么太高的学历和学识，但仍然很有教养，很有分寸。教养是带有某种天生的素质和一点一滴的积累。人生那么长，未知的东西那么多。人与人之间的关系往往是相互的，与人为善，也是与自己为善。让自己更平和一点，更豁达一点，对于身边的过错，让自己更宽容一点。人人都有他的难处，何必强求于人。人生在世，行路匆匆，生活充满变数，时而乐极生悲，时而苦尽甘来，一切不必较真，只须笃定前行。要敢于认错，既然错了，就要纠正，虚假是味毒药，真实能帮你把失去的赢回来；要敢于担当，回避不是办法。人出生时，是一块质朴的石块，有棱有角，生气勃勃。但是，在生活无情的打磨中，人生慢慢被磨去棱角，变得圆滑而世故。要做坚守在悬崖峭壁上石块，勇敢忍受风霜的雕刻，永远保留自己的棱角。不要做河流里的石头，享受微波多情的抚摸，最后变成一块光亮的鹅卵石。</p>            <div class="demo float-l" onclick="clickDiv1()"><span class="active">我是div1</span></div>            <div class="demo float-l" onclick="clickDiv2()"><span>我是div2</span></div>            <div class="clear"><input type="text"/><input type="button" value="查找"></div>            <div class="clear"><input type="text"/><input type="text"/><input type="button" value="替换"></div>        </div>        <script>            var dom=document.getElementsByTagName("div");            var ospan=document.querySelectorAll("span");            var obtn=document.querySelectorAll("input[type=button]");            var oinput=document.getElementsByTagName("input");            var op=document.getElementsByTagName("p")            var str1=op[0].innerHTML;            var str=oinput[0].value;            dom[4].style.display="none";            function clickDiv1(){                ospan[0].setAttribute("class","active")                ospan[1].className="";                dom[3].style.display="block";                dom[4].style.display="none";            }            function clickDiv2(){                ospan[1].setAttribute("class","active");                ospan[0].className="";                dom[4].style.display="block";                dom[3].style.display="none";            }            obtn[0].onclick=function(){                var str=oinput[0].value;                if(oinput[0].value==""){                    alert("请重新输入！")                }else if(str1.indexOf(str)!=-1){                        var arr=str1.split(str);                        str=arr.join('<span style="background:green;width:20px;height:20px;">'+str+'</span>');                        op[0].innerHTML=str;0                        }else{                        alert("没有找到！")                    }            }            obtn[1].onclick=function(){                var a=oinput[2].value;                var b=oinput[3].value;                var c=str1.split(a);                op[0].innerHTML=c.join(b);            }        </script>    </body></html>