Day08 JS
2018-07-01 本文已影响0人
小章鱼Milo
1. 定时器
<script >
//setTimeout() 超时调用
/*
* setTimeout(func,time) 返回setTimeout的一个ID值
* 调用clearTimeout(ID)来取消调用
* 间隔一段时间，触发函数，只触发一次
* */
setTimeout(function () {
alert(1);
},2000);
//prompt 弹窗输入
var result=window.prompt("请输入你的星座","狮子座");
console.log(result);
//setInterval(func,time)
/*
*定时器
* 间隔一段时间，触发函数，一直触发
* 返回setInterval的一个ID值
* 调用clearInterval(ID)来取消调用
* */
// setInterval(function () {
// alert(1);
// },1000);
/*使用setTimeout实现setInterval
* */
function go() {
console.log("hello world");
setTimeout(go,2000);
}
go();
</script>
2.location
<script >
//location.href 返回当前加载页面的完整URL
console.log(location.href)
//location.hash 返回URL中的hash(#号后跟0或多个字符),如果不包含则返回空字符串
console.log(location.hash)
//location.host 返回服务器名称和端口号
console.log(location.host)
//location.hostname 返回不带端口号的服务器名称
console.log(location.hostname)
//location.pathname 返回URL中的目录和(或)文件名
console.log(location.pathname)
//location.port 返回URL中指定的端口号,如果没有,返回空字符串
console.log(location.port)
//location.protocol 返回页面使用的协议
console.log(location.protocol)
//location.search 返回URL的查询字符串，这个字符串以问号开始。
console.log(location.search)
/*
* 改变浏览器的位置的方法:
location.href属性
location对象其他属性也可改变URL
location.hash
location.search
location.replace(url)
location.reload()
功能:重新加载当前显示的页面
说明:
location.reload()从缓存加载
location.reload(true)从服务器重新加载
*
*
* */
</script>
3.navigator
<script >
// if(/Android|iphone|webOS/i.test(navigator.userAgent)){
// location.href="mobile.html"
// }else if(/ipad/i.test(navigator.userAgent)){
// location.href="pad.html"
// }
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
//判断是否是移动端
if(browser.versions.mobile) {
console.log('我是移动端');
}
var s=document.hasOwnProperty("ontouchstart");//电脑返回false，手机为true
console.log(s);
//判断安卓还是IOS
if(browser.versions.ios){
console.log('我是IOS');
}
if(browser.versions.andriod){
console.log('我是安卓');
}
//判断浏览器的类型
if(browser.versions.trident){
console.log('我是IE');
}
if(browser.versions.presto){
console.log('我是opera');
}
if(browser.versions.webKit){
console.log('我是苹果和谷歌');
}
if(browser.versions.gecko){
console.log('我是火狐');
}
</script>
4.节点
<div id="parent">
<p id="child"> hello world</p>
<p id="test"> hello world</p>
<p> hello world</p>
</div>
<script >
//parentNode 获取父节点(亲爹)
let p=document.getElementById("child");
let parent=p.parentNode;
console.log(parent);
//子节点
let divParent=document.getElementById("parent");
let childs=divParent.childNodes;
//childNodes 获取所有类型的子节点 默认把换行也当成一个子节点上述有7个节点
console.log(childs);
for (let i= 0;i<childs.length;i++){
if (childs[i].nodeType==1){
childs[i].style.backgroundColor="red";
}
}
//children 获取子节点(元素节点) IE9以后才能用
let chis=document.getElementById("parent").children;
console.log(chis);
/*
* firstChild 获取第一个子节点
* firstElementChild 获取第一个元素子节点
* lastChild 获取最后一个子节点
* lastElementChild 获取最后一个元素子节点
* */
let fc=parent.firstChild;
let fe=parent.firstElementChild;
console.log(fc)
console.log(fe)
//previousSibling 获取前面的兄弟节点
//previousElementSibling 获取前面的兄弟元素节点
//nextSibling 获取下一个兄弟节点
//nextElementSibling 获取下一个兄弟元素节点
let test=document.getElementById("test");
let pSiblings=test.previousSibling;
let pes=test.previousElementSibling;
console.log(pSiblings)
console.log(pes)
</script>
- Demo
<body>
<ul>
<li>小米手机 <a href="#">删除</a></li>
<li>苹果手机 <a href="#">删除</a></li>
<li>华为手机 <a href="#">删除</a></li>
</ul>
<script >
let shows=document.getElementsByTagName("a");
for (let i=0;i<shows.length;i++){
shows[i].onclick=function () {
this.parentNode.style.display="red";
//阻止a标签跳转事件
// return false;
}
}
</script>
</body>
4.元素位置
<script >
//元素水平方向偏移 offsetLeft
let test=document.getElementById("test");
let offL=test.offsetLeft;
let offT=test.offsetTop;
let offW=test.offsetWidth;
let offH=test.offsetHeight;
console.log(offL);
//元素垂直方向偏移的位置 offsetTop
console.log(offT)
//元素的宽度 offsetWidth 只读属性 无法更改
console.log(offW)
//元素的高度 offsetHeight
console.log(offH)
</script>
5.属性设置
<body>
<p id="test" class="one">hello world</p>
<script >
let p =document.getElementById("test")
//test.style.color="red";
//test.style["color"]="red"; 当传入的属性是变量的时候 用这种方式
function changeStyle(ele,attr,value) {
ele.style[attr]=value;
}
changeStyle(p, "backgroundColor","green");
//设置style样式
p.setAttribute("style","color:red");
//获得属性值
let cValue=p.getAttribute("class");
//设置属性值
p.setAttribute("class","two");
//移除属性值
console.log(p.getAttribute("class"))
//p.removeAttribute("class");
</script>
</body>
- Demo
<body>
<p id="test">hello world</p>
<script >
let p =document.getElementById("test");
p.setAttribute("title","title");
</script>
</body>
6.浏览器窗口
<script >
let windowWidth=window.innerWidth;
let windowHeight=window.innerHeight;
console.log(windowWidth)
console.log(windowHeight)
let wd=document.documentElement.clientWidth;
let wh=document.documentElement.clientHeight;
console.log(wd)
console.log(wh)
let bd=document.body.clientWidth;
let bh=document.body.clientHeight;
console.log(bd)
console.log(bh)
</script>
<script >
let width=document.documentElement.scrollWidth;
let height=document.documentElement.scrollHeight;
let windowheight=window.innerHeight
let windowwidth=window.innerWidth
console.log(windowwidth)
console.log(windowheight)
console.log(width)
console.log(height)
//scrollheight 和 scrollwidth 是页面内容的高宽 当内容大于窗口高宽时显示 内容高宽 反之显示窗口高宽
//windowheight 和width 是窗口的高宽
</script>
7.文档碎片
<body>
<ul id="parent"></ul>
<button id="btn"></button>
<script >
let btn=document.getElementById("btn");
let parent=document.getElementById("parent")
//创建一个文档碎片 将创建的li放到这个文档碎片中 再一次性加入到页面中 提升性能（但效果一般）
let 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>
</body>
8.静态表格Demo
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table,td,th{
border:1px solid #333;
}
table{
border-collapse: collapse;
width: 500px;
line-height: 50px;
text-align: center;
}
</style>
</head>
<body>
<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 >
//thead,tbodies,rows,cells
/*
* tHead 获取表格的标题
* */
/*
* 需求：
* 1.标题的背景色 #eee;
* 2.tbody下奇数行为 #ff2d51 偶数为#44cef6
* */
let table=document.getElementById("table");
let thead=table.tHead;
thead.style.backgroundColor="#eee"
console.log(thead)
let tbody=table.tBodies[0]
let rows=tbody.rows
let firstCell=rows[0].cells[0];
console.log(rows)
for(let i=0;i<rows.length;i++){
if (i%2==0){
rows[i].style.backgroundColor="#ff2d51"
} else{
rows[i].style.backgroundColor="#44cdf6"
}
}
firstCell.innerHTML="银泰百货"
</script>
</body>
9.动态添加表格
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table,th,td{
border: 1px solid #333;
width: 500px;
line-height: 50px;
}
table{
border-collapse: collapse;
text-align: center;
}
tbody tr:nth-child(even){
background: #ff2d51;
}
tbody tr:nth-child(odd){
background: #44cef6;
}
div{
margin-bottom: 40px;
}
</style>
</head>
<body>
<div>
手机品牌 <input type="text" id="phone">
价格 <input type="text" id="price">
<button id="btn">添加</button>
</div>
<table>
<thead>
<tr>
<th>手机品牌</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>苹果7</td>
<td>8K</td>
</tr>
</tbody>
</table>
<script >
let btn=document.getElementById("btn")
let phone=document.getElementById("phone")
let price=document.getElementById("price")
let tbody=document.getElementsByTagName("table")[0].tBodies[0];
btn.onclick=function () {
let tr=document.createElement("tr");
let td1=document.createElement("td");
td1.innerHTML=phone.value;
let td2=document.createElement("td");
td2.innerHTML=price.value;
tr.appendChild(td1);
tr.appendChild(td2);
tbody.appendChild(tr)
}
</script>
</body>
10.函数
<script >
/*
* 函数书写方式
* 1.直接书写 （推荐）
* */
function go() {
console.log("hello world")
}
go();
//2.变量声明方式 （无法再声明之前调用）
let one=function () {
console.log("one");
}
one();
//构造函数的方式声明 （不推荐）
let two= new Function("two","console.log(two)")
two("a");
</script>
11.箭头函数
<script >
//ES6的写法
let go=()=>{
console.log("hello world")
}
go();
let obj={
say:function (){console.log("say")},
eat:()=>{
console.log("eat")
}
}
obj.say();
obj.eat();
</script>
12.函数的传参
<script >
/*
* js中函数传不定参
*js中如果函数同名 下面的会覆盖上面的
*
* */
function go(a,b) {
console.log(a);
console.log(a+b)
}
go(1,2)
go(1)
/*
* js中要想使用重载，则需要使用arguments对象
* 函数内部有一个arguments对象，来管理函数传入的参数
* */
function test(){
if (arguments.length==1){
console.log("1");
} else if (arguments.length==2){
console.log("2");
} else {
console.log("hello world")
}
}
test(2,3,4);
test(1)
test(1,2)
</script>
13.基本类型和引用类型
<script >
//1.基本类型只传值
//2.引用类型既传值也传址
// let a=10;
// let b=a;
// console.log(b)
// let arr=[1,2,3]
// let b=arr;
// b[arr.length]=4;
// console.log(arr);
let obj={
name:"xiao"
}
let c=obj
c.age=13;
console.log(obj.age)
</script>
