H5&CSS3

JavaScript

概述

  1. 用途:为html页面添加交互行为
  2. 执行:解释器，也称为JavaScript引擎，是浏览器的一部分
  3. 位置:通常直接嵌入到html页面中
  4. 开发工具:任何一个网页开发工具都可以
  5. 特点:
    • 脚本语言:没有预先编译的过程
    • 弱类型，非强类型，定义变量的时候，不用指定变量的类型，变量的类型根据值的类型来决定
    • 跨平台:不依赖于操作系统
  6. 注意:
    • 不同的浏览器中使用该脚本编程可能会有差异
    • 要遵循W3C DOM标准，兼容性好
  7. 历史
    • 1995网景(NetScape)
    • 是ECMAScript标准的一种实现
    • 最新版ES6

编写JavaScript

  1. 把JavaScript代码写在<script>标签中

  2. <script>标签可以写在网页的任何位置

  3. 严格区分大小写

  4. 变量

    • 声明变量

      var a;
var b = 10;

    • 向未声明的变量赋值，变量会自动声明

      c = 20;

    • 再次声明变量，变量的值不会重置或清除

      var b = 10;
var b;

  5. 输出的三种方式

    • alert(内容)
    • document.write(内容)
    • console.log(内容)

  6. 如果一条语句独占一行，可以省略该语句后的分号

五种原始数据类型

  1. undefined:为初始化变量的值，值只有一个:undefined
  2. boolean:值true和false
  3. number:表示整数和浮点数、
  4. string:表示字符串类型，值可以使用单引号或双引号
  5. null类型:唯一值null，输出变量的类型如果typeof null，输出object

类型转换

  1. parseInt(value):把一个变量强制转换为整数

    parseInt(3.14);//3
parseInt("3.14");//3
parseInt("3.14abc");//3
parseInt("a3.14");//NaN:not a number,不是一个数字

  2. parseFloat(value):把一个变量强制转换为浮点数

    parseFloat("3.14");//3.14
parseFloat("3.14aaaaa");//3.14
parseFloat("a3.14");//NaN

  3. Number(value):把一个变量强制转换为整数，它转换整个值而不是部分值

    Number("3.14a")//NaN

运算符

  1. 算术运算符:+-*/%++–

  2. 赋值运算符:= += -= *= /= %=

  3. 逻辑运算符:&& || !

  4. 比较运算符:==,!=,<,>

  5. 三元运算符: 表达式1 ? 表达式2 : 表达式3

  6. ==和===

    • ==:等于，它进行抽象比较，类型不同时，js会尝试进行类型转换，然后比较转换后的值，可能导致一些非预期的结果

      0 == false //true
0 == '0' //true
null == undefined //true

    • ===:全等，在比较的时候不进行类型转换，类型不同，直接返回false

函数

语法

function 函数名(参数列表){
    语句:
    return 值;
}

调用方式

  1. 在script标签中直接调用

  2. 在其他函数中调用

  3. 通过事件调用

    function sum(){
    
}
//onclick 单击事件，等号右边是该事件的处理程序
<input type="button" onclick="sum()">
    • eval(字符串表达式):能够对表达式进行解析并求值返回

  4. 通过超链接调用

    <a href="#" onclick="compare('+')">求和</a>
<a href="javascript:compute('+')">求和</a>

得到文本框的值

  1. 通过元素的id获得元素对象

    document.getElementById("id值")

  2. 通过表单元素名得到元素对象

    document.forms[i].表单名

<form>
<input name ="num1">    
</form>

arguments对象

  1. js的函数可以接收任意多个参数，通过arguments对象来访问

  2. 该对象类似于数组，可以使用下标来访问，例如arguments[0]

  3. 使用arguments对象的length属性，得到方法调用时候，传递过来的参数个数

  4. 使用函数名对象的length属性，得到该对象方法定义的时候，命名参数的个数(形参的个数)

    function method1(a,b){
    arguments.length;//3
}
method1(1,2,3);
method1.length;//2

  5. javascript中没有重载的概念

    如果定义了两个同名的方法，下面的方法会把上面定义的同名方法覆盖

函数是对象，函数名是对象的引用

function test1(){
    alert('hi');
}

var a = test1;
a();

函数表达式

//符号的右边是一个匿名函数
var test2 = function(){
    alter('hi');
}
test2();

引用外部JS文件

  1. 定义外部文件
  2. 在html文件中引用
<script src="./js/js.js">
  
</script>

