JavaScript从入门到精通


JavaScript从入门到精通

初探 JavaScript 魅力

JavsScript 是什么

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

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

  • 分析效果实现原理

    • 样式:divdisplay / 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
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Eish !
评论
 上一篇
JavaScript ES6-10语法 JavaScript ES6-10语法
第1章 课程介绍与环境搭建 JS作为前端的立身之本,让大家了解学习这门课的必要性。考虑到很多同学刚刚接触前端或者对工程化方法不太了解,为了快速进入到学习状态,我们提供了极其简单的方式帮大家准备好学习环境。 1-1 课程导学 试看怎么学?
2020-06-02
下一篇 
Hexo Front-matter 介绍 Hexo Front-matter 介绍
文章 Front-matter 介绍Front-matter 选项详解Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。 配置选项 默认值 描述 title Markd
2020-06-02
  目录