JavaScript day13

云笔记

知识点回顾

BOM --- window对象

重新认识变量和函数  都属于window对象的属性和方法

属性

navigator

userAgent 会详细的显示浏览器的版本信息

location 地址栏

href 整个网址

host 域名+端口号

hostname 域名

port 端口号

protocal 协议 (http / https)

search 问号后面的一串 表单提交的数据

hash 井号后面的一串 锚点

assign() 跳转至新的页面

replace() 替换当前页面 --- 不会被历史记录

reload() 刷新页面

history 历史记录

length 在同一个窗口打开过几个页面

forward() 前进

back() 后退

go(1 / -1) 可进可退

document 文档 DOM实际上是BOM的一部分

方法

onload

onscroll

onresize

onfocus

onblur

注意：页面资源的分配 --- 获取焦点的页面资源会优先加载

移动端适配 --- 网易适配，淘宝适配 flexible.js

函数防抖和节流

获取所有的元素 getElementsByClassName() 元素集合

循环绑定事件 this

---

DOM

DOM : document object model 操作页面标签和css

DOM实际上是BOM的一部分

---

DOM基本操作

console.log(document);
console.log(document.documentElement); // html
console.log(document.body); // body
console.log(document.head); // head
console.log(document.title); // title
document.title = '百度一下' // title 是可读可写的

---

页面的几种宽高

clientWidth / clientHeight 浏览器的可视宽高

scrollWidth / scrollHeight 浏览器的实际宽高

scrollTop / scrollLeft 页面被卷去的宽高

console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
console.log(document.documentElement.scrollHeight);
console.log(document.documentElement.scrollTop);
console.log(document.documentElement.scrollLeft);

低版本IE的写法

console.log(document.body.scrollTop);

短路赋值

var root = document.documentElement || document.body ;

---

返回顶部

     body{
         height: 3000px;
     }
     .a{
         width: 130px;
         height: 130px;
         background-color: #f00;
         position: fixed;
         right: 0;
         bottom: 0;
     }
     <div class="a"></div>
<script>
     // 获取元素
     //    ByClassName 得到的一定是一个数组，即使只有一个值也是数组
     var oDivs = document.getElementsByClassName('a') ;
     console.log(oDivs);
     console.log(oDivs[0]);
     // oDivs[0].onclick = function () {  
     //     var t = setInterval(function () {  
     //         document.documentElement.scrollTop -= 20 ;
     //         // 滚动条所在的位置不一定能被20整除
     //         if(document.documentElement.scrollTop <= 0) {
     //             clearInterval(t)
     //         }
     //     },10)
     // }
     // 防抖
     // var t ;
     // oDivs[0].onclick = function () {  
     //     clearInterval(t)
     //     t = setInterval(function () {  
     //         document.documentElement.scrollTop -= 20 ;
     //         // 滚动条所在的位置不一定能被20整除
     //         if(document.documentElement.scrollTop <= 0) {
     //             clearInterval(t)
     //         }
     //     },10)
     // }
     // 节流
     var flag = true ;
     oDivs[0].onclick = function () {
         if(flag) {
             flag = false ;
             var t = setInterval(function () {  
             document.documentElement.scrollTop -= 5 ;
             // 滚动条所在的位置不一定能被20整除
             if(document.documentElement.scrollTop <= 0) {
                 clearInterval(t);
                 flag = true
             }
             },1)
         }
        
     }
    
 </script>

---

判断到达底部

       body{
           height: 3000px;
       }
       p{
           position: fixed;
           bottom: 0;
           width: 100%;
           text-align: center;
           display: none;
       }


   <p id="p">别拉了，到底了</p>
   
   <script>
       var oP = document.getElementById('p') ;
       // 这个计算如果写在事件里面每次触发都要不断计算，所以写在外面可以减少计算的时间 --- 优化性能
       // 最大的滚动高度 = 页面的实际高度 - 浏览器的可视高度  
           var maxHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight - 10 ;
       // 判断到达底部
       var t ;
       window.onscroll = function () {
           clearTimeout(t) ;
           t = setTimeout(function () {  
               if(document.documentElement.scrollTop >= maxHeight) {
                   // alert('已经到底了')
                   console.log('到达底部');
                   oP.style.display = 'block'
               }
           },300)
       }       
        

