JS中的函数、Bom、DOM及JS事件
本期博主给大家带来JS的函数、Bom、DOM操作，以及JS各种常用的数据类型的相关知识，同时，这也是JavaScript极其重要的部分，博主将详细介绍各种属性的用法和方法。
一、JS中的函数
【函数的声明及调用】
1、函数声明的格式：
function 函数名(参数1,参数2,参数3,……){
//函数体
return 结果;
}
>>>函数的调用格式：
直接调用：函数调用的格式：函数名(参数一的值，参数二的值，……)；
事件调用：事件名=函数名( );
2、函数声明的几点强调：
①函数名的声明，必须符合小驼峰法则 (首字母小写，之后每个单词首字母大写)；
②参数列表，可以有参数，可以无参数，分别称为有参函数、无参函数；
③声明函数时的参数列表，称为“形参列表”（变量的名）；
调用函数时的参数列表，称为“实参列表”（变量的值）；
函数中，实际有效的参数取决于实参的赋值，未被赋值的形参，将为Undefined；
④函数如果需要返回值，可用return返回结果。
调用函数时，使用var 变量名=函数名（）；的方式，接受返回结果；
如果函数没有返回值，则接受结果为Undefined。
⑤函数中变量的作用域：
在函数中，使用var声明的变量，默认为函数局部变量，只在函数内部能用；
不用var声明的变量，默认为全局变量（函数中的全局变量，必须在函数调用后才能使用）；
函数的形参列表，为函数局部变量，只在函数内部使用。
⑥函数声明与函数调用，没有先后之分。即，调用语句可以写在声明语句之前。
【匿名函数的声明及调用】
1、声明一个匿名函数，直接赋给某个事件；
window.onload=function(){ };
2、使用函数表达式声明匿名函数;
声明函数表达式：var func=function(){ }
调用函数表达式：func（）；
>>>使用匿名函数表达式，则调用语句，必须在声明语句之后，否则报错（对比
常规函数声明与调用区别？)
3、使用自执行函数，声明并直接调用匿名函数：
①！function（）{ }（）；//使用任意运算符开头，一般使用！
②（function ( ){ }( )）；//使用（）将匿名函数之后的括号包裹
③(function( ){ })( ) //使用( )只包裹匿名函数表达式
三种写法特点：
①结构清晰，开头加！，结尾加()。不容易乱，推荐使用；
②可以表明匿名函数与之后的()为一个整体，推荐使用；
③无法表明函数与之后()为一个整体，不推荐使用：
window.onload=function(){
console.log("使用widow.onload调用匿名事件");
};
function func1(){
console.log("调用无参函数")
}
function func1(num1,num2,nnum3){
var num=num1;
console.log("调用有参函数");
console.log("num为："+num);
console.log("参数1为："+num1);
console.log("参数2为："+num2);
console.log("参数3为："+num3);
return 1;
}
var num=func2(1,2,3,4);
console.log(num);
【JS中代码执行顺序】
JS中代码运行，会先进行检查、装载，即声明变量、函数等操作：
然后再进入执行阶段，(变量的赋值等属于执行阶段)
所以，函数的声明属于检查装载阶段，函数的调用属于执行阶段。so，函数调用语
句写在函数声明语句之前，井没有任何关系。
所以，上述代码，执行流入
----------检查装载阶段------
var num；//声明变量
function funcN（) //声明函数
--- ----执行阶段-----
console. log(num);
num=10;
funNoi //执行函数的{ }中代码
【函数内部的属性】
Arguments对象
1、作用：用于保存调用函数时，所赋值的实参列表。
>>>当我们调用函数，并使用实参赋值时，实际上参数已经保存到Arguments数组中。即使没有形参，也可以使用Arguments[n]的
形式调用参数；
2、Arguments数组的个数：取决于实参列表，与形参无关形（顺序从0开始）；
但，当第n个位置的形参、实参、Arguments都存在时，形参与Arguments是同步的（即在函数中修改其中一个值，另一个会同步变化。）。
3、Arguments.callee是Arguments的重要属性，，用于返回arguments所在的函数引用；
arguments.callee( )可以调用自身函数执行；
在函数内部调用函数自身的写法，被称为递归，所以arguments.callee( )是递归调用时常用的方式。
this：函数调用语句所在的作用域，即，谁调用函数，this指向谁。
function func4(){
console.log("Arguments对象");
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
console.log(arguments[3]);
console.log(arguments[4]);
}
func4(1,2,3,4)
二、JS中的Bom浏览器对象模型
screen对象：
console.log(screen.whidth); //屏幕宽度
console.log(screen.height); //屏幕高度
console.log(screen.availablewhidth);//可用宽度
console.log(screen.availHeight); //可用高度=屏幕高度-底部任务栏。
location对象：
完整URL路径：
协议：//主机名（IP地址）：端口号/文件路径？传递参数（参数名=参数值/name1=value1&&name2=value2）
>>>（端口号不写默认为80端口）
console.log(location.href); //完整路径
console.log(location.protocol); //路径使用的协议http： https： ftp： file： mailto：
console.log(location.pathname); //文件路径部分
console.log(location.port); //端口号
console.log(location.search); //从?开始往后的部分
console.log(location.hostname); //主机名（IP地址）
console.log(location.host); //主机名+端口号
console.log(location.hash); //从#开始的锚点
// 使用JS设置页面跳转
//window.location = "http://www.baidu.com";
function locationAssign(){
加载新的文档，加载以后，可以回退
location.assign("http://www.baidu.com");
}
function locationReplace(){
使用新的文档，替换当前文档。替换以后，不能回退；
location.replace("http://www.baidu.com");
}
function locationReload(){
重新加载当前页面。
reload(true)：从服务器重新加载当前页面
reload():在本地刷新当前页面
location.reload(true);
}
history
1、length：浏览历史列表的个数
2、history.forward(); 前进到前一个页面
3、history.back(); 后退到后一个页面
4、history.go(-1); 跳转到浏览历史列表的任意位置
位置标志： 当前页为第0个，前一个页面第1个，后一个页面-1个
console.log(history);
function historyForward(){
history.forward();
}
function historyBack(){
history.back();
}
function historyGo(){
history.go(-1);
}
Navigator 了解
console.log(navigator.appName); //产品名称
console.log(navigator.appVersion); //产品版本号
console.log(navigator.userAgent); //用户代理信息
console.log(navigator.platform); //系统平台
navigator.plugins。返回一个数组，检测浏览器安装的所有插件
>>>主要的属性：
description:插件的描述信息
filename:插件在本地磁盘的文件名
length:插件的个数
name：插件名
console.log(navigator.plugins);//检查浏览器安装的插件信息
navigator.mimeTypes 浏览器插件，所支持的文件类型
>>>主要属性
description：MIME类型描述
enabledPlugin：支持此类型的浏览器插件
suffixes：此类型可能的后缀名
type：MIME类型的写法，例如： image/x-icon text/css
console.log(navigator.mimeTypes);//检查浏览器安装的插件支持的文件类型
【重点】window对象的常用方法
>>>window对象中的所有方法，均可省略window.，比如close( );
1、prompt：弹窗接受用户输入；
2、alert：弹窗警告；
3、confirm：带有确认/取消按钮的提示框；
4、close：关闭浏览器选项卡；
5、open：重新打开一个窗口，传入参数：URL/窗口名称/ 窗口特征（兼容性很差）
6、setTimeout：设置延时执行，只会执行一次；
7、setInterval：设置定时器，循环每隔n毫秒执行一次；
两个参数，需要执行的function/毫秒数；
8、clearTimeout：清除延时；
9、clearInterval：清除的定时器；
传入参数，调用setInterval时返回一个ID，通过变量接收ID，传入clearInterval。
var isTrue = confirm("我是帅哥吗？"); if (isTrue) { alert("我也是这么觉得！"); } else{ alert("你是不是瞎？"); } function closeWindow(){ close(); } function openWindow(){ window.open("http://www.baidu.com","百度一下","height=300px,width=200px,"); } var timeOutId = setTimeout(function(){ console.log("setTimeout"); },5000); var num = 10; var interValId = setInterval(function (){ console.log(num); num--; if(num==0){ clearInterval(interValId); } },1000); function clearTimeOutBtn(){ clearTimeout(timeOutId); } function clearIntervalBtn(){ clearInterval(interValId); } console.log("\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"); </script> </head> <body> <button onclick="locationReplace()">location.replace();使用新的文档替换当前文档</button> <button onclick="locationAssign()">location.assign();加载新的文档</button> <button onclick="locationReload()">location.reload();重新加载当前的文档</button> <br /> <button onclick="historyBack()">使用history.back()后退</button> <button onclick="historyForward()">使用history.forward()前进</button> <button onclick="historyGo()">使用history.go()跳转到历史列表任意位置</button> <br /> <button onclick="closeWindow()">关闭浏览器窗口</button> <button onclick="openWindow()">打开一个新的浏览器窗口</button> <button onclick="clearTimeOutBtn()">clearTimeOut</button> <button onclick="clearIntervalBtn()">clearInterval</button> </body> </html>
三、JS中的DOM操作
【Dom树节点】
DOM节点分为三大类：元素节点、文本节点
【查看节点】
1、getElementById：通过ID获取唯一的节点；多个同名ID，只会取第一个；
2、getElementByName：通过Name取到一个数组，包括1到多个节点；
使用方式：通过循环，取到每一个节点。循环次数：从0开始，<数组.length 。
【查看和设置属性节点】
1、查看属性节点：getAttribute("属性名")；
2、设置属性节点：setAttribute("属性名"，"属性值");
【JS修改样式总结】
1、.className：为元素设置一个新的class名字。
div1.className="class1";
2、.style：为元素设置一个新的样式，注意驼峰命名法；
div1.style.backgroundColor="red";
3、.style.cssText：为元素同时修改多个样式；
div1.style.cssText="width: 100px; height: 100px;";
【查看节点】
1、tagName属性：获取节点的标签名；
2、innerHTML：设置或者获取节点内部的所有HTML代码；
3、innerText：设置或者获取节点内部的所有文字；
window.onload=function( ){ var div1=document.getElementById("div1"); console.log(div1); } function getById(){ //取到元素节点的样式属性节点 var divStyle=document.getElementById("div1").style; divStyle.backgroundColor="blue";//所有节点属性一律使用驼峰命名法 //取到元素节点 var div=document.getElementById("div1"); div.innerHTML="liuyongqi";//重置div中的HTML代码 } function getByName(){ var div=document.getElementsByName("div1"); for(var i=0;i<div.length;i++){ div[i].style.backgroundColor="blue"; } } function getByTagName(){ var div=document.getElementsByTagName("div"); for(var i=0;i<div.length;i++){ div[i].style.backgroundColor="blue"; } } function getByClassName(){ var div=document.getElementsByClassName("div1"); for(var i=0;i<div.length;i++){ div[i].style.backgroundColor="blue"; } } function getAttr(){ var img1=document.getElementById("img1"); alert(img1.getAttribute("src")); } function setAttr(){ var img1=document.getElementById("img1"); img1.setAttribute("src","img/hot-caramel-macchiato-20151022185811.jpg"); img1.setAttribute("title","我被setAttribute设置了title"); img1.setAttribute("style","width: 100px;height: 100px;"); } </script> <style type="text/css"> .div1{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <button onclick="getById()">通过ID修改divcolor</button> <button onclick="getByName()">通过name修改divcolor</button> <button onclick="getByTagName()">通过tagName修改divcolor</button> <button onclick="getByClassName()">通过className修改divcolor</button> <button onclick="getAttr()">通过getattribute显示图片路径</button> <button onclick="setAttr()">通过setattribute更换图片</button> <img src="img/green-tea-cream-frappuccino-20151022185851.jpeg" id="img1"/> <div id="div1" name="div1" class="div1"> div文字 </div> <div id="div1" name="div1" class="div1"> div文字 </div> <div id="div1" name="div1" class="div1"> div文字 </div> </body> </html>
【获取层次节点的常用属性】
1、.childNodes：获取元素的所有子节点（包含元素节点/文本节点）；
2、.firstChild：获取元素的第一个子节点；
3、.lastChild：获取元素的最后一个子节点；
4、.ownerDocument：获取当前文档根节点，在HTML文档中，为document节点；
5、.parentNode：获取当前节点的父节点；
6、.previousSibling：获取当前节点的前一个兄弟节点；
7、.nextSibling：获取当前节点的后一个兄弟节点；
！注：上述属性，均会获得所有的元素节点和文本节点，如果只需要元素节点，需要使用对应Element属性，
例如：firstChild---->firstElementChild
8、.attributes：获取当前元素节点的所有属性节点；
var ul1=document.getElementById("ul1");
var lis=ul1.getElementsByTagName("li");//获取ul1里面的所有li
console.log(ul1.childNodes);//获取ul1里面的所有子节点（包含元素节点/文本节点）
console.log(ul1.childNodes);
}
【创建并新增节点】
1、.createElement("标签名")：创建一个新的节点。需要配合.setAttribute()方法设置新节点的相关属性。
2、.appendChild(节点名)：在某元素最后追加一个新节点
3、.insertBefore：将新节点，插入到目标节点之前；
4、克隆节点.cloneNode(true/false)：需要克隆谁，就用谁去调用克隆对象；
>＞>传递参数可以为true或false
①true： 克隆当前节点及所有子节点；
⑨false：只克隆当前节点，不克隆子节点(默认)；
【删除/替换节点】
1、.removeChild(需删除节点)：从父容器中，删除指定节点；
2、.replaceChild(新节点，被替换节点)：用新节点替换指定节点，如果新节点已有在页面中存在，会先删除掉原有
节点，再替换掉指定节点；
function appendImg(){ //1、创建一个图片节点 var img=document.createElement("img"); //2、给img节点设置属性 img.setAttribute("src","img/green-tea-cream-frappuccino-20151022185851.jpeg"); //3、将设置好的img节点追加到body最后 document.body.appendChild(img); } function insertImg(){ //1、创建一个图片节点 var img=document.createElement("img"); //2、给img节点设置属性 img.setAttribute("src","img/green-tea-cream-frappuccino-20151022185851.jpeg"); //3、在两个ul之间插入图片 var ul2=document.getElementById("ul2"); document.body.insertBefore(img,ul2); } function copyUl(){ var ul2=document.getElementById("ul2"); //克隆ul2节点 var ul2clone=ul2.cloneNode(true); //在按钮前，插入新节点（由于ID同名问题，第一个以后都在前一个新ul2之前插入。可用变量控制！） var btn=ul2.nextElementSibling; document.body.insertBefore(ul2clone,btn); } </script> <style type="text/css"> ul{ width: 600px; list-style: none; padding: 0; display: flex; background-color: yellow; justify-content: space-around; margin-top: 20px; } </style> </head> <body> <ul id="ul1" class="ul1"> <li>第一项</li> <li>第二项</li> <li>第三项</li> <li>第四项</li> </ul> <ul id="ul2"> <li>11111</li> <li>22222</li> <li>33333</li> <li>44444</li> </ul> <button onclick="appendImg()">在最后插入一幅图片</button> <button onclick="insertImg()">在两个ul之间插入一幅图片</button> <button onclick="copyUl()">copy一个ul2</button> </body> </html>
【表格对象】
1、rows属性：返回表格中所有行，数组；
2、inserRow(index)：在表格的第index+1行，插入一个新行；
3、deleteRow(index)：删除表格的第index+1行；
[表格的行对象]
1、cells属性：返回当前行中所有单元格，数组；
2、rowIndex属性：返回当前行，在单元格中的索引顺序，从0开始；
3、insertCell(index)：在当前行的第index+1处，插入一个新<td>；
4、deleteCell(index)：删除当前行的第index+1个<td>；
[表格的单元格对象]
1、 cellIndex属性：返回单元格在改行的索引顺序，从0开始；
2、 innerHTML属性： 返回或设置当前单元格中的HTML代码；
3、 align属性： 设置当前单元格的水平对齐方式；
4、 className属性： 设置单元格的class名称；
function newRow(){ var table = document.getElementById("table"); // 在表格的最后一行，插入一个新行 var newRow = table.insertRow(table.rows.length-1); // 给新行设置单元格 var cell0 = newRow.insertCell(0); cell0.innerHTML = "葵花宝典"; var cell1 = newRow.insertCell(1); cell1.innerHTML = "66元"; getSum(); } function delRow(){ var table = document.getElementById("table"); if(table.rows.length>2){ table.deleteRow(table.rows.length-2); }else{ alert("已经没了！删毛线啊！"); } getSum(); } function changeTitle(){ var color = prompt("请输入6位16进制颜色值："); var table = document.getElementById("table"); table.rows[0].style = "background-color:#"+color; } function copyRow(){ var table = document.getElementById("table"); var copyRow = table.rows[table.rows.length-2].cloneNode(true); var heji = table.rows[table.rows.length-1]; // 由于浏览器，自动将表格的<tr>包裹在<tbody>中 // 所以<tr>实际并非<table>的子节点，故需取到<table>中的<tbody>进行插入 if(table.rows.length>2){ table.getElementsByTagName("tbody")[0].insertBefore(copyRow,heji); }else{ alert("没有可以复制的行"); } getSum(); } function getSum(){ var table = document.getElementById("table"); var rows = table.rows; if(rows.length<=2){ alert("没有可计算的行！"); rows[rows.length-1].cells[1].innerHTML = 0+"元"; return; } var sum = 0; for(var i=1;i<=rows.length-2;i++){ var cells = rows[i].cells; sum += parseFloat(cells[cells.length-1].innerText); } rows[rows.length-1].cells[1].innerHTML = sum.toFixed(2)+"元"; } window.onload = function(){ getSum(); } </script> <style type="text/css"> table{ border-collapse: collapse; width: 400px; } td,th{ border: 1px solid #000000; } table tr:last-child{ color: red; } </style> </head> <body> <table id="table"> <tr> <th>书名</th> <th>价格</th> </tr> <tr> <td>看得见风景的房间</td> <td>30.00元</td> </tr> <tr> <td>幸福从天而降</td> <td>18.50元</td> </tr> <tr> <td>60个瞬间</td> <td>30.99元</td> </tr> <tr> <td>合计</td> <td></td> </tr> </table> <br /> <button onclick="newRow()">增加一行</button> <button onclick="delRow()">删除最后一行</button> <button onclick="changeTitle()">修改标题样式</button> <button onclick="copyRow()">复制最后一行</button> <button onclick="getSum()">合计</button> </body> </html>
四、JS事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background-color: yellow;
}
#div2{
width: 100px;
height: 100px;
background-color: blue;
}
#div3{
width: 50px;
height: 50px;
background-color: red;
}
</style>
<script type="text/javascript">
/*【JS中的事件分类】
1、鼠标事件：
click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup;
2、键盘事件：
keydown：键盘按下去触发；
keypress：键盘按下松开的瞬间触发；
keyup：键盘抬起时触发；
[注意事项（了解）]
①执行顺序：keydown——keypress——keyup；
②长按时，会循环不断地执行keydown——keypress；
③有keydown事件，不一定有keyup事件（例如事件触发过程中，鼠标移走，不会触发keyup）
④keypress事件，只能捕获字母数字符号建，不能捕获功能键；
keyup/keydown基本可以捕获所有功能键（特殊除外）；
⑤keypress区分大小写，keydown和keyup不区分；
⑥keydown和keyup区分大小键盘，keypress不区分；
【确定键盘触发按键】
①在触发函数中，传入参数e，代表按键事件；
②通过e.keyCode==？，确认Ascii码值，进而确定按键；
③兼容所有浏览器系统的写法(一般不必要)：
var evn=e||event;//取到键盘事件；
var code=evn.keyCode||evn.which||evn.charCode;//取到按键编码；
*/
document.onkeydown=function(e){
var evn=e||event;
var code=evn.keyCode||evn.which||evn.charCode;
console.log(e);
if(code==13){
alert("你按了回车")
}
}
document.onkeypress=function(e){
console.log(e);
}
document.onkeyup=function(e){
console.log(e);
}
/*【JS中的DOM0模型】
1、内联模型：直接将函数名作为HTML标签的某个事件属性的属性值；
eg：<button onclick="func()">按钮</button>
缺点：违反了w3c关于HTML与JavaScript分离的基本原则；
2、脚本模型：在JS脚本中通过时间属性进行绑定；
eg：window.onload=function(){}
局限性：同一节点 只能绑定一个同类型事件；
【JS中的DOM2事件模型】
1、添加事件绑定：
IE10之前：btn1.btn1.attachEvent("onclick",函数)；
其他浏览器：btn1.addEventListener("click",函数，true/false)；
参数三：false（默认），表示事件冒泡；true，表示事件捕获
兼容写法：if((btn1.attachEvent){
btn1.attachEvent();
}else{
btn1.addEventListener();
}
优点：同一节点，可以添加多个同类型事件的监听器；
2、取消事件绑定：
注：如果取消事件绑定时，那么在绑定时，回调函数必须使用有名函数，不能使用匿名函数，因为在取消事件绑定时，需要传入函数名
其他浏览器 .removeEventListener("click",函数名)；
IE浏览器：.decathEventListener("onclick",函数名)；
window.onload=function(){ var btn1 = document.getElementById("btn1"); function func1(){ alert(1); } btn1.addEventListener("click",func1,false); btn1.addEventListener("click",function(){ alert(2); },false); var btn2 = document.getElementById("btn2"); btn2.addEventListener("click",function(){ btn1.removeEventListener("click",func1); },false); //if(btn1.addEventListener())； } </script> </head> <body> <button id="btn1">点击我弹个窗</button> <button id="btn2">点击我就是不让他弹</button> <div id="div1"> <div id="div2"> <div id="div3">div3</div> div2 </div> div1 </div> <a href="../01-js变量输入输出/01_JS简介和变量.html">点击跳转页面</a> </body>
【JS中的事件流】
1、事件冒泡：当某DOM元素触发某事件时，会从当前DOM开始，逐个触发其祖先元素的同类型事件，直到DOM根节点；
DOM0模型：均为事件冒泡；
IE中使用.decathEventListener("onclick",函数名)添加事件，均为冒泡；
其他浏览器.addEventListener添加事件，并设置第三个参数为false时，为冒泡；
2、事件捕获：当某DOM元素触发某事件时，会从DOM根节点开始，逐个触发其祖先元素的同类型事件，直到触发到当前元素为止；
只有使用.addEventListener添加事件，并设置第三个参数为true时，才进行捕获；
3、阻止事件冒泡：
IE浏览器：将 e.cancelBubble 设置为 true;
其他浏览器：调用e.stopPropagation();方法
兼容写法：function stop(e){
e = e || window.event;
if (e.stopPropagation) {
e.stopPropagation(); //IE以外
} else {
e.cancelBubble = true; //IE
}
}
3、阻止默认事件：
IE浏览器中：将e.returnValue属性设为false；
其他浏览器：调用e.preventDefault();方法
兼容写法：function eventHandler(e) {
e = e || window.event;
// 防止默认行为
if (e.preventDefault) {
e.preventDefault(); //IE以外
} else {
e.returnValue = false; //IE
}
}
var div1=document.getElementById("div1"); var div2=document.getElementById("div2"); var div3=document.getElementById("div3"); function stop(e){ e = e || window.event; if (e.stopPropagation) { e.stopPropagation(); //IE以外 } else { e.cancelBubble = true; //IE } } div1.addEventListener("click",function(e){ console.log("div1触发了click事件"); stop(); e.stopPropagation(); },false); div2.addEventListener("click",function(e){ console.log("div2触发了click事件"); stop(); e.stopPropagation(); },false); div3.addEventListener("click",function(e){ console.log("div3触发了click事件"); stop(); e.stopPropagation(); },false); </script> </html>
以上本次分享教程内容，感谢大家的持续关注，再见！
