javascript从入门到高级，每天不停更新知识点（12天）

1.事件三要素

1.0 事件是有三部分组成 事件源 事件类型 事件处理程序

事件源 ：事件被触发的对象 谁 按钮

事件类型：如何触发 什么事件 比如鼠标点击（onclick）还是鼠标经过 还是键盘按下

事件处理程序：通过一个函数赋值的方式完成

  <button id="btn">中原</button>
        <script>
         var btn = document.getElementById('btn');
         btn.onclick = function() {
           alert('大哥');
         }
        </script>

 2.innerText 和innerHtml的区别

相同点：都能改变元素内容，都能获取元素内容

区别：innerText 不识别html标签 去除空格和换行

innerHtml 识别html标签 w3c标准 保留空格和换行

<button>显示当前时间</button>
        <div>某个时间</div>
        <script>
          //1.获取元素
            var  btn = document.querySelector('button');
            var  div = document.querySelector('div');
          // 2.注册事件
          btn.onclick = function(){
            div.innerHTML =getTime() ;
          }
          function getTime() {
        var date = new Date();
        var hour = date.getHours();
        var hour = hour > 10 ? hour: '0'+hour;
        var minutes = date.getMinutes();
        var minutes = minutes > 10 ? minutes: '0'+minutes;
        var seconds = date.getSeconds();
        var seconds = seconds > 10 ? seconds: '0'+seconds;
        return hour+':'+minutes+':'+seconds;
      }
        div.innerHTML= '<b>中国</b>';
            
        </script>

2.1 切换两张图片

<button id="first">第一</button>
        <button id="second">第二</button>
        <img src="images/1.jpg" alt="" title="沙滩">
        <script>
          //修改元素的属性 src title
          //获取元素
          var first = document.getElementById('first');
          var second = document.getElementById('second');
          var img = document.querySelector('img');
          //注册事件
          second.onclick = function() {
            img.src = 'images/35.jpg';
            img.title = '枫叶';
          }
          first.onclick = function(){
            img.src='images/1.jpg'
            img.title = '沙滩';
          }
​
        </script>

2.2 分时间显示不同的图片案例

 <img src="images/1.jpg" alt="">
        <div>上午好</div>
        <script>
          var img = document.querySelector('img');
          var div = document.querySelector('div');
          var date  = new Date();
          var getHours = date.getHours();
          if (getHours < 12) {
            img.src = 'images/1.jpg';
            div.innerHTML = '上午好呀';
          } else if(getHours < 20) {
            img.src = 'images/35.jpg';
            div.innerHTML = '<b>下午好</b>'
          } else {
            div.innerHTML = '好';
          }
        </script>

3.修改表单属性

<button>按钮</button>
        <input type="text" value="内容">
        <script>
          var btn = document.querySelector('button');
          var input = document.querySelector('input');
          btn.onclick = function(){
            input.value = '点击了';
            //如果想要某个表单被禁用 不能再点击 disabled
            this.disabled = true ;//this 指向的是事件函数的调用者btn
          }
        </script> 

4.仿京东密码表单

 <div class="box">
          <label for="">
            <img src="images/1.gif" alt="" id="eye">
          </label>
          <input type="password" name="" id="pwd">
        </div>
        <script>
           var eye = document.getElementById('eye');
           var pwd = document.getElementById('pwd');
           var flag = 0;
           eye.onclick = function(){
            if (flag == 0) {
              pwd.type = 'text';
              flag = 1;
            } else {
              pwd.type = 'password';
              flag = 0;
            }
            
           }
        </script>

8.显示隐藏文本框内容

//行内样式修改 element.style 
<input type="text" value="手机">
        <script>
          //1.获取元素
          var text = document.querySelector('input');
          //2.注册事件  获得焦点事件  onfocus
          text.onfocus = function(){
                 if (this.value === '手机') {
                       this.value = '';
                 }
                 this.style.color = '#333';
          }
          //3.注册事件  失去焦点事件  onblur
          text.onblur = function(){
                if (this.value === '') {
                  this.value = '手机';
                }
                this.style.color = '#999';
          }
​
        </script>

9.通过修改元素的className 更改元素的样式

<html>
<head>
<style>
    div {
    width: 100px;
    height: 50px;
    background-color: pink;
​
}
.change {
    margin: 100px auto;
    background-color: blue;
    font-size: larger;
    width: 300px;
    height: 440px;
}
</style>
</head>
<body>
<div>文本</div>
        <script>
            //1.获取元素
            var div = document.querySelector('div');
            div.onclick = function(){
               //通过修改元素的className 更改元素的样式
               this.className = 'change';
            }
        </script>    
</body>
</html>

10.注册页面

<style>
.message {
    display: inline-block;
}
.wrong {
    color: red;
}
.right {
    color: greenyellow;
}    
</style> 
<div class="register">
          <input type="password" class="ipt">
          <p class="message">请您输入6-15位数</p>
        </div>
        <script>
          //获取元素
          var ipt = document.querySelector('.ipt');
          var meg = document.querySelector('.message');
          //注册事件  失去焦点
          ipt.onblur = function(){
            if (this.value.length <6 ||this.value.length>15) {
                    meg.className = 'message wrong';
                    meg.innerHTML = '<b>错误警告 请输入6-15位数</b>';
            }else{
              meg.className = 'message right';
              meg.innerHTML = '<strong>congratulation</strong>'
            }
          }
          
        </script>