JavaScript从入门到精通

Web JavaScript
JavaScript
发布日期:   2020-06-02
文章字数:   2.8k
阅读时长:   13 分
阅读次数:  

JavaScript从入门到精通

初探 JavaScript 魅力

JavsScript 是什么

  • 网页特效原理
    • JavaScript 就是修改样式（文档）
  • 编写 JS 的流程
    • 布局：HTML + CSS
    • 属性：确定要修改的属性
    • 事件： 确定用户 做哪些操作（产品设计）
    • 编写 JS ：在事件中，用 JS 来修改页面元素的样式

第一个 JS 特效：鼠标提示框

  • 分析效果实现原理

    • 样式：div 的 display / none
    • 事件：onmouseover / onmouseout
    • 动手编写效果

  • 特效基础

    • 事件驱动：onmouseover
    • 元素属性操作：obj.style.[...]
    • 特效实现原理概括：响应式用户操作，对页面元素样式修改

  • 兼容性问题 

    // div2.style.display='block'; // 部分浏览器不兼容
document.getElementById('div2').style.display='block'; // 所有浏览器兼容

  • 函数

    • 制作更复杂的效果
    • 直接在事件内写代码会很乱
      • 引入 function() 函数的基本形式
      • 把 JS 标签里放入到函数里，类似于 css 里的 class
      • 变量的使用：别名
    • 定义和调用
      • 函数定义：告诉系统有这个函数，不会执行
      • 函数调用：执行函数里面的代码
      • 关系和区别

  • 代码

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>第一个JS效果</title>

    <style>
      #div2 {
        display: none; 
        background: red; 
        width: 100px; 
        height: 50px; 
        font-size: 16px;
      }
      #div1 {
        display: block; 
        background: red; 
        width: 100px; 
        height: 100px; 
        font-size: 16px;
      }
    </style>

    <script>

    // 封装 getElementById 函数
    function get(id) {
      return document.getElementById(id);
    }

    // 显示 div2
    function show() {
      // div2.style.display='block'; // 部分浏览器不兼容
      get('div2').style.display='block';
    }

    // 隐藏 div2
    function hide() {
      // div2.style.display='none'; // 部分浏览器不兼容
      get('div2').style.display='none';
    }

    // div1 变绿
    function toGreen() {
     get('div1').style.background='green';
    }

    // div1 变蓝
    function toblue() {
      get('div1').style.background='blue';
    }

    // div1 变红
    function toRed() {
      get('div1').style.background='red';
    }
    
    // 点击循环变色
    var i = 0;
    function changeColor() {
      console.log('i=',i)
      if (i == 0) {
        toGreen();
        i++;
        console.log('i=',i)
        return;
      } 
      if (i == 1) {
        toblue();
        i++;
        console.log('i=',i)
        return;
      } 
      if (i == 2) {
        toRed();
        i = i - 2;
        console.log('i=',i)
        return;
      }
    }
    </script>
  </head>

  <body>
     <!-- 调用页内函数修改样式 -->
    <input type="button" onclick="changeColor()" value="按钮">
    <div id="div1">
    </div>
      <!-- 行内 JS 修改样式 -->
    <input type="checkbox" onmouseover="div2.style.display='block';" onmouseout="div2.style.display='none';" value="按钮">  
    <div id="div2">
      <p>文字<br>文字2</p>
    </div>
  </body>
</html>

