day08
1.window对象方法——定时器
JavaScript是单线程语言,所有代码按顺序执行
1.1超时调用-setTimeout()
setTimeout(code,millisec)
功能:在指定的毫秒数后调用函数或计算表达式
参数说明:
1.code：要调用的函数或要执行的JavaScript代码
2.millisec：在执行代码前需要等待的毫秒数
setTimeout方法返回一个id值，通过它取消超时调用
clearTimeout()
<script>
setTimeout(function(){
alert(1);
},2000)
</script>
1.2.间歇调用-setInterval()
间歇调用-setInterval(code,millisec)
功能:每隔一段时间执行一次代码
clearInterval()
eg:num=0,max=10,每过一秒num++,当num>max清除定时器
<script>
var num=0,max=10;
var interval = setInterval(function(){
num++;
console.log(num)
if(num>max){
clearInterval(interval)
}
},1000)
</script>
2.location对象
location对象提供了与当前窗口中加载的文档有关信息,还提供了一些导航的功能,他既是window对象的属性,也是document对象的属性。
语法：location.href
功能:返回当前加载页面的完成URL
location.href与window.location.href等价
语法：location.hash
功能：返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串
语法：location.host
功能:返回服务器名称和端口号
语法：location.hostname
功能:返回不带端口号的服务器名称
语法：location.pathname
功能：返回URL中的目录和(或)文件名
语法：location.port
功能:返回URL中指定的端口号,如果没有,返回空字符串
语法：location.protocol
功能:返回页面使用的协议
语法:location.search
功能:返回URL的查询字符串，这个字符串以问号开始。
位置操作
改变浏览器的位置的方法:
location.href属性
location对象其他属性也可改变URL
location.hash
location.search
location.replace(url)
location.reload()
功能:重新加载当前显示的页面
说明:
.location.reload()从缓存加载
.location.reload(true)从服务器重新加载
3.history对象
history对象保存了用户在浏览器中访问页面的历史记录
语法：history.back()
功能:回到历史记录的上一步
相当于是用了history.go(-1)
//-1表示前一步,-2前两部
语法：history.go(1)
功能:回到历史记录的前一步
相当于history.forward()
语法：history.go(-n)
功能:回到历史记录的前n部
语法:history.go(n)
功能:回到历史记录的后n步
4.screen对象
screen对象包含有关客户端显示屏幕的信息
screen.availWidth
screen.availHeight
5.navigator对象
1.掌握Navigator对象的userAgent属性
2.掌握如何判断浏览器的类型
3.掌握如何判断设备的终端是移动还是PC
UserAgent:用来识别浏览器名称，版本，引擎以及操作系统等信息的内容。
//检测浏览器类型
if(/Android|iphone|webOS/i.test(navigator.userAgent)){
location.href="mobile.html"
}else if(/ipad/i.test(navigator.userAgent)){
location.href="pad.html"
}
6.1DOM扩展
6.1父节点parentNode(亲爹)
<ul>
<li>小米手机 <a href="#">删除</a> </li>
<li>苹果手机 <a href="#">删除</a> </li>
<li>华为手机 <a href="#">删除</a> </li>
</ul>
<script>
var shows=document.getElementsByTagName("a");
for(let i=0;i<shows.length;i++){
shows[i].onclick=function(){
this.parentNode.style.display="none";
return false;
}
}
</script>
6.2子节点childNodes和children的区别
childNodes,将子节点的背景色变为红色
长度为7，空格也占长度
<ul id="parent">
<li>小米手机</li>
<li>苹果手机</li>
<li>华为手机</li>
</ul>
<script>
let parent=document.getElementById("parent");
let childs=parent.childNodes;
for(let i=0;i<childs.length;i++){
if(childs[i].nodeType==1){
childs[i].style.backgroundColor = "red";
}
}
</script>
//chrome下结果为7,IE9以下结果为3
//在chrome下将空的文本节点,也算在内容
children,将子节点的背景色变为红色
长度为3
<ul id="parent">
<li>小米手机</li>
<li>苹果手机</li>
<li>华为手机</li>
</ul>
<script>
let childs=document.getElementsByTagName("ul")[0].children;
for(let i=0;i<childs.length;i++){
childs[i].style.backgroundColor="red";
}
console.log(childs);
</script>
firstChild //包含所有类型的节点
firstElementChild //IE9以下不兼容
lastChild //所有类型的节点
lastElementChild //IE9以下不支持
111.png
<ul id="parent">
<li>小米手机</li>
<li>苹果手机</li>
<li>华为手机</li>
</ul>
<script>
var parent=document.getElementById("parent");
var fc=document.getElementById("parent").firstChild;
var fe=parent.firstElementChild;
console.log(fc);
console.log(fe);
</script>
6.3兄弟节点
nextSibling
nextElementSibling
//IE9以下不支持
previousSibling//节点属性
previousElementSibling //节点内容
//IE9以下不支持
<div>
<p>hello 01</p>
<p id="test">hello 02</p>
<p>hello 03</p>
</div>
<script>
let test = document.getElementById("test");
let ps = test.previousSibling;
let pss = test.previousElementSibling;
console.log(ps);
console.log(pss);
</script>
6.4定位（只读属性）
offsetParent //获取给了定位元素的父级
offsetLeft //返回元素的水平偏移位置。 返回number
offsetTop //返回元素的垂直偏移位置。
offsetWidth //返回元素的宽度
offsetHeight //返回元素的高度
//css
<style>
*{margin: 0;
padding: 0;}
div{
width: 100px;
height: 100px;
background:red;
margin: 100px;
position: absolute;
left: 100px;
border: 10px solid green;
}
</style>
//html
<div id="test">
</div>
<script>
let test=document.getElementById("test");
let offl=test.offsetLeft;
let offt=test.offsetTop;
let offw=test.offsetWidth;
let offh=test.offsetHeight;
test.offsetWidth="200px";
console.log(offl);
console.log(offt);
console.log(offw);
console.log(offh);
</script>
6.5操作元素的属性
<p id="test">hello world</p>
<script>
var p=document.getElementById("test");
function changeStyle(ele,attr,value){
ele.style[attr]=value;
}
changeStyle(p,"backgroundColor","green")
</script>
6.5.1获取,设置,删除
getAttribute(AttrName);
setAttribute(AttrName,AttrValue);
removeAttribute(AttrName);
<p id="test" class="one">hello world</p>
<script>
var test=document.getElementById("test");
test.setAttribute("class","two");
test.removeAttribute("class");
var cValue=test.getAttribute("class");
console.log(cValue);
</script>
6.6浏览器窗口可视区域的大小
6.6.1、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的可见内部高度
• window.innerWidth - 浏览器窗口的可见内部宽度
6.6.2、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
//没有DOCTYPE的IE中,浏览器显示窗口可以通过以下获取
Document对象的body属性对应HTML文档的<body>标签
<script>
var windowWidth=window.innerWidth;
var windowHeight=window.innerHeight;
var wd=document.documentElement.clientHeight;
var ww=document.documentElement.clientWidth;
var dh=document.body.clientHeight;
var dw=document.body.clientWidth;
console.log(windowWidth);
console.log(windowHeight);
console.log(ww);
console.log(wd);
console.log(dh);
console.log(dw);
</script>
6.7获取网页内容的宽高
document.documentElement.scrollHeight
document.documentElement.scrollWidth
<div>
</div>
<script>
var windowWidth=window.innerWidth;
var windowHeight=window.innerHeight;
var dw=document.documentElement.scrollWidth;
var dh=document.documentElement.scrollHeight;
console.log(windowWidth,windowHeight);
console.log(dw,dh);
</script>
6.8文档碎片
- 文档碎片可以提高DOM操作性能
- document.createDocumentFragment()
- 原理:将dom暂存在fragment上，之后一次性添加到dom
<ul id="parent">
</ul>
<button id="btn">btn</button>
<script>
var btn=document.getElementById("btn");
var parent=document.getElementById("parent");
var frame=document.createDocumentFragment();
btn.onclick=function(){
for(let i=0;i<=10;i++){
let li=document.createElement("li");
frame.appendChild(li);
}
parent.appendChild(frame);
}
</script>
6.9表格应用
- 获取
tBodies,tHead,rows,cells - 隔行变色
- 鼠标移入变色
//css
<style>
table,td,th{
border: 1px solid #333;
}
table{
border-collapse: collapse;
width: 500px;
line-height: 50px;
text-align: center;
}
</style>
/html
<table id="table">
<thead>
<tr><th>商城</th><th>手机</th></tr>
</thead>
<tbody>
<tr><td>JD商铺</td><td>苹果手机</td></tr>
<tr><td>天猫</td><td>华为手机</td></tr>
<tr><td>拼多多</td><td>魅族手机</td></tr>
<tr><td>苏宁</td><td>小米手机</td></tr>
</tbody>
</table>
<script>
var table=document.getElementById("table");
var thead=table.tHead;
var tbody=table.tBodies[0];
var rows=tbody.rows;
var firstCell=rows[0].cells[0];
thead.style.backgroundColor="#eee";
console.log(rows);
for(let i=0;i<rows.length;i++){
rows[i].style.backgroundColor=(i%2==0)?"#ff2d51":"#44cef6";
}
firstCell.innerHTML="银泰百货";
</script>
- 添加，删除一行
<style>
tbody tr:nth-child(even){
background: #ff2d51;
}
tbody tr:nth-child(odd){
background: #44fce6;
}
table,td,th{
border: 1px solid #333;
}
table{
border-collapse: collapse;
width: 500px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div>
手机品牌<input type="text" id="phone">
价格<input type="text" id="price">
<button id="btn">添加</button>
</div>
<table id="table">
<thead>
<tr><th>手机品牌</th><th>价格</th></tr>
</thead>
<tbody>
<tr><td>苹果7</td><td>8k</td></tr>
</tbody>
</table>
<script>
var btn=document.getElementById("btn");
var phone=document.getElementById("phone");
var price=document.getElementById("price");
var tbody=document.getElementById("table").tBodies[0];
btn.onclick=function(){
var tr=document.createElement("tr");
var td=document.createElement("td");
td.innerHTML=phone.value;
tr.appendChild(td);
var td1=document.createElement("td");
td1.innerHTML=price.value;
tr.appendChild(td1);
console.log(td1);
tbody.appendChild(tr);
}
</script>
</body>
7.function
7.1.函数的创建方式
开发过程中推荐使用第一种
1.function go(a){
console.log(a)
}
2.var go = function(a){
console.log(a)
}
3.var go = new Function(“a”,”console.log(a)”)
es6箭头函数
var go=()=>{
console.log("asdfa");
}
go();
7.2.函数的返回值
a.什么是函数的返回值
定义:函数的执行结果
函数可以没有return�说明:
1.函数会在执行完return语句之后停止,并立即退出
2.return语句也可以不带任何返回值，用于提前停止函数执行
function show(){
return "hello world" //return的作用:把结果返回到函数外部
}
var b = show(); // 在哪调用返回到哪里；
7.3. 函数的传参
可变参(不定参)arguments
参数的个数可变,参数数组
//对传入的参数求和
function sum(){
var result=0;
for(var i = 0;i<arguments.length;i++){
result+=arguments[i];
}
return result;
}
alert(sum(2,3))
7.4.JS中重载
重载:根据传入的参数不同,动态决定调用那种方法
函数内部有一个arguments对象来管理函数传入的参数
<script>
function test(){
if(arguments.length==1){
console.log(arguments[0]);
}else if(arguments[1]){
console.log(arguments[0]+arguments[1]);
}else{
console.log("asdfasdf");
}
}
test();
test(1);
test(2,3);
</script>
js不支持重载,要想支持重载,可以使用arguments对象
8.基本类型和引用类型的区别
总结：
基本类型只穿值
引用类型既传值也穿址
1.基本类型的值在内存中占据固定大小的空间,因此被保存在栈内存中。
2.引用类型的值是对象,保存在堆内存中。
3.包含引用类型值的变量实际上包含的并不是对象本身,而是一个指向该对象的指针。
4.从一个变量向另一个变量复制引用类型的值，复制的其实是指针,因此两个变量最终都指向同一个对象。
9 数组的常用方法
9.1.创建数组的方式
9.1.1字面量
var arr =[1,2,3]
9.1.2构造函数(了解)
var arr = new Array();
arr[0] = 1;
9.2数组的遍历
for(var i=0;i<arr.lengh;i++){
console.log(arr[i])
}
for(var k in arr){
console.log(arr[k])
}
9.3.检测数组
if(arr instanceof Array){}
if(Array.isArray(arr)){}
9.4.数组的方法
9.4.1增加(改变数组的内容)
push() //从尾部添加
var arr = [1,2,3];
arr.push(4);
console.log(arr); //1,2,3,4
unshift() // 从头部添加
var arr = [1,2,3];
arr.unshift(0);
alert(arr); //0,1,2,3
push方法复制数组
var arr = [12,11,33];
var b = [];
for(var i=0;i<arr.length;i++){
b.push(arr[i]);
}
console.log(b);
9.4.2增加 concat()(不改变原来数组内容)
concat(value|[arr]) 本方法可以传单个值,也可以传数组
var arr = [1,2,3];
var b = arr.concat(4);
console.log(arr); //1,2,3
console.log(b); //1,2,3,4
eg:复制数组
var arr=[1,2,3];
var b =[].concat(arr);
console.log(b); //1,2,3
9.4.2删除(改变)
不接收参数
pop() //从尾部删除
var arr = [1,2,3];
alert(arr.pop()); //3
alert(arr) //1,2
shift() // 从头部删除
var arr = [1,2,3];
alert(arr.shift()); //1
alert(arr) //2,3
9.4.3修改
指定三个参数arrObject.splice(index,howmany,item)
指定三个参数:起始位置,删除的项数,插入的数量
var arr = [1,2,3,4,5];
arr.splice(0,2,6,7);
alert(arr); //6,7,4,5
arrayObject.slice(start,end)
1个参数
var arr=[1,2,3,4];
var b=arr.slice(1);
console.log(b); //2,3,4
2个参数
var c = arr.slice(1,3);
console.log(c); //2,3
slice复制数组
var arr = [1,2,3];
var b = arr.slice(0);
console.log(b);
9.4.4查询
arr[index] 查询对应下标的值
var arr=[1,2,3];
console.log(arr[0]); //1;
indexOf(value) 查询对应值的下标
var arr=[1,2,3,4];
console.log(arr.indexOf(1)); //0
//如果没有对应的值,则返回-1
9.4.5splice(改变原来数组) 包含增,删,改
增加,指定三个参数splice(index,howmany,item)
splice(index,howmany,item)
传3个参数表示:起始位置、0(删除的项数)、插入的项在index之后
var arr= [1,2,3,4,5];
arr.splice(2,0,"red","green"); //在第2位之后,增加2个元素
console.log(arr); //[1,2,"red","green",3,4,5]
删除,指定两个参数splice(index,howmany)
//splice(index,howmany)
//传2个参数表示:起始位置和删除的个数
var arr = [1,2,3,4,5];
arr.splice(0,2); //从0位开始,删除2个
alert(arr); //[3,4,5]
修改,指定三个参数splice(index,howmany,item)
指定三个参数:起始位置,删除的项数,插入的数量
var arr = [1,2,3,4,5];
arr.splice(0,2,6,7);
alert(arr); //6,7,4,5
9.4.6join
通过指定分隔符,将数组所有元素放入字符串
arrayObject.join(separator)
var arr=["red","green","yellow"];
var a = arr.join(); //red,green,yellow
var b= arr.join(""); //redgreenyellow
var c=arr.join("."); //red.green.yello
alert(c);
9.4.7排序
通过指定分隔符,将数组所有元素放入字符串
arrayObject.join(separator)
a.升序
var arr = [1,12,34,5,6];
var c = arr.sort(function(a,b){
return a-b;
});
console.log(c); //[1,2,5,6,12,34]
b.降序
arr.sort(function(a,b){
return b-a;
});
9.4.8归并(求和)方法
通过指定分隔符,将数组所有元素放入字符串
arrayObject.join(separator)
var numbers = [1,2,3,4,5];
var sum = numbers.reduce(function(prev,cur,index,array){
return prev+cur;
});
alert(sum); //15
9.4.9 reverse()
颠倒数组中的元素
返回值 ——数组
var arr = [12,11,33];
var b = arr.reverse();
console.log(b); //33,11,12
9.4.10二维数组
数组里还可以装载一个数组
取值方式arr[i][i]
var arr=[[1,2]];
console.log(arr[0][0])