---

获取元素

document.getElementById 获取一个元素

document.getElementsByClassName class是关键字 className 获取一个元素集合

document.getElementsByName 通过name属性来获取元素集合(一般只有表单才有name属性)

document.getElementsByTagName() 通过标签名获取元素集合

ES6新增的方法

querySelectorAll() 获取所有的元素集合

querySelector() 获取第一个

 

// var oInps = document.getElementsByName('a') ;
// console.log(oInps);
var oInps = document.querySelectorAll('input') ;
console.log(oInps);
var oDivs = document.querySelectorAll('.a') ;
console.log(oDivs);
var oDivs = document.querySelectorAll('div') ;
console.log(oDivs);
var oDivs = document.querySelectorAll('input[name="a"]') ;
console.log(oDivs);
var oInp = document.querySelector('input:nth-child(2)') ;
console.log(oInp);

---

标签的内容操作

value 输入框的内容

innerHTML 标签的内容 识别标签

innerText 标签的内容 不识别标签 --- 把标签当做了内容的一部分

var oDiv = document.querySelector('.a') ;
var content = '呵呵';
// oDiv.innerHTML = content;
oDiv.innerText = content;

---

标签的属性

获取标签的属性

获取所有的属性 attributes

获取指定的属性值 getAttribute('属性名')

添加或者替换属性 setAttribute('属性名' , '属性值')

删除指定的属性 removeAttribute('属性名')

简写

自有属性可以简写 oDiv.id oDiv.className

自定义属性不能简写

var oDiv = document.querySelector('#a') ;
// attribute 属性：包括自有属性和自定义属性
// console.log(oDiv.attributes);
// console.log(oDiv.attributes.id);   // id='a'
// console.log(oDiv.attributes.class);  // class='b'
// console.log(oDiv.attributes.aa);  // aa='a'

// 获取具体属性点 方法
console.log(oDiv.getAttribute('id'));   // a
console.log(oDiv.getAttribute('class'));  // b
console.log(oDiv.getAttribute('aa'));   // a

// 添加属性
//    setAttribute('属性名' , '属性值')  如果已经存在，就会产生覆盖
oDiv.setAttribute('class' , 'q')
```       
```js
  // 删除属性
        oDiv.removeAttribute('aa')

// 自有属性可以直接使用
console.log(oDiv.id);
oDiv.id = 'h'
console.log(oDiv.className);  // class需要替换成className
```      
```js
 // 自定义属性不能直接使用
 // console.log(oDiv.vv);  

       

       

---

特殊标签的属性

   <input type="text" class="inp1" disabled>
   <input type="checkbox" class="inp2" checked>
   <select name="" id="a">
       <option value="+" selected>+</option>
       <option value="-">-</option>
   </select>
   <script>
       // 表单上的自有属性也可以直接简写
       //   disabled = true / false
       //   checked = true / false
       //   selected = true / false
       var oInp1 = document.querySelector('.inp1');
       var oInp2 = document.querySelector('.inp2');
       var oInp3 = document.querySelector('#a');
       var oOptions = document.querySelectorAll('option');
       setTimeout(function () {  
           oInp1.disabled = false
           oInp2.checked = false
           oOptions[1].selected = true
       },1000)
   </script>

 

---

