对于JavaScript原生的JS

前言：工作接近一年，发现对于原生JS的基础内容总是不够掌握，特定抽出三个周的周末，结合本人的工作经验还有菜鸟教程及w3school的基础内容等整理了如下内容。对JS的常用知识进行概括！希望对大家能够有所帮助。

一、JavaScript 简介

1、JavaScript 是 Web 的编程语言，是前端开发必须掌握的三门语言之一，即：

HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 实现了网页的行为

2、JavaScript 是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。现在是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

二、JavaScript 主要实现功能

1、JavaScript：直接写入 HTML 输出流：

document.write("<h1>这是一个标题</h1>");

document.write("<p>这是一个段落。</p>");

2、JavaScript：对事件的反应：

3、JavaScript：改变 HTML 内容：

　　x=document.getElementById("demo") //查找元素

　　x.innerHTML="Hello JavaScript"; //改变内容

4、JavaScript：改变 HTML 图像：

　　动态地改变 HTML <image> 的来源（src）

5、JavaScript：改变 HTML 样式

　　x=document.getElementById("demo") //找到元素

　　x.style.color="#ff0000"; //改变样式

6、JavaScript：验证输入

　　if isNaN(x) {alert("不是数字")}; //下面会介绍 isNaN 一种常用的数值函数

三、JavaScript中的变量和输入输出

一、JavaScript中的变量:

1、JS中变量声明的写法：
var num =10；// 使用var声明的变量，属于局部变量，只是当前作用域内有效；
num = 10； // 不用var声明，默认为全局变量，在整个JS文件中都有效；
var x=8,y,z=10;使用一行语句，同时声明多个变量。上式中，y属于已声明，但是未赋值状态，结果为undefined；

2、JS中变量的命名规范：

1、变量名的命名要求：
①变量名只能有字母、数字、下划线组成；
②开头不能是数字；
③变量名区分大小写，大写字母和小写字母为不同变量；纯大写字母，一般默认为常量；
2、变量名的命名规范：
①要符合小驼峰法则：
首字母小写，之后每个单词的首字母大写；
myNameIsJiangHao 骆驼命名法：
② 所有字母小写，中间用
_my_name_is_jiang_hao 匈牙利写法
③ manameisjianghao 能用但是不规范

二、JavaScript中的数据类型:

1、JavaScript 字符串（String）类型

字符串是存储字符（比如 "Bill Gates"）的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号：

var carname="Volvo XC60";
var carname='Volvo XC60';

2、JavaScript 数字（Number）类型

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写

极大或极小的数字可以通过科学（指数）计数法来书写：

var y=123e5; // 12300000
var z=123e-5; // 0.00123

3、JavaScript 布尔 ( Boolean ) 类型

布尔（逻辑）只能有两个值：true 或 false。

var x=true;
var y=false;

4、JavaScript 数组（ Array ）

下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

或者 :

var cars=new Array("Saab","Volvo","BMW");

或者 :

var cars=["Saab","Volvo","BMW"];

数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。

5、JavaScript 对象（ Object ）

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

上面例子中的对象 (person) 有三个属性：firstname、lastname 以及 id。

空格和折行无关紧要。声明可横跨多行：

var person={
firstname : "John",
lastname : "Doe",
id : 5566
};

对象属性有两种寻址方式：

name=person.lastname;//Doe
name=person["lastname"];//Doe

6、JavaScript Undefined 和 null ：

Undefined 这个值表示变量不含有值。

可以通过将变量的值再一次设置为 null 来清空变量。

三、JavaScript 中的数值函数

