JavaScript学习笔记——基本知识
1.JavaScript的放置和注释
1.输出工具
A.alert();
B.document.write();
C.prompt("","");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>输出函数测试</title> </head> <body> <script> <!-- 弹出对话框显示 --> alert("<h1>测试</h1>"); <!-- 页面显示 --> document.write("<h1>测试教程</h1>"); <!-- 弹出输入对话框，一个提示参数，一个输入参数 --> var value=prompt("please enter your name","") <!-- 显示输入的参数 --> alert(value); </script> </body> </html>
2.JavaScript如何在html页面当中进行放置
A.<script></script> 放在<head></head>中间，也可以放在<body></body>中间，有两个属性，一个是type，另外一个是language
div中加样式：写class，<div class="one"></div>，然后在<head></head>中写<style></style>
<style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } </style>
JavaScript可以在html页面当中的任何位置来进行调用，但是他们还是一个整体，是相互联系，相互影响。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>javascript放置</title> <script type="text/javascript" language="javascript" > var a="这是测试" </script> <style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } </style> </head> <body> <script type="text/javascript" language="javascript"> a="这是测试demo" document.write(a); </script> <div class="one"> 测试demo！ </div> <script type="text/javascript" language="javascript"> alert(a); </script> </body> </html>
B.可以在超链接或是重定向的位置调用javascript代码
格式："javascript:alert('我是超链接')"
重定向格式：action="javascript:alert('我是表单')"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>place2</title> <style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } </style> </head> <body> <div class="one"> 测试demo！ </div> <!-- 点击链接，弹出对话框 --> <a href="javascript:alert('我是超链接')">链接</a> <!-- from表单，提交表单后弹出对话框 --> <form action="javascript:alert('我是表单')" method="post"> <input type="text" name="names"> <!-- type是submit，点击按钮后直接提交表单 --> <input type="submit" value="提交"> </form> </body> </html>
C.在事件后面进行调用
1>.格式：onclick="alert('我是事件')"
2>.<script for="two" event="onclick">
alert("我是DIV2");
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>place3</title> <style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } .two{ width:200px; height:300px; background:blue; font-size:12px; color:red; } </style> <!-- for属性表示为了那个ID，一般不用 --> <script for="two" event="onclick"> alert("我是DIV2"); </script> </head> <body> <!-- 点击这个div弹出对话框 --> <div class="one" onclick="alert('我是事件')"> 测试demo！ </div> <div class="two" id="two"> 测试demo！ </div> </body> </html>
3.调用外部javascript文件
格式： <script src="2.js"></script> 在<head></head>中加入
<script src="2.txt"></script>
js文件
var a="test"; alert(a);
注意：在调用页面<script>标签对当中不能有任何代码、在js脚本中不能出现<script>标签对、但是他们还是一个整体，是相互联系，相互影响。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>place4</title> <!-- 调用外部js文件 --> <script src="2.txt"></script> <style> .one{ width:100px; height:100px; background:red; font-size:12px; color:blue; } .two{ width:200px; height:300px; background:blue; font-size:12px; color:red; } </style> <script> <!-- //a="test"; //alert(a); </script> </head> <body> <div class="one" > 测试demo！ </div> <div class="two" id="two"> 测试demo！ </div> </body> </html>
4.javascript注释:
1.对付旧的浏览器
<!-- -->
2.真正注释符号。
A.行内注释 //
B.块注释/**/
2.JavaScript的变量和数据类型
一、javascript命名规范
1. 严格区分大小写
2. 变量的命名必须以字母或 _或 $开头，余下的部分可以是任意的字母，数字，或者是_ 或者是$
3.不能用关键字或者是保留字命名。
4.javascript自己的命名习惯
驼峰命名法：getElementById
首字母大写：Object
5.命名一定要有意义。
6. ;的用法
二、javascript变量
变量：可以存储数据的一个容器。
1.变量如何创建(声明)
必须以"var"关键来修饰。
A.先声明，后赋值
var bbs;
bbs="bbs.houdunwang.com";
B.声明和赋值同时进行
var url="www.houdunwang.com";
C.一次声明多个变量，然后再赋值
var name, age , sex;
name="lisi";
age=14;
sex="boy";
D.一次声明多个变量同时进行赋值。
var name="wangwu",age=17,sex="girl";
2.如何覆盖已有变量
A.如何重新声明该变量，而没有赋值，该变量的值不会改变
B.如果重新声明该变量并且重新赋值，那么旧的变量值会删除，改为新的变量值。
3.不用var 关键字来修饰变量
aa="我是没有声明的"
alert(aa);
*****************************************、
A.如果不用var关键来修饰的变量，并且这个所谓的变量也没有赋值，那么javascript会报错。
B.如果不用var关键来修饰的变量，但是变量赋值了，那么javascript会把他当作一个全局变量来处理，不会报错。但是我们不推介使用。
*****************************************
三、javascript中的数据类型
1.初始类型
Undefined
Null
Number
String
Boolean
2.引用类型
object (class)
四、JavaScript把内存分成四个部分：栈、堆、代码段和静态区
原始数据类型都是存储在栈中，长度是固定的，在栈中的查询速度比较快
在栈中申明了object对象，只是一个引用地址，实际的内容在堆中
五、typeof操作符
他是用来检测数据类型的一元运算符，并且返回的结果始终是一个字符串。
知识点：== 比较值是不是相等于的 全等于 ===比较值和类型是不是相等于的
六、数据类型
1.初始类型
Undefined 指的就是变量创建后但是没有赋值，而变量的默认值就是undefined
Null 指的是什么都没有，仅仅是一个占位符。
Number 包括整型和浮点型。支持二进制、八进制(以0开头)、十进制、十六进制(以0x开头)。用科学计数法来表示(2e2=200)，
还包括一些特殊的值：Number.MAX_VALUE 最大值 Number.MIN_VALUE 最小值
String 用单双引号来说明，他所包围的值都可以是字符串。
单双引号的用法：
1>效率是一样的
2>只能成对出现，不能相互交叉使用
3>可以相互嵌套。
4>还包括一些特殊的字符:
\n 换行
\t 制表符
\b 空格
\r 回车
\' ‘
\" “
\\ \
Boolean 只有两个特殊的值 true false
2.引用类型
object (class) 包含相关属性和方法的一个集合。new 关键字。var obj=new Object();
类型 值 typeof运算的结果
Undefined undefined "undefined" undefined是一个字符串，等于Null，但是不全等于Null
Null null "object" null是一个对象
String 在单双引号之间的值，特殊字符 "string"
Boolean true false "boolean"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>数据类型下</title>
</head>
<body>
<Script>
//Number类型
//整型
// var num=999.0;
// alert(num);
// alert(typeof (num))
//浮点型
// var flo=3.140;
// alert(flo);
// alert(typeof (flo))
//二进制 八进制 十进制 十六进制
//八进制 必须以"0",后面的数字不能超过“7”,如果后面的数字超过8,那么会把这个数字当成十进制的数字来处理。
//var num8=077;
//alert(typeof num8);
//十六进制 从0-9 A-F ,必须以"0x"开头.,
//var num16=0xhff;
//alert(num16);
//科学计数法 用e来表示某个数的10的一次方，e后面加数字表示某个数的N次方
//
// var num=2e-2;
// alert(num)
//最大值 Number.MAX_VALUE 最大值
//alert(Number.MAX_VALUE );
//最小值 Number.MIN_VALUE 最小值
//alert(Number.MIN_VALUE);
//Number.POSITIVE_INFINITY
//Number.NEGATIVE_INFINITY
//Infinity无穷大
//-Infinity无穷小
//alert(Number.POSITIVE_INFINITY===Infinity)
//alert(Number.NEGATIVE_INFINITY===-Infinity)
//isFinite() 判断一个数字是否是无穷的
//NaN not a number
// var num=1;
// var str="abc";
// alert(num*str);
//isNaN() not a number? 不能转换成数字返回为真，能转换为数字返回为假。
// var str="123";
// alert(isNaN(str));
//引用类型
// obj=new Object(2);
// alert(typeof obj);
// obj={};
// alert(typeof obj);
// var arr=[1,2,3];
// alert(typeof arr);
// function fun () {
// alert("我是一个函数");
//
// }
//
// alert(typeof fun)
//
</script>
</body>
</html>
3.javascript运算符
一、运算符和操作数的组合就称为表达式。
二、javascript运算符
(一) 算术运算符
+ - * / % var++ ++var var-- --var
A. +
(1) 用于数值的运算
(2) 用于字符串的连接
***************************
任何的数据类型和字符串相加都是等于相加以后的字符串
*************************
B. %
(1)用于取余数，判断奇数或者是偶数
(2)一般不用于小数，因为结果不确定。
C. var++和++var
++在前面，自己先加，然后再赋值。
++在后面，先赋值，然后自己再加。
(二) 关系运算符(比较运算符)
< > <= >= == === != !==
(1)他运算的结果都是布尔值
(2)都是字符串的时候，他会先转换成ASCII码然后进行比较他们的第一个字母。
(3)都是数值的时候，他会正常比较
(4)当一个字符串，另一个是数值的时候，把字符串尝试转换成数值类型，然后进行比较，如果不能转换成数值类型，则会返回NaN,然后返回假
(5) undefined null
(6)如果两个都是数值型字符串，那么他们也是只比较第一个
(7)如果一个数值和布尔值进行比较，会把布尔值转换为数值再进行比较，true为1，false为 0
A. == 只比较值是否相等
(1) 比较字符串的时候是比较他们的ASCII码是否相等
(2) 比较两个数值的时候是比较他们的数值是否相等
(3) 比较函数的时候，判断他们的内存位置是否相等。
B. === 不但比较值是否相等，还比较类型是否相等。
(三) 赋值运算符
= += -= *= /= %=
A. +=
var a=1;
a+=3； a=a+3
(1) 用于数值的相加再赋值
(2) 用于字符串的连接再赋值
***************************
任何的数据类型和字符串相加都是等于相加以后的字符串
*************************
(四) 逻辑运算符(布尔运算符)
与 and && 或 or || 非not !
A. &&
if(a && b){
alert("两个都是真的");
}else{
alert("至少有一个是假的")
}
运算符两边只要有一个是假，那么他的运算结果就是假，只有两个都为真的时候，运算结果才是真的。
B.||
if(a || b){
alert("至少有一个是真的");
}else{
alert("两个都是假的")
}
运算符两边只要有一个是真的那么他就是真的，只有当两个都是假的时候，他才是假的。
C.not !
取反，假的变成真的，真的变成假的。
(1)逻辑运算符可以对任何类型的数据进行运算但是在运算的时候，可以转换为对应的布尔值
转换的规则
Undefined-->false
Null-->false
Boolean-->就是本身的值
Number-->除了0以外都是真的
String-->除了空字符串意外都是真的
对象-->真的
(2)类变量进行赋值
var a= b && c
如果一个运算数是对象，另一个是 Boolean 值，返回该对象。
如果两个运算数都是对象，返回第二个对象。
如果某个运算数是 null，返回 null。
如果某个运算数是 NaN，返回 NaN。
如果某个运算数是 undefined，发生错误。
var a=b ||c
如果一个运算数是对象，并且该对象左边的运算数值均为 false，则返回该对象。
如果两个运算数都是对象，返回第一个对象。
如果最后一个运算数是 null，并且其他运算数值均为 false，则返回 null。
如果最后一个运算数是 NaN，并且其他运算数值均为 false，则返回 NaN。
如果某个运算数是 undefined，发生错误。
(五) 一元运算符
typeof + - delete new ++ --
A. +
正号、正数
B.delete
删除对象的方法或是属性
C.new
用来创建一个对象
(六) 特殊的运算符
， () = ? :
A. ,
用来一次声明多个变量
B.()
(1) 运算的时候有优先级的作用
a*(b-c)
(2) 运行一段函数
C.根据表达式的计算结果有条件的为变量赋值
格式: var 变量= Boolean expression?真值:假值
(七) 位运算符
4.javascript数据类型强制转换和隐式转换
javascript数据类型强制转换
一、转换为数值类型
Number(参数) 把任何的类型转换为数值类型
A.如果是布尔值，false为0，true为1
B.如果是数字，转换成为本身。将无意义的后导0去掉。
C.如果Null转换为0
D.如果是undefined 转换为NaN not a number
E.如果对象则会先调用对象的 valueOf(),如果valueOf()返回的是NaN,然后再调用对象的 toString()
F.如果是字符串
1.如果字符串当中只有数字，转换为10进制(忽略前导0和后导0)
2.如果是有效的规范的浮点型，转换为浮点值(忽略前导0和后导0)
3.如果是空字符串，则转换为0
4.如果是其他的值，返回NaN
parseInt(参数1，参数2) 将字符串转换为整数
A.如果一个字符串只包含数字，则以10进制的方式转换为整型。
B.他会自动忽略字符串前面的空格，直到找到第一个非空的数值字符串，直到解析到第一个非数值的字符串结束。
C.如果字符串的第一个字符不是空格、数字、-，那么返回NaN
D.参数1
八进制 十进制 十六进制
0 后面的数字不能超过7 0x 0-9 a-f
参数2
控制解析模式 2-32
parseFloat() 将字符串转换为浮点数
A.字符串当中的.只有第一个有效，其他的都是无效的。
B.如果字符串是一个有效的整数，他返回的是整数，不会返回浮点数。
二、转换为字符串类型
1. String(参数)
可以将任何的类型转换为字符串
null和undefined: 也都会转换为字符串，分别是 null和undefined
布尔类型:会返回true或者false
数值类型:本身的字符串
2.toString()
调用的格式 对象.toString()
作用是将对象以字符串的方式来表示
array.toString() 返回 由，分割的字符串
Boolean.toString() 返回 值 true或者false
String.toString() 返回 本身
Number.toString(参数) 返回 本身的字符串形式
控制输出模式 ：2-32
注意：null和undefined没有toString()方法
三、转换为布尔类型
Boolean() 可以将任何类型的值转换为布尔值
转换为假: ""、 0、 NaN 、undefined、 false
其他的全部都转换为真。
javascript数据类型隐式转换
一、函数类
isNaN()
该函数会对参数进行隐式的Number()转换，如果转换不成功则返回true;
alert()
输出的内容隐式的转换为字符串
二、运算符类
1.算数运算符
- * / %
如果操作数不是数值，将会隐式的调用Number()函数，按照这个函数的转换规则进行转换，
如果转换不成功，整个表达式返回NaN
+
如果操作数都是数值，然后进行相加
任何数据类型和字符串相加，都会隐私的调用他们的toString()方法，然后返回他们拼接的结果。
如果操作数都是布尔值，那么进行Number()转换，false为0，true为1，进行相加。
2.关系运算符
关系运算符的操作数可以是任何类型，如果操作数不是数值类型，将会隐式的转换
(1)他运算的结果都是布尔值
(2)都是字符串的时候，他会先隐式转换成ASCII码然后进行比较他们的第一个字母。
(3)都是数值的时候，他会正常比较
(4)当一个是字符串，另一个是数值的时候，把字符串尝试转换成Number()数值类型，然后进行比较，如果不能转换成数值类型，则会返回NaN,然后返回假
(5) undefined == null
(6)如果两个都是数值型字符串，那么他们隐式转换成ASCII码,也是只比较第一个
(7)如果是一个数值和布尔值进行比较，会把布尔值隐式转换为数值再进行比较，true为1， false为 0
3.等性运算符 == !=
会对操作数隐式的转换后再比较值
(1)如果其中至少有一个是布尔值，那么会隐式的调用Number()进行转换，然后比较。
(2)如果一个为字符串。另一个为数值，那么会隐式的调用Number()对字符串进行转换，
如果转换不成功，则返回false;
(3) undefined == null
(a) 比较字符串的时候是比较他们的ASCII码是否相等
(b) 比较两个数值的时候是比较他们的数值是否相等
(c) 比较函数的时候，判断他们的位置是否相等。
4.逻辑运算符
A. 放在表达式里面用于判断。
B. 给变量赋值
var a= b && c
如果一个运算数是对象，另一个是隐式的调用Boolean()函数，返回该对象。
如果两个运算数都是对象，返回第二个对象。
如果某个运算数是 null，返回 null。
如果某个运算数是 NaN，返回 NaN。
如果某个运算数是 undefined，发生错误。
var a=b ||c
如果一个运算数是对象，并且该对象左边的运算数隐式的调用Boolean()函数,并且其值为 false，则返回该对象。
如果两个运算数都是对象，返回第一个对象。
如果最后一个运算数是 null，并且其他运算数值均为 false，则返回 null。
如果最后一个运算数是 NaN，并且其他运算数值均为 false，则返回 NaN。
如果某个运算数是 undefined，发生错误。
三、语句类
if(表达式){
}else{
}
格式: var 变量= Boolean expression?真值:假值
while(){
}
if语句和三元表达式里面的表达式会隐式的调用Boolean()函数，按照这个函数的转换规则，转换 为相应的布尔值
5.javascript流程控制
流程:就是程序代码的执行顺序。
流程控制:通过规定的语句让程序代码有条件的按照一定的方式执行。
一、顺序结构
按照书写顺序来执行，是程序中最基本的流程结构。
二、选择结构(分支结构、条件结构)
根据给定的条件有选择的执行形相应的语句。
（1） if else
1.单路分支
//条件可以是表达式也可以是任何的数据类型
//大括号会把他里面的代码当作一个整体来运行，如果只有一条语句，可以省略大括号
if(条件){
条件成立执行的语句
}
2.双路分支
if(条件){
条件成立的时候执行的代码
}else{
条件不成立的时候执行的代码
}
3.多路分支
if(条件1){
条件1成立执行的代码
}else if(条件2){
条件2成立执行的代码
}else if(条件3){
条件3成立执行的代码
}......else{
如果上述条件都不成立执行的代码
}
4.嵌套分支
if(条件1){
if(){
}else if(){
}....
}else if(条件2){
条件2成立执行的代码
}else if(条件3){
条件3成立执行的代码
}......else{
如果上述条件都不成立执行的代码
}
（2）switch
switch(变量任何的数据类型){
case 值1:
表达式1；
break;
case 值2:
表达式3；
break;
.........
defalut:
表达式
}
多个选择进行相应的匹配
*************************************************
1.当判断某种范围的时候最好用if语句，当判断单个值时候用switch
2.条件满足的情况不可以重复，会发生不可预期的错误。
*************************************************
三、循环结构
javascript 循环结构中包含以下三种循环
for()循环
while()循环
do...while()循环
for()循环: 重复执行，符合条件的代码段。
在for循环中须注意的一点：初始值与循环条件之间须用“;”分号分隔开来。
语法结构：
for(初始值;循环条件;值的递增与递减){
循环体代码；
}
示例：
<script type="text/javascript">
var arr=new Array(1,2,3,4,5,6);
alert(arr.length);
for(i=0;i<arr.length;i++){
document.write(arr[i]);
}
</script>
while循环，当满足循环条件时，执行循环。
示例：
<script>
var num=1; //初始化变量的值；
while(num<=6){//循环条件
document.write(num+"<br/>");
num++; //值递增1；
}
</script>
do...while()循环；
语法结构：
do{
代码块；
}while(循环条件)
do...while循环，先执行一次，再判断条件是否符合;如符合，继续执行循环体中的代码块。
示例：
<script>
var num=0;
do{
document.write(num);
num++;
}while(num<10)
</script>
四、跳转语句
在循环控制语句中，当 满足指定条件 的时候，退出循环 或者是退出 当前 循环的语句。
1.break;
格式:break;
跳出并且终止循环，如果后面有代码，则继续往下执行。
2.continue;
格式:continue;
跳出并且终止当前的循环，如果下个值仍满足循环条件，则继续循环。
***********************************************************
break:
A.switch,指的是当满足某个条件后，退出switch语句
B.用在循环语句当中，跳出并且终止循环，如果后面有代码，则继续往下执行。
continue:
A.只能用在循环语句当中， 跳出并且终止当前的循环，如果下个值仍满足循环条件，则继续 循 环。
B.最好用适当的语句代替continue
五、标签语句:
用来退出多层循环
格式:
out:
for (var i=0; i<5; i++) {
document.write("第一层循环:"+i);
document.write("<br/> ");
for (var j=0; j<5; j++) {
if(j==3){
continue out;
}
document.write("第二层循环:"+j);
}
document.write("<br/>");
}
alert("我退出去了");
标签名:语句；
注意:标签名只可以作用于break 或continue，可以用于跳出两层循环
六、with
with(){
}
//with语句 用于设置代码在 特定对象中 的 作用域。
// with(document){
// write(1);
// write(2);
// write(3);
// write(4);
// write(5);
// write("后盾网");
// }
就是把document.write(1);
document.write(2);....前面的document省略
用于设置代码在对象中的作用域。
*************************************************
不建议使用。
*************************************************
动态地改变document的title
//document.title="后盾网";
// var a="后盾网";
// var title="后盾网视频教程";
// with(document){
// title=a;
// }
6.javascript函数
将完成某一特定功能的代码集合起来，可以重复使用的代码块。
一、函数的声明方式(创建)
A.基本语法
function 关键字
function 函数名([参数1],[参数2]....){
函数体
[retrun] //返回值
}
B.字面量定义的形式(匿名函数)
var 变量=function ([参数1],[参数2]....){
函数体
[retrun] //返回值
}
C.以对象的形式来声明
new 关键字。
var 变量=new Function([参数1],[参数2]...,"函数体");
//函数的第一种声明方式
/*
function math () {
var num1=parseFloat(prompt("请输入",""));
var num2=parseFloat(prompt("请输入",""));
var operator=prompt("请输入运算符","");
var result;
switch (operator) {
case "+":
result=num1+num2;
break;
case "-":
result=num1-num2;
break;
case "*":
result=num1*num2;
break;
case "/":
result=num1/num2;
break;
default:
result="输入有误";
}
return result;
}
alert(math());
alert(math())
*/
//函数的第二种声明方式
/*
var fun=function () {
var num1=parseFloat(prompt("请输入",""));
var num2=parseFloat(prompt("请输入",""));
var operator=prompt("请输入运算符","");
var result;
switch (operator) {
case "+":
result=num1+num2;
break;
case "-":
result=num1-num2;
break;
case "*":
result=num1*num2;
break;
case "/":
result=num1/num2;
break;
default:
result="输入有误";
}
return result;
}
alert(fun());
*/
//函数的第三种声明方式
// var fun=new Function(alert("测试"))
// fun();
二、函数的调用方式:
A.函数名() 、变量名();
B.(function () {alert("测试");})();
三、两种声明方式的区别
1.如果两个函数的命名相同，后面的将会覆盖前面的函数。
2.以基本语法声明的函数，会在代码运行的时候，提前加载到内存当中（就是以function开头的格式），以供以后使用，
但是以字面量形式命名的函数，会在执行到的时候，才进行赋值。
3.在不同的<script></script>块中的函数，使用和调用的时候，应该先定义，后执行。
四、函数的参数和return语句
一、参数(最多是25)
可以动态的改变函数体内对应的变量的类型或值，使同一函数体得到不同的结果。
形参:在定义函数的时候，函数括号中定义的变量叫做形参。
实参:调用函数的时候，在括号中传入的变量或值叫做实参。
1.参数的类型
可以是任何的数据类型
2.参数的个数(最多是25)
A.实参和形参数量相等，一一对应。
B.形参的数量多于实参
************************************************
不会报错，但是多出的参数他的值，会自动赋值为undefined
************************************************
C.实参的数量多于形参
************************************************
不会报错，但是要得到多出的实参的值，要用arguments对象
************************************************
二、Arguments对象
每创建一个函数，该函数就会隐式创建一个arguments对象，他包含有实际传入参数的信息。
1.length 检测实际传入参数的个数
2.callee 对本身的调用
3.访问传入参数的具体的值。([下标])(如arguments[0])
三、函数重载
同一个函数因为参数的类型或数量不同，可以对应多个函数的实现，每种实现对应一个函数体。
四、return 语句
一、停止并且跳出当前的函数
1.在ruturn 语句后面的函数体内所有内容都不会输出。
2.在函数体内可以有多个return语句，但是只会执行一个。(判断语句)
二、给函数返回一个值 return [返回值];
1.返回值可以是任何的数据类型
2.只能返回一个返回值。
3.如果函数没有返回值，那么这个函数的值就会自动的赋值为undefined
五、javascript 内置顶层函数
名词解释:
1.函数
2.内置: ECMAscript
内置函数:ECMAscript 自带的函数 Number()
宿主函数: BOM DOM alert() prompt() confirm();
//confirm() 弹出一个带有确定和取消按钮的一个对话框，确定返回真，取消返回假。
3.顶层
字符串函数：字符串.函数（）
数组函数
顶层对象的函数，可以作用于任何对象。
内置顶层函数
1.escape() 对字符串进行编码
2.unescape() 对编码的字符串进行解码
3.Number() 转换成数值类型
4.String() 转换成字符串类型
5.Boolean() 转换成布尔类型
6.parseInt() 将字符串转换为整型
7.parseFloat() 转换为小数
8.isNaN() 判断一个数能否转换为数值类型。
9.isFinite() 判断一个数是否为有穷的数字。将不是有穷的数字或不能转换为数值类型的数返回假。
10.eval() 将字符串转换成javascript命令执行(必须符合javascript语法规范，否则会出错)。
IE:
eval() 在当前作用域生效
window.eval() 在当前作用域生效
execScript()
FF:
eval() 在当前作用域生效
window.eval() 在全局生效
使代码在作用于上兼容IE
function evals (str) {
if(typeof str!="string"){
return;
}
if(window.execScript){
window.execScript(str);
}else{
window.eval(str);
}
}
7.javascript数组
数组是一个可以存储 一组 或是 一系列 相关数据 的 容器
javascript数组可以存储任何类型的值
一、如何创建数组
(1) 通过对象的方式来创建。
var a=new Array();
A.直接赋值
var a=new Array(元素1，元素2，元素3，元素4,........) var a=new Array(数值)
如果只有一个元素，并且这个元素是数值类型的，那么他就是指定数组的长度。
并且他的值都是undefined
数组的属性:length属性
B.声明以后再赋值
var a=new Array(); a[0]=1; a[2]=2; a[0]=3;
(2)隐形声明的方式
var a=[];
A.直接赋值:
var a=[1,2,3,4];
B.声明以后再赋值
var a=[]; a[0]=1; a[1]=2; a[2]=3;
二、访问数组的元素
通过数组的(中括号)下标访问。
数组下标从0开始，他的最大值，是length属性-1
三、遍历数组的元素
(1) for 循环
// for (var i=0; i<arr.length; i++) {
// alert(arr[i]);
// }
// var a=0
(2) while();
// while (a<arr.length) {
// alert(arr[a]);
// a++
// }
(3) for in
有两个作用:
第一:用于数组的遍历
第二:用于对象属性的遍历
//for (var i in arr) {
// alert(arr[i]);
//}
四、数组的分类
1.下标的类型
A.下标是数字的类型的(索引数组)
B.下标是字符串类型的(关联数组)
2.维度来分类
A.一维数组
B.二维数组
声明二维数组:
// var arr=[[1,2,3],[4,5,6]];
// alert(arr[1][1])
注意:
1.可以存储任何类型的数据
2.只支持一维数组。
3.长度可变。
4.如果是索引数组，下标始终从0开始，如果指定了长度，但是没有赋值，他的值就会自动赋值为undefined;
8.javascript对象基础
一、创建对象
1.构造函数方法:
function fun1 () {
}
var obj=new fun1();
alert(typeof obj)
2.Object方法
var obj=new Object();
function Object () {
alert(123);
}
3.json方法(javascript object notation) 原生格式
var obj={};
二、如何添加属性和方法
如果属性的值是函数，我们叫做他是对象的方法，否则叫做是属性。
1.构造方法
A.声明以后再添加
//A.声明以后再添加
function fun1 () {
}
var obj=new fun1();
obj.name="zhangsan";
obj.say=function () {
var a="说话";
return a;
}
B.声明的时候再添加
//A.声明的时候添加
function fun1 () {
this.name="张三";
this.eat=function () {
alert("我能吃饭");
}
}
var obj=new fun1();
obj.eat()
2.json方法
A.声明的时候添加
var obj={属性名:属性值，属性名2:属性值2，属性名3:属性值3，......};
//A.声明的时候添加
var obj={name:"张三",say:function () {
alert("说话");
}};
alert(obj.name);
obj.say();
B.声明以后再添加
//B.声明以后再添加
var obj={};
obj.name="张三";
obj.sex="man";
obj.play=function () {
alert("我会玩");
}
alert(obj.sex);
obj.play();
三、访问对象的属性和方法
引用值.属性
引用值.属性();
四、如何销毁对象
javascript自己的垃圾回收机制，就是在对象没有引用的时候释放内存(销毁);
对象=null;
五、如何删除对象的属性
delete
9.javascript对象的遍历、内存分布和封装特性
一、javascript对象遍历
1.javascript属性访问
对象.属性
对象[属性] //字符串格式
//javascript属性的访问方法
var ren ={};
ren.name="张三";
ren.sex="男";
ren.eat=function () {
alert("吃饭");
}
alert(ren.name);
alert(ren["name"]);
2.javascript属性遍历
for in
//javascript属性遍历
var ren ={};
ren.name="张三";
ren.sex="男";
ren.eat=function () {
alert("吃饭");
}
for (var i in ren) {
alert(ren[i])
}
通过arguments来遍历传入的参数
function myArray () {
var lengs= arguments.length;
for (var i=0; i<lengs; i++) {
this[i]=arguments[i];
}
}
var arr=new myArray(1,2,3);
alert(arr[0]);
二、内存分布
三、对象的特性之封装
把对象所有的组成部分组合起来，尽可能的隐藏对象的部分细节，使其受到保护。
只保留有限的接口和外部发生联系。
一、工厂函数
//工厂函数
function dianshi (color,size,brand) {
var Tv={};
Tv.color=color;
Tv.size=size;
Tv.brand=brand;
Tv.look=function () {
alert("看电视");
}
Tv.play=function () {
alert("玩游戏");
}
Tv.dvd=function () {
alert("DVD");
}
return Tv;
}
var ds=dianshi("red","30inch","sony");
//alert(typeof ds)
alert(ds.color)
var ds1=dianshi("blue","40inch","changh");
alert(ds1["size"])
二、构造函数
//构造方法的形式
function Tv(color,size,brand) {
this.color=color;
this.size=size;
this.brand=brand;
this.play=function () {
alert("玩游戏");
}
this.look=function () {
alert("看电视");
}
this.dvd=function () {
alert("DVD");
}
}
var sony=new Tv("red","20 inch","sony");
alert(sony.color)
三、prototype方法
对原型属性的修改将影响到所有的实例
//prototype方法
function Tv(color,size,brand) {
this.color=color;
this.size=size;
this.brand=brand;
this.play=function () {
alert("玩游戏");
}
}
Tv.prototype.look=function () {
alert("看电视");
}
Tv.prototype.dvd=function () {
alert("DVD");
}
Tv.prototype.aaa={name:"张三"};
var sony=new Tv("red","20 inch","sony");
var changhong =new Tv("red","20 inch","CH");
// delete sony.color
// delete sony.play
// delete sony.look
// alert(sony.color)
// alert(sony.play)
// alert(sony.look)
// sony.look();
// changhong.look();
alert(sony.aaa.name="李四");
alert(changhong.aaa.name);
四、混合方法
//混合方式
function Tv(color,size,brand) {
this.color=color;
this.size=size;
this.brand=brand;
this.play=function () {
alert("玩游戏");
}
Tv.prototype.aaa={name:"张三"};
}
Tv.prototype.look=function () {
alert("看电视");
}
Tv.prototype.dvd=function () {
alert("DVD");
}
10.javascript对象的继承和Object对象
对象的一个类可以从现有的类中派生，并且拥有现有的类的方法或是属性，这和过程叫做继承。被继承的类叫做父类或是基类，继承的类叫做子类。
(一个对象拥有另一个对象的属性和方法)
优点:
提高代码的重用性
提高代码的可维护性
提高代码的逻辑性
一、Object对象
var obj=new Object()
属性：
1.constructor
对创建对象的函数的引用（指针）。
//1.constructor
//对创建对象的函数的引用（指针）
var obj=new Object();
alert(obj.constructor)
2.Prototype 原型
**********************************************
对该函数对象的对象原型的引用。是函数对象的默认属性
**********************************************
//Prototype
//对该函数对象的对象原型的引用。
var obj=new fun1();
function fun1 () {
this.name="zhangsan";
}
alert(obj.prototype)
alert(fun1.prototype)
A.对象的共享属性存放到代码段当中。
B.可以实现继承。
方法：
A.hasOwnProperty(property)
判断对象是否有某个特定的属性，返回true或者false
alert(obj.hasOwnProperty("name"))
B.IsPrototypeOf(object)
判断该对象是否为另一个对象的原型。(用来检测对象的类型)
var arr=new Array();
alert(Array.prototype.isPrototypeOf(arr))
c.运算符
instanceof
java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例
alert(arr instanceof Array)
二、继承
1.原型继承
function person () {
this.name="张三";
this.say=function () {
alert(this.name)
}
}
function student () {
}
student.prototype=new person()
var zhangsan=new student ();
zhangsan.say()
2.对象冒充的形式
A.call
obj1.fun.call(obj2,参数1......)
B.apply
obj1.fun.call(obj2,[参数1，参数2....])
让对象1的方法冒充成对象2的方法。
//对象冒充
/*
function person () {
this.name="张三";
this.say=function () {
alert(this.name)
}
}
function student () {
this.name="李四";
}
var ren=new person ();
var zhangsan=new student ();
ren.say.call(zhangsan)
*/
function person (name) {
this.name=name;
this.say=function () {
alert(this.name)
}
}
function student () {
window.person.apply(this,["zhangsan"])
}
var zhangsan=new student ();
alert(zhangsan.name)
zhangsan.say();
11.对象的继承顺序
一、对象的继承顺序
//对象的继承顺序
Object.prototype.say=function () {
alert("我是顶层的方法");
}
function person () {
this.say=function () {
alert("我是父类的方法");
}
}
person.prototype.say=function () {
alert("我是父类原型的方法");
}
function study () {
this.say=function () {
alert("本身的方法");
}
}
study.prototype=new person();
study.prototype.say=function () {
alert("本身原型的方法");
}
var zhangsan=new study ();
alert(zhangsan.say)
12.对象的分类
一、对象的分类
1.内置对象
Global
Math
2.本地对象
Array
Number
String
Boolean
Function
RegExp
3.宿主对象
DOM
BOM
二、Math对象
格式: Math.方法(参数)
1.取绝对值
Math.abs();
var num1=-2.4; alert(Math.abs(num1))
2.取近似整数
//Math.round() 四舍五入
//Math.round() //四舍五入 var num=2.1; alert(Math.round(num))
//Math.floor() 对数进行下取舍
//Math.floor() 对数进行下取舍 alert(Math.floor(num))
//Math.ceil() 对数进行上取舍
//Math.ceil() 对数进行上取舍 alert(Math.ceil(num))
3.取最大值或最小值
Math.max(参数....)
Math.min(参数.....)
var num1=1;
var num2=2;
var num3=3;
var num4=4;
alert(Math.max(num1,num2,num3,num4))
alert(Math.min(num1,num2,num3,num4))
4.取随机数
Math.random();
//Math.random(); 从0到1的随机数
三、javascript字符串对象
一、属性
1.length
计算字符串的长度(不区分中英文)
var str="bbs.houdunwang.com";
alert(str.length)
var str1="你好";
alert(str1.length);
2.constructor
对象的构造函数
var str="你好";
alert(str.constructor)
二、方法
(1)获取类型
1.myString.charAt(num)
返回在指定位置的字符
var str="你好";
alert(str.charAt(2));
alert(str[0])
2.myString.charCodeAt(num)
返回指定位置的字符的Unicode编码
var str="ABC";
alert(str.charCodeAt(0))
alert(str.charCodeAt(1))
alert(str.charCodeAt(2))
3. String.fromCharCode()
接受一个或多个指定的Unicode值，然后返回一个或多个字符串
alert(String.fromCharCode(65,66,67))
(2)查找类型
1.myString.indexOf()
返回某个指定的字符串，在字符串中首次出现的位置
var str="你好";
alert(str.indexOf("好"))
2. myString.lastIndexOf()
返回一个字符串值末次出现的位置
var str="bbs.houdunwang.com";
alert(str.lastIndexOf("."))
3. myString.match()
在字符串中检索指定的值，返回的值就是指定的类型(值)
var str="后1盾2网3论4坛";
alert(str.match(/\d+/g))
4.search()
只能作用于正则。
5. myString.replace()
将字符串中的一些字符替换为另外一些字符
var str="你好";
alert(str.replace("好","hao"))
(3) 截取类型
1.myString.slice(start,end)
截取从指定的开始位置，到结束位置(不包括)的所有字符串。如果不指定结束位置，则从 指定的开始位置，取到结尾
var str="你好";
alert(str.slice(0,1))
2.substring(start,end)
截取从指定的开始位置，到结束位置(不包括)的所有字符串。如果不指定结束位置，则从 指定的开始位置，取到结尾
var str="你好";
alert(str.substring(0))
3.substr(start,length)
从指定的位置开始截取指定长度的字符串。如果没有指定长度，从指定开始的位置取到结尾
var str="你好";
alert(str.substr(0,1))
***************************************************************************
slice(start,end) vs substring(start,end)
slice参数可以是负数，如果是负数，从-1开始指的是字符串结尾。
substring参数是负数的时候，会自动转换为0
***************************************************************************
(5)转换类型
1. split("分割位置",[指定的长度])
将一个字符串分割成数组
var str="你好，视频，教程";
alert(str.split("，"))
2.toLowerCase();
用于把字符串转换为小写
3.toUpperCase()
将字符串转换为大写
var str="HOUDUNWANG"; alert(str.toLowerCase(). toUpperCase())
(6) 样式类型
1.fontcolor()
给字符串指定颜色，十六进制表示、red、rgb(255,0,0)
var str="你好";
//document.write(str.fontcolor("red"))
//document.write(str.fontcolor("#aaaaaa"))
2.fontsize()
指定字符串的大小 (1-7)
document.write(str.fontsize(1)) document.write(str.fontsize(3)) document.write(str.fontsize(7))
四、JavaScript数组对象
一、属性
1.length
设置或返回数组元素的数目
var a=["a","b",1,2];
alert(a.length=5)
alert(a.length)
alert(a)
2.constructor
返回构造函数的引用
var a=["a","b",1,2];
alert(a.constructor)
二、方法
A.删除或添加类
1. myarr.push(数组元素......)
向数组的末尾添加新的元素，返回值是新数组的长度。
可以一次添加多个元素
var a=["a","b",1,2];
alert(a.push("c","d"))
alert(a)
2. myarr.unshift(数组元素.....)
向数组的开头加入新的元素，返回值是新数组的长度
可以一次添加多个元素
var a=["a","b",1,2];
alert(a.unshift("c","d"))
alert(a)
3. myarr.pop()
删除数组的最后一个元素，返回删除的元素
var a=["a","b",1,2];
alert(a.pop())
alert(a)
4. myarr.shift()
删除数组的第一个元素，返回删除的元素
var a=["a","b",1,2];
alert(a.shift())
alert(a)
5.万能的添加删除函数
myarr.splice(index,数量,添加的元素.....)
(1)index 从何处开始添加或删除，必须是数值类型(数组的下标)
(2) 数量 规定了删除的个数，如果是0，则不删除
(3) 需要添加的元素 可以当作替换的元素
var a=["a","b",1,2];
alert(a.splice(1,0,"c","d"))
alert(a)
************************************
如果有删除的元素，返回删除的元素
************************************
B.数组的转换
mystr.split()
myarr.join([分隔符])
把数组元素按照指定分隔符组合成一个字符串，如果没有指定分隔符，默认是用“,”
返回结果就是组合成的字符串
var a=["a","b",1,2];
//alert(a.join())
alert(a.join("-"))
C.数组的分割
myarr.slice()
截取从指定的开始位置，到结束位置(不包括)的元素。如果不指定结束位置，则从指定的开始位置，取到结尾(数组的下标)
支持负数(-1开头) 返回新数组。
var a=["a","b",1,2,"你好","你好吗"];
alert(a.slice(2,4))
alert(a.slice(2))
alert(a.slice(-2,-1))
alert(a)
D.排序
冒泡排序
function mySort (fun) {
for (var i=0; i<this.length; i++) {
for (var j=0; j<this.length-i; j++) {
if(this[j]>this[j+1]){
var aa=this[j];
this[j]=this[j+1]
this[j+1]=aa;
}
}
}
return this
}
Array.prototype.mySort= mySort
alert(arr.mySort())
myarr.sort()
对数组进行排序，如果没有参数，则按照字母的编码进行排序，如果要按照其他的顺序来排序，要提供一个函数。
会提供两个参数(a,b) 此时按从小到大排序
a<b a在b前
a=b
a<b
var a=[12,34,123]
a.sort(function (a,b) {
return a=b
});
alert(a)
F.数组的连接
myarr.concat()
连接两个或更多的数组，并返回新数组，但是对原数组没有任何影响.
var a=[1,2,3];
//var b=["你好","你好吗","hello world"]
//var c=["a","b","c"]
//alert(a.concat(b,c))
//alert(a)
alert(a.concat("a","c"))
alert(a)
G.自定义一个函数(删除数组的重复元素)
var arr=[1,5,2,3,5,4,5,6,7,8,5,9,5]
Array.prototype.deleteit=function deleteit(){
for(var i=0;i<=this.length;i++){
for(var j=i+1;j<=this.length;j++){
if(this[i]==this[j]){
//this.splice(this[j],1);
this.splice(j,1);
j--;
alert("第"+i+"个数字"+"["+this[i]+"]"+"和第"+j+"个数字"+"["+this[j]+"]"+"相同，已删除！");
}
}
}return this;
}
alert(arr.deleteit())
五、javascript时间对象
日期对象
在javascript中日期也是他的内置对象，所以我们要对日期进行获取和操作，必须实例化对象。
1.创建日期对象
var dateobj=new Date();
将会包含本地时间的信息，包括年月日时分秒 星期
A.可传入的参数格式
1."时:分:秒 日/月/年" "日/月/年 时:分:秒" 字符串
2.年,月,日,时,分,秒 不能加""
注意:月份和星期都是从0开始计算的
2.获取日期信息的方法
Date 对象方法
FF: Firefox, IE: Internet Explorer
方法 描述 FF IE
Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
3.设置日期的方法
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。 setMonth() 设置 Date 对象中月份 (0 ~ 11)。 setFullYear() 设置 Date 对象中的年份（四位数字）。 setYear() 请使用 setFullYear() 方法代替。 setHours() 设置 Date 对象中的小时 (0 ~ 23)。 setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。 setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。 setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。 setTime() 以毫秒设置 Date 对象。 setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。 setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。 setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
13.DOM_document对象
javascript-document对象详解
DOM document(html xml) object modle
document对象(DOM核心对象)
作用：
1.内容 innerHTML
2.属性
3.样式
document对象
一、属性
title 返回或设置当前文档的标题
alert(document.title)
document.title="你好";
URL 返回当前文档的url
alert(document.URL)
alert(location.href)
bgColor 设置文档的背景色
document.bgColor="red";
fgColor 设置文档的前景色(设置文字颜色)
document.fgColor="blue";
二、方法
getElementById(idname) 返回拥有指定id的（第一个）对象的引用
innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML
var div1=document.getElementById("one");
alert(div1.innerHTML)
<div name="div1" id="one">
你好
</div>
getElementsByTagName(tagname) 返回带有指定标签名的对象的集合
var divs=document.getElementsByTagName("div");
var lengths=divs.length;
//alert(lengths)
//通过下标来访问
//alert(divs[1].innerHTML)
for (var i=0; i<lengths; i++) {
alert(divs[i].innerHTML)
}
getElementsByName(name) 返回带有指定name指定名称的对象的集合
var inputs=document.getElementsByName("text1");
var lengths=inputs.length;
alert(lengths)
write()
**************************************************************
getElementsByName(name)在IE中是不兼容的，在IE的表单中是可以兼容的。
如果是IE：
如果该对象的标准属性包含有name,那么可以正确的使用。否则不可以使用。
如果是FF:
该方法可以适用于任何情况。
结论:
主要是适用于表单。
**************************************************************
getElementsByClassName() 返回带有指定classname指定名称的对象的集合
//var aaas=document.getElementsByClassName("aaa");
//alert(aaas.length)
<div name="div1" id="one" class="aaa">
test
</div>
<div name="div1" id="one" class="aaa">
test
</div>
**********************************************************************
不兼容，可以自己写一个兼容性函数
function byclass (classname) {
if(document.getElementsByClassName){
return document.getElementsByClassName(classname)
}else{
var tag= document.getElementsByTagName("*");
var lengths=tag.length;
var divs=[];
for (var i=0; i<lengths; i++) {
if(tag[i].className==classname){
divs.push(tag[i])
}
}
return divs;
}
}
alert(byclass("aaa").length)
**********************************************************************
三、dcoument对象的集合
A.all 所有元素的集合，不兼容
alert(document.all)
B.forms 返回对文档中所有form对象的引用
alert(document.forms.length)
通过集合来访问相应的对象
1.通过下标的形式，弹出表单的name
//访问 1.下标
//alert(document.forms[1].name)
2.通过name形式
//2.name属性
alert(document.forms["myform1"].text1.value)
C. anchors 返回对文档中所有anchors 对象的引用(即所有a链接)
D.images 返回对文档中所有image 对象的引用
F.links 返回对文档中所有area 对象和link对象的引用
javascript-对文档对象的内容、属性、样式的操作
一、操作内容
1. innerHTML 用来设置或获取对象起始和结束标签内的内容(识别html标签)
2. innerText 用来设置或获取对象起始和结束标签内的内容 (兼容IE，获取文本)
textContent用来设置或获取对象起始和结束标签内的内容 (兼容FF，获取文本)
注意区别innerHTML和innerText，第一个会识别样式，第二个只会识别文本
但是在FF中不兼容，要使用textContent，以下是兼容函数
支持document.all的是IE
function getContent (objs,val) {
if(document.all){
if(val){
objs.innerText=val
}else{
return objs.innerText
}
}else{
if(val){
objs.textContent=val
}else{
return objs.textContent
}
}
}
window.onload=function () {
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var but=document.getElementById("but");
but.onclick=function () {
//var contents=div1.innerHTML;
//div2.innerHTML=contents;
var contents=getContent(div1)
getContent(div2,contents);
}
}
<div class="one" id="div1">
<h3>
this is my test！
</h3>
</div>
<input type="button" value="↓↓" id="but" >
<div class="two" id="div2">
</div>
3. outerHTML 用来设置或获取包括本对象在内起始和结束标签内的内容(识别html标签)
outerText 用来设置或获取包括本对象在内起始和结束标签内的内容
二、操作属性
1.直接操作
对象.属性
对象.属性=值 (设置、获取、添加属性(属性值))
2.获取和设置
getAttribute("属性") 获取给定的属性的值
setAttribute("属性","值") 设置或是添加属性
window.onload=function () {
var links=document.getElementsByTagName("a")[0];
//alert(links.href)
//links.href="2.html";
//alert(links.title)
//links.title="test";
//links.title="test";
//getAttribute("属性") 获取给定的属性的值
// setAttribute("属性","值") 设置或是添加属性
alert(links.getAttribute("href"))
links.setAttribute("href","2.html")
}
三、操作样式
1.行内样式
对象.style.属性
对象.style.属性=值 (设置、获取、添加属性)
window.onload=function () {
var one=document.getElementById("one");
one.onmouseover=function () {
//alert(one.style.color)
one.style.color="blue";
one.style.backgroundColor="red";
one.style.fontSize="13px";
}
one.onmouseout=function () {
one.style.color="red";
one.style.backgroundColor="blue";
one.style.fontSize="11px";
}
}
<a href="#" style="color:red;padding:3px" id="one">链接</a>
****************************************************
遇到属性是"-"链接的，要将"-"去掉，后面的单词的首字母大写
****************************************************
2.css层叠样式
1>通过更改ID来更改样式（一般不用，不更改ID）
<style>
#one{
width:200px;
height:200px;
border:1px solid red;
color:red;
font-size:14px;
padding:24px;
}
#two{
width:200px;
height:200px;
border:1px solid blue;
color:blue;
font-size:19px;
padding:15px;
}
</style>
<script>
window.onload=function () {
var one=document.getElementById("one");
var but=document.getElementById("but");
but.onclick=function () {
one.id="two";
}
}
</script>
<div id="one" class="div1">
你好
</div>
<input type="button" value="更改样式" id="but">
2>通过className更改样式
<style>
.div1{
height:200px;
border:1px solid red;
color:red;
font-size:14px;
padding:24px;
}
.div2{
width:200px;
height:200px;
border:1px solid blue;
color:blue;
font-size:19px;
padding:15px;
}
</style>
window.onload=function () {
var one=document.getElementById("one");
var but=document.getElementById("but");
but.onclick=function () {
one.className="div2";
}
}
<div id="one" class="div1" style="width:200px">
你好
</div>
<input type="button" value="更改样式" id="but">
*******************************************
适合批量更改
*******************************************
3>更改或者获取或者设置某个属性的值
**************************************************************
document.styleSheets[下标].rules[下标].style.属性
document.styleSheets[下标].rules[下标].style.属性=值
document.styleSheets 样式表的集合，即是<style></style>的数量
document.styleSheets[0].rules 样式规则的列表，即其中的<div>等的个数
document.styleSheets[0].rules.style 样式规则的集合
document.styleSheets[下标].rules[下标].style.属性
alert(document.styleSheets[0].rules[0].style.width)
适用于IE
**************************************************************
**************************************************************
document.styleSheets[下标].cssRules[下标].style.属性
document.styleSheets[下标].cssRules[下标].style.属性=值
适用于FF
***************************************************************
4> 动态的添加删除css样式规则
document.styleSheets[下标].insertRule("选择器{属性:值}",位置) FF w3c
deleteRule(位置) FF w3c
document.styleSheets[下标].addRule("选择器","属性:值",位置) IE removeRule(位置) IE
//document.styleSheets[0].addRule(".div1","margin:200px",0);
//document.styleSheets[0].removeRule(1);
3.行内样式和css层叠样式通用的方式
对象.currentStyle.属性 IE 用来获得实际的样式属性
getComputedStyle(对象,null) FF 用来获得实际的样式属性
//对象.currentStyle.属性 IE 用来获得实际的样式属性
//getComputedStyle(对象,null) FF 用来获得实际的样式属性
//alert(one.currentStyle.width)
alert(getComputedStyle(one,null).width)
*******************************
只能获取不能设置
*******************************
14.BOM_window对象
javascript浏览器对象模型-window对象
BOM Browser Object Model
window对象 是BOM中所有对象的核心。
一、属性
1.(位置类型-获得浏览器的位置)
IE:
window.screenLeft
可以获得浏览器距屏幕左上角的左边距
window.screenTop
可以获得浏览器距屏幕左上角的上边距
//IE
//左边距
//alert(screenLeft)
//上边距
//alert(screenTop)
FF:
alert(screenX)
alert(screenY)
//FF
//左边距
// alert(screenX)
//上边距
// alert(screenY)
(获得浏览器的尺寸)
FF:window.innerWidth 获得窗口的宽度
window.innerHeight 获得窗口的高度
//获取浏览器的尺寸
//FF:
//alert(window.innerWidth);
//alert(window.innerHeight);
//IE和FF通用:
alert(document.documentElement.clientWidth)
alert(document.documentElement.clientHeight)
2.关系类型
A.parent返回父窗口
B.top 返回顶层窗口
C.self===window 相当于window
3.stutas 设置窗口状态栏的文本
window.status="自定义的状态栏文字"
二、方法
1.窗体控制
A.对窗体的移动
window.moveBy(x,y) 相对于当前位置沿着X\Y轴移动指定的像素，如负数是反方向
moveTo(x,y) 相对于浏览器的左上角沿着X\Y轴移动到指定的像素，如负数是反方向
//位置
moveBy(100,100);
//moveTo(200,200)
B.窗体尺寸的改变
resizeBy(x,y) 相对于当前窗体的大小，调整宽度和高度
resizeTo(x,y) 把窗体调整为指定宽度和高度
//尺寸
window.resizeBy(100,100)
resizeTo(400,400)
2.对窗体滚动条的控制
scrollBy(x,y) 相对于当前滚动条的位置移动的像素(前提有滚动条)
scrollTo(x,y) 相对于当前窗口的高度或宽度，移动到指定的像素
//scrollBy(0,100)
//scrollTo(0,200)
3.时间间隔的函数
setInterval("函数或者代码串",指定的时间(毫秒)) 按照指定的周期(毫秒)不断的执行函 数或是代码串
// setInterval("函数或者代码串",指定的时间(毫秒)) 按照指定的周期(毫秒)不断的执行函 数或是代码串
//第一种调用方式
// setInterval("alert('你好')",1000);\
// var i=0
// setInterval(changes,1000)
// function changes () {
// alert(i)
// i++
// }
//第二种调用方式
//var a=0;
//setInterval(function () {
// alert(a);
// a++
//},1000)
//第三种调用方式
//var i=0;
// setInterval("changes(0)",1000)
// function changes (i) {
// alert(i)
// i++
// }
clearInterval()
//停止调用
window.onload=function () {
var t=setInterval('alert("你好")',5000)
var aa=document.getElementById("stop");
aa.onclick=function () {
clearInterval(t)
}
}
<input type="button" value="停止" id="stop">
setTimeout("函数或者代码串",指定的时间(毫秒)) 在指定的毫秒数后只执行一次函数或代码。
clearTimeout()
window.onload=function () {
var aa =setTimeout("alert('bbs.houdunwang.com')",5000)
var bb=document.getElementById("stop");
bb.onclick=function () {
clearTimeout(aa)
}
}
4.打开新的窗口
open(url,name,feafurse,replace) 通过脚本打开新的窗口
window.onload=function () {
var names=document.getElementById("names");
var but=document.getElementById("but");
but.onclick=function () {
open("26.1.html","windows","status=0,menubar=0,toolbar=0")
}
}
javascript-History、Location、Screnn对象
一、history对象
包含浏览器访问过的url
1.属性
length 返回浏览器历史记录的数量
alert(history.length)
2.方法
back() 后退
forward() 前进
go(number) 如果参数是正数，那么就是前进相应的数目，如果是负数那么反之，如果是0那么就是刷新
window.onload=function () {
var one=document.getElementById("one");
one.onclick=function () {
//history.forward()
history.go(3)
}
}
二、location对象 包含有当前url的相关信息
1.属性
href 设置或 返回完整的url
alert(location.href);
search 返回url?后面的查询部分
alert(location.href="location2.html?1234")
alert(location.search)
2.方法
assign() 加载新的文档
location.assign("location2.html");
reload(boolean) 重新加载文档, 当参数是true，任何时候都会重新加载，false的时候，只有在文档改变的时候才会加载，否则直接读取内存当中的。
location.reload()
replace() 用新的文档代替当前的文档 （没有历史记录）
location.replace("location2.html")
三、screen对象
记录了客户端显示屏的信息
属性：
availHeight 返回显示屏幕的高度 (除 Windows 任务栏之外)。
availWidth 返回显示屏幕的宽度 (除 Windows 任务栏之外)。
height 返回显示屏幕的高度。
width 返回显示屏幕的宽度。
document.write(screen.availHeight)
document.write("<br/>")
document.write(screen.height)
document.write("<hr/>")
document.write(screen.availWidth)
document.write("<br/>")
document.write(screen.width)
