javascript 完整知识点整理(基于w3school教程)
Copyright 2016 by 蔡舒啸 保持署名-非商业性使用-相同方式共享 Creative Commons BY-NC-ND 3.0
- 一 5种基本类型
- typeof 关键字
- 三种强制类型转换
- 日期
- 二 if语句for语句whiledo-whileswitch-case
- 比较运算符
- 逻辑运算符
- if for语句 while do-while switch-case
- 三 JavaScript 是脚本语言浏览器会在读取代码时逐行地执行脚本代码
- 四 Javascript 内置字符串方法
- 正则表达式
- 五 JavaScript 错误 - ThrowTry 和 Catch
- throw
- 六 Javascript验证
- E-mail 验证
- 七 HTML DOM操作
- 操作css
- 通过css的visibility属性隐藏 DOM 节点
- 操作css
- 八 事件
- 使用 js 来分配事件触发那个函数
- onload 和 onunload 事件
- onchange输入框内容改变失去焦点时自动触发onfocus
- onmouseover onmouseout鼠标事件
- onmousedownonmouseup 以及 onclick 事件
- 九 操作DOM节点HTML标签
- 创建
- 删除
- 十 对象
- 遍历属性Java反射
- 十一 Browser Object Model
- 十二 JS库
- 十三 AJAX
- openmethodurlasync
- asynctrue
- asyncfalse
- sendstring
- 使用 Callback 函数
- AJAX 小例子 - 搜索提示
- 服务器端 php文件
- AJAX 数据库
- 服务器端 php文件
- openmethodurlasync
一 5种基本类型
JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
undefined
//不赋值就是undefined类型
var testUndefined1;
//undefined类型唯一的值是undefined
var testUndefined = undefined;
//null类型唯一的值是null
var testNull = null;
//undefined “继承”自 null
alert(testUndefined==testNull);//true
//boolean
var testBoobean = true;
/*
数据类型 转化成true的值 转化成false的值
Boolean ture false
String 所有的非空字符串 ""（空字符串）
Number 任何非零数字（包括无穷大） 0和NaN
Object 任何对象 不存在
Undefined 不存在 undefined
*/
//string
var testString = "Hello";
//number
//所有 JavaScript 数字均为 64 位
// 整数（不使用小数点或指数计数法）最多为 15 位。
// 小数的最大位数是 17，但是浮点运算并不总是 100% 准确 var x=0.2+0.1;//！=0.3
010==8
0x10==16
1.0
.1//not recommended
2.3e7
/* 算数
round(double... x) //支持小数和负数的四舍五入
random(double... x) //0 到 1 之间的随机数。
max(double... x)。
min(double... x)
*/
//var testNull = null;
var testObject = {a:1};
/*
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
*/
//function
//只要函数运行完毕，本地变量就会被删除。
//函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。
//在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
var testFunction = function(){return;};
/*
例外：
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。
这条语句：
carname="Volvo";
将声明一个全局变量 carname，即使它在函数内执行。
*/
//array
var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];
//javascript支持混合类型的数组
var cars=[1,"s"];
for(i=0;itypeof cars[i]);
}
//number string typeof 关键字
typeof 变量名返回字符串
仅对undefined有效
alert(testUndefined == undefined)
通用：
alert(typeof testUndefined == “undefined”)
三种强制类型转换
Boolean(value)
Number(value)
String(value)
日期
显示十分秒
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
/*setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。*/
t=setTimeout('startTime()',500)//递归调用 HTML DOM setTimeout() 方法刷新时间
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
script>
head>
<body onload="startTime()">
<div id="txt">div>
body>
html>二 if语句，for语句,while,do-while,switch-case
if, for, while, switch 都离不了比较运算符和逻辑运算符, js中的比较运算符和逻辑运算符和 Java 中的很像
比较运算符
==
!=
=== 全等（值和类型）
x=5;
x===5 //为 true；
x==="5" //为 false逻辑运算符
&&
||
!
variablename=(condition)?value1:value2
if, for语句, while, do-while, switch-case
//if
if (age<18) document.write("Too young");
if() {
//
}else if() {
//
}
else {
//
}
//for
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i"
");
}
//while
while (i<5)
{
x=x + "The number is " + i + "
";
i++;
}
//do-while
do
{
x=x + "The number is " + i + "
";
i++;
}
while (i<5);
//switch
var day=new Date().getDay();
switch (day)
{
case 6:
x="Today it's Saturday";
break;
case 0:
x="Today it's Sunday";
break;
default:
x="Looking forward to the Weekend";
} 三 JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码
四 Javascript 内置字符串方法
"foo".length //字符串的长度
/*
anchor() 创建 HTML 锚。
big() 用大号字体显示字符串。
blink() 显示闪动字符串。
bold() 使用粗体显示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
fixed() 以打字机文本显示字符串。
fontcolor() 使用指定的颜色来显示字符串。
fontsize() 使用指定的尺寸来显示字符串。
fromCharCode() 从字符编码创建一个字符串。
indexOf() 检索字符串。
italics() 使用斜体显示字符串。
lastIndexOf() 从后向前搜索字符串。
link() 将字符串显示为链接。
localeCompare() 用本地特定的顺序来比较两个字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
search() 检索与正则表达式相匹配的值。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
small() 使用小字号来显示字符串。
split() 把字符串分割为字符串数组。
strike() 使用删除线来显示字符串。
sub() 把字符串显示为下标。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
sup() 把字符串显示为上标。
toLocaleLowerCase() 把字符串转换为小写。
toLocaleUpperCase() 把字符串转换为大写。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
toSource() 代表对象的源代码。
toString() 返回字符串。
valueOf() 返回某个字符串对象的原始值。
*/其中，支持正则表达式的 String 对象的方法
search() 检索与正则表达式相匹配的值
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
split() 把字符串分割为字符串数组
正则表达式
-
new RegExp(pattern, attributes); 参数pattern
- 用来存储检索模式，可以是字符串或正则表达式。正则表达式的语法请看 http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp
- 参数attributes
- 如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。attributes可以是 “g”、”i” 和 “m”，分别用于指定全局匹配、区分大小写的匹配和多行匹配。
以下代码定义了名为 patt1 的 RegExp 对象，其检索模式模式是 - 字符串 “e”：
var patt1=new RegExp("e");
RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
test() 方法检索字符串中的指定值。返回值是 true 或 false。类似java Regex类的find()方法
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。类似java Regex类的group() 方法
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
//增加模式d
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));五 JavaScript 错误 - Throw、Try 和 Catch
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
script>
head>
<body>
<input type="button" value="View message" onclick="message()">
body>
html>throw
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
六 Javascript验证
E-mail 验证
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
script>
head>
<body>
<form action="submitpage.htm"onsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
form>
body>
html>七 HTML DOM操作
本例查找 id=”main” 的元素，然后查找 “main” 中的所有 元素：
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");本例改变了 元素的 src 属性：
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
script>
body>
html>操作css
最权威的DOMcss样式文档http://www.w3school.com.cn/jsref/dom_obj_style.asp
下面的例子会改变
元素的样式：
<html>
<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>
<p>上面的段落已被一段脚本修改。p>
body>
html>通过css的visibility属性隐藏 DOM 节点
<html>
<body>
<p id="p1">这是一段文本。p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
body>
html>八 事件
使用 js 来分配事件触发那个函数
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
实例
向 button 元素分配 onclick 事件：