1、isNaN（）：判断一个变量或常量，是否是NaN( not a num 非数值)；
使用isNaN()判断时，会尝试使用Number（）函数进行转换，如果最终结果能够转换数字，则不是NaN,结果为false；
2、number()函数：将其他类型的数据，尝试转为数值型；
[字符串类型]
>>>字符串为纯数值字符串，会转为对应的数字；"111"→111
>>>字符串为空字符串，会转为0： " "-> 0
>>>字符串包含任何其它字符时，都不能转；"1a"->NaN
[Boolean类型]
true->1 false->0
[Null/Undefined]
Null->0 Undefined->NaN
[Object]
(后续讲解)
3、ParseInt():将字符串转为整数类型；
>>>纯数值字符串，能转。"12"->12;"12.9"->12(小数转化时，直接抹掉小数点，不进行四舍五入)
>>>空字符串，不能转。" "->NaN
>>>包含其它字符的字符串，会截取第一个非数值字符串前的数字部分；
"123a456"->123;"a123b456"->NaN
>>>ParseInt()只能转字符串，转其它类型，全是NaN.
[number函数与ParseInt函数的区别]
1、Number函数可以转各种数据的类型，ParseInt函数只能转字符串；
2、两者在转字符串时，结果不完全相同。(详见上面解释)
4、ParseFloat：将字符串转为数值型；
转换规则与ParseInt相同，只是如果有小数，则保留小数点；如果没有小数，则依然是整数；"12.5"->12.5;"12"->12
5、typeof：检测变量的数据类型：
字符串->String 数值->Number 未定义->Undefined 对象/NULL->object 函数->function
true/false->Boolean

四、JavaScript 中的输入和输出语句

1、prompt（）弹窗输入语句

接受两部分参数：
①输入框上面的提示内容，可选；
②输入框里面的默认信息，可选；
当只写一部分时，表示输入框上面的提示内容；
可以定义变量，接受输入的内容。点击确定按钮，变量将被赋值为输入的内容；点击取消按钮，变量将被赋值为null；

var name = promopt("请输入您的姓名"," ");

2、JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

五、JavaScript 中的运算符

1、算术运算(单目运算符)
+ 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

+号：有两种作用，连接字符串/加法运算。当+两边连接数字时，进行加法运算；当+两边有任意一边为字符串时，起连接字符串作用，
链接之后的结果为字符串；
除+外，其余符号运算时，会先尝试将左右两边的变量用Number函数转为数字；
>>>/:结果保留小数点；
>>>++:自增运算时，将变量在原有基础上+1；
>>>--:自减运算符，将变量在自身基础上-1；

【a++和++a的异同点】
①相同点：无论a++还是++a，运算完以后，a的值均会+1；
②不同点： a++，先用a的值去运算，再把a+1；
++a，先把a+1，再用a+1以后的值去运算。
eg：量、var a=3，b，c；
b=a++ +2；//先用a运算，b=3+2 再把a+1，a=4；
c=++a +2；//先把a+1，a=5再用a+1以后的值去运算，c=5+2；

2、赋值运算
= += -= *= /= %=
+=：a+=b；相当于a=a+b；但是前者的运算效率要比后者快，所以推荐使用+=的写法；
3、关系运算
==、！=、>、<、>=、<=

>>> 关系运算符，运算之后的结果，只能是Boolean类型；
>>> 判断一个数字是否处于一个区间，必须用&&链接；
a<10 && a>0 √ ; 10>a>0 x
>>> ===:严格等于；要求不但类型要相同，值也必须相同；类型不同结果直接为false，类型相同，再进行下一步判断；
== ：等于。类型相同，同===一样，类型不同时，会先尝试用Number将两边转为数字，然后再进行判断。
但是，有个别特例： Null==false x ；Null==Undefined √
！=：不等、！== 不全等

4、条件运算符(多目运算)
a>b?true:false

有两个重要符号：？和：
当？前面部分，运算结果为true时，执行：前面的代码；
当？前面部分，运算结果为false时，执行：后面的代码；

冒号两边可以为数值，则整个式子可用于赋值。Var a= 1<2?1:2
冒号两边可以为代码块，将直接执行代码。1<2?alert(1):alert(2);

多目运算符可以多层嵌套。var a = 1<2?alert(1):(1>0?4:5)

5、位运算符、逻辑运算符
&、|、~ &&与、||或、！非

&& 两边都成立，结果为true

|| 两边有任意一个成立，结果为true
6、运算符的优先级
（）小括号最高
！ ++ --
* / %
+ -
< > >= <=
== !=
&& //与或同时存在时，&&比|| 高
||
= += -= *= /= 最低的是各种赋值

六、JavaScript 中的条件语句

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

1、If 语句只有当指定条件为 true 时，该语句才会执行代码。

if 的（）中的判断条件，支持的情况：
①Boolean：true为真；false为假；
②String：空字符串为假
③Number：0为假；一切非零数字为真；
④null/Undefined/NaN:全为假；
⑤object：全为真；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x="";
    var time=new Date().getHours();
    if (time<20){
        x="Good day";
    }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