Window.onload

  1. 该事件在当前html文档加载完成的时候被调用

    window.onload = function(){
    document.getElementById("id1").value = "Hello";
}

数组

  1. 定义:在单个对象中存储多个值

  2. 构造函数

    • Array()：返回一个长度为0的数组对象
    • Array(size):返回具有指定个数的数组，元素的初始值都是undefined
    • Array(元素列表):用元素列表初始化数组，元素可以是任意类型

  3. 直接初始化数组

    var arr = [3,5,true];

  4. 数组的长度不固定，赋值即可改变数组的长度

    • length:数组的长度，不是只读的，可以改变

  5. 使用下标来访问元素

  6. 遍历

    • fori遍历

      for(var i = 0 ; i  < arr.length; i++){
    document.write(arr[i]+" ");
}

    • for each(下标版)

      for(var i in arr){
    document.write(arr[i]+" ");
}

    • for each

      for(var i of arr){
    document.write(n+" ");
}

  7. 常用方法

    • concat(array):返回一个新数组，由当前数组和参数数组连接而成

    • join(分隔符):返回字符串，由数组中所有元素连接而成，元素间使用分隔符隔开

      • 字符串.split(分隔符): 根据参数指定的分隔符，把当前字符串转换为数组

    • reverse():返回一个新数组，原来的数组倒置而成

    • sort():按照字母顺序对数组中的元素进行排序

    • sort(比较函数):根据参数中的函数进行比较元素的大小

      var arr = [1,3,4,5,10,20]
arr.sort(function(x,y){
    return x - y;
});

    • push(值的列表):把值的列表追加到数组的其他元素后

    • indexOf(值,fromIndex),从fromIndex索引号开始，查找值的对应的索引号，找到返回索引，没有找到返回-1

    • lastIndexOf(值):查找参数值最后一次出现的位置

    • pop():移除数组中的最后一个元素，并返回该元素

    • shift():移除数组中的第一个元素，并返回该元素

    • splice(index,howmany,element…):用于向数组中添加删除替换元素

      • index：必需，从何处添加和删除或替换元素
      • howmany：必需，规定删除元素的个数，添加的时候，该值为0
      • element…:元素列表，可选，添加和替换的时候使用

    • slice(beginIndex,endIndex):返回一个新数组为原数组的截取

    • toString:返回将数组中元素转换为由逗号分隔的字符串

Date对象

构造函数

  1. Date():表示浏览器当前日期

  2. Date(year,month,date):根据参数的年月日常见日期对象，month从0开始

  3. Date(“year-month-date hour:minute:second”):根据指定的字符串格式创建日期对象，month从1开始

  4. Date(时间戳):根据时间戳创建日期对象，时间戳:从1970年1月1日0:00:00以来的毫秒数

  5. 补充:

    • 模板字符串:使用反引号而不是单引号或双引号来表示一个字符串

      • 作业:可以在模板字符串中使用$(表达式)这种方式，把表达式的值接到字符串中

        var d =new Date();
var year =d.getFullYear()
var month =((d.getMonth()+1)+'').padStart(2,'0')
var date=d.getDate()
var hours=(d.getHours()+'').padStart(2,'0')
var minutes=(d.getMinutes()+'').padStart(2,'0')
var seconds=d.getSeconds()
document.write(`${year}年${month}月${date}日${hours}时${minutes}分${seconds}秒`)

    • 字符串.padStart(占用的长度,填充的字符):在字符串前面根据参数补充上相应的字符

  6. 常用函数

    • getFullYear():得到年
    • getMonth():得到月
    • getDate():得到日
    • getHours():得到小时
    • getMinutes():得到分钟
    • getSeconds():得到秒
    • setXXX():设置时间部分
    • toLocalDateString():把当前Date对象转换为本地日期的字符串

定时器

  1. setInterval(匿名函数或”函数名()”.时间间隔):用每隔指定的毫秒数重复执行一个指定的函数

    setInterval("showTime()",1000);

    • 补充

      document.querySelector(css选择器):通过css选择器获得想要的元素
      clearInterval(t);//关闭定时器

  2. setTimeout(匿名函数或”函数名()”.时间间隔),用于在指定的毫秒后执行一次指定的函数

    clearTimeout(t);//停止未运行的定时器(停止预约的定时器)

事件处理

  1. event对象:事件对象，在事件发生的时候，由系统创建

    • 属性:key,字符串类型，表示按键的字母

      //onkeydown:按键被按下时候触发
