js学习笔记

*如何获取div里面的ul？varmyDiv=document.getElementById(“myDiv”);varmyUl=myDiv.getElementsByTagName(“li”);myUl[0].onclick=myFun;*script脚本是有范围的，也就是有执行顺序的，它会从script开头执行到结尾，所以脚本语言不能放在body里面的最开头*系统事件onload当加载完毕时window.onload=function()//当整个页面文档加载完毕后，在执行此段代码{……}*qq聊天框的实现a.innerHTML=”p”+b.value+”/p”;清空：b.value=””;*如何区分字符和数字字符都加””,而数字没有””。*实现幻灯片效果（点击一个按钮）一共5张图片scriptvarskin=document.getElementById(skin);varmyBtn=document.getElementById(myBtn);varnum=0;myBtn.onclick=function(){if(num==4){num=0;}else{num+=1;}skin.src=images/+num+.jpg;}/script*样式叠加，参数传递functionaddClass(attr){oDiv.className=oDiv.className+””+attr;}oBtn1.onclick=function(){addClass(“p1”);}oBtn2.onclick=function(){addClass(“p2”);}*传递参数scriptvarbtn1=document.getElementById(btn1);varbtn2=document.getElementById(btn2);varpic1=document.getElementById(pic1);varpic2=document.getElementById(pic2);functionchangeStyle(x,y,obj){obj.style.top=x;obj.style.left=y;}btn1.onclick=function(){changeStyle(150px,750px,pic1);}btn2.onclick=function(){changeStyle(150px,750px,pic2);}/script*调用一个jsscriptsrc=js/myJs.js/script*js是区别大小写的后面的分号是可选的单行注释//,多行注释/**/变量的命名规则:必须是字母|下划线|$开始不能使用保留字*查看变量的数据类型：number|Boolean|string|array*转换变量的类型:parseInt|parseFloat*算术运算符5/2=2.5;//这个跟c里面不同使用%&/拆分某个数字：*关系运算符alert(123);//从左至右运算，12为真，即为1，13，结果为truealert(‘10’==10);//结果为truealert(‘10’===10);//结果为false*逻辑运算符alert(eval(“3+2”));//结果为5a=b=5;//从右向左计算*条件运算符prompt();//在调用prompt()时，将暂停对JavaScript代码的执行，在用户作出响应之前，不会执行下一条语句。varname=prompt(Pleaseenteryourname,lili?)*运算符的优先级*条件语句temp:临时变量找出最大值：*多分支switch|default*进制转换vara=32;alert(a.toString(2));//结果是100000~将数字转换为字符串：toString()~将字符串转换为数字：parseInt()*document.write();//注意单引号*while/do/while*for循环在5个数中找最大值：在n个数中找最大值：判断一个数是否是质数：*for循环嵌套：绘制心：*函数的概念完成某种特定功能；一次编写，多次调用两个数的互换：*函数实例计算3个数的最大值，并且返回*变量的作用域全局变量和局部变量*函数的高级写法高级写法中，省略了函数名这是有函数名的高级写法，但是alert没有值，最好使用没有函数名的写法*递归算法*嵌套函数*函数实例蓝色部分是绿色部分的精简写法*对象静态特性(属性)和动态特性(方法)*创建数组：创建的时候可以是常量，也可以是变量*数组遍历vararr=Array(5);arr[8]=54;alert(arr.length);alert(arr[7])//数组动态的窗口会弹出5次，每次分别弹出一个索引，但是结果是string但是for(..in..)循环，会自动忽略掉undefined*冒泡排序*多维数组*数组方法sortsort函数中嵌套的function(a,b)排序规则函数中，默认ab*转成小写：toLowerCase()|toUpperCase()*数组增加与删除push:方法可向数组的末尾添加一个或多个元素，并返回新的长度。Unshift：方法可向数组的开头添加一个或更多元素,并返回新的长度。pop：方法用于删除并返回数组的最后一个元素。Shift：方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。a.slice(2);//从下标是2的开始到最后a.slice(1,3);//从下标是1的开始，到3之前a.splice(4);//从下标是4的开始到最后a.splice(4,2);//从下标是4开始后面2个结束a.splice(4,2,”a”);//在删除的地方上添加新的元素*创建字符串对象格式方法：*字符串操作方法indexOf|lastIndexOfcharAt|charCodeAtSplit:Slice|substringSubstr:*字符串实例：邮箱验证*数学对象的属性和方法Abs:绝对值Floor(3.4)=3Ceil(3.4)=4Math.ceil(Math.randow()*10);//结果为1-10Math.pow(2,3)//2的3次方Round是四舍五入*点击改变颜色#xxxxxx：bodydivid=cColor/divinputid=btntype=buttonvalue=CLICK//body/htmlscriptvarcColor=document.getElementById(cColor);varbtn=document.getElementById(btn);btn.onclick=function(){vara=Math.ceil(Math.random()*255).toString(16);varb=Math.ceil(Math.random()*255).toString(16);varc=Math.ceil(Math.random()*255).toString(16);//alert(typeof(a))cColor.style.backgroundColor=#+a+b+c;}/scriptrgb：vara=Math.ceil(Math.random()*255).toString();varb=Math.ceil(Math.random()*255).toString();varc=Math.ceil(Math.random()*255).toString();//alert(typeof(a))cColor.style.backgroundColor=rgb(+a+,+b+,+c+);*日期对象创建：另外还有两种设置日期的方法：myDate.setFullYear(2012,5,6)//3个参数varendDate=newDate(2011,10,23,3,2,23);//6个参数方法：varday=myDate.getDay();//星期几注意月份要+1*使用下拉列表实现出生日期*倒计时天数我们这边的6代表外国的7月份*正则表达式search:如果没有搜索到，会返回-1replace:vartemp=str.replace(/jing/I,”hai”)//把jing替换成hai*属性和方法varstr1=mySTYLE,mystyle;vartemp1=str1.match(/y/gi);alert(temp1);varstr2=mySTYLE,mystyle;varreg=/y/gi;alert(reg.test(str2));*邮箱验证onblur=”fun()”//鼠标离开时进行验证*面对对象属性和方法的封装创建自定义对象的复杂方式：另一种方法：*原型对象的创建*portotype的用法返回值为true，说明c1和c2公用同一个方法*call(调用的意思)和apply方法有参数：无参数：call和apply意思一样，只是书写上有些不同*继承实现*浏览器对象模型(BrowserObjectModel)*计时方法*clearInterval()的使用#pic{width:100px;height:100px;background-image:url(images/1.jpg);background-position:center;position:relative;}/style/headbodyonload=init()divid=picstyle=top:20px;/div//必须把样式写在这里才能获取到top的值为20px，或者事先设置好这个值:pic.style.top=50px;/body/htmlscriptdocument.getElementById(pic);alert(pic.style.top);//注意:posLeft只适用于ie，建议使用通用属性offsetLeft，而且此方法不用写在行间样式里面//alert(parseInt(pic.style.left))也是可以的，不过要是行间获取当前窗口的宽高：*open方法自动关闭：setTimeout(self.close(),3000);*location对象*screen对象alert(screen.width);//1366alert(screen.height);//768alert(screen.availWidth);//1366alert(screen.availHeight);//728*navigator对象window.navigator.appName//浏览器名称window.navigator.appVersion//浏览器版本*history*对话框*模式对话框Chrome浏览器不支持，而ff浏览器支持*dom文档对象模型查找元素的方法*document对象Forms:forminputtype=textname=herovalue=德玛//form/body/htmlscriptalert(document.forms[0].hero.value)*遍历文档alert(document.childNodes[0].nodeName)//htmlbodypniah/pforminputtype=textname=herovalue=德玛//form/body/htmlscriptalert(document.body.childNodes[0].nodeName)//#text,因为在body加了换行符，而它也算是一个子节点，script无论放在哪里，它都是一个子节点，注释也算*innerText|innerHTML○document.getElementsByTagName(p)[0].innerHTML=你好;//注意获取的是一个数组○scriptvarmyP=do