2、使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x="";
    var time=new Date().getHours();
    if (time<20){
         x="Good day";
     }
    else{
         x="Good evening";
     }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

3、使用 if....else if...else 语句来选择多个代码块之一来执行。

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<10)
{
    document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
    document.write("<b>今天好</b>");
}
else
{
    document.write("<b>晚上好!</b>");
}
</script>
<p>
这个例子演示了 if..else if...else 语句。
</p>

</body>
</html>

4、JavaScript switch 语句

switch 语句用于基于不同的条件来执行不同的动作。

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x;
    var d=new Date().getDay();
    switch (d){
          case 0:x="今天是星期日";
        break;
         case 1:x="今天是星期一";
        break;
          case 2:x="今天是星期二";
        break;
        case 3:x="今天是星期三";
            break;
          case 4:x="今天是星期四";
        break;
          case 5:x="今天是星期五";
        break;
          case 6:x="今天是星期六";
        break;
　　　　　　default：x="未知错误"；
　　　　　break；

     }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

七、JavaScript 中的循环结构

1、【while(){}循环结构的步骤】

1、声明循环变量
2、判断循环条件
3、执行循环体操作
4、更新循环变量
然后循环执行2-4，直到条件不成立时跳出循环。
while循环()中的表达式，运算结果可以是多种类型，但是最终都会转为真假，转换规则同if结构
（1）、boolean类型：true为真，false为假
（2）、string类型：所有非空字符串为真，空字符串为假
（3）、number类型：一切非零数字为真，零为假
（4）、null、undefined、NaN：全为假
（5）、object类型：全为真。

            var num=1;  //声明循环变量
            while (num<=10){  //判断循环条件
                document.write(num+"<br />");//执行循环体操作
                num++;  //更新循环变量
            }

【 while循环与do-while循环的区别:】：

while循环是先判断再循环;

do-while循环是先执行再判断,即便是条件不成立,该循环也最少执行一次.

var num=10;
 do{
 document.write(num+"<br />");
 num--;
 }
 while(num>=0);

2、【for(){}循环结构的步骤】

1、for循环有三个表达式：
① 声明循环变量;
② 判断循环条件;
③ 更新循环变量;
三个表达式之间用;分隔开,三个表达式可以省略,但是两个分号不能省略.
2、for循环的执行特点:先判断再执行，和while相同；
执行顺序：1、初始语句 2、执行条件是否符合？ 3、循环体 4、增加增量；
3、for循环三个表达式均可以由多部分组成，第二部分多个判断条件用&& 、||连接，其他部分可以用，连接。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
    var x="";
    for (var i=0;i<5;i++){
        x=x + "该数字为 " + i + "<br>";
    }
    document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>

八、JacaScript 中的函数

一、JacaScript 函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

二、函数的声明及调用：
1、函数的标准声明格式：
function 函数名（参数一，参数二，...）{
//函数体代码
return 返回值；
}
函数的调用：
① 直接调用：函数名加（参数一的值，参数二的值,.......)；

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
    return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>

</body>
</html>

② 事件调用：HTML标签中，使用事件名="函数名（）"
<button onclick="saySth('hah ha','yellow')">点击按钮，打印内容</button>

<!DOCTYPE html>
<html>    
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
    alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

2、函数的注意事项：
① 函数必须要符合小驼峰法则！！！（首字母小写，之后每个人单词首字母大写）
② 函数名后面的（）中，可以有参数，也可以没有参数。分别称为有参函数和无参函数；
③ 声明函数时的参数列表，称为型参列表，形式参数。（变量的名字）
function saySth(str,color){}
调用函数时的参数列表，称为实参列表，实际参数。（变量的赋值）
saySth("哈哈哈","red");
④ 函数的形参列表个数和实参列表个数没有实际关系。
函数参数的个数，取决于实参列表。
如果实参列表的个数<形参列表,则未赋值的形参，将为Undefined。
⑤ 函数可以有返回值，使用return返回结果；
调回函数时，可以使用一个变量接受函数的返回结果。如果函数没有返回值，则接受的结果为undefined；
function func(){
return = "hahaha";
}
var num = func()；//num = "hahaha"
⑥ 函数变量的作用域：
在函数中，使用var声明的变量，为局部变量，只能在函数内部访问；
不使用var声明的变量，为全局变量，在函数外边也能访问；
函数的形象列表，默认为函数的局部变量，只能在函数内部使用；
⑦ 函数的声明与函数的调用，没有先后之分。即，可以在声明函数之前，调用函数。
func（）；//声明func之前调用也是可以的。
function func(){}；

