一、ECMAScript语法
1.循环语句
简单for循环和for-in循环【数组】
while语句和do-while语句
语法:
初始化表达式
while(条件表达式){
循环体
循环之后的操作表达式
}
初始化表达式
do{
循环体
循环之后的操作表达式
}while(条件表达式);
for(初始化表达式;条件表达式;循环之后的操作表达式){
循环体
}
说明:四要素
掌握:
a.while和do-while的区别
b.简单for循环和for-in 的区别
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script type="text/javascript"> //需求:打印0~9的数字 //while var n1 = 0; while(n1 < 10){ document.write(n1); //循环之后的操作表达式 //n1 = n1 + 1; //给变量自身递增1 n1++; } document.write("<br />"); //do-while var n2 = 0; do{ document.write(n2); n2++; }while(n2 < 10); document.write("<br />"); //面试题:while和do-while之间的区别 var m1 = 3; while(m1 < 1){ document.write("hello"); } document.write("<br />"); var m2 = 3; do{ document.write("hello~~~"); }while(m2 < 1); //总结:不管条件是否成立,do-while的循环体至少会执行一次 //do-while的工作原理:先执行循环体,然后去判断条件是否成立,如果成立,接着再执行循环体。。。 //在实际项目开发中,首选while,因为do-while不可控 //for循环 for(var i = 0;i < 10;i++){ document.write(i); } document.write("<br />"); //for-in循环 //for-in循环遍历数组,直接获取的是数组的索引,区别于Python var arr = [2,5,6,56] for(var i in arr){ document.write(arr[i]); } document.write("<br />"); //嵌套循环 /* *break:直接跳出整个循环 continue:结束当前正在执行的循环,继续下一次循环 在嵌套循环中,跳出的是当前循环【就近原则】 */ //label标签:给每个循环命名,就可以让break或者continue根据别名识别应该跳出哪个循环 //loop1和loop2是自定义的,只要是合法的标识符即可 //用法:break 标签名称; loop1: for(var i = 0; i < 10;i++){ loop2: for(var j = 0; j < 4;j++){ document.write(i + "x" + j + "=" + i * j); break loop1; } document.write("<br />"); } </script> </body> </html>
2.函数
定义:
方式一:使用function关键字
function 函数名(形参列表){
函数体
}
调用:函数名(实参列表)
方式二:匿名函数【掌握】
var 变量名 = function(形参列表){
函数体
}
调用:变量名(实参列表)
方式三:js中的内置对象Function【动态方式,很少使用,了解】
var 变量名 = new Function(“形参列表”,“函数体和返回值”)
调用:变量名(实参列表)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //定义一个无参无返回值的函数 function func1(){ document.write("hello"); } func1(); //定义一个无参有返回值的函数 function func1(){ document.write("hello"); return 10; } result = func1(); //document.write(func1()); //定义一个有参无返回值的函数 function func1(a,b){ document.write("hello"); } func1(12,43); //定义一个有参有返回值的函数 function func1(num1,num2){ var s = num1 + num2; return s; } func1(12,43); //return:和Python完全相同,结束函数和返回值 //匿名函数 var text1 = function(num1,num2){ var s = num1 + num2; return s; } text1(43,5); //常用:结合js中的DOM中的事件 //动态函数 var result1 = new Function("num1,num2","var s = num1 + num2;return s;"); var result2 = result1(34,54); document.write(result2); </script> </body> </html>
全局函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //eval():识别字符串中的js代码 var s1 = "alert('hello')"; //document.write(s1); //eval(s1); //encodeURI:对字符串进行编码 //decodeURI:对字符串进行解码 var s2 = "测试中文aaaa text"; var r0 = encodeURI(s2); document.write(r0); //%E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaaa%20text document.write("<hr />"); var r1 = decodeURI("%E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87aaaa%20text"); document.write(r1); //isNaN:如果是number或者可以转换为number,则返回false,否则返回true //parseInt() parseFloat(),类似于Python中的int()和float(),将其他类型的数据转换为整型或者浮点型 var s3 = "134"; document.write(s3 + 1); //1341 document.write("<hr />"); var num = parseInt(s3); document.write(num + 1); </script> </body> </html>
3.全局变量和局部变量
全局变量:在script标签中定义一个变量,这个变量就可以当前文件的所有js部分使用
局部变量:在函数内部定义一个变量,该变量只能在函数的内部使用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //全局变量 var num1 = 10; document.write("当前script标签" + num1); document.write("<br />"); function check(){ //在函数内部定义的变量,只能在当前函数中被访问 var num2 = 20; document.write("当前函数" + num2); //如果函数内部的变量想要在函数外部使用,则设置返回值 return num2; } check(); document.write("<br />"); document.write("当前script标签中的局部变量" + check()); document.write("<br />"); </script> <script type="text/javascript"> document.write("其他script标签" + num1); document.write("<br />"); //document.write("其他script标签的局部变量" + num2); </script> </body> </html>
4.js的对象
4.1string
字符串对象的创建
//单引号和双引号都可以表示字符串 var s1 = "hello"; var s2 = new String("hello"); var s3 = String("hello");
属性:字符串名称.length
函数:
concat():拼接,注意:拼接之后得到了一个新的字符串,对原字符串没有任何影响
charAt():获取指定索引处的字符
indexOf():获取子字符串在原字符串中第一次出现的下标
split():切割字符串,注意:得到的结果为一个数组
replace():字符串替换,用法:字符串名称.replace(old,new)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var s1 = "hello"; var s2 = "javascript"; s1.concat(s2) document.write(s1); document.write(s1.charAt(2)); var s3 = "my name is jack"; var arr1 = s3.split(" "); for(var i in arr1){ document.write(arr1[i] + "<br />"); } var s4 = s3.replace("name","friends"); document.write(s4); </script> </body> </html>
4.2array对象
数组的创建方式
var arr1 = [23,43,5]; //初始化一个数组,该数组的初始容量为10 var arr2 = new Array(10); //初始化一个数组,数组中的元素为23,3,5 var arr3 = new Array(23,3,5);
属性:数组名称.length
函数:
concat():得到的结果为一个数组
join():与split相反,将数组拼接成字符串
push():向数组的末尾添加元素,并且返回新的数组的长度【类似于append】
unshift():与push相反,向数组的头部添加元素
pop():删除末尾元素
shift():删除头部元素
reverse():反转【Python中的list】
slice():截取数组【切片】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var arr1 = [1,2,3]; var arr2 = [4,5,6]; document.write(arr1.concat(arr2)); document.write("<br />"); document.write(arr1); //结论:与Python中的列表和元组对比不相同,拼接得到的是一个新的数组,但是,数组又可以进行插入和删除的操作 var arr3 = new Array(3); arr3[0] = 10; arr3[1] = 20; arr3[2] = 30; document.write(arr3.join("-")); document.write(typeof arr3.join("-")); document.write(arr1.reverse()); //包头不包尾 var arr4 = [23,5,4,54,5,45]; document.write(arr4.slice(0,2)); </script> </body> </html>
4.3object对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.使用new创建object的对象 var obj1 = new Object(); //类似于Python,可以给对象动态的添加属性和方法 obj1.name = "zhangsan"; obj1.age = 19; obj1.func1 = function(){ //this类似于Python中的self,表示当前的对象 document.write("name is " + this.name + ",age is " + this.age); } obj1.func1(); //2.使用字面量的方式创建object的对象 var obj2 = { name:"tom", age:18, func2:function(){ document.write("name is " + this.name + ",age is " + this.age); } } obj2.func2(); //特殊用法 //对象.属性 document.write(obj2.name); //tom //通过字面量的方式创建对象,本质是一个字典【区别于真正的字典】,访问方式:对象[属性] document.write(obj2["name"]); </script> </body> </html>
4.4date对象
创建date对象
var date1 = Date("") var date2 = new Date()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //默认获取的是当前的时间 //注意:不管Date()带不带参数,得到的结果都是当前的时间 var date1 = Date("2018-3-17"); document.write(date1); document.write("<hr />"); //注意:如果不设置参数,则结果为当前时间,如果设置参数,则为设置的时间 //年月日,时分秒,缺少哪个数据,则默认为00 var date2 = new Date("2016-04-17"); document.write(date2); document.write("<hr />"); var date3 = new Date("2016/4/17"); document.write(date3); document.write("<hr />"); //参数:年月日时分秒毫秒 var date4 = new Date(2017,3,28,10,10,10,546); document.write(date4); document.write("<hr />"); //根据时间戳获取指定的时间 var date5 = new Date(10000); document.write(date5); document.write("<hr />"); //getxxx;获取 //获取一个月中的第几天 document.write(date4.getDate()); document.write("<hr />"); //0~11 document.write(date4.getMonth()); document.write("<hr />"); //2016-4-17 //setxxxx:设置,注意:如果月份超过11.则年份增加1 date2.setMonth(13); document.write(date2); document.write("<hr />"); //hour,minute document.write(date4.toLocaleDateString()); document.write("<hr />"); document.write(date4.toLocaleString()); document.write("<hr />"); document.write(date4.toLocaleTimeString()); document.write("<hr />"); //掌握 //获取指定时间的时间戳【单位为毫秒】 document.write(Date.parse("2015-6-18")); document.write("<hr />"); //date对象之间可以进行加减运算 var a1 = new Date("2016-10-10 10:10:10"); var a2 = new Date("2016-10-10 10:10:13"); //减法:相差的毫秒数 document.write(a2 - a1); document.write("<hr />"); //加法:拼接,string document.write(a1 + a2); document.write("<hr />"); document.write(typeof (a1 + a2)); </script> </body> </html>
4.4math对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //格式:Math.函数() //四舍五入 document.write(Math.round(4.6)); //5 document.write("<br />"); //向上取整 ceil document.write(Math.ceil(4.6)); //5 document.write("<br />"); //向下取整:floor document.write(Math.floor(4.6)); //4 document.write("<br />"); //abs //pow(n,m) 求n的m次方 //sqrt() 开平方 //random() 求随机数,0~1之间的随机数【浮点型】 document.write(Math.random()); document.write("<br />"); //4~10 document.write(parseInt(Math.random() * 6 + 4)); </script> </body> </html>
二、BOM
1.BOM简介
Broswer Object Model,浏览器对象模型,是一个用于访问浏览器的和计算机屏幕的对象的集合。可以通过全局对象window访问这些对象【通过window对象来控制BOM】
注意:在客户端的js中,如果定义的内容没有指明对象的话,则默认都属于window
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var name = "zhangsan"; document.write(name); document.write(window.name); </script> </body> </html>
2.window的使用
bom中的对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: red; } </style> </head> <body> <button onclick="func1();">跳到绿页面</button> <button onclick="func2();">刷新当前页面</button> <button onclick="func3();">跳到黄色页面</button> <button onclick="forwardPage();">下一页</button> <button onclick="goPage();">跳转到黄页面~~~~</button> <script type="text/javascript"> //了解 //window.document,文档对象【页面】,DOM中 //window.frames:当前页面中所有框架的集合 //window.navigator:反应浏览器及其功能信息的对象 //window.screen:提供浏览器以外的信息【屏幕信息】 //掌握 //window.location /* * href属性:控制浏览器地址栏内的内容【网址】 * 函数: * reload():默认刷新当前页面,传参true,则表示刷新页面的时候不带缓存 * assign():加载新的页面 * replace():加载新的页面,和assign的区别在于:不会在浏览器的历史记录中留下记录 */ function func1(){ window.location.href = "greenWindow.html"; } function func2(){ window.location.reload(); } function func3(){ window.location.assign("yellowWindow.html"); } //window.histroy,注意:必须先产生历史记录,然后该对象中的函数才能起作用 /* * 和历史记录有关 * * length属性:获取历史记录中的条数 * 函数: * back() 上一页【上一条历史记录】 * forward() 下一页【下一条历史记录】 * go(num) 跳转到指定的历史记录 * 举例: * 红---》绿---》黄 * 0 1 2 * * 从红---》黄 go(2) num为正数,则说明顺序 * 从黄----》红 go(-2) ,num为负数,则说明逆序 */ function backPage(){ window.history.back(); } function forwardPage(){ window.history.forward(); } function goPage(){ window.history.go(2); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: green; } </style> </head> <body> <button onclick="func1();">跳到黄色页面</button> <button onclick="backPage();">上一页</button> <button onclick="forwardPage();">下一页</button> <script type="text/javascript"> function func1(){ window.location.href = "yellowWindow.html"; } function backPage(){ window.history.back(); } function forwardPage(){ window.history.forward(); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background-color: yellow; } </style> </head> <body> <button onclick="goPage();">回到红页面</button> <script type="text/javascript"> function goPage(){ window.history.go(-2); } </script> </body> </html>
window的函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="greenWindow.html" target="_blank">打开绿色页面</a> <button onclick="func1();">打开</button> <button onclick="func2();">关闭</button> <script type="text/javascript"> //open() function func1(){ //需要打开的html文件的路径 打开方式 新窗口的设置 window.open("greenWindow.html","blank","width=200px,height=400px,top=10px,left=10px"); } //close() //注意:关闭是当前窗口,跟新打开的窗口没有关系 function func2(){ window.close(); } </script> </body> </html>
window的事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ height: 5000px; } </style> </head> <body> <h5>顶部</h5> <button onclick="goOn();" style="position: fixed;bottom: 50px; left: 10px;">回到顶部</button> <script type="text/javascript"> //事件:当进行某种操作的时候会触发的行为,事件一般结合匿名函数使用 /* * 语法 * * 对象.事件 = function(){ * * } */ //onload :当整个html页面加载完毕的时候会自动触发事件 //好处:为了保证当前页面中所有的内容【html标签,网络资源】加载完毕之后才会执行该事件 /*window.onload = function(){ alert("hello"); } alert("js~~~~~"); */ //onscroll:当浏览器窗口发生滚动的时候会自动触发的事件 window.onscroll = function(){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollTop); } function goOn(){ document.documentElement.scrollTop = 0; document.body.scrollTop = 0; } </script> <!--回到顶部--> <!--<a href="#top"></a>--> </body> </html>
3.提示框
alert():警告框
confirm():确认框
prompt():输入框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> window.onload = function(){ //提示框/警告框 // alert("hello js"); //确认框 /*var result = confirm("请确定或者取消"); // document.write(result); if(result){ //点击确认按钮,则需要进行一定的操作【实际的操作】 }else{ //点击取消按钮 } */ //输入框 //点击确定,则获取具体的数据;点击取消,则获取null var num = prompt("请输入一个数字",0); document.write(num); //跟Python中input的用法相同,获取的结果都是string document.write(typeof num); document.write(parseInt(num) + 10); } </script> </body> </html>
4.定时器
4.1延时性定时器
作用:指定的时间之后触发定时器,只执行一次
4.2间歇性定时器
作用:每隔指定的事件触发定时器,至少会执行一次
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //1.间歇性定时器 /* * 创建定时器 * setInterval(函数名,时间),单位为毫秒 * 功能:创建一个间歇性定时器,每隔指定的时间会执行一次指定的函数 * 返回值:定时器的id,用来唯一的标记当前的定时器,主要停止定时器的时候识别 * * 停止定时器 * clearInterval(定时器的id),清除定时器 * * 定时器实际上没有暂停一说,暂停一般指的是将现有的定时器清除掉,恢复指的是创建一个新的定时器 */ // function text(){ // console.log("hello"); // } // // var timer = setInterval(text,1000); //全局变量 /*var timer1 = setInterval(function(){ console.log("hello"); },1000); function func1(){ clearInterval(timer1); } //重新开启: timer1 = setInterval(function(){ console.log("hello"); },1000);*/ //延时性定时器 //创建:setTimeout(函数名,时间) //停止:clearTimeout(定时器的id) var timer = setTimeout(function(){ console.log("fahegf"); },10000); //clearTimeout(timer); </script> <!--<button onclick="func1()">启动</button>--> <button onclick="func1()">停止</button> </body> </html>
三、DOM【重点】
1.DOM简介
Document Object Model.文档对象模型
document对象
想要对标记型文档【html】进行操作,首先需要将标记型文档中的内容【标签/标记/元素,属性,文本内容】封装成对象,封装成对象的目的是为了更方便的去操作文档以及文档中的内容
明确一点:在加载html页面的时候,web浏览器会生成一个树形结构,表示页面的内部结构,被称为DOM树【节点树】,见图
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>aaa</title> </head> <body> <div id="box">正文</div> </body> </html>
2.获取元素/节点对象
getElementById():根据id的值获取指定的标签对象,返回的是对象 【常用】
getElementByTagName():根据标签名称获取标签对象,返回集合
getElementByName():根据name属性的值获取指定的标签对象,返回集合
getElementByClassName():根据class属性的值获取指定的标签对象,返回集合 【常用】
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div> <input type="text" id="input1"/> <input type="text" id="input2"/> <input type="text" class="input3"/> <input type="text" class="input3" name="text1"/> <input type="text" class="input4" name="text1"/> </div> <script type="text/javascript"> //js操作html的步骤 //1.获取标签对象 //注意:哪个对象调用下面的函数,该对象表示查找的范围 var obj1 = document.getElementById("input1"); document.write(obj1); //[object HTMLInputElement] //2.执行相关的操作 obj1.value = "hfjahegfj"; document.write("<hr />"); var obj2 = document.getElementsByClassName("input3"); document.write(obj2); //[object HTMLCollection] for(var i in obj2){ // document.write(obj2[i]); //obj2[i]:匹配到的标签对象 obj2[i].value = "jsjs"; } document.write("<hr />"); var obj3 = document.getElementsByName("text1"); document.write(obj3); //[object NodeList] var obj4 = document.getElementsByTagName("input"); document.write(obj4); //[object HTMLCollection] //如果只有一个标签,采用tagName,name,className获取 var obj2 = document.getElementsByClassName("input3")[0]; var obj3 = document.getElementsByName("text1")[0]; var obj4 = document.getElementsByTagName("input")[0]; </script> </body> </html>