网页换肤和 if 判断

  • 网页换肤

    • 土豆网 “开灯” “关灯效果”
    • 任何标签都可以加 ID ，包括 link
    • 任何标签的属性，都可以修改
    • HTML 里面怎么写，JS 里面就怎么写

  • if 判断

    • 特效实现原理
    • if 基本形式
    • JS 里面 = 赋值， == 判断
    • 为 a 链接添加 JS
      • <a href="javascript:;"></a>
    • className 的使用
      • class 是关键字，所以用 className 代替
      • 其它 HTML 里面怎么写，JS 里面就怎么写

  • 代码

    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <link id="link1" rel="stylesheet" type="text/css" href="css/grey.css">

    <script>
    function changeColor() {
      if (document.getElementById('b1').value == '关灯') {
        document.getElementById('link1').href = 'css/black.css';
        document.getElementById('b1').value = '开灯';
        console.log('black')
      } else {
        document.getElementById('link1').href = 'css/grey.css';
        document.getElementById('b1').value = '关灯';
        console.log('bl2:', document.getElementById('link1').href)
      }
    }

    function changeText() {
      document.getElementById('text1').value = '456';
      document.getElementById('text1').title = '文字1';
    }

    function showHide() {
      var div2 = document.getElementById('div2');
      if(div2.style.display == 'block') {
        div2.style.display ='none';
        console.log('1');
      } else {
        div2.style.display = 'block';
        div2.style.background = 'blue';
      }
      console.log('display:', div2.style.display);
    }

    function class1() {
      var div = document.getElementById('div4');
      div.className='div5';
      div.id='div5';
    }
    </script>
  </head>
  <body>
    <!-- 换肤 -->
    <input id="b1" type="button" onclick="changeColor()" value="关灯">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
    <input type="button" value="显示隐藏div2" onclick="showHide()">
    <br>
    <!-- HTMl 里面怎么写，JS 里面就怎么写 -->
    <input id="text1" type="text" value="123">
    <input type="button" value="改文字" onclick="changeText()">
    <br>
    <!-- a 链接的使用 -->
    <a href="javascript:;">javascript:;</a>

    <!-- className 的使用 -->
    <div id="div4">4</div>
    <input type="button" value="className" onclick="class1()">
  </body>
</html>

函数传参

  • 改变背景颜色

    • 函数传参：参数就是占位符
      • 函数里面变量用传参

  • 改变 div 的任意样式

    • 操纵属性的第二种方式
      • 要修改的属性不确定时：元素.style[ 变量/字符串 ] = 变量/字符串
      • JS 中用 . 的地方都可以用 [] 代替;
      • 字符串变量区别和关系 ：带引号是字符串，不带是变量
    • 将属性名作为参数传递

  • style 与 className

    • 元素.style.属性 = 变量/字符串
      • style 是修改行内样式
    • 行内样式优先级最高，之后再修改 className 不会有效果
    • 建议：只操作一种样式，要么只操作 style ，要么只操作 className

  • 代码：

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>函数传参</title>

    <style>
      div {
        display: block; 
        background: red; 
        width: 100px; 
        height: 100px; 
        font-size: 16px;
      }

      .div2 {
        display: block; 
        background: grey; 
        width: 100px; 
        height: 100px; 
      }
    </style>

    <script>

    // 封装 getElementById 函数
    function get(id) {
      return document.getElementById(id);
    }

    // div1 变绿
    function toGreen() {
     get('div1').style.background='green';
    }

    // div1 变蓝
    function toblue() {
      get('div1').style.background='blue';
    }

    // div1 变红
    function toRed() {
      get('div1').style.background='red';
    }
    
    // 点击循环变色
    var i = 0;
    function changeColor() {
      console.log('i=',i)
      if (i == 0) {
        toGreen();
        i++;
        console.log('i=',i)
        return;
      } 
      if (i == 1) {
        toblue();
        i++;
        console.log('i=',i)
        return;
      } 
      if (i == 2) {
        toRed();
        i = i - 2;
        console.log('i=',i)
        return;
      }
    }

    // 函数传参
    function toColor(color, width) {
      get('div1').style.background = color;
      get('div1').style.width = width;
    }
    // 将属性名作为参数传递
    function chgName(name, width) {
      // get('div1').style.name = width; // name 会被当作属性赋值
      get('div1')['style'][name] = width; // 数组 可以加字符串或者变量
    }
    // 样式优先级
    function chgClass(className) {
      get('div1').className =  className; 
    }
    </script>
  </head>

  <body>
    <!-- 调用页内函数修改样式 -->
    <input type="button" onclick="changeColor()" value="循环">
    <!-- 函数传参 -->
    <input type="button" onclick="toColor('green', '200px')" value="变绿">
    <input type="button" onclick="toColor('blue', '300px')" value="变蓝">
    <input type="button" onclick="toColor('red', '400px')" value="变红">
    <input type="button" onclick="chgName('height', '200px')" value="变高">
    <input type="button" onclick="chgClass('div2')" value="class变灰">
    <div id="div1"></div>

  </body>
