html+js+Jquery（三）-阿里云开发者社区

JavaScript

(一). ECMAScript

1. JavaScript基本语法

1>.什么是javaScript?

一门客户端脚本语言

运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

脚本语言：不需要编译，直接就可以被浏览器解析执行了

学习三大模块

ECMAScript：（European Computer Manufacturers Association）规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

DOM——文档对象模型

BOM——浏览器对象模型

2>.js和html的结合方式 [ 两种 ]

①. 内部JS：<script type="text/javascript">js代码</script>

②. 外部JS：定义<script>通过src属性引入外部的js文件

注意：

type：默认值text/javascript可以不写，不写也是这个值

src：当需要引入一个外部的js文件时，使用该属性指向文件的地址

建议把script标签放到body后面（html解析是从上到下解析的）

3>.js原始类型和声明变量

①. string：字符串。字符串 “abc” “a” ‘abc’

②. number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)

③. boolean: true和false

④. null：一个对象为空的占位符

⑤. undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined var aa;

typeof():查看当前变量的数据类型

注：null运算后得到的是object

var str="123";
alert(typeof(str))
<a href="javascript:alert('点我');">点我</a>
<a href="javascript:;">点我没反应</a>//常用
//在以后js中就是
javaScript：void；

4>. 变量

语法：var 变量名 = 初始化值;

5>.运算符

1.一元运算符：只有一个运算数的运算符

++，-- ， +(正号)

* ++ --: 自增(自减)

* ++(–) 在前，先自增(自减)，再运算

* ++(–) 在后，先运算，再自增(自减)

* +(-)：正负号 var a = +“abc”; NaN

* 注意：在JS中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换

* 其他类型转number：

* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）

* boolean转number：true转为1，false转为0

2.算数运算符

+ - * / % …

3.赋值运算符

= += -+…

4.比较运算符

< >= <= ==   ===(全等于) != !==  
== 判断数值  ===(全等于) 判断数值之前，先判断类型是否一直 
比较方式
    1. 类型相同：直接比较
        * 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
    2. 类型不同：先进行类型转换，再比较
        * ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

5.逻辑运算符

&& || !

6. 三元运算符

* 语法：
  * 表达式? 值1:值2;
  * 判断表达式的值，如果是true则取值1，如果是false则取值2；

2. 流程控制语句：

1. if...else...
2. switch:
* 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
  * switch(变量):
  case 值:
* 在JS中,switch语句可以接受任意的原始数据类型
3. while
4. do...while
5. for

