JavaScript 知识点回顾

最新推荐文章于 2022-06-24 13:07:51 发布

YuZongTao

最新推荐文章于 2022-06-24 13:07:51 发布

阅读量421

点赞数

本文链接：https://blog.csdn.net/yuzongtao/article/details/52119143

版权

 
 ========== 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）外部编写调用：

<span style="font-family:SimSun;font-size:14px;"><script type="text/javascript"  <span style="color:#ff6666;">src="demo.js"</span> ></script></span>

如在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）常用函数方法

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

三、DOM 简介

HTML DOM （文档对象模型）

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

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

HTML DOM 树

通过可编程的对象模型，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>

亲自试一试

例子 2

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

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

亲自试一试

HTML 事件属性

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

实例

向 button 元素分配 onclick 事件：

<button οnclick="displayDate()">点击这里</button>

亲自试一试

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

使用 HTML DOM 来分配事件

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

实例

向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").οnclick=function(){displayDate()};
</script>

亲自试一试

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

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

onload 和 onunload 事件

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

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

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

实例

<body οnlοad="checkCookies()">

亲自试一试

onchange 事件

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

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

实例

<input type="text" id="fname" οnchange="upperCase()">

亲自试一试

onmouseover 和 onmouseout 事件

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

实例

一个简单的 onmouseover-onmouseout 实例：

把鼠标移到上面

亲自试一试

onmousedown、onmouseup 以及 onclick 事件

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

实例

一个简单的 onmousedown-onmouseup 实例：

请点击这里

亲自试一试

HTML DOM Event 对象参考手册

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

YuZongTao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

JavaScript 知识点回顾

一、JS简介

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

二、JS编写方式

1）内部编写调用：

2）外部编写调用：

二、JS语法

1）数据类型

2）基本语法

`<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 支持不同类型的循环：

三、DOM 简介

HTML DOM （文档对象模型）

HTML DOM 树

改变 HTML 内容

实例

改变 HTML 属性

实例

改变 HTML 样式

例子 1

对事件做出反应

例子 1

例子 2

HTML 事件属性

实例

使用 HTML DOM 来分配事件

实例

onload 和 onunload 事件

实例

onchange 事件

实例

onmouseover 和 onmouseout 事件

实例

onmousedown、onmouseup 以及 onclick 事件

实例

更多实例

HTML DOM Event 对象参考手册

JavaScript 知识点回顾

一、JS简介

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

二、JS编写方式

1） 内部编写调用：

2） 外部编写调用：

二、JS语法

1） 数据类型

2） 基本语法

<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 支持不同类型的循环：

三、DOM 简介

HTML DOM （文档对象模型）

HTML DOM 树

改变 HTML 内容

实例

改变 HTML 属性

实例

改变 HTML 样式

例子 1

对事件做出反应

例子 1

例子 2

HTML 事件属性

实例

使用 HTML DOM 来分配事件

实例

onload 和 onunload 事件

实例

onchange 事件

实例

onmouseover 和 onmouseout 事件

实例

onmousedown、onmouseup 以及 onclick 事件

实例

更多实例

HTML DOM Event 对象参考手册

1）内部编写调用：

2）外部编写调用：

1）数据类型

2）基本语法

`<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>`