http://www.ziqiangxuetang.com/js/js-tutorial.html
一、引用
在 HTML 页面中插入JavaScript,请使用 <script> 标签。
<script> 和</script> 会告诉 JavaScript 在何处开始和结束
二、基础
1、输出
-- 写到元素
向 id="demo"的 HTML 元素输出文本 "你好 Dolly"
document.getElementById("demo").innerHTML="你好 Dolly";
-- 写到文档
把 <p> 元素写到 HTML文档输出中
document.write("<p>我的第一个JavaScript</p>");
2、关键字
abstract | else | instanceof | super |
boolean | enum | int | switch |
break | export | interface | synchronized |
byte | extends | let | this |
case | false | long | throw |
catch | final | native | throws |
char | finally | new | transient |
class | float | null | true |
const | for | package | try |
continue | function | private | typeof |
debugger | goto | protected | var |
default | if | public | void |
delete | implements | return | volatile |
do | import | short | while |
double | in | static | with |
3、注释
//
/* … */
4、变量
var carname;
var pi=3.14;
var lastname="Doe", age=30, job="carpenter";
5、数据类型
字符串:var carname="VolvoXC60";
数字:var x1=34.00;
布尔值:var x=true;
数组:
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];
字典:
var person={firstname:"John", lastname:"Doe", id:5566};
null:var x=null;
6、对象
-- 创建对象
创建名为"person" 的对象,并为其添加属性:
person=new Object();
person.firstname="John";
-- 访问对象
objectName.propertyName
objectName.methodName()
7、函数
function myFunction("marked">var1,"marked">var2)
{
代码
return
}
8、运算
+、-、*、/、%、++、--、=、+=、-=、*=、/=、%=
9、比较
==、===(绝对等于,值和类型都相同)、!=、!==、>、<、>=、<=、&&、||、!
10、条件
-- if else
if (condition1)
{
当条件 1 为 true 时执行的代码
}
else if (condition2)
{
当条件 2 为 true 时执行的代码
}
else
{
当条件 1 和 条件 2 都不为 true 时执行的代码
}
-- switch
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
11、循环
-- for
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
-- for/in
for (x in person)
-- while
while (条件)
{
需要执行的代码
}
-- do/while
do
{
需要执行的代码
}
while (条件);
-- break
不带标签引用跳出当前代码块
带标签引用跳出任何指定标签
-- continue
不带标签引用继续执行当前代码块
带标签引用继续执行任何指定标签
12、错误
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
throw exception
13、表单
function validateForm()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
三、DOM
1、HTML
改变输出流:document.write()。(注:不要在文档加载之后使用document.write()。这会覆盖该文档)
改变内容:document.getElementById(id).innerHTML=newHTML
改变属性:document.getElementById(id).attribute=new value
2、CSS
改变样式:document.getElementById(id).style.property=new style
document.getElementById("p2").style.color="blue";
3、事件
可以在事件发生时选择执行javascript
οnclick=JavaScript
ondblclick | 鼠标双击时触发此事件 |
onmousedown | 按下鼠标时触发此事件 |
onmouseup | 鼠标按下后松开鼠标时触发此事件 |
onmouseover | 当鼠标移动到某对象范围的上方时触发此事件 |
onmousemove | 鼠标移动时触发此事件 |
onmouseout | 当鼠标离开某对象范围时触发此事件 |
onkeypress | 当键盘上的某个键被按下并且释放时触发此事件. |
onkeydown | 当键盘上某个按键被按下时触发此事件 |
onkeyup | 当键盘上某个按键被按放开时触发此事件 |
onbeforeunload | 当前页面的内容将要被改变时触发此事件 |
onerror | 出现错误时触发此事件 |
onload | 页面内容完成时触发此事件 |
onmove | 浏览器的窗口被移动时触发此事件 |
onresize | 当浏览器的窗口大小被改变时触发此事件 |
onscroll | 浏览器的滚动条位置发生变化时触发此事件 |
onstop | 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断 |
oncontextmenu | 当弹出右键上下文菜单时发生 |
onunload | 当前页面将被改变时触发此事件 |
onchange | 当前元素失去焦点并且元素的内容发生改变而触发此事件 |
onfocus | 当某个元素获得焦点时触发此事件 |
onreset | 当表单中RESET的属性被激发时触发此事件 |
onsubmit | 一个表单被递交时触发此事件 |
4、元素
-- 创建元素
这段代码创建新的<p>元素:
var para=document.createElement("p");
如需向<p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
var node=document.createTextNode("This is a new paragraph.");
然后您必须向<p> 元素追加这个文本节点:
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
var element=document.getElementById("div1");
以下代码在已存在的元素后添加新元素:
element.appendChild(para);
-- 删除元素
这个 HTML 文档含有拥有两个子节点(两个<p> 元素)的 <div> 元素:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
找到id="div1" 的元素:
var parent=document.getElementById("div1");
找到id="p1" 的 <p> 元素:
var child=document.getElementById("p1");
从父元素中删除子元素:
parent.removeChild(child);
四、内置对象
1、Number
2、String
3、Date
4、Array
5、Boolean
6、Math
7、RegExp