(1). if判断语句：`if（x==1）{alert("if测试") }
(2). switch
<script>
    var dd = new Date();
    var today=dd.getDay()
    switch(today) {
    case 1:
      document.write("今天星期一");
      break;
    case 2:
      document.write("今天星期二");
      break;
    case 3:
      document.write("今天星期三");
      break;
    case 4:
      document.write();
      break;
    case 5:
      document.write("今天星期三");
      break;
    case 6:
      document.write("今天星期三");
      break;
    case 7:
      document.write("今天星期三");
      break;
      default:
      document.write("我也不知道今天星期几");
      break;
    }
  </script>
(3).for
<script>
    var xx=new Array("小智","小幸","张三");
    for(i=0;i<xx.length;i++){
    document.write(xx[i]+"<br>");
    }
</script>
(4).while
<script>
  var i=0;
  var sum=0;
  while(i<100){
    sum=i+sum;
    i++;
  }
  alert(sum);
</script>

3. 数组的定义格式

①. var arr=[1,2,3]; var arr=[1,"4",true];

②. 使用内置对象Array对象

var arr1=new Array(5);
 arr1[0]=1;

③. 使用内置对象Array

//定义一个数组，数组里面的元素是3 4 5
var arr2=new Array(3,4,5)

注意：

（1）.数组里面有一个属性length：获取数组的长度

（2）.数组可以存放不同的数据类型的数据

（3）.数组的长度是可变的。

4. 函数的三种形式

特点：

（1）. 方法定义是，形参的类型不能写,返回值类型也不能写。

（2）. 方法是一个对象，如果定义名称相同的方法，会覆盖

（3）. 在JS中，方法的调用只与方法的名称有关，和参数列表无关

（4）. 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数

属性：

length:代表形参的个数

①. 使用一个关键字function

function test(参数列表){
      方法体；
      返回值可有可无（根据实际的需要）
       }

function test(){
  alert("测试")；          
      }
  test();
  //定义一个有参数的方法 实现两个数的相加
  function add(a,b){
  var sum=a+b;
  alert(sum)
  }
   add(5,6);

②. 匿名函数

var add=function(){
 alert(11);
    }

③. [了解]

var add=new Function（"x,y","var sum; sum=x+y;return sum"）

1. js里面不存在重载
 2. 但是可以通过其他方式模拟重载的效果（通过arguments数组来实现
      <script>
    function add() {
    //比如传递的是两个参数
    if(arguments.length == 2) {
      return arguments[0] + arguments[1];
    } else if(arguments.length == 3) {
      return arguments[0] + arguments[1] + arguments[2];
    } else {
      return arguments[0] + arguments[1] + arguments[2] + arguments[3];
    }
    }
    document.write(add(1, 2));
    document.write("<hr>");
    document.write(add(1, 2, 3));
    document.write("<hr>");
    document.write(add(1, 2, 3, 4));
  </script>

5.js的全局变量和局部变量

全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用，在方法外部使用，在方法内部使用，在另一个script标签中使用

局部变量：在方法内部定义一个变量，只能在方法内部使用

如果在方法的外部调用这个变量，提示出错

6.String对象

①. charAt(n)找到索引位置上的字符

②. charCodeAt(n)找到索引位置上的字符的编码制：a=97,A=65

③. indexOf("m"):找m在字符串中第一次出现的位置，如果没有找到就返回给-1.

④.lastIndexOf("m"):找m在字符串中第一次出现的位置，如果没有找到就返回给-1

⑤. split("n"): 以字符串n分割字符串并返回一个数组，以空字符分割会把字符串每个字符都当做数组的一项内容，如果不存在n那么就会把整个字符串当成数组的内容

⑥. substr(n,m):截取字符串：把字符串从n的位置开始截取，截取m个，如果只有一个参数n，就是从n开始截取，截取到最后

⑦. substring（n，m）截取字符串：把字符串从n开始截取，截取到m的位置。注意：能够取到n，不能取到m。如果只有一个参数，就是从n开始截取，截取到最后

⑧. toLowerCase():把字符串中的字母转换成小写

⑨. toUpperCase():把字符串中的字母转换成大写

<script>
    var arr = "adaBsdbfBf";
         /*var num=arr.charAt(5);*/
         /*var num=arr.charCodeAt(1);*/
         /*var num=arr.indexOf("d")*/
         /* var num=arr.lastIndexOf("f");*/
         /*var num=arr.split("B");*/
        /*  var num=arr.split("");*/
    document.write(num);
  </script>

7.Array对象

①. push( ) 向数组的末尾添加一个或更多元素，并返回新的长度

②. join(参数):将数组中的元素按照指定的分隔符拼接为字符串，如果以空字符串连接那么就不会加入新的内容直接把数组的每项内容连接

③. pop( )；删除数组的最后一项并返回

④.Reverse( )：反转数组的顺序内容

⑤. concat( )连接内容或者数组，组成新的数组

<script>
  /*1.concat()*/
  var arr = [25, 24, 99, 10, 20];
  var n = arr.concat(4);  
  document.write(n + "<br>");
  /*  2.join()*/
  var x = arr.join("");
  document.write(x + "<br>")
  /* 3.pop():删掉数组的最后一个值并且返回*/
  var d = arr.pop();
  document.write(d + "<br>");
  /*  4.Reserve:将数组的值反转*/
  var dd = arr.reverse();
  document.write(dd);
  </script>

8.Date对象

说明：有相应的get得到它们的值，就有对应的set设置他们的值

①.创建当前时间的日期对象：var d1=new Date(）

②. toLocaleString():以当前本地格式显示的状态d1.toLocaleString();

③. 获得从1970年开始到时间日期的毫秒值 var d3=d1.getTime();

④. 获得星期： var d2=d1.getDay();

var d1=new Date();//获得当前日期
  document.write(d1.toLocaleString()+"<br>");
  var d2=d1.getDay();//获得星期
  document.write(d2+"<br>");
  var d3=d1.getTime();//获得从1970年开始到时间日期的毫秒值
  document.write(d3);

//计算从现在开始你生活了多少天？
    //创建一个出生日期时间的对象
  var chusheng=new Date("1996/2/11 8:35:36");
  /*document.write(chusheng.toLocaleString())*/
  var xianzai=new Date();
  //获取从1970年到出生的时候的毫秒值
  var n1=chusheng.getTime();
  //获取从1970年到现在的毫秒值
  var n2=xianzai.getTime();
  var n3=(n2-n1)/(24*60*60*1000);
  document.write("小智从现在开始生活了"+n3+"天");

9.Math

①.Math.pow(n,m)：求n的m次方

②. Math.abs(n)：求n的绝对值

③. Math.random() ：获得一个0~1之间的随机数字。注意：能取到0但是不能取到1**

④. floor()对数进行下舍入

⑤. ceil()：对数进行上舍入

求任意随机数1-100
Math.floor(大数-小数+1)+小数
Math.floor(Math.random(100))+1

10. eval（）和 pareInt（）

eval():把写在变量里的js代码输入

parseInt():解析一个字符串并返回一个整数

//eval方法:把写在变量里的js代码输入
    var str="alert('1234');";
    //eval(str);
    //parseInt:转换成Int
    var t="123";
    document.write(parseInt(t)+1);

10. RegExp

1>.正则表达式：定义字符串的组成规则

1. 单个字符:[]
  如： [a] [ab] [a-zA-Z0-9_]
  * 特殊符号代表特殊含义的单个字符:
  \d:单个数字字符 [0-9]
  \w:单个单词字符[a-zA-Z0-9_]
2. 量词符号：
  ?：表示出现0次或1次
  *：表示出现0次或多次
  +：出现1次或多次
  {m,n}:表示 m<= 数量 <= n
  * m如果缺省： {,n}:最多n次
  * n如果缺省：{m,} 最少m次
3. 开始结束符号
  * ^:开始
  * $:结束

2>. 正则对象

1. 创建
  1. var reg = new RegExp("正则表达式");
  2. var reg = /正则表达式/;
2. 方法 
  1. test(参数):验证指定的字符串是否符合正则定义的规范

（二）. BOM

bom: broswer object model :浏览器对象模型

组成：

Window：窗口对象

Navigator：浏览器对象

Screen：显示器屏幕对象

History：历史记录对象

Location：地址栏对象

1. location

请求的url地址 ; href(记住这一个属性)

①. 获取到请求的url地址：location.href

②. 设置url地址: location.href="https://www.baidu.com";

//获取到请求的url地址
     document.write()
            //设置url地址
            //页面上安置一个按钮,按钮上绑定一个事件，当我点击这个按钮的时候，页面可以跳转到另外一个页面
            function href1(){
            location.href="https://www.baidu.com";
            }

2. history:请求的url的历史记录

①. back( ) 加载 history 列表中的前一个 URL

②. forward( ) 加载 history 列表中的下一个 URL

③. go(参数) 加载 history 列表中的某个具体页面

正数：前进几个历史记录

负数：后退几个历史记录

④. 属性：length：返回当前查看历史列表中的URL数量

3.window 掌握 [ 里面的方法都要记住 ]

特点

* Window对象不需要创建可以直接使用 window使用。 window.方法名();

* window引用可以省略。方法名();

1>. 与弹出框有关的方法：

①. window.alert():页面弹出一个提示框 [ 简写：alert( ) ]

②. window.confirm();点击确定返回:true 取消返回false

③. prompt():第一个参数是要提示的内容，第二个是里面默认的提示

2>. 与打开关闭有关的方法：

①. open:打开一个新的窗口

open(“打开新窗口的地址”,"",“窗口特征,比如宽和高”)

②. window.close( ):关闭窗口:返回新的Window对象

3>. 与定时器有关的方式

①. setInterval("js代码"，毫秒值)1s=1000ms

window.setInterval(“alert(‘123’)”,3000);[ 每3s出现一个alert，执行多次 ]

②. setTimeout("js代码",毫秒数):表示在毫秒值之后执行，但是只会执行一次

③. clearInterval():清除setInterval设置的定时器

④. clearTimeout()：清除clearTimeout设置的定时器

<body>
  <input type="button" value="open" onclick="open1()">
     <input type="button" value="关闭定时器I" onclick="clearI()">
     <input type="button" value="关闭定时器T" onclick="clearT()">
  <script>
   //2.window.confirm();点击确定返回:true 取消返回false
   var flag=window.confirm("你确定是否删除？")
   if(flag==true){
    alert("删除成功！")
   }else{
    alert("取消删除！")
   }
   //3.prompt():第一个参数是要提示的内容，第二个是里面默认的提示
   window.prompt("请输入","0");
   //4.open:打开一个新的窗口
   //open("打开新窗口的地址","","窗口特征,比如宽和高")
   //创建一个按钮，点击这个按钮，打开一个新的窗口
   function open1(){
    window.open("https:www.baidu.com","","width=100%,height=100%")
   }
   //5.window.close():关闭窗口(浏览器兼容性差)
   window.close();
   //6.window.setInterval(做定时器)
   //setInterval("js代码"，毫秒值)1s=1000ms
   //  window.setTimeout
   var indexI=window.setInterval("alert('123')",3000);
   //7.setTimeout()
   var indexT=window.setTimeout("alert('小智你好棒')",4);
  //8.暂停计时器
    function clearI(){
      window.clearInterval(indexI);
    }
    var clearT=function(){
      window.clearTimeout(indexT);
    }
  </script>
  </body>

（三）DOM:文档对象模式

dom： document object model:文档对象模式 [ 可以通过DOM随心所欲操作WEB页面 ]

1. 解析过程

根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象

①. document对象：整个文档 ②. element对象：标签对象

③. 属性对象 ④.文本对象

节点：Node——构成HTML文档最基本的单元

常用节点分为四类
– 文档节点：整个HTML文档
– 元素节点：HTML文档中的HTML标签
– 属性节点：元素的属性
– 文本节点：HTML标签中的文本内容

2.document对象：表示整个的文档 [常用方法]

1>. document对象的方法

①. document.write():向页面输出变量值；向页面输出html代码

②. getElementById()：通过id得到元素 [ 便签 ]

③. getElementsByName():通过便签的name的属性值得到标签，返回的是一个集合 [ 数组 ]

④. getElementsByTagName("标签的名称"):

⑤. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组

<body>
  <input type="text" id="nameId" value="getElementById" /></br>
  <!--<input type="text" name="name1"  value="getElementsByName1" /></br>
  <input type="text" name="name1"  value="getElementsByName2" /></br>
  <input type="text" name="name1"  value="getElementsByName3" /></br>
  <input type="text" name="name1"  value="getElementsByName4" /></br>-->
  <!--演示getElementByTagName()需要把上面的input注释掉-->
  <input type="text" name="name2"  value="getElementsByTagName" /></br>
  <input type="text" name="name2"  value="getElementsByTagName" /></br>
  <input type="text" name="name2"  value="getElementsByTagName" /></br>
  <input type="text" name="name2"  value="getElementsByTagName" /></br>
  <script>
    //1.write()方法
    var str="asd";
    document.write("write()方法"+str);
    document.write("<hr>");
    //2.使用getElementById得到input框中的值
    var InputV=document.getElementById("nameId").value;
    document.write(InputV);
    document.write("<hr>");
    //3.使用getElementsById得到input标签
    var inputs=document.getElementsByName("name1");
    for(var i=0;i<inputs.length;i++){
    var input1=inputs[i];//每次循环得到的input1对象，赋值给input里面
    document.write(input1.value);//得到每个input标签里面的value值
    }
    document.write("<hr>");
    //4.演示getElementsByTagName:
    var inputs1=document.getElementsByTagName("input");
    alert(inputs1.length);
    for(var i=0;i<inputs1.length;i++){
    var inputs11=inputs1[i];
    document.write(inputs11.value);
    document.write("<br>");
    }
  </script>
  </body>

2>. document对象的属性

①. createElement()：创建一个元素

②. createTextNode() ：创建一个元素里面的内容

3>.案列

在末尾添加节点

①.获取到li标签

②.创建li标签:document.createElement("便签名字")

③.创建文本：document.createTextNode("文本内容")

④.把文本添加到li下面：appendChild方法

<body>
  <ul id="ulId">
    <li>111</li>
    <li>222</li>
    <li>333</li>
  </ul>
        <input type="button" value="添加" onclick="append()"/>
  <script>
    function append(){
    var ul1=document.getElementById("ulId");
    //创建标签
    var li1=document.createElement("li");
    //创建文本
    var text1=document.createTextNode("444 ");
       //把文本加入到li下面
       li1.appendChild(text1);
       //把li加入到ul下面
       ul1.appendChild(li1);
    } 
  </script>
  </body>

3.Element对象

要操作element对象，首先必须获取到element（使用document中的方法）

①. 获取属性里面的值：getAttribute("属性名称")

②. 设置属性：setAttribute(name,value)

③. 删除属性：removeAttribute(name)注意：不能删除value

<input type="text" id="inputId" value="aaa" class="xx" />
  <script>
    //获取到属性的值
    var inputId=document.getElementById("inputId");
    document.write(inputId.getAttribute("value"));
    //给input赋一个class
    inputId.setAttribute("class",1);
    inputId.setAttribute("class1","haha");
    //移除属性的值
    inputId.removeAttribute("class1");
  </script>

④.在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName（）方法，改方法返回一个集合

    <ul id="ulId">
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
  <script>
  //获取标签下面的子标签
  var ulId=document.getElementById("ulId");
  var liList=ulId.getElementsByTagName("li");
  alert(liList.length);
  </script>

4.Node节点

1>.Node的概述

节点对象，其他5个的父对象

特点：所有dom对象都可以被认为是一个节点

2>. 方法

①. appendChild( )：向节点的子节点列表的结尾添加新的子节点。

②. removeChild( ) ：删除（并返回）当前节点的指定子节点

③. replaceChild()：用新节点替换一个子节点

④.insertBefore(newNode,oldNode):在某个节点之前插入一个新的节点

注意：没有insertAfter方法

3>. 属性

parentNode 返回节点的父节点

<body>
  <ul id="ulid1">
    <li id="li1">tom</li>
    <li>mary</li>
    <li>jack</li>
  </ul>
  <input type="button" value="add" onclick="add()" />
  <script>
      //在tom前面添加一个xiaozhi
    function add(){
    //获取到li1节点tom
    var li1 = document.getElementById("li1");
    //创建li
    var li=document.createElement("li");
    //创建文本
    var text=document.createTextNode("xiaozhi");
    //把文本放到标签中
    li.appendChild(text);
    //获取ul
    var ul=document.getElementById("ulid1");
    ul.insertBefore(li,li1);
    }
  </script>
  </body>

<body>
  <ul id="ulid1">
    <li id="li1">tom</li>
    <li>mary</li>
    <li>jack</li>
  </ul>
  <input type="button" value="add" onclick="add()" />
  <input type="button" value="remove" onclick="remove()" />
  <script>
      //在tom前面添加一个xiaozhi
    function add(){
    //获取到li1节点tom
    var li1 = document.getElementById("li1");
    //创建li
    var li=document.createElement("li");
    //创建文本
    var text=document.createTextNode("xiaozhi");
    //把文本放到标签中
    li.appendChild(text);
    //获取ul
    var ul=document.getElementById("ulid1");
    ul.insertBefore(li,li1);
    }
  //删除掉ul下面的第一个
  function remove(){
    //先获取到它的父节点，后通过父节点吧这个元素删除
    //获取父节点有两种方式:1.通过id获取  2.通过parentNode获取
    var li1 = document.getElementById("li1");
    var parent=li1.parentNode;
    parent.removeChild(li1);
  }
  </script>

//不能字节替换自己，通过父节点替换
两个参数：第一个参数新的节点，第二个参数被替换的节点
<body>
  <ul id="ulid1">
    <li id="li1">tom</li>
    <li>mary</li>
    <li id="li3">jack</li>
  </ul>
  <input type="button" value="add" onclick="replace()" />
   <script>
    //把<li id="li3">jack</li>替换成<li>小智</li>
    function replace(){
    //创建li
    var li=document.createElement("li");
    //创建文本
    var text=document.createTextNode("小智");
    //把文本放入标签中
    li.appendChild(text);
    //获取父节点ul
    var ulid1=document.getElementById("ulid1");
    //获取li3
      var li3=document.getElementById("li3");
    //进行替换
    ulid1.replaceChild(li,li3);
    }
   </script>

5. innerHTML属性

这个属性不是dom的组成部分，但是大多数浏览器都支持的属性

1>. 标签体的设置和获取：innerHTML

①. 获取文本内容

②. 向标签里面设置内容（可以是html代码）

//获取标签里的文本内容
      var spanInner=document.getElementById("spanId");
      alert(spanInner.innerHTML)
      //向便签里设置内容
      spanInner.innerHTML="小智改变";

③. 拼接

2>. 控制元素样式

<style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="div1">
        div1
    </div>
    <div id="div2">
        div2
    </div>
<script>
    var div1 = document.getElementById("div1");
    div1.onclick = function(){
        //修改样式方式1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size--> fontSize
        div1.style.fontSize = "20px";
    }
    var div2 = document.getElementById("div2");
    div2.onclick = function(){
        div2.className = "d1";
    }

6. 事件

1>. 点击事件：

①.onclick：单击事件 ②. ondblclick：双击事件

2>. 焦点事件

①.onblur：失去焦点 ②. onfocus:元素获得焦点。

3>. 加载事件：

onload：一张页面或一幅图像完成加载

4>.鼠标事件：

- onmousedown 鼠标按钮被按下。
 - onmouseup  鼠标按键被松开。
 - onmousemove  鼠标被移动。
 - onmouseover  鼠标移到某元素之上。
 - onmouseout 鼠标从某元素移开。

5>.键盘事件：

- onkeydown 某个键盘按键被按下。  
 - onkeyup  某个键盘按键被松开。
 - onkeypress 某个键盘按键被按下并松开。

6>.选择和改变

- onchange  域的内容被改变。 
- onselect  文本被选中。

7>. 表单事件：

①.onsubmit 确认按钮被点击。②. onreset重置按钮被点击。

7. 案列

①. 灯泡的开和关

<body>
    <img src="img/off.gif" id="imgId"/>
</body>
<script>
  window.onload=function(){
      //1.获取图片对象
      var imgId=document.getElementById("imgId");
      //alert(imgId.id) imgId
      var num=0;
      2.绑定单击事件
      imgId.onclick=function () {
          if(num%2==0){
              imgId.src="img/off.gif";
          }else{
              imgId.src="img/on.gif";
          }
          num++;
      };
  }
</script>
</html>

②. 轮播图

<body>
    <img id="img" src="img/banner_1.jpg" width="100%">
    <script>
        /*
            分析：
                1.在页面上使用img标签展示图片
                2.定义一个方法，修改图片对象的src属性
                3.定义一个定时器，每隔3秒调用方法一次。
         */
        //修改图片src属性
        var number = 1;
        function fun(){
            number ++ ;
            //判断number是否大于3
            if(number > 3){
                number = 1;
            }
            //获取img对象
            var img = document.getElementById("img");
            img.src = "img/banner_"+number+".jpg";
        }
        //2.定义定时器
        setInterval(fun,3000);
    </script>
</body>
</html>

③. 五秒后跳转页面

<style>
        p{
            text-align: center;
        }
        span{
            color:red;
        }
    </style>
</head>
<body>
<p>
    <span id="time">5</span>秒之后，自动跳转到首页...
</p>
<script>
    /*
        分析：
           1.显示页面效果  <p>
           2.倒计时读秒效果实现
               2.1 定义一个方法，获取span标签，修改span标签体内容，时间--
               2.2 定义一个定时器，1秒执行一次该方法
           3.在方法中判断时间如果<= 0 ，则跳转到首页
     */
    // 2.倒计时读秒效果实现
    var second = 4;
    var time = document.getElementById("time");
    //定义一个方法，获取span标签，修改span标签体内容，时间--
    function showTime(){
        time.innerHTML = second +"";
        //没调用一次方法就second--
        second--;
        //判断时间如果<= 0 ，则跳转到首页
        if(second <= 0){
            //跳转到首页
            location.href = "https://www.baidu.com";
        }
    }
    //设置定时器，1秒执行一次该方法
    setInterval(showTime,1000);
</script>
</body>
</html>

④. 关于删除和添加节点

<style>
    #div1{
    background-color: paleturquoise;  
    width:200px;
    height: 100px;
    }
    #div2{
    background-color: brown;  
    width:100px;
    height: 50px; 
    }
  </style>
  </head>
  <body>
  <div id="div1" >
    <div id="div2">
    div1
    </div>
  </div>
  <!--javascript:void(0):可以被点击,点击后不会跳转到指定的url-->
  <a id="aId" href="javascript:void(0)">删除子节点</a>
  <a id="aIdApp" href="javascript:void(0)">添加子节点</a>
  <input type="button"  value="删除" onclick="del()"/>
  <script>
  /*  function del(){
      var div1Id=document.getElementById("div1");
      var div2Id=document.getElementById("div2");
      div1Id.removeChild(div2Id);
  }*/
  var aId=document.getElementById("aId");
  aId.onclick=function(){
    var div1Id=document.getElementById("div1");
      var div2Id=document.getElementById("div2");
      div1Id.removeChild(div2Id);
  }
  var aIdApp=document.getElementById("aIdApp");
  //添加节点
  var aIdApp=document.getElementById("aIdApp");
  aIdApp.onclick=function(){
  var div1=document.getElementById("div1");
  var divNew=document.createElement("div");
  var divNewText=document.createTextNode("divNew");
  divNew.appendChild(divNewText);
  div1.appendChild(divNew);
  }
  var div2=document.getElementById("div2");
  </script>
  </body>
</html>

⑤. 动态表格的增删改查

<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .inputDiv {
    text-align: center;
    margin-top: 50px;
    }
    .tableCss {
    margin-top: 50px;
    }
    td{
    text-align: center;
    }
  </style>
  </head>
  <body>
  <div class="inputDiv">
    <input id="sid" type="text" placeholder="请输入编号" />
    <input id="sname" type="text" placeholder="请输入学生姓名" />
    <input id="ssex" type="text" placeholder="请输入性别" />
    <input id="btnAdd" type="button" value="添加" />
  </div>
  <table id="tableId" class="tableCss" border="1" align="center" width="400px">
    <caption>学生信息表</caption>
    <tr>
    <th>编号</th>
    <th>姓名</th>
    <th>性别</th>
    <th>操作</th>
    </tr>
  </table>
  <script>
    /*添加*/
    var btnAdd = document.getElementById("btnAdd");
    btnAdd.onclick = function() {
    /*获取文本框的值*/
    var sid = document.getElementById("sid").value;
    var sname = document.getElementById("sname").value;
    var ssex = document.getElementById("ssex").value;
    var tableId = document.getElementById("tableId");
    /*创建一个tr*/
    var tr = document.createElement("tr");
    /*创建文本和td*/
    /*sid的添加*/
    var td = document.createElement("td");
    var textSid = document.createTextNode(sid);
    td.appendChild(textSid);
    tr.appendChild(td);
    /*姓名的添加*/
    var td2 = document.createElement("td");
    var textSname = document.createTextNode(sname);
    td2.appendChild(textSname);
    tr.appendChild(td2);
    /*性别的添加*/
    var td3 = document.createElement("td");
    var textSex = document.createTextNode(ssex);
    td3.appendChild(textSex);
    tr.appendChild(td3);
    /*添加删除按钮*/
    var td4=document.createElement("td");
    var a=document.createElement("a");
    a.setAttribute("href","javaScript:void(0)");
    a.setAttribute("onclick","del(this)");
    var textDelete=document.createTextNode("删除");
    a.appendChild(textDelete);
    td4.appendChild(a);
    tr.appendChild(td4);
    tableId.appendChild(tr);
    }
     /*删除*/
     function del(obj){
        /*obj代表的a标签,先找到table*/
        var table= obj.parentNode.parentNode.parentNode;
        /*找到tr*/
        var tr=obj.parentNode.parentNode;
        table.removeChild(tr);
     }
  </script>
  </body>
</html>

⑥. 全选、反选、全不选、鼠标移入和鼠标移除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }
        td,t-h{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>
  <script>
      /*
        分析：
            1.全选：
                * 获取所有的checkbox
                * 遍历cb，设置每一个cb的状态为选中  checked
       */
      //1.在页面加载完后绑定事件
      window.onload = function(){
          //2.给全选按钮绑定单击事件
          document.getElementById("selectAll").onclick = function(){
                //全选
                //1.获取所有的checkbox
                var cbs = document.getElementsByName("cb");
                //2.遍历
                  for (var i = 0; i < cbs.length; i++) {
                    //alert(cbs[i].checked)
                      //3.设置每一个cb的状态为选中  checked
                      cbs[i].checked = true;
                  }
          }
          document.getElementById("unSelectAll").onclick = function(){
              //全不选
              //1.获取所有的checkbox
              var cbs = document.getElementsByName("cb");
              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态为未选中  checked
                  cbs[i].checked = false;
              }
          }
          document.getElementById("selectRev").onclick = function(){
              //反选
              //1.获取所有的checkbox
              var cbs = document.getElementsByName("cb");
              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态为相反
                  cbs[i].checked = !cbs[i].checked;
              }
          }
          document.getElementById("firstCb").onclick = function(){
              //第一个cb点击
              //1.获取所有的checkbox
              var cbs = document.getElementsByName("cb");
              //获取第一个cb
              //2.遍历
              for (var i = 0; i < cbs.length; i++) {
                  //3.设置每一个cb的状态和第一个cb的状态一样
                  cbs[i].checked =  this.checked;
              }
          }
          //给所有tr绑定鼠标移到元素之上和移出元素事件
          var trs = document.getElementsByTagName("tr");
          //2.遍历
          for (var i = 0; i < trs.length; i++) {
              //className 就是指的是你的css样式名
              //移到元素之上
              trs[i].onmouseover = function(){
                    this.className = "over";
              }
              //移出元素
              trs[i].onmouseout = function(){
                     this.className = "out";
              }
          }
      }
  </script>
</head>
<body>
<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstCb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
    <tr>
        <td><input type="checkbox"  name="cb" ></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

⑦. 动态显示时间

<div id="times"></div>
  <script>
      function getD1(){
        //1.当前时间
        var date=new Date();
        //2.格式化
        var d1=date.toLocaleString();
        //3.获取div,把里面的内容改成格式化的d1
        var div1=document.getElementById("times");
            div1.innerHTML=d1;
      }
      //使用定时器实现每一秒写一次时间
      setInterval("getD1()",1000);
     </script>

⑧.全选、反选、全不选老版本

<form action="">
    <input type="checkbox" id="checkB" οnclick="selectAllNo();"/> 全选/全不选</br>
    <input type="checkbox" name="love" />篮球
    <input type="checkbox" name="love" />足球
    <input type="checkbox" name="love" />排球
    <input type="checkbox" name="love" />冰球
  </br>
    <input type="button" value="全选" οnclick="selAll();"/>
    <input type="button" value="全不选" οnclick="selNo();"/>
    <input type="button" value="反选" οnclick="selectOther();"/>
  </form>
  <script>
    //全选和全不选
    function selectAllNo(){
    var check1=document.getElementById("checkB");
      if(check1.checked==true){
        selAll();
      }else{
        selNo();
      }
    }
    //全选
    function selAll(){
    //1.获取要操作的复选框-使用getElementsByName();
    var loves=document.getElementsByName("love");
    //2.返回的数组,属性:checked判断复选框是否选中；
    //便利数组，得到的是每一个checked。把每一个checkbox属性checked=true
    for(var i=0;i<loves.length;i++){
      var love1=loves[i];
      love1.checked=true;
      //loves[i].setAttribute("checked",true);
    }
    }
    //全不选
    function selNo(){
    //1.获取要操作的复选框-使用getElementsByName();
    var loves=document.getElementsByName("love");
    //2.返回的数组,属性:checked判断复选框是否选中；
    //便利数组，得到的是每一个checked。把每一个checkbox属性checked=true
    for(var i=0;i<loves.length;i++){
      var love2=loves[i];
      love2.checked=false;
      //loves[i].setAttribute("checked",true);
    }
    }
    //反选
    function selectOther(){
    //1.获取到要操作的复习框
    var loves=document.getElementsByName("love");
    //2.返回每一个数组
    for(var i=0;i<loves.length;i++){
    //3.得到每一个复选框
    var love1=loves[i];
    //4.判断当前的复选框是否选中还是不选中
    if(love1.checked==true){
    //5.如果选中，属性check设置成false；否则check设置成true
      love1.checked=false;
    }else{
      love1.checked=true;
    }
    }
        }
  </script> 
  </body>

html+js+Jquery（三）

JavaScript

(一). ECMAScript

1. JavaScript基本语法

1>.什么是javaScript?

2>.js和html的结合方式 [ 两种 ]

3>.js原始类型和声明变量

4>. 变量

5>.运算符

2. 流程控制语句：

3. 数组的定义格式

4. 函数的三种形式

5.js的全局变量和局部变量

6.String对象

7.Array对象

8.Date对象

9.Math

10. RegExp

（二）. BOM

1. location

2. history:请求的url的历史记录

3.window 掌握 [ 里面的方法都要记住 ]

（三）DOM:文档对象模式

1. 解析过程

2.document对象：表示整个的文档 [常用方法]

3.Element对象

4.Node节点

5. innerHTML属性

6. 事件

7. 案列

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

html+js+Jquery（三）

JavaScript

(一). ECMAScript

1. JavaScript基本语法

1>.什么是javaScript?

2>.js和html的结合方式 [ 两种 ]

3>.js原始类型和声明变量

4>. 变量

5>.运算符

2. 流程控制语句：

3. 数组的定义格式

4. 函数的三种形式

5.js的全局变量和局部变量

6.String对象

7.Array对象

8.Date对象

9.Math

10. RegExp

（二）. BOM

1. location

2. history:请求的url的历史记录

3.window 掌握 [ 里面的方法都要记住 ]

（三）DOM:文档对象模式

1. 解析过程

2.document对象：表示整个的文档 [常用方法]

3.Element对象

4.Node节点

5. innerHTML属性

6. 事件

7. 案列

热门文章

最新文章

相关课程

相关电子书

相关实验场景