贺倩的第一周js总结

1.浏览器渲染完毕事件

---

window。onload=function（） { }；

执行时机：等待所有内容加载完毕后（包括图片）才执行。 编写个数：不能同时编写多个，否则只能执行最后一个。

---

2.标签的位置

（1）放置在中,这时使用1.的内容。 （2）放置在中的最下面。

---

3.自动获取距离

（1）id/tagname.offsetLeft：距离浏览器左边的距离，实时获取。 （2）id/tagname.offsetTop：距离上方空间的距离。 （3）.clientHeight:内容可视区域的高度，例如一个框。

---

4.如果定义了一个变量并没有赋值给它那么就是：undefined。

---

5.innerHTML是js中双向功能

（1）通过document.getElementById("a").innerHTML,来获取a对象的内容。 （2）可以对某对象插入或者修改：document.getElementById("a").innerHTML="插入或修改的内容"。

---

6.设置/读取css样式

（1）设置样式：标签.style.xx=”“; 例如：div.style.color="yellow"; （2）读取样式：console.log("div.style.color")

---

7.字符串（string类型）

（1）charAt();获取某个位置的字符。 例如：

var a="hello cyw" alert(charAt(0)) //h

也可以用这个方法：[ ]+数字索引来访问字符串中的特定 字符。 例如：alert([0]) //h (2)charCodeAt();获取某个位置的字符编码,字转为字符编码。 例如：

var a="hello cyw" alert("charCodeAt(1)") //101

（3）concat() 连接字符串 例如：

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

也可以连接多个字符串：alert（a.concat(b,"haha")）//hello cyw haha (4)slice() ;截取字符串中的某些字符。

var a="hello cyw" slice(4) //从第4个开始截取：o cyw slice（2，6）//从2-6被截取 llo （不包括第六） slice（-2） //从倒数第2个字符开始被截取 hello c slice（2，-2）// 从正数第2个字符开始到倒数第二个 llo c

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

var a="hello cyw" alert(a.substr(3)); // lo cyw alert(a.substr(3)); // lo c alert(a.substr(-1)); // hello cy alert(a.substr(2,-2)); // 空字符串:"" alert(a.substr(-2,3)); // yw

注：substr将负的第一个参数加该字符串长度使其变为正，负的第二个数变为0。 （6）substring( ) 截取字符串中的字符

var a="hello cyw" alert(a.substring(4)) //从该参数所代表的字符开始截取其后面的： o cyw alert(a.substring(1,6)) //从第一个参数截取到第二个参数位置：ello c alert（a.substring(-2,6)）//若第一个参数为负，则自动转换为0：hello c alert（a.substring(6,-2)）//若第二个参数为负，则自动与第一个参数交换位置并转换为0：hello c

（7）indexOf（”“）；找出字符在字符串中首次出现的位置（第几个字符）,从左向右。

var a="hello cyw" alert(a.indexOf("o"))//4

注：如果要检索的字符串值没有出现，则该方法返回 -1。

---

lastIndexof(" ") ;从右往左找 var a="hello cyw" alert(a.indexOf("o"))//4

---

a.indexof（”str“，num） var a="hello cyw" alert(a.indexOf("o"，3))//4

---

（8）trim（） 创建一个字符串的副本，删除前置以及后缀的所有空格，本身并不会发生改变

var a=" hello cyw " alert(a.trim())//"hello cyw" alert(a) //" hello cyw "

---

(9)toUpperCase( ) ： 转换为大写 toLowerCase( ) : 转换为小写

var a="abcdefg" var b=ABCDEFG alert(a.toUpperCase())//ABCDEFG alert（b.toLowerCase（））//abcdefg 括号里面写字符的话也不会改变什么

（10）split（） 把字符串分割成数组

var a=www.baidu.com alert(a.split("."))//"www","baidu","com" alert(a.split("a"))//"www.b","idu.com" 然后可以通过下标来访问数组成员 b=a.split(".") alert(b[1])//baidu 注：若没有确定指定字符串以某个分隔符来分割，那么split方法中的空字符就代表将原始字符串的每一项分割成数组。 alert（a.split("."，1)）//第二个参数代表把字符串分割后保留的数组成员个数："www"

---

8.数组（Array类型）

（1）数组的创建 以对象方式来创建

var arr=new Array() arr[]= arr[]= arr[]= arr[]= ...

以字面量方式来创建

var arr=[a , b, c, [0,5,7]] alert(arr[3][2])//获取第三项的第二项： 7

---

（2）concat( ) 拼接数组

var arr1=[1,2,6] var arr2=["a","b"] alert(arr1.concat(arr2))//[1,2,6,"a","b"]

---

(3)join( ) 把数组变为字符串

var arr=[7,8,9] alert(arr.join("#"))//7#8#9 alert(arr.join(""))//789 alert(arr.join())//7,8,9

---

(4)pop( ) 删除最后一个元素并且返回最后一个元素