【匿名函数的声明和使用】：

1、声明一个匿名函数直接赋值给某一个事件；
window.onload = function(){} ；
2、使用匿名函数表达式；将匿名函数，赋值给一个变量。
声明：var func = function(){}
调用：func()；
注意：使用匿名函数表达时，函数的调用语句，必须放在函数声明语句之后！！！（与普通函数的区别！！！）
3、自执行函数
① !function(){}();//可以使用多种运算符开头，单一版用！；
!function(形参列表){}(实参列表)；
② (function(){}());//使用()将函数及函数后的括号包起来；
③ (function(){})();//使用()值包裹函数部分；
三种写法的特点：
① 第一种使用!开头，结构清晰，不容易混乱，推荐使用；
② 第二种写法能够表明匿名函数与调用的()为一个整体，官方推荐使用；
③ 第三种无法表明函数之后的()的整体性，不推荐使用；

九、JavaScript 中的 BOM

BOM:浏览器对象模型（Browser Object Model (BOM)，浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

1、【location对象】：取到浏览器的URL地址信息。

使用location提供的方法跳转页面的方式:

<!DOCTYPE html>
<html>    
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>点击这个按钮，实现页面的跳转。</p>
<button onclick="assign()">assign</button>
             <button onclick="replace()">replace</button>
             <button onclick="reload()">repload</button>
<script>
　　　　　　　　   //加载新的文档，加载之后，可以回退。
                
                function assign(){
                    location.assign("http://www.baidu.com");
                }
                
                //使用新的文档替换当前文档。替换以后，不能回退。
                
                function replace(){
                    location.replace("http://www.baidu.com");
                }
                function reload(){
                    /*从新加载当前文档。刷新页面
                     *reload():在本地刷新当前页面，相当于F5
                     *reload(true):强制刷新，从服务器端从新加载页面，相当于ctrl+F5
                     */
                    location.reload();
                }
</script>

</body>
</html>

2、【history浏览历史】

<!DOCTYPE html>
<html>    
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>点击这个按钮，实现页面的历史记录。</p>
　　　　　　　　<button onclick="back()">后退一步</button>
              <button onclick="forward()">前进一步</button>
              <button onclick="go()"></button>
<script>
　　　　　　　　　function back(){
                    history.back();//后退按钮
                }
                function forward(){
                    history.forward();//前进按钮
                }
                function go(){
                    /* 跳转到浏览历史的任意页面
                     * 0表示当前页面-1表示后一个页面（back），1表示前一页（forward）
                     */
                    history.go();//
                }
</script>

</body>
</html>

3、【window对象】：在window对象中的所有方法和属性，均可以省略window关键字；window.alert();--> alert(); √

>>>window对象的常用方法：

1、alert()：弹出一个警告提示框：
2、prompt()：弹窗接受用户的输入：
3、confirm():弹出带有"确定""取消"按钮的对话框，点击按钮返回true/false
4、close():关闭当前浏览器窗口。在个别浏览器中，只能关闭在当前脚本新打开的页面(使用超链接、window.open()等方式打开的页面)
5、打开一个新窗口
参数一：新窗口的地址；
参数二：新窗口的名字，并没有什么作用；
参数三：新窗口的各种属性设置，"属性1=值1，属性2=值2,属性3=值3，属性4=值4"；
6、setTimeout：设置延时执行，只会执行一次；
setInterval：设置定时器，每隔n毫秒执行一次；
接受两个参数：需要执行的function、毫秒数；

7、clearTimeout：清除延时器；
clearInterval：清除定时器；
* 使用方法:设置延时器或定时器时，可以使用变量接受定时器ID；
* var id = setInterval；
* 调用clearIntertval，将id传入，即可清除对应的定时器；
* clearIntertval(id);