</html>

提取行间事件

  • 提取事件
    • 为元素添加事件
      • 事件和其它属性一样，可以用 JS 添加：元素.事件 = 函数名/函数;
        • 不能加括号，加括号直接执行函数
      • window.onload 的意义：等待页面加载完成再执行 JS
      • 行为( js )、样式( css )、结构( html ) 三者分离
  • 获取一组元素
    • 元素.getElementsByTagName('标签名')
      • 数组的使用
      • 数组的属性
    • 全选的实现
  • 代码: 同下

循环 while 和 for

  • 用 while 引入 循环的概念

    • while 循环语法
      • 自增的意义
      • 循环的构成：初始化、条件、语句、自增

  • for 循环

    • 用 for 代替 while 循环
      • 用 for 循环为一组元素甜腻骄傲事件
      • 什么时候用循环—-一组元素
    • 例子
      • 全选—- checked 属性
      • 反选—- for 循环配合 if 判断

  • 代码:

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>提取行间事件和循环</title>

    <style>
      div {
        display: block; 
        border: 1px solid black; 
        width: 100px; 
        height: 100px; 
        margin: 10px;
        float: left;
      }
    </style>
      
    <script>
      window.onload = function () {
        // 封装 getElementById 函数
        function get(id) {
          return document.getElementById(id);
        }

        // 封装 getElementsByTagName
        function gets(tagName) {
          return document.getElementsByTagName(tagName)
        }

        // 提取行间样式
        get('btn1').onclick = function () {
          get('btn1').value = '提取成功';
        }

        // 修改一组元素中的某一个元素
        get('btn2').onclick = function () {
          gets('div')[2].style.background = 'blue';
        } 

        // 修改一组元素- while 循环
        get('btn3').onclick = function () {
          var i = 0;
          while ( i < gets('div').length ) {
            gets('div')[i].style.background = 'yellow';
            i++;
          }
        } 
        // for
        get('btn4').onclick = function () {
          for (var i = 0; i < gets('div').length; i++ ){
            gets('div')[i].style.background = 'pink';
          }
        } 

        // 全选的实现 if 判断 无需div
        get('btn5').onclick = function () {
          for (var i = 0; i < gets('input').length; i++ ){
            if (gets('input')[i].type == 'checkbox'){
              if (gets('input')[i].checked == false) {
                gets('input')[i].checked = true;
              } else {
                gets('input')[i].checked = false;
              }
            }
          }
        } 
        // 元素.getElementsByTagName 方法 单个div
        get('btn6').onclick = function () {
          var div2 = get('div2');
          var inp = div2.getElementsByTagName('input');
          for (var i = 0; i < inp.length; i++ ){
            // console.log(inp);
            if (inp[i].checked == false) {
              inp[i].checked = true;
            } else {
              inp[i].checked = false;
            }
          }
        }
        // 元素.getElementsByTagName 方法 多个div
        get('btn7').onclick = function () {
          var div2 = gets('div');
          for (var i = 0; i < div2.length; i++ ){
            var div = gets('div')[i];
            var inps = div.getElementsByTagName('input');
            for (var a = 0; a < inps.length; a++){
              if (inps[a].checked == false) {
                inps[a].checked = true;
              } else {
                inps[a].checked = false;
              }
            }
          }
        }  
      };
    </script>
  </head>

  <body>
    <!-- 提取行间样式 -->
    <input id="btn1" type="button" value="按钮">
    <!-- 修改一组元素中的某一个元素 -->
    <input type="button" id="btn2" value="改第三个元素">
    <!-- 修改一组元素-循环 -->
    <input type="button" id="btn3" value="while循环改一组元素">
    <input type="button" id="btn4" value="for循环改一组元素">
    <input type="button" id="btn5" value="全选">
    <input type="button" id="btn6" value="全选2">
    <input type="button" id="btn7" value="全选3">
    <div><input type="checkbox" name="1" id="c1"></div>
    <div><input type="checkbox" name="1" id="c2"></div>
    <div><input type="checkbox" name="1" id="c3"></div>
    <div><input type="checkbox" name="1" id="c4"></div>
    <div><input type="checkbox" name="1" id="c5"></div>

    <div id="div2">
      <input type="checkbox" name="" id="">
      <input type="checkbox" name="" id="">
      <input type="checkbox" name="" id="">
      <input type="checkbox" name="" id="">
      <input type="checkbox" name="" id="">
      <input type="checkbox" name="" id="">
      <input type="checkbox" name="" id="">
    </div>

  </body>