全选和反选

   <input type="checkbox" class="all">
   <br>
   <input type="checkbox" class="one">
   <input type="checkbox" class="one">
   <input type="checkbox" class="one">
   
       var oAll = document.querySelector('.all') ;
       var oOnes = document.querySelectorAll('.one') ;
       oAll.onclick = function () {  
          
           // if(oAll.checked === true) {
           //     oOnes[0].checked = true ;
           //     oOnes[1].checked = true ;
           //     oOnes[2].checked = true ;
           // } else {
           //     oOnes[0].checked = false ;
           //     oOnes[1].checked = false ;
           //     oOnes[2].checked = false ;
           // }
           for(var i = 0 ; i < oOnes.length ; i++) {
               oOnes[i].checked = oAll.checked ;
           }
       }
    
     // 反选
       // 循环绑定点击事件
       // for(var i = 0 ; i < oOnes.length ; i++) {
       //     oOnes[i].onclick = function () {  
       //         // 每一个单选都选中 全选才选中
       //         if(oOnes[0].checked && oOnes[1].checked && oOnes[2].checked) {
       //             oAll.checked = true
       //         } else {
       //             oAll.checked = false
       //         }
       //     }
       // }
    
     // for(var i = 0 ; i < oOnes.length ; i++) {
       //     oOnes[i].onclick = function () {  
       //         var flag = true ;
       //         for(var j = 0 ; j < oOnes.length ; j++) {
       //             if(!oOnes[j].checked) {
       //                 flag = false ;
       //                 break ;
       //             }
       //         }
       //         // if(flag){
       //         //     oAll.checked = true ;
       //         // } else {
       //         //     oAll.checked = false ;
       //         // }
       //         oAll.checked = flag ;
       //     }
       // }
    
     // for(var i = 0 ; i < oOnes.length ; i++) {
       //     oOnes[i].onclick = function () {  
       //         for(var j = 0 ; j < oOnes.length ; j++) {
       //             if(!oOnes[j].checked) {
       //                 break ;
       //             }
       //         }
       //         // oAll.checked = j === oOnes.length ? true : false ;
       //         oAll.checked = j === oOnes.length
       //     }
       // }
      
       for(var i = 0 ; i < oOnes.length ; i++) {
           oOnes[i].onclick = function () {  
               var count = 0 ;
               for(var j = 0 ; j < oOnes.length ; j++) {
                   if(oOnes[j].checked) {
                       count++ ;
                   } else {
                       break ;
                   }
               }
               oAll.checked = count === oOnes.length
           }
       }

---

标签的类名

className 是一个字符串

classList 是一个伪数组

.add() 添加类名

.remove() 删除类名

.replace() 替换类名

 

var oDiv = document.querySelector('.b') ;
       console.log(oDiv.className);
      
       // oDiv.onclick = function () {
       //     var arr = oDiv.className.split(' ') ;
       //     console.log(arr);
       //     // 方法1：判断数组中是否存在这个类名，如果存在就要删除  indexOf  splice
       //     if(arr.includes('on')) {
       //         // 方法2：把不包含on的值存入新的数组
       //         var arr2 = [] ;
       //         for(var i in arr) {
       //             if(arr[i] !== 'on') {
       //                 arr2.push(arr[i])
       //             }
       //         }
       //         this.className = arr2.join(' ')
       //     }
       //     else {
       //         this.className += ' on' ;
       //     }
       // }
       // var list = oDiv.classList ;
       //   .add()
       //   .remove()
       //   .replace()
       oDiv.onclick = function () {  
           if(this.className.includes(' on')) {
               this.classList.remove('on')
           } else {
               this.classList.add('on')
           }
       }

---

标签的样式操作

样式操作

1 获取样式

getComputedStyle(obj)['color']

如果是行内样式 就可以直接获取 obj.style.color

2 设置样式

obj.style.color = 'red' ;

obj.style.cssText = 'color:red;width:100px;' --- 会覆盖之前的行内样式(不想覆盖就+=)