<!DOCTYPE html>
<html>    
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
<p>点击这个按钮，实现window对象方法。</p>

　　　　　　　　　　　　<button onclick="close()">window.close</button>
                    <button onclick="lopen()">window.open</button>   
                    <button onclick="setTimeout1()">setTimeout   设置延时器</button>
                    <button onclick="setInterval1()">setInterval 设置定时器</button>
                    <button onclick="clearsetInterval1()">清除延时器</button>

<script>
　　　　　　　　　function close(){
                    window.close();
                }
                function lopen(){
                    window.open("http://www.baidu.com","baidu","width=1000px,height=600px,left=100px,top=50px");
                }
                
                
                var  setTimeoutID = 0;
                function setTimeout1(){
                    
                    //setTimeout(function(){console.log("延时器成功执行");},3000);
                    
                        setTimeoutID = setTimeout(lopen,3000);
                        
                }    
                function clearTimeout1(){
                    
                    clearTimeout(setTimeoutID);
                    
                }</script>

</body>
</html>

十、JavaScript中的——DOM

一、HTML DOM (文档对象模型)：

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

HTML DOM 树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

【DOM树节点】
DOM节点分为三大类：元素节点、属性节点、文本节点；
文本节点、属性节点属于元素节点的子节点。操作时，均需要先取到元素节点，再操作子节点；
可以使用getElement系列方法，取到元素节点。
【查看元素节点】
getElementById：通过id取到唯一节点。如果ID重名，只能取到第一个。例如： var x=document.getElementById("xxx");
getElementsByName()：通过name属性。　　　　　　　　　　　　　　例如： var x=document.getElementsByClassName("xxx");
getElementsByTagName()：通过标签名。　　　　　　　　　　　　　例如： var y=document.getElementsByTagName("p");

二、JavaScript HTML DOM - 改变 HTML：

1、改变 HTML 输出流：

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Sun Oct 15 2017 22:53:40 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

2、改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了 <p>元素的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>

</body>
</html>

3、改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

</body>
</html>

三、JavaScript HTML DOM - 改变CSS

1、改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

下面的例子会改变 <p> 元素的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>

</body>
</html>

2、使用事件

HTML DOM 允许我们通过触发事件来执行代码。

比如以下事件：

元素被点击。
页面加载完成。
输入框被修改。
……

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>

</body>
</html>

四、JavaScript HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

1、HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

2、使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
    document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

3、onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="checkCookies()">

<script>
function checkCookies(){
    if (navigator.cookieEnabled==true){
        alert("Cookies 可用")
    }
    else{
        alert("Cookies 不可用")
    }
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
    
</body>
</html>

4、onchange 事件

onchange 事件常结合对输入字段的验证来使用。

下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
<script>
function myFunction(){
    var x=document.getElementById("fname");
    x.value=x.value.toUpperCase();
}
</script>
</head>
<body>

输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>

</body>
</html>

五、JavaScript HTML DOM EventListener

一、addEventListener() 方法：在用户点击按钮时触发监听事件。

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强，在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

二、语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

三、向原元素添加事件句柄

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
    alert("Hello World!");
});
</script>

</body>
</html>

四、向同一个元素中添加多个事件句柄

addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p>
<button id="myBtn">点我</button>
<script>
var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);
function myFunction() {
    alert ("Hello World!")
}
function someOtherFunction() {
    alert ("函数已执行!")
}
</script>

</body>
</html>

五、向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>实例在 window 对象中使用 addEventListener() 方法。</p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p>
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = Math.random();
});
</script>

</body>
</html>

六、传递参数

当传递参数值时，使用"匿名函数"调用带参数的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p>
<p>点击按钮执行计算。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var p1 = 5;
var p2 = 7;
document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
function myFunction(a, b) {
    var result = a * b;
    document.getElementById("demo").innerHTML = result;
}
</script>

</body>
</html>

七、事件捕获和事件冒泡：

1、事件冒泡
当某DOM元素触发一种事件时，会从当前节点开始，逐级往上触发其祖先节点的同类型事件，直到DOM根节点；
>>>什么情况下会产生事件冒泡？
①DOM0模型绑定事件，全部都是冒泡；
②IE8之前，使用attachEvent()绑定的事件，全部是冒泡；
③其他浏览器，使用addEventLinstener()添加事件，当第三个参数省略或者为false时，为事件冒泡；