</html>

导航栏选项卡

  • 按钮的实现

    • 添加事件
      • this 的使用: 指当前发生事件的元素
    • 先清空所有按钮，再选中当前按钮

  • 内容的实现（ul）

    • 先隐藏所有 ul，再显示当前 ul
      • 索引值的使用：什么时候用索引值
      • HTML 添加 index 会被 FireFox 过滤
      • JS 添加 index

  • 代码:

    <!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>导航选项卡</title>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #div2 {
        width: 200px;
        height: 200px;
        margin-top: 20px;
        position: relative;
      }
      #div1 {
        width: 200px;
        height: 20px;
        position: absolute;
        top: 0px;
      }
      ul {
        margin: 0;
        padding: 0;
        display: block;
        background: rgb(157, 234, 253);
        float: left;
        position: absolute;
        display: none;
        width: 200px;
        height: 200px;
      }
      .ul {
        display: block;
      }
      a {
        display: block;
        float: left;
        width: 49px;
        height: 20px;
        background: rgb(7, 184, 253);
        border-left: 1px solid rgb(255, 0, 234);
        text-decoration: none;
      }
      .a {
        background: rgb(32, 108, 221);
      }
    </style>
    <script>
      window.onload = function (){
        // 封装 getElementById 函数
        function get(id) {
          return document.getElementById(id);
        }
        // 封装 getElementsByTagName
        function gets(tagName) {
          return document.getElementsByTagName(tagName)
        }
        // 显示第一个元素
        gets('ul')[0].className = 'ul';
        // 当鼠标覆盖某个标签时 显示对应元素
        for (var i = 0; i < 4; i++) {
          gets('a')[i].index = i;
          gets('a')[i].onmouseover = function () {
            for (var a = 0; a < 4; a++) {
              gets('ul')[a].className = '';
              gets('a')[a].className = '';
            }
            // console.log(this);
            gets('ul')[this.index].className = 'ul';
            this.className = 'a';
          }
        }
      }
    </script>
  </head>
  <body>
    <div id="div1">
      <a href="javascript:;" id="a0">1</a>
      <a href="javascript:;" id="a1">2</a>
      <a href="javascript:;" id="a2">3</a>
      <a href="javascript:;" id="a3">4</a>
    </div>
    <div id="div2">
      <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
      <ul>
        <li>2</li>
        <li>2</li>
        <li>2</li>
      </ul>
      <ul>
        <li>3</li>
        <li>3</li>
        <li>3</li>
      </ul>
      <ul>
        <li>4</li>
        <li>4</li>
        <li>4</li>
      </ul>
    </div>
  </body>
</html>

JavaScript 基础 点击去Github查看完整版

文章作者: Eish
文章链接: https://iknow.fun/2020/06/02/javascript-cong-ru-men-dao-jing-tong/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Eish !
Web JavaScript
  目录