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)
15.JavaScript操作节点
javascript-节点属性详解
根据 DOM,HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的:
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
一、如何获得节点引用
1.旧的获取节点引用方式
getElementById()
//查找文档中的一个特定的元素,最有效的方法是 getElementById(),一定要有document
var outdiv=document.getElementById("outdiv");
var childs=outdiv.childNodes;
alert(childs.length);
getElementByTagName() //返回带有指定标签名的对象集合
getElementByName()
*******************************************
劣势:
1.浪费内存
2.逻辑性不强
*******************************************
2.通过节点 关系属性 获得节点的引用
对象.parentNode 获得父节点的引用
//父节点
var innerdiv=document.getElementById("innerdiv");
var father=innerdiv.parentNode;
alert(father.nodeName);
对象.childNodes 获得子节点的集合
对象.firstChild 获得第一个子节点
对象.lastChild 获得最后个子节点
//最后一个子节点
var innerdiv=document.getElementById("innerdiv");
var last=innerdiv.lastChild;
alert(last.nodeName);
对象.nextSibling 获得下一个兄弟节点的引用
对象.previousSibling 获得上一个兄弟节点的引用
****************************************************************
劣势:兼容性不好。
FF会把例如</div>后面的所有的空白节点都读成一个子节点
IE会把最后一个空白节点读成子节点
****************************************************************
二、节点的信息(属性)
节点类型 节点名字 节点值
nodeType(数值) nodeName nodeValue
nodeType 属性返回以数字值返回指定节点的节点类型。
如果节点是元素节点,则 nodeType 属性将返回 1。
如果节点是属性节点,则 nodeType 属性将返回 2
元素节点 1 标签名 null
属性节点 2 属性名 属性值
文本节点 3 #text 文本
注释节点 8 #comment 注释的文字
文档节点 9 #document null
alert(outdiv.nodeType)
alert(document.nodeType)
alert(document.nodeName)
alert(document.nodeValue)
三、兼容性的方法
javascript-节点的增、删、改、查实例讲解
一、创建节点
1>创建元素节点
document.createElement("元素标签名");
var elea=document.createElement("a");
elea.href="#";
elea.title="我是一个链接";
elea.innerHTML="链接";
elea.style.color="red";
document.body.appendChild(elea);
2>创建属性节点
document.createAttribute("属性名");
对象.属性="属性值"
对象.setAttribute(属性名,属性值)
对象.getAttribute(属性名,属性值)
3>创建文本节点
对象.innerHTML="";
elea.innerHTML="链接";
document.createTextNode("文本");
var h3text=document.createTextNode("测试");
二、追加到页面当中
父对象.appendChild(追加的对象) 插入到最后
document.body.appendChild(elea);
父对象.insertBefore(要插入的对象,之前的对象) 插入到最后
var innerdiv=document.getElementById("innerdiv");
var spans=innerdiv.firstChild;
var eleh3=document.createElement("h3");
var h3text=document.createTextNode("测试");
eleh3.appendChild(h3text);
innerdiv.insertBefore(eleh3,spans);
三、修改(替换)节点
父对象.replaceChild(要修改的对象,被修改的);
innerdiv.replaceChild(elep,eleh3)
四、删除节点
父对象.removeChild(删除的对象)
如果确定要删除节点,最好也清空内存 对象=null;
innerdiv.removeChild(elep)
elep=null;
alert(elep.innerHTML);
16.JavaScript操作表单
javascript-对表单的操作
<form name="myform" id="form1" action="" method="post">
姓名:<input type="text" name="names" id="names" value="zhangsan"><br/>
年龄:<input type="text" name="age" value="19"><br/>
性别:<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/>
爱好:<input type="checkbox" name="like[]" value="play">玩
<input type="checkbox" name="like[]" value="run">跑步
<input type="checkbox" name="like[]" value="study">学习<br/>
毕业院校:
<select name="school">
<option>
北京大学
</option>
<option>
清华大学
</option>
<option>
南开大学
</option>
</select>
<br/>
简介:<textarea cols="60" rows="10" name="info">测试</textarea><br/>
<input type="button" value="提交">
</form>
一、获得表单引用
1>通过直接定位的方式来获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
//var myform=document.getElementById("form1");
//alert(myform.name);
//var myform=document.getElementsByName("myform")[0];
// alert(myform.name);
2>通过集合的方式来获取引用
document.forms[下标]
document.forms["name"]
document.forms.name
//var myform=document.forms[0];
//var myform=document.forms["myform"];
//var myform=document.forms.myform;
//alert(myform.name)
3>通过name直接获取“(只适用于表单)
document.name
//var myform=document.myform;
//alert(myform.name);
二、获得表单元素的引用
1>直接获取
document.getElementById();
document.getElementsByName();
document.getElementsByTagName();
//直接获取
// var names=document.getElementById("names").value;
// alert(names)
//var names=document.getElementsByName("names")[0].value
// alert(names)
2>通过集合来获取
表单对象.elements 获得表单里面所有元素的集合
表单对象.elements[下标]
表单对象.elements["name"]
表单对象.elements.name
//var eles=document.myform.elements.length;
//alert(eles)
//var names=document.myform.elements[0].value;
//var names=document.myform.elements["names"].value;
// var names=document.myform.elements.names.value;
//alert(names)
3>直接通过name的形式
表单对象.name
//var age=document.myform.age.value;
//alert(age);
// var info=document.myform.info.value;
// alert(info)
三、表单元素共同的属性和方法
1>获取表单元素的值
表单元素对象.value 获取或是设置值
// document.getElementById("fom1").names
// document.forms[0].elements[0]
2>属性
disabled 获取或设置表单控件是否禁用 true false
//disabled
//var names=document.myform.names.disabled =true;
//var school=document.myform.school.disabled =true;
form 指向包含本元素的表单的引用
//form
//var age=document.forms[0].elements.age.form
//alert(age.name);
3>方法
blur()失去焦点
focus() 获得焦点
//foucs
var name=document.forms.myform.elements.names.focus();
四、文本域
<input type="text" >
***********************************
操作文本域的值
value 属性 设置或者获取值
//文本域
//var names=document.forms[0].elements.names.value="lisi";
//alert(names)
***********************************
五、单选按钮
*******************************************
checked 返回或者设置单选的选中状态
true 选中 false 未选中
value 属性 获取选中的值,必须先判断选中状态。
var sex=document.myform.sex;
sex[0].checked=true;
for (var i=0; i<sex.length; i++) {
if(sex[i].checked){
alert(sex[i].value)
}
}
*******************************************
六、多选按钮
*******************************************
checked 返回或者设置单选的选中状态
true 选中 false 未选中
value 属性 获取选中的值,必须先判断选中状态。
var likes=document.forms.myform["like[]"];
likes[2].checked=true;
for (var i=0; i<likes.length; i++) {
if(likes[i].checked){
alert(likes[i].value);
}
*******************************************
七、下拉框
************************************************
selected 设置或返回下拉框的选中状态
true 选中 false 未选中
selectedIndex 设置或返回下拉框被选中的索引号
//var school=document.myform.school;
// var school=document.myform.school.options;
//alert(school.length)
//selected设置选中状态
//school[1].selected=true;
//selectedIndex设置选中状态
//school.selectedIndex=2;
************************************************
八、文本区域
***************************************
<textarea></textarea>
value 操作值
<form name="myform"> <textarea name="info" rows="7" cols="60"></textarea> </form>
var str=info.value;
***************************************
九、验证表单
1.事件
onsubmit 当表单提交的时候触发的事件
onblur
onfocus
onchange
2.return false; 阻止事件的默认行为(适用于所有事件)
<!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>
function check (obj) {
if(obj.names.value==""){
alert("姓名不能为空");
return false;
}
if(obj.age.value==""){
alert("年龄不能为空");
return false;
}
var statu=0;
for (var i=0; i<obj.sex.length; i++) {
if(obj.sex[i].checked){
statu=1;
}
}
if(!statu){
alert("性别不能为空");
return false;
}
}
</script>
</head>
<body>
<form name="myform" id="form1" action="" method="post" onsubmit=" return check(this)">
姓名:<input type="text" name="names" id="names" ><br/>
年龄:<input type="text" name="age" ><br/>
性别:<input type="radio" name="sex" value="man">男 <input type="radio" name="sex" value="woman">女<br/>
爱好:<input type="checkbox" name="like[]" value="play">玩
<input type="checkbox" name="like[]" value="run">跑步
<input type="checkbox" name="like[]" value="study">学习<br/>
毕业院校:
<select name="school">
<option>
北京大学
</option>
<option>
清华大学
</option>
<option>
南开大学
</option>
</select>
<br/>
简介:<textarea cols="60" rows="10" name="info">测试</textarea><br/>
<input type="submit" value="提交">
</form>
</