2、事件捕获：当某DOM元素触发一种事件时，会从文档根节点开始，逐渐向下触发其祖先节点的同类型事件，直到该节点自身；
>>>什么情况下会产生事件捕获？
①使用addEventLinstener()添加事件，当第三个参数为true时，为事件捕获；

3、addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
    <p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
    <p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

六、removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
}
</style>
</head>
<body>

<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p>
<div id="myDiv">
    <p id="myP">点击段落，我是冒泡。</p>
</div><br>
<div id="myDiv2">
    <p id="myP2">点击段落，我是捕获。 </p>
</div>
<script>
document.getElementById("myP").addEventListener("click", function() {
    alert("你点击了 P 元素!");
}, false);
document.getElementById("myDiv").addEventListener("click", function() {
    alert(" 你点击了 DIV 元素 !");
}, false);
document.getElementById("myP2").addEventListener("click", function() {
    alert("你点击了 P2 元素!");
}, true);
document.getElementById("myDiv2").addEventListener("click", function() {
    alert("你点击了 DIV2 元素 !");
}, true);
</script>

</body>
</html>

七、JavaScript HTML DOM 元素(节点)

1、创建新的 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

这段代码创建新的<p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是一个新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1");

以下代码在已存在的元素后添加新元素：

element.appendChild(para);

2、删除已有的 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<div id="div1">
    <p id="p1">这是一个段落。</p>
    <p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>

这个 HTML 文档含有拥有两个子节点（两个 <p> 元素）的 <div> 元素：

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

找到 id="div1" 的元素：

var parent=document.getElementById("div1");

找到 id="p1" 的 <p> 元素：

var child=document.getElementById("p1");

从父元素中删除子元素：

parent.removeChild(child);

十一、JavaScript中的数组-Array

　　数组是在内容空间中连续存储的一组有序数据的集合。元素在数组中的顺序，成为下标。可以使用下标访问数组的每个元素。　　

1、创建一个数组

① 使用字面量声明：var arr = [];
在JS中同一数组可以存储各种数据类型。
例如：var arr = [1,"jianghao",true,{},null,func];

② 使用new关键字声明：var arr = new Array(参数);
>>>参数可以是：
a.参数省略表示创建一个空数组；
b.参数只放一个整数表示声明一个length为指定长度的数组，但是这个length可以随时可变可追加；
c.参数为逗号分隔的多个数值，表示数组的多个值。
new Array(1,2,3) == [1,2,3]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script>
var i;
var mycars = new Array();
mycars[0] = "Jack";
mycars[1] = "Alice";
mycars[2] = "Tom";
for (i=0;i<mycars.length;i++){
    document.write(mycars[i] + "<br />");
}
</script>

</body>
</html>

二、数组中的常用方法

　 ① join():将数组用指定分隔符链接为字符串。单参数为空时，默认逗号分隔。

　 ② contact():【原数组不会被改变】将数组，与两个或多个数组的值链接为新数组；　

　 ③ push():数组最后增加一个，unshift()数组开头增加一个。-返回新数组的长度
　　 pop() 数组最后删除一个，shift() 数组开头删除一个。-返回被删除的值

④ reverse():【原数组被改变】,将数组反转，倒序输出；

⑤ slice():【原数组不会被改变】截取数组中的某一部分，并返回截取的新数组；

⑥ sort()：【原数组被改变】将数组进行排列

⑦ indexof(value,index):返回数组中第一个value值所在的下标，如果没有找到返回-1；

⑧ forEach():专门用于循环遍历数组。接收一个回调函数，回调函数接收两个参数，第一个参数为该数组的每一项值，第二个参数为下标；

⑨ map():数组映射，使用方式与foreash()使用方式相同。不同的是，map可以有返回值，表示将原数组的每个值

