Web-Day6笔记
一、ECMAScript语法
1.循环语句
简单for循环和for-in循环【数组】
while语句和do-while语句
语法：
初始化表达式
while(条件表达式){
循环体
循环之后的操作表达式
}
初始化表达式
do{
循环体
循环之后的操作表达式
}while(条件表达式);
for(初始化表达式；条件表达式；循环之后的操作表达式){
循环体
}
说明：四要素
掌握：
a.while和do-while的区别
b.简单for循环和for-in 的区别
<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("
"); //do-while var n2 = 0; do{ document.write(n2); n2++; }while(n2 < 10); document.write("
"); //面试题：while和do-while之间的区别 var m1 = 3; while(m1 < 1){ document.write("hello"); } document.write("
"); 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("
"); //for-in循环 //for-in循环遍历数组，直接获取的是数组的索引，区别于Python var arr = [2,5,6,56] for(var i in arr){ document.write(arr[i]); } document.write("
"); //嵌套循环 /* *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("
"); } script> body> html>
2.函数
定义：
方式一：使用function关键字
function 函数名(形参列表){
函数体
}
调用：函数名(实参列表)
方式二：匿名函数【掌握】
var 变量名 = function(形参列表){
函数体
}
调用：变量名（实参列表）
方式三：js中的内置对象Function【动态方式，很少使用，了解】
var 变量名 = new Function(“形参列表”，“函数体和返回值”)
调用：变量名（实参列表）
<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>
全局函数
<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("
"); 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("
"); var num = parseInt(s3); document.write(num + 1); script> body> html>
3.全局变量和局部变量
全局变量：在script标签中定义一个变量，这个变量就可以当前文件的所有js部分使用
局部变量：在函数内部定义一个变量，该变量只能在函数的内部使用
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <script type="text/javascript"> //全局变量 var num1 = 10; document.write("当前script标签" + num1); document.write("
"); function check(){ //在函数内部定义的变量，只能在当前函数中被访问 var num2 = 20; document.write("当前函数" + num2); //如果函数内部的变量想要在函数外部使用，则设置返回值 return num2; } check(); document.write("
"); document.write("当前script标签中的局部变量" + check()); document.write("
"); script> <script type="text/javascript"> document.write("其他script标签" + num1); document.write("
"); //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)
<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] + "
"); } 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():截取数组【切片】
<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("
"); 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对象
<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()<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("
"); //注意：如果不设置参数，则结果为当前时间，如果设置参数，则为设置的时间 //年月日，时分秒，缺少哪个数据，则默认为00 var date2 = new Date("2016-04-17"); document.write(date2); document.write("
"); var date3 = new Date("2016/4/17"); document.write(date3); document.write("
"); //参数：年月日时分秒毫秒 var date4 = new Date(2017,3,28,10,10,10,546); document.write(date4); document.write("
"); //根据时间戳获取指定的时间 var date5 = new Date(10000); document.write(date5); document.write("
"); //getxxx；获取 //获取一个月中的第几天 document.write(date4.getDate()); document.write("
"); //0~11 document.write(date4.getMonth()); document.write("
"); //2016-4-17 //setxxxx：设置,注意：如果月份超过11.则年份增加1 date2.setMonth(13); document.write(date2); document.write("
"); //hour,minute document.write(date4.toLocaleDateString()); document.write("
"); document.write(date4.toLocaleString()); document.write("
"); document.write(date4.toLocaleTimeString()); document.write("
"); //掌握 //获取指定时间的时间戳【单位为毫秒】 document.write(Date.parse("2015-6-18")); document.write("
"); //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("
"); //加法：拼接，string document.write(a1 + a2); document.write("
"); document.write(typeof (a1 + a2)); script> body> html>
4.4math对象
<html> <head> <meta charset="UTF-8"> <title>title> head> <body> <script type="text/javascript"> //格式：Math.函数() //四舍五入 document.write(Math.round(4.6)); //5 document.write("
"); //向上取整 ceil document.write(Math.ceil(4.6)); //5 document.write("
"); //向下取整：floor document.write(Math.floor(4.6)); //4 document.write("
"); //abs //pow(n,m) 求n的m次方 //sqrt() 开平方 //random() 求随机数，0~1之间的随机数【浮点型】 document.write(Math.random()); document.write("
"); //4~10 document.write(parseInt(Math.random() * 6 + 4)); script> body> html>
二、BOM
1.BOM简介
Broswer Object Model，浏览器对象模型，是一个用于访问浏览器的和计算机屏幕的对象的集合。可以通过全局对象window访问这些对象【通过window对象来控制BOM】
注意：在客户端的js中，如果定义的内容没有指明对象的话，则默认都属于window
<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中的对象
<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><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><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的函数
<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的事件
<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> body> html>
3.提示框
alert():警告框
confirm()：确认框
prompt()：输入框
<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间歇性定时器
作用：每隔指定的事件触发定时器，至少会执行一次
<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> body> html>
三、DOM【重点】
1.DOM简介
Document Object Model.文档对象模型
document对象
想要对标记型文档【html】进行操作，首先需要将标记型文档中的内容【标签/标记/元素,属性，文本内容】封装成对象，封装成对象的目的是为了更方便的去操作文档以及文档中的内容
明确一点：在加载html页面的时候，web浏览器会生成一个树形结构，表示页面的内部结构，被称为DOM树【节点树】，见图
<html> <head> <meta charset="UTF-8"> <title>aaatitle> head> <body> <div id="box">正文div> body> html>
2.获取元素/节点对象
getElementById():根据id的值获取指定的标签对象，返回的是对象 【常用】
getElementByTagName():根据标签名称获取标签对象，返回集合
getElementByName()：根据name属性的值获取指定的标签对象，返回集合
getElementByClassName()：根据class属性的值获取指定的标签对象，返回集合 【常用】
<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("
"); 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("
"); 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>