document.onkeydown = function(event){
    if (event.key === "Enter"){
      let t = setInterval("showTime()",1000);
    }
    if (event.key === " "){
      clearInterval(t);
    }
  }

document.addEventListener("keydown",function (event) {
            var key = event.key;
            if (key === "Enter"){
                t = setInterval("showTime()",1000)
            }
            if (key === " "){
                clearInterval(t);
            }
        })

  2. 事件处理方式

    当父元素和子元素都添加了相同的事件处理程序，先调用谁的事件处理程序

    • 事件冒泡:先调用子程序的事件处理程序，在调用父元素的

    • 事件捕获:先调用父元素的事件处理程序，再调用子元素

      document.querySelector("div").addEventListener("click",function(){
    alert("div");
},true);//true:表示父元素先捕获再传递给子元素

document.querySelector("p").addEventListener("click",function(){
      alert("p")
})

  3. 取消事件冒泡

    document.querySelector("p").addEventListener("click",function(event){
    alert("p")
    event.cancelBubble = true;//取消事件冒泡
  })

  4. 阻止浏览器的默认行为

    document.addEventListener("contextmenu",function (event){
  event.preventDefault();//取消右键
})

Math

  1. random():生成一个0到1之间的随机小数，不能等于1
  2. round():四舍五入

补充

  1. document.querySelector("选择器"):得到所有匹配选择器的元素中的第一个
document.querySelectorAll("选择器"):得到所有匹配选择器的元素

    
2. ~~~JavaScript
   innerText:设置元素文本内容
   textContent:设置元素文本内容
   
   innerHTML:设置元素内容，对内容中的html标签会进行解析

String

  1. 构造方法

    var s = new String("Hello");

  2. 直接使用字符串字面量

    var s = "Hello";

  3. length:得到字符串中字符的个数

  4. 常用方法

    • charAt(index):得到索引号为index的字符,index从0开始
    • substring(startIndex,endIndex):求子串
    • indexOf(查找的串):查找第一次出现的位置索引号，没有返回-1
    • lastIndexOf(查找的串):查找最后一次出现的位置索引号，没有返回-1
    • replace(str1,str2):返回一个新的字符，把原来字符串中的第一个str1替换为str2
    • replaceAll(str1,str2):返回一个新的字符，把原来字符串中的str1替换为str2
    • toUpperCase():转换为大写字符
    • toLowerCase():转换为小写字符

表单验证

  1. 定义:在表单数据提交给服务器之前，对html表单中的数据进行验证(格式),如果错误，则拦截，不提交

  2. 作用:

    • 在客户端验证，速度快
    • 减轻服务器压力

  3. 验证过程

    • 编写页面

      <form action="Login" onsubmit="return checkForm()">
     <table>
    <tr>  
      <td>用户名:</td>
      <td><input type="text" name="username"></td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="password" name="password"></td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" value="登录">
      </td>
    </tr>
  </table>
</form>

    • 编写验证函数

           
function checkForm() {
  if(checkUsername() & checkPassword()){
      return true;
  }
     
return false;
}
function checkUsername() {
  let username = document.querySelector("[name='username']").value;
  if(username.trim() === ""){
    alert("用户名不能为空");
    return false;
  }
  if(username.trim().length < 3){
    alert("用户名长度不能小于3");
    return false;
  }
  return true;
}
function checkPassword() {
    let password = document.querySelector("[name='password']").value;
    if(password.trim() === ""){
      alert("密码不能为空");
      return false;
    }
    if (password.trim().length < 7){
      alert("密码不能少于七位");
      return false;
    }
    let num = 0;
    for (let i = 'a' ; i <'z' ; i++){
      if (password.trim().indexOf(i) >= 0){
        num++;
      }
    }
    for (let i = 'A' ; i < 'Z' ; i ++){
      if (password.trim().indexOf(i) >= 0){
        num++;
      }
    }
    if(num === 0){
      alert("密码至少要有一位字母");
      return false;
    }
    return true;
     
}

  4. onblur:失去焦点时

    <!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    [id$='s']{
      color: red;
    }
  </style>
  <script>
    function checkForm() {
      if(checkUsername() & checkPassword()){
          return true;
      }

    return false;
    }
    function checkUsername() {
      let username = document.querySelector("[name='username']").value;
      var us = document.querySelector("#us");
      us.innerText = ""
      if(username.trim() === ""){
        // alert("用户名不能为空");
        us.innerText = "用户名不能为空"
        return false;
      }
      if(username.trim().length < 3){
        alert("用户名长度不能小于3");
        return false;
      }

      return true;
    }
    function checkPassword() {
        let password = document.querySelector("[name='password']").value;
        var ps = document.querySelector("#ps");
        ps.innerText = "";
        if(password.trim() === ""){
          ps.innerText = "密码不能为空";
          return false;
        }
        if (password.trim().length < 7){
          ps.innerText = "密码不能小于七位";
          return false;
        }
        let num = 0;
        for (let i = 'a' ; i <'z' ; i++){
          if (password.trim().indexOf(i) >= 0){
            num++;
          }
        }
        for (let i = 'A' ; i < 'Z' ; i ++){
          if (password.trim().indexOf(i) >= 0){
            num++;
          }
        }
        if(num === 0){
          ps.innerText = "至少有一位字母";
          return false;
        }
        return true;


    }

  </script>