....................简单介绍几个常用的，如有遗漏请见谅。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<script>
　　　　　　　var arr = new Array(1,2,3,4);
            delete  arr[1]；
            arr.pop();
            arr.shift();
            arr.unshift();
            arr.unshift();
            var str = arr.join("-");
            var arr1 =arr.concat(["hah","heh","heihei"]);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 
            arr.reverse();
            arr.sort(function(a,b){
                if(a>b){
                    return 1;
                }else if(a<b){
                    return -1;
                }else{
                    return 0;
                }
   　　　　　　 return a-b;//升序排列
            });
        　　var index = arr.indexOf(6,2);
            arr.forEach(function(item,index){
                console.log(item);
            });
            var arr1 = arr.map(function(item,index){
                console.log(item);
                return item - 1  ;
            });
</script>

2、创建一个新方法

原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p id="demo">单击按钮创建一个数组,调用 ucase（）方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
Array.prototype.myUcase=function(){
    for (i=0;i<this.length;i++){
        this[i]=this[i].toUpperCase();
    }
}
function myFunction(){
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.myUcase();
    var x=document.getElementById("demo");
    x.innerHTML=fruits;
}
</script>

</body>
</html>

三、结束语

由于时间关系，内容可能不够完整，还有许多重点的干货没能及时整理，希望各位见谅，一定抽出时间补充完整。

posted on 2017-10-28 12:18 ../..随风阅读(15601) 评论(11) 编辑收藏举报

刷新页面返回顶部

大王来巡山

导航

公告

对于JavaScript原生的JS

一、JavaScript 简介

二、JavaScript 主要实现功能

三、JavaScript中的变量和输入输出

一、JavaScript中的变量:

二、JavaScript中的数据类型:

三、JavaScript 中的数值函数

四、JavaScript 中的输入和输出语句

五、JavaScript 中的运算符

六、JavaScript 中的条件语句

在 JavaScript 中，我们可使用以下条件语句：

1、If 语句只有当指定条件为 true 时，该语句才会执行代码。

2、使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

3、使用 if....else if...else 语句来选择多个代码块之一来执行。

4、JavaScript switch 语句

七、JavaScript 中的循环结构

1、【while(){}循环结构的步骤】

【 while循环与do-while循环的区别:】：

2、【for(){}循环结构的步骤】

八、JacaScript 中的函数

【匿名函数的声明和使用】：

九、JavaScript 中的 BOM

1、【location对象】：取到浏览器的URL地址信息。

2、【history浏览历史】

3、【window对象】：在window对象中的所有方法和属性，均可以省略window关键字；window.alert();--> alert(); √

十、JavaScript中的——DOM

一、HTML DOM (文档对象模型)：

二、JavaScript HTML DOM - 改变 HTML：

三、JavaScript HTML DOM - 改变CSS

四、JavaScript HTML DOM 事件

五、JavaScript HTML DOM EventListener

十一、JavaScript中的数组-Array

1、创建一个数组

二、数组中的常用方法

2、创建一个新方法

三、结束语

大王来巡山

导航

公告

对于JavaScript原生的JS

一、JavaScript 简介

二、JavaScript 主要实现功能

三、JavaScript中的变量和输入输出

一、JavaScript中的变量:

二、JavaScript中的数据类型:

三、JavaScript 中的数值函数

四、JavaScript 中的输入和输出语句

五、JavaScript 中的运算符

六、JavaScript 中的条件语句

在 JavaScript 中，我们可使用以下条件语句：

1、If 语句 只有当指定条件为 true 时，该语句才会执行代码。

2、使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

3、使用 if....else if...else 语句来选择多个代码块之一来执行。

4、JavaScript switch 语句

七、JavaScript 中的循环结构

1、【while(){}循环结构的步骤】

【 while循环与do-while循环的区别:】：

2、【for(){}循环结构的步骤】

八、JacaScript 中的函数

【匿名函数的声明和使用】：

九、JavaScript 中的 BOM

1、【location对象】：取到浏览器的URL地址信息。

2、【history浏览历史】

3、【window对象】：在window对象中的所有方法和属性，均可以省略window关键字；window.alert();--> alert(); √

十、JavaScript中的——DOM

一、HTML DOM (文档对象模型)：

二、JavaScript HTML DOM - 改变 HTML：

三、JavaScript HTML DOM - 改变CSS

四、JavaScript HTML DOM 事件

五、JavaScript HTML DOM EventListener

十一、JavaScript中的数组-Array

1、创建一个数组

二、数组中的常用方法

2、创建一个新方法

三、结束语

1、If 语句只有当指定条件为 true 时，该语句才会执行代码。