知足常乐
小言

引入方式

对于CSS来说,外部CSS文件只能在head中引入。不过对于JavaScript来说,外部JavaScript文件不仅可以在head中引入,还可以在body中引入。

外部引用

此外还需要注意一点,引入外部CSS文件使用的是“link标签”,而引入外部JavaScript文件使用的是“script标签”。

<!--引入外部CSS-->
<link rel="stylesheet" type="text/css" href="index.css"/>
<!--引入外部JavaScript-->
<script src="js/index.js"></<!--引入外部CSS-->
<link rel="stylesheet" type="text/css" href="index.css"/>
<!--引入外部JavaScript-->
<script src="js/index.js"></script>

内部引用

把HTML代码和JavaScript代码放在同一个文件中。其中JavaScript代码写在标签对内。

<head>
<meta charset="utf-8" />
<title></title>
<!--1、在head中引入-->
<script>
……
</script>
</<head>
<meta charset="utf-8" />
<title></title>
<!--1、在head中引入-->
<script>
……
</script>
</head>

内部JavaScript文件不仅可以在head中引入,也可以在body中引入。一般情况下,我们都是在head中引入。

元素属性JavaScript

在元素的“事件属性”中直接编写JavaScript或调用函数。

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="按钮" onclick="alert('绿叶学习,给你初恋般的感觉')"/>
</body>
</<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="button" value="按钮" onclick="alert('绿叶学习,给你初恋般的感觉')"/>
</body>
</html>

1.基本语法

(1)document.write():在页面输出一个内容。
(2)alert():弹出一个对话框。