</head>
<body>

<form action="login" method="get" onsubmit="return checkForm()">
  <table>
    <tr>  
      <td>用户名:</td>
      <td><input type="text" name="username" onblur="checkUsername()"></td>
      <td><span id="us"></span></td>
    </tr>
    <tr>
      <td>密码:</td>
      <td><input type="password" name="password" onblur="checkPassword()"></td>
      <td><span id="ps"></span></td>
    </tr>
    <tr>
      <td colspan="3">
        <input type="submit" value="登录">
      </td>
    </tr>
  </table>
</form>
</body>
</html>

BOM

  1. BOM:浏览器对象模型，是用于操作浏览器窗口的对象模型，提供了一套对象，属性和方法，让js调用

  2. window:BOM的核心对象，表示一个浏览器实例，全局的变量和参数都可以认为是window的成员

    • 常用方法

      • alert(‘字符串’):表示一个警告对话框

      • prompt(“提示”,”默认值”):显示可提示用户输入的对话框，返回用户输入的值

      • confirm(“提示文字”):显示一个确认对话框，选择”确定”返回true，否则返回false

        var b = confirm("是否删除?")
document.write(b);

      • open(url,windowName,”窗口属性”):打开一个新的窗口,该方法返回值表示打开窗口对象的引用

        • windowName:新窗口的名字，先判断叫这个名字的窗口是否已经创建，如果已经创建，则显示，没有就创建新的

          document.querySelector("[value='open']").addEventListener('click',function(){
    open('表单检验.html',"newWin","width=300px,left=100,top=200");
})

      • close():关闭窗口

  3. location对象:该对象包含有关当前URL的信息

    • href:其值为地址栏中的地址，改变这个属性可以实现切换网页的效果

      location.href = "login.html";
location = "login.html";

    • reload():刷新网页

  4. history对象:保存用户上网的历史记录

    • 方法
      • back():后退一页
      • forward():前进一页
      • go(value):可以在历史记录中任意跳转

DOM

  1. DOM:文档对象模型(html、xml:可扩展标记语言)

  2. HTML文档解析

    • 当浏览器加载HTML文档的时候，会把该网页解析为一颗DOM树，最顶层的对象:document

    • 解析过程中会把网页中的所有内容解析为节点(Node)

      • 文档本身就是一个文档对象

      • 所有html元素都是元素节点(<p>)

      • 所有html属性都是属性节点

        <p class = "class1">
    
</p>

      • 插入到html元素中的文本是文本节点

        <p>
    tom<!--文本节点-->
</p>

    • 元素对象：代表一个HTML元素(html标签)

      • 元素对象的子节点可以是:元素节点、文本、注释

    • 节点的类型:12种

      • 元素节点：html元素，nodeType:1
      • 属性节点：html元素的属性，nodeType:2
      • 文本节点：html元素中文本，nodeType:3
      • 注释节点：html中的注释，nodeType:8
      • 文档对象节点：document对象，nodeType:9
      • 文档片段节点：表示一个没有父节点的文档片段，nodeType:11

  3. 节点属性

    • parentNode:获取当前节点的父节点(Node类型)
    • parentElement:获取当前节点的父元素(HTMLElement类型)
    • children：获取当前元素的所有子元素
    • childNodes:获取当前元素的所有子节点
    • previousSibling:获取的当前节点的前一个同级节点
    • previousElementSibling:获取的当前节点的前一个同级元素
    • nextElementSibling:获取的当前节点的后一个同级元素
    • textContent：获取当前节点的文本内容
    • innerHTML:获取当前节点的所有节点内容

  4. 节点操作

    • remove()：删除当前元素或节点

    • 创建节点

      document.createElement("标签名")

    • 追加子节点

      节点对象.appendChild(子节点)

