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>

 

以上本次分享教程内容,感谢大家的持续关注,再见!








posted @ 2017-04-16 23:04 Q的前端世界 阅读(...) 评论(...) 编辑 收藏