Day08 JS

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>

Day08 JS

1. 定时器

2.location

3.navigator

4.节点

4.元素位置

5.属性设置

6.浏览器窗口

7.文档碎片

8.静态表格Demo

9.动态添加表格

10.函数

11.箭头函数

12.函数的传参

13.基本类型和引用类型

推荐阅读更多精彩内容