alert(alert("I love JavaScript!");

格式:注意有分号以及双引号,在JavaScript中,每一条语句都是英文分号(;)作为结束符。

1.1 变量

1.1.1命名

  • 变量由字母、下划线、$或数字组成,并且第一个字母必须是“字母、下划线或$”。
  • 变量不能是系统关键字和保留字。
  • 变量的命名一定要区分大小写

1.1.2关键字及保留字

break else new typeof
case false null var
catch for switch void
continue function this while
default if throw with
delete in true
do instanceof try
abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger implements protected volatile
double import public
alert eval location open
array focus math outerHeight
blur funtion name parent
boolean history navigator parseFloat
date image number regExp
document isNaN object status
escape length onLoad string

1.1.3使用

  • 所有JavaScript变量都是由var声明

    img

  • 一个var也可以同时声明多个变量名,其中变量名之间必须用英文逗号(,)隔开。

    var a=10,b=20,c=var a=10,b=20,c=30;
  • 常量名全部大写

1.2 数据类型

1.2.1基本数据类型

  • 数字

    JavaScript中的数字是不区分“整型(int)”和“浮点型(float)”的。

    在JavaScript中,所有变量都是用var声明。

  • 字符串

    字符串都是用英文单引号或英文双引号(注意都是英文)括起来的。

    单引号括起来的字符串中可以包含双引号,双引号括起来的字符串中可以包含单引号。单引号括起来的字符串中,不能含有单引号,只能含有双引号。同样的道理,双引号括起来的字符串中,也不能含有双引号,只能含有单引号。

    document.write()这个方法本身就是用来输出一个字符串的。

  • 布尔值

  • 未定义值

    一个变量虽然已经用var来声明了,但是并没有对这个变量进行赋值,未定义值用undefined表示。

  • 空值

    空值用null表示。如果一个变量的值等于null,如“var n = null”,则表示系统没有给这个变量n分配内存空间。

1.3 运算符

注意

%求余

字符串 + 数字 = 字符串

document.write("a+b=" + n1 + document.write("a+b=" + n1 + "
"
);

1.3.1自增运算符

  • i++(i–同理)

    i=1;
    j=i++;
    //等价于:
    i=1;
    j=i;
    i=i+i=1;
    j=i++;
    //等价于:
    i=1;
    j=i;
    i=i+1;
  • ++i(–i同理)

    i=1;
    j=++i;
    //上面这段代码等价于:
    i=1;
    i=i+i=1;
    j=++i;
    //上面这段代码等价于:
    i=1;
    i=i+1;
    j=i;

1.3.2比较运算符

!= 不等于

1.3.3逻辑运算符

&& “与”运算
|| “或”运算
! “非”运算

1.3.4条件运算符

var a = 条件 ? 表达式1 : 表达式var a = 条件 ? 表达式1 : 表达式2;

当条件为true时,我们选择的是“表达式1”,当条件为false时,我们选择的是“表达式2”。

1.4 类型转换

1.4.1显式类型转换

将字符串转换为数字:

  • Number()

    将任何“数字型字符串”(只有数字的字符串)转换为数字。

    NaN指的是“Not a Number(非数字)

    var a = Number("2018") + var a = Number("2018") + 1000;
  • parseInt()和parseFloat()

    parseInt()会从左到右进行判断,如果第1个字符是数字,则继续判断,直到出现非数字为止(小数点也是非数字);如果第1个字符是非数字,则直接返回NaN。

    第1个字符是加号(+)或减号(-),也就是非数字,parseInt()同样也是可以转换的。

    同样的,parseFloat()也有这个特点,但能识别小数点。

将数字转换为字符串

  • 与空字符串相加

  • **toString()

    a.toString()表示将a转换为字符串

    在实际开发中,将数字转换为字符串,直接跟一个字符串相加

1.5 转义字符

转义字符 说明
\' 英文单引号
\" 英文双引号
\n 换行符
  • 如果是在document.write()中换行,则应该用:

    document.write("绿叶,<br/>初恋般的感觉~")document.write("绿叶,<br/>初恋般的感觉~");
  • 如果是在alert()中换行,则应该用:\n

    alert("绿叶,\n初恋般的感觉")alert("绿叶,\n初恋般的感觉");

\n是转义字符,一般用于对话框文本的换行。这里如果用
就无法实现了。

1.6 注释

  • HTML


  • CSS

    /*这是CSS注释*/
  • JS

    //这是JavaScript注释(单行)

    /*
    这是JavaScript注释(多行)
    这是JavaScript注释(多行)
    这是JavaScript注释(多行)
    //这是JavaScript注释(单行)

    /*
    这是JavaScript注释(多行)
    这是JavaScript注释(多行)
    这是JavaScript注释(多行)
    */

1.7 流程控制

1.7.1选择结构

  • if

    • 单向选择:if…

      ifif(条件)
      {
      ……
      }
    • 双向选择:if…else…

      if(条件)
      {
      ……
      }
      if(条件)
      {
      ……
      }
      else
      {
      ……
      }

      可以使用三目运算符来代替。

    • 多向选择:if…else if…else…

      if(条件1)
      {
      //当条件1为true时执行的代码
      }
      else if(条件2)
      {
      //当条件2为true时执行的代码
      }
      else
      {
      //当条件1和条件if(条件1)
      {
      //当条件1为true时执行的代码
      }
      else if(条件2)
      {
      //当条件2为true时执行的代码
      }
      else
      {
      //当条件1和条件2都为false时执行的代码
      }
    • if语句的嵌套

  • switch

    switch语句会根据“判断值”来判断,然后来选择使用哪一个case。如果每一个case的取值都不符合,那就执行default的语句。

    switch(判断值)
    {
    case 取值1:
    语块1;break;
    case 取值2:
    语块2;break;
    ……
    case 取值n:
    语块n;break;
    default:
    语句块n+switch(判断值)
    {
    case 取值1:
    语块1;break;
    case 取值2:
    语块2;break;
    ……
    case 取值n:
    语块n;break;
    default:
    语句块n+1;
    }

1.7.2循环结构

  • while

    sum += n;等价于sum=sum+n;,而n+=2;等价于n=n+2;。在实际开发中,一般使用简写形式多。

    while(条件)
    {
    while(条件)
    {
    //当条件为true时,循环执行
    }
  • do…while

    首先是无条件执行循环体一次,然后再判断是否符合条件。如果符合条件,则重复执行循环体;如果不符合条件,则退出循环。

    句结尾处括号后有一个分号(;)

    在实际开发中,一般都是用while语句

    do
    {
    ……
    }whiledo
    {
    ……
    }while(条件);
  • for

    for(初始化表达式; 条件表达式; 循环后操作)
    {
    ……
    }
    for(初始化表达式; 条件表达式; 循环后操作)
    {
    ……
    }
    //循环后操作,指的是执行循环体(也就是大括号中的程序)后的操作

    在循环体中,我们使用“拼接字符串”(也就是用加号拼接)的方式来构造一个“HTML字符串”。

    for (var i = 2; i < 5; i++)
    {
    var str = "<p style='font-size:" + i * 5 + "px'>总有刁民想害朕</p>";
    document.write(for (var i = 2; i < 5; i++)
    {
    var str = "<p style='font-size:" + i * 5 + "px'>总有刁民想害朕</p>";
    document.write(str);
    }

1.8 函数

1.8.1定义函数

function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
}

//有返回值的函数
function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
return function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
}

//有返回值的函数
function 函数名(参数1 , 参数2 ,..., 参数n)
{
……
return 返回值;
}
  • 全局变量

    全局变量在任何地方都可以用。

  • 局部变量

    局部变量只能在函数中使用

1.8.2函数的调用

  • 直接调用

  • 在表达式中调用

  • 在超链接中调用

    <a href="javascript:函数名"></a>

    //举例
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    function expressMes()
    {
    alert("她:我爱helicopter。\n我:oh~my,= =?!");
    }
    </script>
    </head>
    <body>
    <a href="javascript:expressMes()">表白对话</a>
    </<a href="javascript:函数名"></a>

    //举例
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    function expressMes()
    {
    alert("她:我爱helicopter。\n我:oh~my,= =?!");
    }
    </script>
    </head>
    <body>
    <a href="javascript:expressMes()">表白对话</a>
    </body>

1.8.3嵌套函数

1.8.4内置函数

函数 说明
parseInt() 提取字符串中的数字,只限提取整数
parseFloat() 提取字符串中的数字,可以提取小数
isFinite() 判断某一个数是否是一个有限数值
isNaN() 判断一个数是否是NaN值
escape() 对字符串进行编码
unescape() 对字符串进行解码
eval() 把一个字符串当做一个表达式一样去执行

1.8.5内置对象

  • length

    获取字符串的长度

    var str = "I love lvye!";
    document.write("字符串长度是:" + var str = "I love lvye!";
    document.write("字符串长度是:" + str.length);
  • toLowerCase()、toUpperCase()

    将大写字符串转化为小写字符串、将小写字符串转化为大写字符串。

    字符串名.toLowerCase()
    字符串名.to字符串名.toLowerCase()
    字符串名.toUpperCase()
  • charAt()

    获取字符串中的某一个字符。

    字符串第1个字符的下标是0,第2个字符的下标是1。

    在字符串中,空格也是作为一个字符来处理。

    两个字符之间比较的是ASCII码的大小。

    字符串名.charAt(n)

    //例如
    document.write("第1个字符是:" + str.charAt(0) + "<br/>");
    document.write("第7个字符是:" + str.char字符串名.charAt(n)

    //例如
    document.write("第1个字符是:" + str.charAt(0) + "<br/>");
    document.write("第7个字符是:" + str.charAt(6));
  • substring()

    截取字符串的某一部分。

    start和end都是整数,一般都是从0开始,其中end大于start。

    substring(start,end)截取范围为:[start,end),也就是包含start,不包含end。其中,end可以省略。当end省略时,截取的范围为:start到结尾

    对于字符串操作来说,凡是涉及下标,都是从0开始

    字符串名.substring(start, 字符串名.substring(start, end)
  • replace()

    替换字符串

    字符串替换只会替换第一个,正则表达式会替换全部。

    字符串名.replace(原字符串, 替换字符串)
    字符串名.replace(正则表达式, 替换字符串)

    //例如
    var str = "I love javascript!";
    var str_new = str.replace("javascript", "lvye");

    var str = "I am loser, you are loser, all are loser.";
    var str_new = str.replace(/loser/g, 字符串名.replace(原字符串, 替换字符串)
    字符串名.replace(正则表达式, 替换字符串)

    //例如
    var str = "I love javascript!";
    var str_new = str.replace("javascript", "lvye");

    var str = "I am loser, you are loser, all are loser.";
    var str_new = str.replace(/loser/g, "hero");
  • split()

    分割字符串

    分割符可以是一个字符、多个字符或一个正则表达式。

    split(“”)可以用来分割字符串每一个字符。

    字符串名.split("分割符")

    //例如
    <script>
    var str = "HTML,CSS,JavaScript";
    var arr = str.split(",");
    document.write("数组第1个元素是:" + arr[0] + "<br/>");
    document.write("数组第2个元素是:" + arr[1] + "<br/>");
    document.write("数组第3个元素是:" + arr[2]);
    </字符串名.split("分割符")

    //例如
    <script>
    var str = "HTML,CSS,JavaScript";
    var arr = str.split(",");
    document.write("数组第1个元素是:" + arr[0] + "<br/>");
    document.write("数组第2个元素是:" + arr[1] + "<br/>");
    document.write("数组第3个元素是:" + arr[2]);
    </script>
  • indexOf()、lastIndexOf()

    找出“某个指定字符串”在字符串中首次出现的下标位、找出“某个指定字符串”在字符串中最后出现的下标位置。(也可以找某个具体字符)

    如果字符串中不包含“指定字符串”,indexOf()或lastIndexOf()就会返回-1。

    字符串名.indexOf(指定字符串)
    字符串名.lastIndexOf字符串名.indexOf(指定字符串)
    字符串名.lastIndexOf(指定字符串)

1.9 数组

1.9.1创建数组

一般使用简写形式来创建数组。

var 数组名 = new Array(元素1, 元素2, ……, 元素n);    //完整形式
var 数组名 = [元素1, 元素2, ……, 元素n]; var 数组名 = new Array(元素1, 元素2, ……, 元素n); //完整形式
var 数组名 = [元素1, 元素2, ……, 元素n]; //简写形式

1.9.2数组的获取

想要获取数组某一项的值,我们都是使用“下标”的方式来获取。

数组的下标是从0开始的,而不是从1开始的

1.9.2数组的赋值

也可以用于增加数组的项数。

arr[i] = 值arr[i] = 值; 

1.9.3获取数组长度

一般情况下,都是用数组来存储“相同数据类型”的数据

数组名.数组名.length

应用:输出数组的每一个元素

//创建数组
var arr = [1, 2, 3, 4, 5, 6];
//输出数组所有元素
for(var i=0;i<arr.length;i++)
{
document.write(arr[i] + //创建数组
var arr = [1, 2, 3, 4, 5, 6];
//输出数组所有元素
for(var i=0;i<arr.length;i++)
{
document.write(arr[i] + "
"
);
}

1.9.4获截数组部分

slice(start,end)截取范围为:[start,end),也就是“包含start但不包含end”。其中,end可以省略。当end省略时,获取的范围为:start到结尾

数组名.slice(start, 数组名.slice(start, end);

1.9.5添加数组元素

  • 在数组开头添加元素:unshift()

    数组名.unshift(新元素1, 新元素2, ……, 新元素数组名.unshift(新元素1, 新元素2, ……, 新元素n)
  • 在数组结尾添加元素:push()

    当我们不知道数组有多少个元素的时候,我们就没法用下标这种方式来给数组添加新元素。此时,push()方法就相当有用了,因为它不需要知道你有多少个元素,它的目的就是在你数组的最后面添加新元素。

    数组名.push(新元素1, 新元素2, ……, 新元素数组名.push(新元素1, 新元素2, ……, 新元素n)

1.9.5删除数组元素

  • 删除数组中的第一个元素

    数组名.数组名.shift()
  • 删除数组的最后一个元素

    数组名.pop数组名.pop()

1.9.6数组元素大小比较

数组名.sort(函数名)

//例如

//定义一个升序函数
function up(a, b)
{
return a - b;
}
//定义一个降序函数
function down(a, b)
{
return b - a;
}
//定义数组
var arr = [3, 9, 1, 12, 50, 21];
arr.sort(up);
document.write("升序:" + arr.join("、") + "<br/>");
arr.sort(down);
document.write("降序:" + arr.join(数组名.sort(函数名)

//例如

//定义一个升序函数
function up(a, b)
{
return a - b;
}
//定义一个降序函数
function down(a, b)
{
return b - a;
}
//定义数组
var arr = [3, 9, 1, 12, 50, 21];
arr.sort(up);
document.write("升序:" + arr.join("、") + "<br/>");
arr.sort(down);
document.write("降序:" + arr.join("、"));

1.9.7数组元素颠倒顺序

数组名.reverse()数组名.reverse();

1.9.8数组元素连接成字符串

默认情况下,则采用英文逗号(,)作为连接符来连接。

数组名.join("连接符")数组名.join("连接符");

1.10 时间对象

1.10.1操作年月日

  • 获取年月日

    方法 说明
    getFullYear() 获取年份,取值为4位数字
    getMonth() 获取月份,取值为0(一月)到11(十二月)之间的整数
    getDate() 获取日数,取值为1~31之间的整数
  • 设置年月日

    • setFullYear()

      设置年、月、日。

      year表示年,是必选参数,用一个4位的整数表示,如2017、2020等。

      时间对象.setFullYear(year,month,时间对象.setFullYear(year,month,day);
    • setMonth()

      设置月、日。

      month表示月,是必选参数,用0~11之间的整数表示。其中0表示1月,1表示2月,以此类推。

      时间对象.setMonth(month, 时间对象.setMonth(month, day);
    • setDate()

      设置日。

      day表示日,是必选参数,用1~31之间的整数表示。

      时间对象.setDate(day);

      //举例
      <script>
      var d = new Date();
      d.setFullYear(1992, 09, 01);
      document.write(时间对象.setDate(day);

      //举例
      <script>
      var d = new Date();
      d.setFullYear(1992, 09, 01);
      document.write("我设置的时间是:
      "
      + d);

1.10.2操作时分秒

  • 获取当前的时、分、秒

    方法 说明
    getHours() 获取小时数,取值为0~23之间的整数
    getMinutes() 获取分钟数,取值为0~59之间的整数
    getSeconds() 获取秒数,取值为0~59之间的整数
    <script>
    var d = new Date();
    var myHours = d.getHours();
    var myMinutes = d.getMinutes();
    var mySeconds = d.getSeconds();
    document.write("当前时间是:" + myHours + ":" + myMinutes + ":" + mySeconds);
    </<script>
    var d = new Date();
    var myHours = d.getHours();
    var myMinutes = d.getMinutes();
    var mySeconds = d.getSeconds();
    document.write("当前时间是:" + myHours + ":" + myMinutes + ":" + mySeconds);
    </script>
  • 设置时、分、秒

    • setHours()

      设置时、分、秒、毫秒。

      hour是必选参数,表示时,取值为0~23之间的整数。

      时间对象.setHours(hour, min, sec, 时间对象.setHours(hour, min, sec, millisec);
    • setMinutes()

      设置分、秒、毫秒。

      min是必选参数,表示分,取值为0~59之间的整数。

      时间对象.setMinutes( min, sec, 时间对象.setMinutes( min, sec, millisec);
    • setSeconds()

      设置秒、毫秒。

      sec是必选参数,表示秒,取值为0~59之间的整数。

      millisec是可选参数,表示毫秒,取值为0~999之间的整数。

      时间对象.setSeconds(sec, 时间对象.setSeconds(sec, millisec);

1.10.3获取星期几

时间对象.getDay();

//getDay()返回一个数字,其中0表示星期天,1表示星期一……时间对象.getDay();

//getDay()返回一个数字,其中0表示星期天,1表示星期一……6表示星期六。

将数字转换为中文

var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var d = new Date();
document.write("今天是" + var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var d = new Date();
document.write("今天是" + weekday[d.getDay()]);

1.11 数学对象

1.11.1Math对象属性

常见的Math对象属性

属性 说明 对应的数学形式
PI 圆周率 π
LN2 2的自然对数 ln(2)
LN10 10的自然对数 ln(10)
LOG2E 以2为底的e的对数 log2e
LOG10E 以10为底的e的对数 log10e
SQRT2 2的平方根 √2
SQRT1_2 2的平方根的倒数 1/√2

对于角度,在实际开发中推荐这种写法:“度数 * Math.PI/180”,因为这种写法可以让我们一眼就能看出角度是多少。

120*Math.PI/180   //120°
150*Math.PI/180 //120*Math.PI/180 //120°
150*Math.PI/180 //150°

1.11.2Math对象的方法

  • 常用

    方法 说明
    max(a,b,…,n) 返回一组数中的最大值
    min(a,b,…,n) 返回一组数中的最小值
    sin(x) 正弦
    cos(x) 余弦
    tan(x) 正切
    asin(x) 反正弦
    acos(x) 反余弦
    atan(x) 反正切
    atan2(y, x) 反正切(注意y、x顺序)
    floor(x) 向下取整
    ceil(x) 向上取整
    random() 生成随机数
  • 不常用

    方法 说明
    abs(x) 返回x的绝对值
    sqrt(x) 返回x的平方根
    log(x) 返回x的自然对数(底为e)
    pow(x,y) 返回x的y次幂
    exp(x) 返回e的指数

1.11.2最大值与最小值

Math.max(a, b, …, n);
Math.min(a, Math.max(a, b, …, n);
Math.min(a, b, …, n);

1.11.3取整运算

  • 向上取整

    Math.ceil(x)
  • 向下取整

    Math.floor(x)

1.11.4三角函数

  • atan2(y, x)跟atan(x)是不一样的,atan2(y, x)能够精确判断角度对应哪一个角,而atan(x)不能。因此在高级动画开发时,我们大多数用的是atan2(y, x),基本用不到atan(x)。
  • 反三角函数用得很少(除了atan2()),一般都是用三角函数,常用的有:sin()、cos()和atan2()。

1.11.5生成随机数

使用random()方法来生成01之间的一个随机数。这里的01是只包含0不包含1的,也就是[0, 1)。

常用

  • Math.random()*m

    生成0~m之间的随机数

  • Math.random()*m+n

    生成n~m+n之间的随机数

  • Math.random()*m-n

    生成-n~m-n之间的随机数

  • Math.random()*m-m

    生成-m~0之间的随机数

  • Math.floor(Math.random()*(m+1))

    生成0到m之间的随机整数

  • Math.floor(Math.random()*m)+1

    生成1到m之间的随机整数(包括1和m)

  • Math.floor(Math.random()*(m-n+1))+n

    生成n到m之间的随机整数(包括n和m)

2.核心技术

2.1 DOM

2.1.1DOM节点类型

  • 元素节点
  • 属性节点
  • 文本节点

举例:

img

注意:

  • 节点跟元素是不一样的概念,节点是包括元素的。
  • 一个元素就是一个节点,这个节点称之为“元素节点”。
  • 属性节点和文本节点是独立的节点,并不属于元素节点。
  • 只有元素节点才可以拥有子节点,属性节点和文本节点都无法拥有子节点。

2.1.2获取元素

严格区分大小写

  • getElementById()

    onload表示在整个页面加载完成后执行的代码块。

    getElementById()获取的是一个DOM对象,我们在给变量命名的时候,习惯性地以英文“o”开头,以便跟其他变量区分开来,让我们一眼就看出来这是一个DOM对象。

    document.getElementById("id名")

    //举例
    window.onload = function ()
    {
    var oDiv = document.getElementById("div1");
    oDiv.style.color = document.getElementById("id名")

    //举例
    window.onload = function ()
    {
    var oDiv = document.getElementById("div1");
    oDiv.style.color = "red";
    }
  • getElementsByTagName()

    getElementsByTagName()方法获取的是一个“类数组”(也叫伪数组),这不是真正意义上的数组。我们只能使用到数组的length属性以及下标的形式,但是对于push()等方法是没办法在这里用的。类数组只能用到两点:length属性;下标形式

    document. getElementsByTagName("标签名")

    //举例
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    window.onload = function ()
    {
    var oUl = document.getElementById("list");
    var oLi = oUl.getElementsByTagName("li");
    oLi[2].style.color = "red";
    }
    </script>
    </head>
    <body>
    <ul id=document. getElementsByTagName("标签名")

    //举例
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    window.onload = function ()
    {
    var oUl = document.getElementById("list");
    var oLi = oUl.getElementsByTagName("li");
    oLi[2].style.color = "red";
    }
    </script>
    </head>
    <body>
    <ul id="list">
  • HTML

  • CSS

  • JavaScript

  • jQuery

  • Vue.js



  • getElementsByClassName()

    getElementsByClassName()获取的也是一个类数组。

    如果我们想得到某一个元素,也是使用数组下标的形式获取的

    document. getElementsByClassName(document. getElementsByClassName("类名")
  • querySelector()和querySelectorAll()

    可以使用CSS选择器的语法来获取所需要的元素。

    对于id选择器来说,由于页面只有一个元素,建议大家用getElementById(),而不是用querySelector()或querySelectorAll()这两个。因为getElementById()方法效率更高,性能也更快。

    document.querySelector("选择器");
    document.querySelectorAll(document.querySelector("选择器");
    document.querySelectorAll("选择器");
  • getElementsByName()

    document.getElementsByName(document.getElementsByName("name名")
  • document.title和document.body

    window.onload = function () 
    {
    document.title = "梦想是什么?";
    document.body.innerHTML = window.onload = function ()
    {
    document.title = "梦想是什么?";
    document.body.innerHTML = "梦想就是一种让你感到坚持就是幸福的东西。";
    }

2.1.3创建元素

① 创建元素节点:createElement()

② 创建文本节点:createTextNode()

③ 把文本节点插入元素节点:appendChild()

④ 把组装好的元素插入到已有元素中:appendChild()

2.1.4插入元素

  • appendChild()

    把一个新元素插入到父元素的内部子元素的 末尾

    A表示父元素,B表示动态创建好的新元素。

    A.appendA.appendChild(B);
  • insertBefore()

    将一个新元素插入到父元素中的某一个子元素“之前”。

    A表示父元素,B表示新子元素。ref表示指定子元素,在这个元素之前插入新子元素。

    A.insertBefore(B,A.insertBefore(B,ref);

2.1.5删除元素

removeChild()

删除父元素下的某个子元素

A表示父元素,B表示父元素内部的某个子元素。

A.removeChild(B);

//lastElementChild)表示删除最后一个子元素
A.removeChild(B);

//lastElementChild)表示删除最后一个子元素
//firstElementChild)表示删除第一个子元素

2.1.6复制元素

cloneNode()复制元素。

obj表示被复制的元素,而参数bool是一个布尔值

obj.cloneNode(obj.cloneNode(bool)

2.1.6替换元素

replaceChild()

A表示父元素,new表示新子元素,old表示旧子元素。

A.replaceChild(new,A.replaceChild(new,old);

2.2 DOM进阶

2.2.1 HTML属性操作

“对象属性”方式

  • 获取HTML属性值

    obj是元素名,它一个DOM对象。所谓的DOM对象,指的是getElementById()、getElementsByTagName()等方法获取到的元素节点。

    attr是属性名,.id表示获取按钮的id属性值。.type表示获取type属性值。.className表示获取一个元素的class。

    obj.obj.attr
  • 设置HTML属性值

    obj.attr = "值"obj.attr = "值";

    “对象方法”方式

    只有“对象方法方式”才可以操作自定义属性。

  • getAttribute()

    获取元素的某个属性的值。

    obj.getAttribute(obj.getAttribute("attr")
  • setAttribute()

    设置元素的某个属性的值。

    obj.setAttribute("attr",obj.setAttribute("attr","值")
  • removeAttribute()

    删除元素的某个属性。

    removeAttribute()更多情况下是结合class属性来“整体”控制元素的样式属性的

    obj.removeAttribute(obj.removeAttribute("attr")
  • hasAttribute()

    判断元素是否含有某个属性。

    直接使用removeAttribute()删除元素的属性是不太正确的,比较严谨的做法是先用hasAttribute()判断这个属性是否存在,如果存在,才去删除。

    obj.hasAttribute(obj.hasAttribute("attr")

2.2.2 CSS属性操作

  • 获取CSS属性值

    getComputedStyle()

    obj表示DOM对象,attr表示CSS属性名。

    获取CSS属性值一定要用getComputedStyle(),而不是obj.style.attr或obj.style.cssText,原因在于后者只可以获取元素style属性中设置的CSS属性,对于内部样式或者外部样式。

    getComputedStyle(obj).attr
    //等价
    getComputedStyle(obj).attr
    //等价
    //getComputedStyle(obj)["attr"]
  • 设置CSS属性值

    • style对象

      attr表示CSS属性名,采用的同样是“骆驼峰”型。

      obj.style.attr = "值"obj.style.attr = "值";
    • cssText属性

      同时设置多个CSS属性

      obj表示DOM对象,cssText的值是一个字符串

      这个字符串中的属性名不再使用骆驼峰型写法,而是使用平常的CSS写法

      obj.style.cssText = "值"obj.style.cssText = "值";

2.2.3 DOM遍历

  • 查找父元素

    obj.parentNode
  • 查找子元素

    • childNodes、firstChild、lastChild

      childNodes获取的是所有的子节点,包括元素节点以及文本节点。

      比较麻烦,一般不使用。

    • children、firstElementChild、lastElementChild

  • 查找兄弟元素

    • previousSibling、nextSibling

      previousSibling查找前一个兄弟节点,nextSibling查找后一个兄弟节点。

      比较麻烦同不建议使用。

    • previousElementSibling、nextElementSibling

2.2.4 innerHTML和innerText

  • innerHTML

    innerHTML获取的是元素内部所有的内容

  • innerText

    innerText获取的仅仅是文本内容。

  • 后面的字符串可以换行写,在字符串每一行后面加上个反斜杠(\)

    oDiv.innerHTML = '<span>绿叶学习网</span>\
    <span style="color:hotpink;">JavaScript</span>\
    <span style="color:deepskyblue;">入门教程</oDiv.innerHTML = '<span>绿叶学习网</span>\
    <span style="color:hotpink;">JavaScript</span>\
    <span style="color:deepskyblue;">入门教程</span>';

2.3 事件

2.3.1 事件调用方式

在实际开发中,更倾向于在script标签中调用事件。

  • 在script标签中调用

    img

    obj.事件名 = function()
    obj.事件名 = function()
    {
    ……
    };
  • 在元素中调用

    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    function alertMes()
    {
    alert("绿叶学习网");
    }
    </script>
    </head>
    <body>
    <input type="button" onclick="alertMes()" value="弹出" />
    </body>

    //或者
    <head>
    <meta charset="utf-8" />
    <title></title>
    </head>
    <body>
    <input type="button" onclick="alert('绿叶学习网')" value="弹出" />
    </<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    function alertMes()
    {
    alert("绿叶学习网");
    }
    </script>
    </head>
    <body>
    <input type="button" onclick="alertMes()" value="弹出" />
    </body>

    //或者
    <head>
    <meta charset="utf-8" />
    <title></title>
    </head>
    <body>
    <input type="button" onclick="alert('绿叶学习网')" value="弹出" />
    </body>

2.3.2 鼠标事件

onmouseover和onmouseout分别用于控制鼠标“移入”和“移出”这两种状态。例如在下拉菜单导航中,鼠标移入会显示二级导航,鼠标移出则会收起二级导航。

事件 说明
onclick 鼠标单击事件
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
onmousedown 鼠标按下事件
onmouseup 鼠标松开事件
onmousemove 鼠标移动事件

2.3.3 键盘事件

onkeydown表示键盘按下一瞬间所触发的事件,而onkeyup表示键盘松开一瞬间所触发的事件。对于键盘来说,都是先有“按下”,才有“松开”,也就是onkeydown发生在onkeyup之前。

  • 键盘按下:onkeydown
  • 键盘松开:onkeyup

2.3.3 表单事件

  • onfocus和onblur

    onfocus表示获取焦点时触发的事件,而onblur表示失去焦点时触发的事件

    具有“获取焦点”和“失去焦点”特点的元素只有2种。

    • 表单元素(单选框、复选框、单行文本框、多行文本框、下拉列表)
    • 超链接

    focus()是一个方法,仅仅用于让元素获取焦点。而onfocus是一个属性,它用于事件操作

  • onselect

    当我们选中“单行文本框”或“多行文本框”中的内容时,就会触发onselect事件。

    select()跟onselect是不一样的。

  • onchange

    onchange事件常用于“具有多个选项的表单元素”。

    • 单选框选择某一项时触发。
    • 复选框选择某一项时触发。
    • 下拉列表选择某一项时触发。

2.3.4 编辑事件

  • oncopy

    使用oncopy事件来防止页面内容被复制。

    document.body.oncopy = function () 
    {
    return document.body.oncopy = function ()
    {
    return false;
    }
  • onselectstart

    使用onselectstart事件来防止页面内容被选取。

    document.body.onselectstart=function()
    {
    return document.body.onselectstart=function()
    {
    return false;
    }
  • oncontextmenu

    使用oncontextmenu事件来禁止鼠标右键。

    document.oncontextmenu = function () 
    {
    return document.oncontextmenu = function ()
    {
    return false;
    }

2.3.5页面事件

  • onload

    一般来说,只有在想要“获取页面中某一个元素”的时候才会用到

    浏览器从上到下解析到window.onload时,就会先不解析window.onload里面的代码,而是继续往下解析,直到把整个HTML文档解析完了之后才会回去执行window.onload里面的代码。

    window.onload = function(window.onload = function(){
    ……
    }
  • onbeforeunload

    离开页面之前触发的一个事件。

    window.onbeforeunload = function(window.onbeforeunload = function(){
    ……
    }

2.4 事件进阶

2.4.1 添加事件

  • 事件处理器

    事件处理器是没办法为一个元素添加多个相同事件的。

    oBtn.onclick = function(){……}oBtn.onclick = function(){……};

    解除事件:

    obj.事件名 = null;

    //例子
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    window.onload = function ()
    {
    var oP = document.getElementById("content");
    var oBtn = document.getElementById("btn");
    //为P元素添加事件
    oP.onclick = changeColor;
    //点击按钮后,为p元素解除事件
    oBtn.addEventListener("click", function () {
    oP.onclick = null;
    }, false);
    function changeColor()
    {
    this.style.color = obj.事件名 = null;

    //例子
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    window.onload = function ()
    {
    var oP = document.getElementById("content");
    var oBtn = document.getElementById("btn");
    //为P元素添加事件
    oP.onclick = changeColor;
    //点击按钮后,为p元素解除事件
    oBtn.addEventListener("click", function () {
    oP.onclick = null;
    }, false);
    function changeColor()
    {
    this.style.color = "hotpink";
    }
    }


  • 事件监听器

    绑定事件:

    //fn是一个函数名
    oBtn.addEventListener("click", alertMes, false);
    function alertMes()
    {
    alert("JavaScript");
    }
    //fn是一个匿名函数
    oBtn.addEventListener("click", function () {
    alert("JavaScript");
    }, //fn是一个函数名
    oBtn.addEventListener("click", alertMes, false);
    function alertMes()
    {
    alert("JavaScript");
    }
    //fn是一个匿名函数
    oBtn.addEventListener("click", function () {
    alert("JavaScript");
    }, false);

    使用多次window.onload,但是会发现JavaScript只执行最后一次window.onload。可以使用addEventListener()来实现。

    window.addEventListener("load",function(){……},window.addEventListener("load",function(){……},false);

    解除事件:

    obj.removeEventListener(type , fn , false);
    obj.removeEventListener(type , fn , false);
    //于removeEventListener()方法来说,fn必须是一个函数名,而不能是一个函数。

2.4.2 event对象

属性 说明
type 事件类型
keyCode 键码值
shiftKey 是否按下shift键
ctrlKey 是否按下Ctrl键
altKey 是否按下Alt键
按键 键码
W(上) 87
S(下) 83
A(左) 65
D(右) 68
38
40
37
39

e.keyCode返回的是一个数字,而e.shiftKey、e.ctrlKey、e.altKey返回的都是布尔值(true或false)

2.4.3 this

哪个DOM对象(元素节点)调用了this所在的函数,那么this指向的就是哪个DOM对象

在事件函数中,想要使用当前元素节点,我们尽量使用this来代替oBtn、oLi[i]等等这种DOM对象的写法。

2.5 windows对象

一个窗口就是一个window对象,这个窗口里面的HTML文档就是一个document对象,document对象是window对象的子对象

img

子对象 说明
document 文档对象,用于操作页面元素
location 地址对象,用于操作URL地址
navigator 浏览器对象,用于获取浏览器版本信息
history 历史对象,用于操作浏览历史
screen 屏幕对象,用于操作屏幕宽度高度
方法 说明
alert() 提示对话框
confirm() 判断对话框
prompt() 输入对话框
open() 打开窗口
close() 关闭窗口
setTimeout() 开启“一次性”定时器
clearTimeout() 关闭“一次性”定时器
setInterval() 开启“重复性”定时器
clearInterval() 关闭“重复性”定时器

2.5.1 窗口操作

  • 打开窗口

    window.window.open(url, target)
    • url指的是新窗口的地址,如果url为空,则表示打开一个空白窗口。空白窗口很有用,我们可以使用document.write()往空白窗口输出文本,甚至输出一个HTML页面。

    • target表示打开方式,它的取值跟a标签中target属性的取值是一样的,常用取值有两个:_blank和_self。当target为“_blank(默认值)”,表示在新窗口打开;当target为“_self”时,表示在当前窗口打开。

    • 如果你打开的是另外一个域名下面的页面,是不允许操作新窗口的内容的

    //举例:往空白窗口输出一个页面
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    window.onload = function ()
    {
    var oBtn = document.getElementById("btn");
    var opener = null;
    oBtn.onclick = function ()
    {
    opener = window.open();
    var strHtml = '<!DOCTYPE html>\
    <html>\
    <head>\
    <title></title>\
    </head>\
    <body>\
    <strong>小心偷影子的人,他会带走你的心。</strong>\
    </body>\
    </html>';
    opener.document.write(strHtml);
    };
    }
    </script>
    </head>
    <body>
    <input id="btn" type="button" value="打开" />
    <///举例:往空白窗口输出一个页面
    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    window.onload = function ()
    {
    var oBtn = document.getElementById("btn");
    var opener = null;
    oBtn.onclick = function ()
    {
    opener = window.open();
    var strHtml = '<!DOCTYPE html>\
    <html>\
    <head>\
    <title></title>\
    </head>\
    <body>\
    <strong>小心偷影子的人,他会带走你的心。</strong>\
    </body>\
    </html>';
    opener.document.write(strHtml);
    };
    }
    </script>
    </head>
    <body>
    <input id="btn" type="button" value="打开" />
    </body>
  • 关闭窗口

    window.window.close()

    window.close()方法是没有参数的。

2.5.2 对话框

  • alert()

在alert()中实现文本换行,用的是\n。

alert(alert("提示文字")
  • confirm()

    onfirm()对话框不仅提示文字,还提供确认。

    confirm(confirm("提示文字")
  • prompt()

    prompt()对话框不仅提示文字,还返回一个字符串。

    prompt(prompt("提示文字")
方法 说明
alert() 仅提示文字,没有返回值
confirm() 具有提示文字,返回“布尔值”(true或false)
prompt() 具有提示文字,返回“字符串”

2.5.3 定时器

  • setTimeout()和clearTimeout()

    使用setTimeout()方法来“一次性”地调用函数,并且可以使用clearTimeout()来取消执行setTimeout()。

    setTimeout(code, time);
    //两种写法
    setTimeout(alertMes, 2000)
    setTimeout(setTimeout(code, time);
    //两种写法
    setTimeout(alertMes, 2000)
    setTimeout("alertMes()", 2000)

    参数code可以是一段代码,可以是一个函数,也可以是一个函数名。

    参数time是时间,单位为毫秒,表示要过多长时间才执行code中的代码。

  • setInterval()和clearInterval()

    使用setInterval()方法来“重复性”地调用函数,并且可以使用clearInterval()来取消执行setInterval()。

    setInterval(code, time);
    //写法
    //方式1
    setInterval(function(){…}, 2000)
    //方式2
    setInterval(alertMes, 2000)
    //方式3
    setInterval(setInterval(code, time);
    //写法
    //方式1
    setInterval(function(){…}, 2000)
    //方式2
    setInterval(alertMes, 2000)
    //方式3
    setInterval("alertMes()", 2000)

    PS.每次点击【开始】按钮的一开始就要清除一次定时器

2.5.4 location对象

属性 说明
href 当前页面地址
search 当前页面地址“?”后面的内容
hash 当前页面地址“#”后面的内容
  • window.location.href

    获取或设置当前页面的地址。

  • window.location.search

    获取和设置当前页面地址“?”后面的内容。

  • window.location.hash

    获取和设置当前页面地址井号(#)后面的内容。

2.5.5 navigator对象

window.navigator.userAgent

IE含有“MSIE”;Chrome含有“Chrome”;而Firefox含有“Firefox”。

<head>
<meta charset="utf-8" />
<title></title>
<script>
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
alert("这是IE");
}else if (window.navigator.userAgent.indexOf("Chrome") != -1) {
alert("这是Chrome");
}else if (window.navigator.userAgent.indexOf("Firefox") != -1) {
alert("这是Firefox");
}
</script>
</<head>
<meta charset="utf-8" />
<title></title>
<script>
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
alert("这是IE");
}else if (window.navigator.userAgent.indexOf("Chrome") != -1) {
alert("这是Chrome");
}else if (window.navigator.userAgent.indexOf("Firefox") != -1) {
alert("这是Firefox");
}
</script>
</head>

indexOf()用于找出“某个字符串”在字符串中首次出现的位置,如果找不到就返回-1

2.6 document对象

2.6.1 document对象属性

属性 说明
document.title 获取文档的title
document.body 获取文档的body
document.forms 获取所有form元素
document.images 获取所有img元素
document.links 获取所有a元素
document.cookie 文档的cookie
document.URL 当前文档的URL
document.referrer 返回使浏览者到达当前文档的URL
  • document.URL

    获取当前页面的地址。

    document.URL只能获取不能设置;window.location.href既可以获取也可以设置。

  • document.referrer

    获取用户在访问当前页面之前所在页面的地址

2.6.2 document对象方法

方法 说明
document.getElementById() 通过id获取元素
document.getElementsByTagName() 通过标签名获取元素
document.getElementsByClassName() 通过class获取元素
document.getElementsByName() 通过name获取元素
document.querySelector() 通过选择器获取元素,只获取第1个
document.querySelectorAll() 通过选择器获取元素,获取所有
document.createElement() 创建元素节点
document.createTextNode() 创建文本节点
document.write() 输出内容
document.writeln() 输出内容并换行
  • document.write()

    <head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    document.write('<div style="color:hotpink;">绿叶学习网</div>');
    </script>
    </<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
    document.write('<div style="color:hotpink;">绿叶学习网</div>');
    </script>
    </head>

    document.write()不仅可以输出文本,还可以输出标签。此外,document.write()都是往body标签内输出内容的。

  • writeln()

    writeln()方法会在输出内容后面多加上一个换行符\n。