JavaScript 知识点回顾

待我称王封你为后i 2022-09-25 01:18 279阅读 0赞

========== Jquery 知识库========

http://lib.csdn.net/article/jquery/12700

http://lib.csdn.net/article/jquery/7340

http://edu.csdn.net/course/detail/1542

# 一、JS简介 #

##     JavaScript 是一种动态类型、弱类型、基于原型的脚本语言。它的解释器被称为JavaScript引擎，可插入 HTML 页面的编程代码，可由所有的现代浏览器执行。 ##

JavaScript 被数百万计的网页**用来改进设计、验证表单、检测浏览器、创建cookies**，以及更多的应用。

# 二、JS编写方式 #

## 1） **内部编写调用**： ##

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

**<script> 和 </script> 会告诉 JavaScript 在何处开始和结束**。

<span style="font-family:SimSun;font-size:14px;"><script>
    alert("My First JavaScript");
    </script></span>

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。

## 2） **外部编写调用**： ##

如在jsp代码中引入demo.js文件，就可以使用demo.js中的代码，这样做的**好处是demo.js中的代码可以被多个jsp文件复用**。

# 二、JS语法 #

## **1） 数据类型 ** ##

JavaScript 字符串、数字、布尔、数组、对象、Null、Undefined

不过JavaScript中的**变量是无类型的，即可以存储任何一种数据类型的数据。**

**     **JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

<span style="font-family:SimSun;font-size:14px;">var x                // <span style="color:#ff0000;"><strong>x 为 undefined</strong></span>
    var x = 6;           // x 为数字
    var x = "Bill";      // x 为字符串</span>

## **2） 基本语法** ##

用 var 关键词来声明变量：

## `<span style="font-family:SimSun;font-size:14px;font-weight: normal;">var carname;</span>`  变量声明之后，该变量是空的（它没有值），此时是undefined。  如需向变量赋值，请使用等号：  `<span style="font-family:SimSun;font-size:14px;font-weight: normal;">carname="Volvo";</span>`  不过，您也可以在声明变量时对其赋值： ##

## `<span style="font-family:SimSun;font-size:14px;font-weight: normal;">var carname="Volvo";</span>` ##

## `<span style="font-family:SimSun;font-size:14px;font-weight: normal;">var name="Gates", age=56, job="CEO";</span>`      ##

## 3)常用逻辑语句 ##

## 在 JavaScript 中，我们可使用以下条件语句：  if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码  if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码  if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行  switch 语句 - 使用该语句来选择多个代码块之一来执行  `<span style="font-family:SimSun;font-size:14px;font-weight: normal;"> if (条件 1) { 当条件 1 为 true 时执行的代码 } else if (条件 2) { 当条件 2 为 true 时执行的代码 } else { 当条件 1 和 条件 2 都不为 true 时执行的代码 }</span>`       `<span style="font-family:SimSun;font-size:14px;font-weight: normal;">switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码 }</span>` ##

##     ##

## JavaScript 支持不同类型的循环： ##

*  for - 循环代码块一定的次数
 *  for/in - 循环遍历对象的属性
 *  while - 当指定的条件为 true 时循环指定的代码块
 *  do/while - 同样当指定的条件为 true 时循环指定的代码块

for (var i=0,len=cars.length; i<len; i++) { document.write(cars[i] + "<br>"); }

##     ##

While 循环会在指定条件为真时循环执行代码块。

do
      {
      x=x + "The number is " + i + "<br>";
      i++;
      }
    while (i<5);

cars=["BMW","Volvo","Saab","Ford"];
    var i=0;
    while (cars[i])
    {
    document.write(cars[i] + "<br>");
    i++;
    }

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

for (i=0;i<10;i++)
      {
      if (i==3)
        {
        break;
        }
      x=x + "The number is " + i + "<br>";
      }

for (i=0;i<=10;i++)
     {
     if (i==3) continue;
      x=x + "The number is " + i + "<br>";
      }

4）常用函数方法

