JavaScript 知识点回顾
2016-08-04 16:20
513 查看
版权声明：文章版权归作者所有，未经同意严禁转载！
========== Jquery 知识库======== http://lib.csdn.net/article/jquery/12700 http://lib.csdn.net/article/jquery/7340 http://edu.csdn.net/course/detail/1542
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
<script> 和 </script> 之间的代码行包含了 JavaScript：
不过JavaScript中的变量是无类型的，即可以存储任何一种数据类型的数据。
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：
变量声明之后，该变量是空的（它没有值），此时是undefined。
如需向变量赋值，请使用等号：
在 JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
{
document.write(cars[i] + "<br>");
}[/code]
While 循环会在指定条件为真时循环执行代码块。
break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
}
x=x + "The number is " + i + "<br>";
}[/code]
4）常用函数方法
Array是可变长数组。
contact();链接多个数组，返回一个新数组
join:链接数组元素，用指定的字符。
pop,push,栈结构
valueOf(),返回数组的原始值
sort()，按字符排序
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
本例改变了 <p> 元素的内容：
如需改变 HTML 元素的属性，请使用这个语法：
本例改变了 <img> 元素的 src 属性：
如需改变 HTML 元素的样式，请使用这个语法：
下面的例子会改变 <p> 元素的样式：
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
[/code]
亲自试一试
</body>
</html>
[/code]
亲自试一试
如需向 HTML 元素分配 事件，您可以使用事件属性。
亲自试一试
在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
亲自试一试
在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
当按钮被点击时，会执行该函数。
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
亲自试一试
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
亲自试一试
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
把鼠标移到上面
亲自试一试
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
请点击这里
亲自试一试
onmousedown 和 onmouseup当用户按下鼠标按钮时，更换一幅图像。onload当页面完成加载时，显示一个提示框。onfocus当输入字段获得焦点时，改变其背景色。鼠标事件当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。
如需所有 HTML DOM 事件的完整列表，请参阅 W3School 提供的 HTML DOM Event
对象参考手册。
========== 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 在何处开始和结束。
<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)常用逻辑语句
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 ([code]var i=0,len=cars.length;i<len; i++)
{
document.write(cars[i] + "<br>");
}[/code]
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)
{
[code]break;}
x=x + "The number is " + i + "<br>";
}[/code]
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 代码：
onclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
例子 1
在本例中，当用户在 <h1> 元素上点击时，会改变其内容：<h1 [code]onclick="this.innerHTML='谢谢!'">请点击该文本</h1>
[/code]
亲自试一试
例子 2
本例从事件处理器调用一个函数：<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body>
<h1 [code]onclick="changetext(this)">请点击该文本</h1></body>
</html>
[/code]
亲自试一试
HTML 事件属性
如需向 HTML 元素分配 事件，您可以使用事件属性。实例
向 button 元素分配 onclick 事件：<button onclick="displayDate()">点击这里</button>
亲自试一试
在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。
使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：实例
向 button 元素分配 onclick 事件：<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>亲自试一试
在上面的例子中，名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
当按钮被点击时，会执行该函数。
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
<body onload="checkCookies()">
亲自试一试
onchange 事件
onchange 事件常结合对输入字段的验证来使用。下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例
<input type="text" id="fname" onchange="upperCase()">
亲自试一试
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。实例
一个简单的 onmouseover-onmouseout 实例：把鼠标移到上面
亲自试一试
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。实例
一个简单的 onmousedown-onmouseup 实例：请点击这里
亲自试一试
更多实例
onmousedown 和 onmouseup当用户按下鼠标按钮时，更换一幅图像。onload当页面完成加载时，显示一个提示框。onfocus当输入字段获得焦点时，改变其背景色。鼠标事件当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色。
HTML DOM Event 对象参考手册
如需所有 HTML DOM 事件的完整列表，请参阅 W3School 提供的 HTML DOM Event对象参考手册。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript知识点回顾
- JavaScript知识点回顾
- javascript操作excel知识点
- JavaScript小知识点集锦(不段更新中)
- Javascript 中的小知识点整理
- JavaScript对象知识点总结
- javaScript基础回顾
- 我回顾iBATIS知识点（遇到鬼了）！（2010年10月27号日志）
- javascript常用知识点
- JavaScript值得注意的小知识点
- JavaScript对象知识点总结
- javascript 正则表达式知识点总结：（转并整理）
- 知识点回顾
- javascript Excel操作知识点
- javascript小知识Math.random()与Math.floor()及列表，知识点记录
- javascript 小知识点(1)
- javascript常用知识点总结
- (转)javascript javascript常用知识点总结
- 没事时用最简单的C++语言编一些小程序可以回顾知识点，增加熟练度
- JavaScript关键知识点汇总（2）：Array