var arr=[4,8,8,9] alert(arr.pop())//9

---

(5)shift( ) 删除并返回第一个元素 unshift( ) 在数组前加一个或者多个元素

var arr=[4,8,8,9] alert(arr.shift())//4 alert(arr)//[8,8,9] alert(unshift(1))//返回添加后的长度5 alert（arr） //[1,4,8,8,9] ---------- （6）push() 给数组的后面加上元素并且返回

var arr=[4,8,8,9] alert（arr.push(2)）//输出长度：5 alert（arr）//输出添加后的数组：[4,8,8,9,2] alert（arr.push(2，101，20)）// 7

---

（7）reverse（） 翻转数组

var arr=[7,8,9,6] alert(arr.reverse())//[6,9,8,7]

---

(8)splice( ) 删除数组中的元素并且返回已经删除的元素内容

var arr=[7,8,9，10，5] alert(arr.splice(0,3))//从下标为0的元素删除了3个元素：[7,8,9]

---

(9)slice( ) 截取

var arr=[1,8,9,6] alert(arr.slice(0))//从第0个开始截取，包括第0个：[1,8,9,6] alert(arr.slice(0,2))//从第0个开始截取到第2个：[1,8] alert(arr.slice(-2))//从倒数开始截取两个：[9,6] alert(arr.slice( -2,-1))//(2,3),若相加后小于0，那么返回空数组[]

---

9.贺倩编写的程序们

（1）sort（排序）比较数组中两两的值

var arr=[1,80,5,2,60,99] function add() { return a-b; } document.write（arr.sort(add)）;//从小到大排序 var arr=[1,80,5,2,60,99] function jian() { return b-a; } document.write（arr.sort(jian)）;//从大到小排序

注：该方法返回的是一个负数，在arr.sort（）中，如果括号中的数值为负则不调换a，b。如果为正则调换。

---

（2）冒泡排序

var arr=[3,9,6,5,1] function bubblesort(arr) { for(var i=1;i<=arr.length-1;i++) { for(var j=0;j<arr.length-1;j++) { if(arr[j]>arr[j+1]) { var a=arr[j+1] arr[j+1]=arr[j] arr[j]=a } } } return arr; } document.write()//从小到大排序

注：冒泡排序的轮次i为length-1；每一次比较最后一个数都是最大值故不需要再进行比较。所以j

var arr=[3,9,6,5,1] function max(arr1) { maxnum=arr1[0] for(i=0;i<arr1.length;i++) { if(maxnum<arr[i]) { maxnum=arr[i] } } return arr[i]; } document.write(max(arr));//求的最大值 最小把 “<” 变为 “>” 。

---

(4)收缩展开

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

---

（5）三元比较

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> /*var a=5 var b=99 function compare(value1,value2){ (value1>value2?alert("大于"):alert("小于")) } compare(a,b);*/ /*var a=5 var b=99 (a>b? alert("大于"):alert("小于"))*/ </script> </body> </html>

---

（6）弹出消息对话框

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //var arr9=[76,5465,43,554,3,234,5]; // //alert(arr9.indexOf(43))//找某个元素在字符串中的下标 // for(i=arr9.length-1;i>=0;i--){//--这个符号代表递减 ++递增，因为我们这个数组的末尾元素的下标是6.但是长度是7，所以要找最后一个元素那么公式就是arr9.length-1 // alert(arr9[i]) // } //alert("你确定删除么？")//警示框 //confirm("你确定删除么？")//确认框 //prompt("请输入你的年龄")//输入框 var age1 = prompt("小王请输入你的年龄"); var age2=prompt("小李请输入你的年龄"); var age3=prompt("小张请输入你的年龄"); var str = []; //isNaN 某一个字符是不是不是一个数子 if(isNaN(age1)){ alert("数据错误") } else{ alert("是数子") } str.push(age1); str.push(age2); str.push(age3); //alert(str); //alert(typeof str); function max(ar1) { var maxage = ar1[0]; for(i = 1; i < ar1.length; i++) { if(maxage < ar1[i]) { maxage = ar1[i]; } } return maxage; } alert("三个人中最大的是；" + max(str)) //if(age>90){ // console.log("老人家") // //} //else if(age<90&&age>18){ // // console.log("年轻人") //} //else if(age<18&&age>0){ // // console.log("你是碎娃") //} //else{ // console.log("你的年龄不合法") //} </script> </body> </html>

---

（7）表格

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{} </style> <script type="text/javascript"> window.onload=function() { document.write('<table width="400" height="400" border="1" cellpadding="0" cellspacing="0">')//在标签内部添加属性 不用px 分号啥的。 for(var i=1;i<=9;i++) { document.write("<tr>") for(var j=1;j<=i;j++) { document.write('<td>'+i+"*"+j+"="+i*j+"</td>") } document.write("</tr>") } document.write("</table>") } </script> </head> <body> </body> </html>

（8）查找

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

---