var oDiv = document.querySelector('.a') ;
     // js动态添加的样式会以行内样式的形式出现
     oDiv.style.color = 'red'
     // 改为驼峰
     oDiv.style.fontSize = '20px'
     // js只能拿到行内样式
     console.log(oDiv.style.color);
     console.log(oDiv.style.height);  // 非行内样式无法获取
     // cssText给标签添加多个样式,但是会覆盖之前的行内样式
     // oDiv.style.cssText += 'width:100px;height:100px;color:blue;'
     // console.log(getComputedStyle(oDiv).height);
     // console.log(getComputedStyle(oDiv)['height']);
     // console.log(getComputedStyle(oDiv).color);
     // currentStyle 只在IE8及以下可以识别
     // console.log(oDiv.currentStyle.color);
     function css(obj , prop) {
         if(getComputedStyle) {
             return getComputedStyle(obj)[prop]
         }
         return obj.currentStyle[prop]
     }
     console.log(css(oDiv , 'color'));

---

给标签设置样式

给标签添加样式

1 通过cssText添加

2 直接加类名

一般主要通过第二种方式更为方便

var oH1 = document.querySelector('h1') ;
// oH1.style.cssText = 'color:red;width:100px;height:100px;background-color:#ff0';
oH1.classList.add('a')

---

点击切换效果

      p{
          display: flex;  
      }
      span{
          width: 40px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border: 1px solid #000;
          margin: 10px;
          cursor: pointer;
      }
      .active{
          border-color: red;
          color: red;
      }
 


      <p>
      <span>Sspan>
      <span>Mspan>
      <span>Lspan>
      <span>XLspan>
     </p>
  
      var oSpans = document.querySelectorAll('span') ;
      // 循环绑定事件
      // for(var i = 0 ; i < oSpans.length ; i++) {
      //     oSpans[i].onclick = function () {  
      //         // 清除所有
      //         for(var j = 0 ; j < oSpans.length ; j++) {
      //             oSpans[j].classList.remove('active')
      //         }
      //         // 给当前对象添加
      //         this.classList.add('active') ;
      //     }
      // }
      for(var i = 0 ; i < oSpans.length ; i++) {
          oSpans[i].onclick = function () {  
              if(this.className.includes('active')) {
                  this.classList.remove('active')
              } else {
                  this.classList.add('active') ;
              }
          }
      }   

---

选项卡

      *{
          padding: 0;
          margin: 0;
          list-style: none;
      }
      .comment{
          display: flex;
          margin-left: 50px;
      }
      .comment li {
          width: 80px;
          text-align: center;
          line-height: 40px;
          border: 1px solid #000;
      }
      .content li {
          display: none;
          margin-left: 50px;
      }
      .comment .active{
          border-color: red;
          color: red;
      }
      .content .show{
          display: block;
      }
 
  <ul class="comment">
      <li data-index="0" class="active">好评</li>
      <li data-index="1">有图</li>
      <li data-index="2">差评</li>
 </ul>
  <ul class="content">
      <li class="show">666666</li>
      <li>此处有一张大图</li>
      <li>不希望被骚扰</li>
  </ul>
  <script>
      var oLis = document.querySelectorAll('.comment li') ;
      var oLis2 = document.querySelectorAll('.content li') ;
      // 循环绑定事件
      for(var i = 0 ; i < oLis.length ; i++) {
          oLis[i].onclick = function () {  
              // 清除所有
              for(var j = 0 ; j < oLis.length ; j++) {
                  oLis[j].classList.remove('active')
              }
              // 给当前对象添加
              this.classList.add('active') ;
              // 隐藏所有的li
              for(var j = 0 ; j < oLis2.length ; j++) {
                  oLis2[j].classList.remove('show') ;
              }
              // 让当前对应的这个li显示
              var index = this.getAttribute('data-index') ;
              console.log(index);
              oLis2[index].classList.add('show')
          }
      }
  </script>

---

