本期博主给大家带来 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 处,插入一个新; 4、deleteCell(index):删除当前行的第 index+1 个; [表格的单元格对象] 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 事件
- 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 >
以上本次分享教程内容,感谢大家的持续关注,再见!
来源: http://www.cnblogs.com/liuyongqi/p/6720511.html