省市连级

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function getCities(dic){
            var cityObj = {

            };
            cityObj["辽宁"] = ["沈阳","大连","鞍山","阜新","本溪","朝阳","盘锦","锦州","葫芦岛"];
            cityObj["吉林"] = ["吉林","长春"];
            cityObj["黑龙江"] = ["哈尔滨","齐齐哈尔"];
            cityObj["河北"] = ["石家庄"]
            if (dic == 0){
                let cityDom = document.querySelector("#city");
                cityDom.length = 1;
                for (let i = 0; i < cityObj.辽宁.length; i++) {
                    let c1 = new Option(cityObj.辽宁[i],i);
                    cityDom.options.add(c1);
                }
            }
            if (dic == 1){
                let cityDom = document.querySelector("#city");
                cityDom.length = 1;
                for (let i = 0; i < cityObj.吉林.length; i++) {
                    let c1 = new Option(cityObj.吉林[i],i);
                    cityDom.options.add(c1);
                }
            }
            if(dic == 2){
                let cityDom = document.querySelector("#city");
                cityDom.length = 1;
                for (let i = 0; i < cityObj.黑龙江.length; i++) {
                    let c1 = new Option(cityObj.黑龙江[i],i);
                    cityDom.options.add(c1);
                }
            }
            if (dic == 3){
                let cityDom = document.querySelector("#city");
                cityDom.length = 1;
                for (let i = 0; i < cityObj.河北.length; i++) {
                    let c1 = new Option(cityObj.河北[i],i);
                    cityDom.options.add(c1);
                }
            }
        }

    </script>
</head>
<body>
    省份:
    <select onchange="getCities(this.value)">
      <option>请选择</option>
      <option value="0">辽宁</option>
      <option value="1">吉林</option>
      <option value="2">黑龙江</option>
      <option value="3">河北</option>
    </select>
    城市:
    <select id="city">
      <option>请选择</option>
    </select>

</body>
</html>

通过JS修改元素的样式

  1. 通过元素的style属性修改

    • css样式中的-去掉

      document.querySelector("p").style.color = 'red';
document.querySelector("p").style.fontSize = "20px";

  2. 通过元素的className属性设置类样式

    <style>
        .class1{
            color: blue;
            font-size: 30px;
            font-weight: bold;
            border: 1px solid ;
        }
</style>

document.querySelector("p").className = 'class1';

  3. 通过元素的classList属性设置样式

    <style>
        .class1{
            color: blue;
            font-size: 30px;
            font-weight: bold;
            border: 1px solid ;
        }

        .class2{
            font-style: italic;
        }
</style>

document.querySelector("p").classList.add("class1");
document.querySelector("p").classList.add("class2");
document.querySelector("p").classList.remove("class2");//移除样式

Web存储

  1. 定义:web存储是浏览器提供的一种在客户端存储键值对数据的机制，它允许网站存储数据，即使在浏览器关闭和重新打开后，也能访问，web存储有两种方式
    • localStorage
    • sessionStorage
  2. localStorage
    • 持久性存储：即使在浏览器关闭后，也不丢失
    • 作业域：localStorage的数据对于同一浏览器的同一源(相同协议、域名和端口相同)是可以访问的
    • 存储限制:通常限制为每个源5MB
    • 方法
      • setItem(key,value):key是字符串,value也是字符串
      • getItem(key):根据key得到值
      • removeItem(key):根据key移除键值对
      • clear():清除所有
  3. sessionStorage
    • 会话级别存储：数据存储在sessionStorage中，只在当前浏览器标签或窗口的生命周期内持续，关闭标签或窗口后，数据将被清除
    • 作用域：存储限制和方法都与localStorage相同

JSON

  1. 定义：javaScript对象表示法，是一种用于储存和传输数据的格式，特别是在web开发中，现在已经是许多编程语言之间交换数据的通用标准。

  2. 组成

    • 键值对的集合：通过大括号{}表示
    • 值的有序列表：通过中括号[]表示

  3. JSON的解析与序列化

    • 序列化JS对象：通过使用JSON.stringify():可以将JS对象转换为JSON格式的字符串

    • 解析JSON字符串:通过JSON.parse()方法，将JSON格式字符串转换为JS对象

      var stu = JSON.parse(stustr);//返回JS对象