（自考专升本）《JavaScript》知识点学习知识点串讲笔记

PAGEPAGE5《JavaScript》知识点学习笔记简介js全称为JavaScript,是一种解释性脚本语言,边解释边执行javaScript组成:ECMAScript语法DOM文档对象模型(DocumentObjectModel)BOM浏览器对象模型(BrowserObjectModel)JS用法内部js语法:在head标签中写<script>js代码</script>,在body底部写<script>js代码</script>注:尽量让js代码写在body底部,因为代码从上往下执行,如果js代码写在head里,有可能页面还没有加载标签,js代码就已经利用了标签,这个时候会报null引入外部js文件在head标签中写<scriptsrc=”js文件路径”>js代码</script>在body底部写<scriptsrc=”js文件路径”>js代码</script>数据类型声明变量方式:var变量名=值;注:js会通过值来判定当前变量是什么数据类型例: vara=1;varb=“哈哈”; varc=true;vard; vare=null;数据类型:Number、 字符串类型booleanundefined(未定义的)null注:js输出语句:document.write(“在页面输出的内容”);例:varname=“天花板”;document.write(name);内置函数:检测当前变量的数据类型:typeof()>vara=1;document.write(typeof(a));将变量转换成其他数据类型:parseInt();>vara=“1”;varb=parseInt(a);判断变量非数字,如果是数字false,不是数字true:isNaN();例:vara=“12a”;document.write(isNaN(a));>true引用类型:数组类型:四种声明方式:vara=[1,2]; 取值:document.write(a[0]);varb=newArray();赋值:b[0]=1;取值同上varc=newArray(3);赋值取值同上,声明数组同时声明数组长度注:c[4]=1;那么此时,数组c的长度会自动扩容vard=newArray(1,2,3);取值同上,声明数组同时给数组赋值对象类型:三种声明方式varuser={name:”天花板”,age:21};取值:document.write();varuser=newObject();赋值:=“总班长”;取值:document.write();varuserArray=[{name:”王晓旭”},{name:”郝老师”}];数组类型对象,每一个{}代表一个对象取值:document.write(userArray[0].name);JSON类型:键值对形式存储数据声明JSON对象:varobj={“name”:”黄月”,”age”:19};声明JSON数组对象:varobjArray=[{“name”:”黄月”,”age”:19},{“name”:”黄月”,”age”:19}];注:js对象转换成json对象:varjsonObj=JSON.stringify(js对象名);json对象转换成js对象:varjsObj=JSON.parse(json对象名);运算符:算数运算符:+-*/%逻辑运算符:&&||!比较运算符:><>=<===!====(不仅判断值是否相对,也要判断数据类型是否相等)自增自减:++--双目运算符:+=-=*=/=%=条件分支语句、循环语句if(条件表达式){}else{}switch(表达式){case值:break;}while(条件表达式){}do{}while(条件表达式)for(vari=0;i<num;i++){}函数(方法)js声明方法:无参无返回值方法:function方法名(){}有参无返回值方法:function方法名(参数){}无参有返回值方法:function方法名(){return值;}有参有返回值方法:function方法名(参数){return值;}事件点击事件用法:<buttononclick=”add()”>点击触发add方法</button>functionadd(){document.write(“因为点击了button按钮,所以出发了add方法”);}注:a标签的事件特殊用法:<ahref=”javascript:show()”>点击</a>functionshow(){document.write(“点击a标签触发此方法”);}其他事件:onchange:表单内容改变事件onclick:鼠标左击事件onmouseover:鼠标滑过事件onmousemove:鼠标滑过事件onmouseout:鼠标离开事件onkeyup:键盘弹起事件onkeydown:键盘按下事件onload:预加载事件onload用法:window.onload=function(){}只要打开页面,就执行此事件事件传参为:this当给事件绑定的方法中传入参数this,此时this代表当前标签例:<lionclick=“getDoc(this)”></li><script> functiongetDoc(this){ alert(this.style.backgroundColor); alert(this.innerHTML); }</script>js弹框:警告弹框:alert(“内容”);确认弹框:varflag=confirm(“郝老师美不美?”); 当点击确定flag为true,点击取消flag为false文本弹框:varcontent=prompt(“问题”,”默认内容”);点击确定返回输入内容,点击取消返回nulljs操作DOM元素js获取dom元素根据id获取:<h1id=”hid”>哈哈</1>vardoc=document.getElementById(“hid”);根据class获取:<h1class=”hclass”>哈哈</1>vardoc=document.getElementsByClassName(“hclass”);注:此时获取的doc是一个数组,因为页面中可能有多个名叫h1的class根据标签名获取:<h1>哈哈</1>vardoc=document.getElementsByTagName(“h1”);注:此时获取的doc是一个数组,因为页面中可能有多个h1标签js操作DOM的样式、内容、属性vardoc=document.getElementById(“name”);js获取标签内容:doc.innerHTML;js获取表单内容:doc.value;js向标签内写入内容:doc.innerHTML=“新内容”;js获取元素背景颜色:doc.stlye.backgroundColor;注:这个元素的样式必须是行内样式,js在获取带有-的样式时,去掉-下一个单词首字母大写例如:css样式:font-size:10px;doc.style.fontSize;js添加元素样式:doc.style=“color:red;font-size:10px;”;js获取元素属性:;注:js在获取class的时候,doc.className;js添加元素属性:doc.src=“index.html”;js操作节点<div><span>我是原有标签</span></div>获取页面标签:vardiv=document.getElementsByTagName(“div”)[0];创建元素:varp=document.createElement(“标签名称”);向创建的元素中添加内容:创建一段文本:varcontent=document.createTextNode(“文字”);将文本添加到标签内:p.appendChild(content);将创建的元素添加到页面中:div.appepndChild();删除元素:div.removeChild(p);替换元素:varspan=doucment..getElementsByTagName(“span”)[0];//获取页面要替换的元素//创建一个新的元素varli=document.createElement(“li”);varliCon=document.createTextNode(“我是li标签内容”);li.appendChild(liCon);div.replaceChild(li,span);//将div中的span替换成了li插入元素:varspan=doucment..getElementsByTagName(“span”)[0];//获取一个元素//创建一个新的元素varli=document.createElement(“li”);varliCon=document.createTextNode(“我是li标签内容”);li.appendChild(liCon);div.insertBefore(li,span);//将li标签插入到span标签前面时间与Math对象用法:Math用法:随机数用法:Math.random();产生0~1之间的随机数向上舍入:Math.ceil(10.1);>11向下舍入:Math.floor(10.1);>10四舍五入:Math.round(9.5);>10最大值、最小值:Math.max(4,3);-->4Math.min(4,3);-->3次幂: Math.pow(2,3);>8Date用法:获取系统时间:vardate=newDate(); //创建时间对象获取年:varyear=date.getFullYear();获取月: varmonth=date.getMonth()+1; 月份的取值范围是:0~11获取日: varday=date.getDate();获取时: varhours=date.getHours();获取分: varminu=date.getMinutes();获取秒: varsec=date.getSeconds();获取星期: varweek=date.getDay(); 星期的取值范围:0~6定时器functionshow(){alert(“我是计时器和延时器要执行的方法”);}计时器用法:varinter=setInterval(“show()”,1000);//每1000毫秒调用一次show方法停止计时器:clearInterval(inter);//清除名为inter的计时器延时器用法:vartimeout=setTimeout(“show()”,5000);//经过5000后再执行show方法停止延时器:clearTimeout(timeout);BOM元素window:浏览器窗口获取屏幕宽高: screen.availWidth;//宽度screen.availHeight;//高度获取浏览器可用宽高:宽度:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;高度:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;history:让