1.  Array是可变长数组。
2.  contact();链接多个数组，返回一个新数组
3.  join:链接数组元素，用指定的字符。
4.  pop,push,栈结构
5.  valueOf(),返回数组的原始值
6.  sort()，按字符排序

# 三、DOM 简介 #

## HTML DOM （文档对象模型） ##

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

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

### HTML DOM 树 ###

![ct_htmltree.gif][]

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

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

## 改变 HTML 内容 ##

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

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

document.getElementById(id).innerHTML=new HTML

### 实例 ###

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

<html>
    <body>
    
    <p id="p1">Hello World!</p>
    
    <script>
    document.getElementById("p1").innerHTML="New text!";
    </script>
    
    </body>
    </html>

## 改变 HTML 属性 ##

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

document.getElementById(id).attribute=new value

### 实例 ###

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

<!DOCTYPE html>
    <html>
    <body>
    
    <img id="image" src="smiley.gif">
    
    <script>
    document.getElementById("image").src="landscape.jpg";
    </script>
    
    </body>
    </html>

## 改变 HTML 样式 ##

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

document.getElementById(id).style.property=new style

### 例子 1 ###

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

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

## 对事件做出反应 ##

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

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

οnclick=JavaScript

HTML 事件的例子：

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

### 例子 1 ###

在本例中，当用户在 <h1> 元素上点击时，会改变其内容：

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

[亲自试一试][Link 1]

### 例子 2 ###

本例从事件处理器调用一个函数：

<!DOCTYPE html>
    <html>
    <head>
    <script>
    function changetext(id)
    {
    id.innerHTML="谢谢!";
    }
    </script>
    </head>
    <body>
    <h1 onclick="changetext(this)">请点击该文本</h1>
    </body>
    </html>

[亲自试一试][Link 2]

## HTML 事件属性 ##

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

### 实例 ###

向 button 元素分配 onclick 事件：

[亲自试一试][Link 3]

在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。

## 使用 HTML DOM 来分配事件 ##

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

### 实例 ###

向 button 元素分配 onclick 事件：

[亲自试一试][Link 4]

在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。

当按钮被点击时，会执行该函数。

## onload 和 onunload 事件 ##

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

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

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

### 实例 ###

[亲自试一试][Link 5]

## onchange 事件 ##

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

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

### 实例 ###

[亲自试一试][Link 6]

## onmouseover 和 onmouseout 事件 ##

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

### 实例 ###

一个简单的 onmouseover-onmouseout 实例：

把鼠标移到上面

[亲自试一试][Link 7]

## onmousedown、onmouseup 以及 onclick 事件 ##

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

### 实例 ###

一个简单的 onmousedown-onmouseup 实例：

请点击这里

[亲自试一试][Link 8]

## 更多实例 ##

[onmousedown 和 onmouseup][onmousedown _ onmouseup]

当用户按下鼠标按钮时，更换一幅图像。

[onload][]

当页面完成加载时，显示一个提示框。

[onfocus][]

当输入字段获得焦点时，改变其背景色。

[鼠标事件][Link 9]

当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。

## HTML DOM Event 对象参考手册 ##

如需所有 HTML DOM 事件的完整列表，请参阅 W3School 提供的 [HTML DOM Event 对象参考手册][HTML DOM Event]。

[ct_htmltree.gif]: /images/20220719/d9597f153e824bd89e2ed5ea9a0ea048.png
[Link 1]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onclick1
[Link 2]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onclick2
[Link 3]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onclick3
[Link 4]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onclick4
[Link 5]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onload_onunload
[Link 6]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onchange
[Link 7]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onmouseover_onmouseout
[Link 8]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onmousedown_onmouseup
[onmousedown _ onmouseup]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onmousedown_onmouseup2
[onload]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onload2
[onfocus]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onfocus
[Link 9]: http://www.w3school.com.cn/tiy/t.asp?f=js_dom_event_onmouse
[HTML DOM Event]: http://www.w3school.com.cn/jsref/dom_obj_event.asp