选项卡2

       *{
           padding: 0;
           margin: 0;
           list-style: none;
       }
       .comment{
           display: flex;
           margin-left: 50px;
       }
       .comment li {
           width: 80px;
           text-align: center;
           line-height: 40px;
           border: 1px solid #000;
       }
       .content li {
           display: none;
           margin-left: 50px;
       }
       .comment .active{
           border-color: red;
           color: red;
       }
       .content .show{
           display: block;
       }
 
   <ul class="comment">
       <li class="active">好评</li>
       <li>有图</li>
       <li>差评</li>
   </ul>
   <ul class="content">
       <li class="show">666666</li>
       <li>此处有一张大图</li>
       <li>不希望被骚扰</li>
   </ul>
   <script>
       var oLis = document.querySelectorAll('.comment li') ;
       var oLis2 = document.querySelectorAll('.content li') ;
       // 循环绑定事件
       // for(var i = 0 ; i < oLis.length ; i++) {
       //     // 通过自定义属性的方式给每一个li添加了一个角标
       //     oLis[i].setAttribute('qq' , i) ;
       //     oLis[i].onclick = function () {  
       //         // 清除所有
       //         for(var j = 0 ; j < oLis.length ; j++) {
       //             oLis[j].classList.remove('active')
       //         }
       //         // 给当前对象添加
       //         this.classList.add('active') ;
       //         // 隐藏所有的li
       //         for(var j = 0 ; j < oLis2.length ; j++) {
       //             oLis2[j].classList.remove('show') ;
       //         }
       //         // 让当前对应的这个li显示
       //         var index = this.getAttribute('qq') ;
       //         console.log(index);
       //         oLis2[index].classList.add('show')
       //     }
       // }
       for(var i = 0 ; i < oLis.length ; i++) {
           // 通过自定义属性的方式给每一个li添加了一个角标
           oLis[i].setAttribute('qq' , i) ;
           oLis[i].onclick = function () {  
               // 清除所有
               for(var j = 0 ; j < oLis.length ; j++) {
                   oLis[j].classList.remove('active')
                   oLis2[j].classList.remove('show') ;
               }
               // 给当前对象添加
               this.classList.add('active') ;
              
               // 让当前对应的这个li显示
               var index = this.getAttribute('qq') ;
               oLis2[index].classList.add('show')
           }
       }
   </script>

   

---

选项卡3

       *{
           padding: 0;
           margin: 0;
           list-style: none;
       }
       .comment{
           display: flex;
           margin-left: 50px;
       }
       .comment li {
           width: 80px;
           text-align: center;
           line-height: 40px;
           border: 1px solid #000;
       }
       .content li {
           display: none;
           margin-left: 50px;
       }
       .comment .active{
           border-color: red;
           color: red;
       }
       .content .show{
           display: block;
       }
  
   <ul class="comment">
       <li class="active">好评</li>
       <li>有图</li>
       <li>差评</li>
   ul>
   <ul class="content">
       <li class="show">666666</li>
       <li>此处有一张大图</li>
       <li>不希望被骚扰</li>
  </ ul>
   <script>
       var oLis = document.querySelectorAll('.comment li') ;
       var oLis2 = document.querySelectorAll('.content li') ;
       for(var i = 0 ; i < oLis.length ; i++) {
           // 给对象添加自定义属性
           //
           // li.style
           // li.innerHTML
           // li.qq
           // id和class属于标签上的属性
           //   li.id
           //   li.classList
           oLis[i].qq = i ;
           oLis[i].onclick = function () {  
               // 清除所有
               for(var j = 0 ; j < oLis.length ; j++) {
                   oLis[j].classList.remove('active')
                   oLis2[j].classList.remove('show') ;
               }
               // 给当前对象添加
               this.classList.add('active') ;
              
               // 让当前对应的这个li显示
               var index = this.qq ;
               oLis2[index].classList.add('show')
           }
       }
       // var str = new String('hello') ;
       // 给对象添加自定义属性
       // str.aa = 666 ;
       // console.log(str.aa);   </script>

---

作业练习

全选和反选 质数判断的方法

标签的属性

自有属性

自定义属性

如何给标签添加样式？

className classList cssText

点击切换

单选效果

多选效果

选项卡