1.HTML DOM (Document Object Model)
document.getElementById("some id")
: 这样的document
就是DOM对象
JavaScript
能够改变任意 HTML
元素的大多数属性
*注意:
html - dom - document
浏览器 - bom - window
2.match()函数
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。
语法:
stringObject.match(searchvalue)
:必需。规定要检索的字符串值。
stringObject.match(regexp)
:必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象
我们可以使用全局匹配的正则表达式来检索字符串中的所有数字:
<script type="text/javascript">
var str="1 plus 2 equal 3"
document.write(str.match(/\d+/g))
</script>
3.Date()函数
Date()
在js
中直接调用结果:Sun Oct 09 2016 14:37:15 GMT+0800 (CST)
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDay();
alert("今天是"+year+"年"+month+"月"+day+"日");
4.js
对象:
{firstName:"John", lastName:"Doe", age:40, eyeColor:"blue"}
*注意: notation
:n. 符号;乐谱;注释;记号法
json
: javascript object notation
5.数据类型
JavaScript
有多种数据类型:数字,字符串,数组,对象等等
*注意:
16 + "你好" => "16你好"
5.JavaScript 使用Unicode
字符集。
Unicode
覆盖了所有的字符,包含标点等字符。
JavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。
6.innerHTML与innerText 区别:
1)innerHTML
:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
2)innerText
:
从起始位置到终止位置的内容, 但它去除Html标签
<div id="test">
<span style="color:red">test1</span> test2
</div>
获取id=test
节点:
它的innerHTML
就是:<span style="color:red">test1</span>test2
它的innerText
是:test1test2
*注意:
innerHTML
是符合W3C
标准的属性,而innerText
只适用于IE
浏览器,因此,尽可能地去使用innerHTML
,而少用
innerText
,如果要输出不含HTML
标签的内容,可以使用innerHTML
取得包含HTML
标签的内容后,再用正则表达式去除HTML
标签,下面是一个简单的符合W3C
标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">
去除HTML标签后的文本</a>
7.对代码行进行折行
document.write("你好 \ 是加尔!");
*注意:JavaScript
是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。
8.声明
var carname;
在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined
。
在执行过以下语句后,变量carname
的值将是 undefined
:
var carname="Volvo";
var carname;
// 在以下两条语句执行后,变量 carname 的值依然是 "Volvo":
9.JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value)
来定义。属性由逗号分隔:
eg:var person={firstname:"John", lastname:"Doe", id:5566};
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
*注意:键加""
双引号也可以的
var person={
firstname : "John",
"lastname" : "Doe",
id : 5566
};
10.Undefined 和 Null区别
Undefined
这个值表示变量不含有值。
可以通过将变量的值设置为 null
来清空变量。
cars = null
person = null
之后alert(cars)
结果为null
,注意不是undefined
11.声明变量类型
当您声明新变量时,可以使用关键词 "new" 来声明其类型:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JavaScript
变量均为对象。当您声明一个变量时,就创建了一个新的对象。
12.js的对象
1)键值对,对象属性
可以说 "JavaScript
对象是变量的容器"。
我们通常认为 "JavaScript
对象是键值对的容器"。
键值对在 JavaScript
对象通常称为 对象属性。
对象键值对的写法类似于:
PHP 中的关联数组
Python 中的字典
C 语言中的哈希表
2)对象方法
对象的方法定义了一个函数,并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。
name = person.fullName();
// person.fullName()
调用person对象的方法,返回的值赋值给了name
JavaScript
对象是属性
和方法
的容器
在微信小程序中:
wx.request({
url:"http://www.xxxx",
method:'GET',
data:{},
header:{
'Accept':'application/json'
},
success:function(res){
that.setData({
images:res.data
})
}
})
// wx.request(); 调用函数.传入的是 js对象 {}
*注意:
函数属性作为一个方法访问与函数属性作为一个属性访问。
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName(); // 方法访问
document.getElementById("demo").innerHTML = person.fullName;
13.JavaScript 变量的生存期
JavaScript
变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
14.向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
函数参数只在函数内起作用,是局部变量。
15.html中的全局变量
在html
中,全局变量是window
对象:所有数据变量都属于window
对象
function myFunction() {
carName = "Volvo";
}
myFunction();
//此处可使用 window.carName
注意:要先执行myFunction()
之后才能使用全局变量carName
16.js事件
HTML
事件是发生在HTML
元素上的事情。
当在HTML
页面中使用 JavaScript
时, JavaScript
可以触发这些事件。
HTML
事件可以是浏览器行为,也可以是用户行为。
常见的html
事件:
onchange
:HTML 元素改变
onclick
:用户点击 HTML 元素
onmouseover
:用户在一个HTML元素上移动鼠标
onmouseout
:用户从一个HTML元素上移开鼠标
onkeydown
:用户按下键盘按键
onload
:浏览器已完成页面的加载
17.js字符串
var answer = "He is called 'Johnny'";
1)alert(answer[13])
; // '
2)answer.length
3)特殊字符
在 JavaScript 中,字符串写在单引号或双引号来中。
"We are the so-called "Vikings" from the north."
如何解决以上的问题呢?可以使用反斜杠 () 来转义 "Vikings" 字符串中的双引号,如下:
"We are the so-called \"Vikings\" from the north."
特殊字符的转义:
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符
18.字符串可以是对象
通常,JavaScript
字符串是原始值,可以使用字符创建:var firstName = "John"
但我们也可以使用 new 关键字将字符串定义为一个对象:var firstName = new String("John")
不要创建String
对象。它会拖慢执行速度,并可能产生其他副作用:
var x = "John";
var y = new String("John");
(x === y) // is false because x is a string and y is an object.
1)字符串属性
constructor
返回创建字符串属性属性的函数
length
返回字符串的长度
prototype
允许您向对象添加属性和方法
2)字符串方法
charAt() 返回指定索引位置的字符 charCodeAt() 返回指定索引位置字符的 Unicode 值 concat() 连接两个或多个字符串,返回连接后的字符串 fromCharCode() 将字符转换为 Unicode 值 indexOf() 返回字符串中检索指定字符第一次出现的位置 lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置 localeCompare() 用本地特定的顺序来比较两个字符串 match() 找到一个或多个正则表达式的匹配 replace() 替换与正则表达式匹配的子串 search() 检索与正则表达式相匹配的值 slice() 提取字符串的片断,并在新的字符串中返回被提取的部分 split() 把字符串分割为子字符串数组 substr() 从起始索引号提取字符串中指定数目的字符 substring() 提取字符串中两个指定的索引号之间的字符 toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 toLowerCase() 把字符串转换为小写 toString() 返回字符串对象值 toUpperCase() 把字符串转换为大写 trim() 移除字符串首尾空白 valueOf() 返回某个字符串对象的原始值
19.js中的break
与continue
break
语句可用于跳出循环。
break
语句跳出循环后,会继续执行该循环之后的代码(如果有的话):
continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。 该例子跳过了值 3:
eg:
for (i=0;i<=10;i++)
{
if (i==3) continue;
x=x + "The number is " + i + "<br>";
}
20.JavaScript typeof
, null
, 和 undefined
数组是一种特殊的对象类型。 因此 typeof [1,2,3,4]
返回object
。
在 JavaScript
中 null
表示 "什么都没有"。
用typeof
检测 null
返回是object
。
可以设置为 null 来清空对象:
var person = null;
可以设置为 undefined 来清空对象:
var person = undefined;
在 JavaScript
中, undefined
是一个没有设置值的变量。
typeof
一个没有值的变量会返回 undefined
。
Undefined和Null的区别:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
请注意:
NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined
21.JavaScript 类型转换
Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。
22.JavaScript 数据类型
在 JavaScript 中有 5 中不同的数据类型:
string
number
boolean
object
function
3 种对象类型:
Object
Date
Array
2 个不包含任何值的数据类型:
null
undefined
23.JavaScript 类型转换
1)将数字转换为字符串
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
x.toString()
(123).toString()
(100 + 23).toString()
2)将布尔值转换为字符串
全局方法 String() 可以将布尔值转换为字符串。
String(false) // 返回 "false"
String(true) // 返回 "true"
Boolean 方法 toString() 也有相同的效果。
false.toString() // 返回 "false"
true.toString() // 返回 "true"
3)将日期转换为字符串
全局方法 String() 可以将日期转换为字符串。
String(Date())
// 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
Date 方法 toString() 也有相同的效果。
Date().toString()
// 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
4)将字符串转换为数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN
5)将布尔值转换为数字
Number(false) // 返回 0
Number(true) // 返回 1
*注意:获得时间戳
d = new Date();
d.getTime() // 返回 1404568027739
6)自动转换类型 Type Conversion
5 + null // 返回 5 because null is converted to 0
"5" + null // 返回"5null" because null is converted to "null"
"5" + 1 // 返回 "51" because 1 is converted to "1"
"5" - 1 // 返回 4 because "5" is converted to 5
7)自动转换为字符串
document.getElementById("demo").innerHTML = myVar;
// if myVar = {name:"Fjohn"} // toString 转换为 "[object Object]"
// if myVar = [1,2,3,4] // toString 转换为 "1,2,3,4"
// if myVar = new Date() // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"
// if myVar = 123 // toString 转换为 "123"
// if myVar = true // toString 转换为 "true"
// if myVar = false // toString 转换为 "false"
24.js正则表达式
Regular Expression
: 有规律的 表达式
简写为:regex
, regexp
,RE
作用:使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索
和文本替换
。
1)什么是正则表达式?
正则表达式是由一个字符序列形成的搜索模式
。
当你在文本中搜索数据是,你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符,或一个更复杂的模式。
正则表达式可用于所有文本搜索
和文本替换
的操作。
2)语法:
/pattern/modifiers;
// pattern:模式 modifier:修饰语
eg:
var patt = /shouce.ren/i
/shouce.ren/i
是一个正则表达式。
shouce.ren
是一个模式
(用于检索
)。
i
是一个修饰符 (搜索不区分大小写)。
3)使用字符串方法
在 JavaScript
中,正则表达式通常用于两个字符串方法 : search()
和 replace()
。
search()
方法 用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,并返回子串的起始位置。
replace()
方法 用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。
实例:
var str = "Visit shouce.ren";
var n = str.search(/shouce.ren/i); // 输出的n 为6
var str = "Visit shouce.ren!";
var n = str.search("shouce.ren"); // n => 6
var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "shouce.ren"); // res => shouce.ren
作用:
正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。
4)正则表达式修饰符
修饰符 可以在全局搜索中不区分大小写:
i 执行对大小写不敏感的匹配。
g 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m 执行多行匹配。
5)正则表达式模式
方括号用于查找某个范围内的字符:
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从 0 至 9 的数字。
(x|y) 查找任何以 | 分隔的选项。
元字符是拥有特殊含义的字符:
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
量词:
n+ 匹配任何包含至少一个 n 的字符串。
n* 匹配任何包含零个或多个 n 的字符串。
n? 匹配任何包含零个或一个 n 的字符串。
6)使用 RegExp 对象
在JavaScript
中,RegExp
对象是一个预定义了属性和方法的正则表达式对象。
a.使用test()
test()
方法是一个正则表达式方法。
test()
方法用于检测一个字符串是否匹配某个模式,如果字符串中含有匹配的文本,则返回 true
,否则返回 false
。
var patt = /e/;
patt.test("The best things in life are free!");
b.使用exec()
exec()
方法是一个正则表达式方法。
exec()
方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null
。
eg:
/e/.exec("the best things"); // 含有e: 返回 "e"
25.js表单验证
JavaScript
可用来在数据被送往服务器前对 HTML
表单中的这些输入数据进行验证。表单数据经常需要使用 JavaScript 来验证其正确性:
1)必填(或者必选)项目
function validateForm(){
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
}
2)Email验证:
function validateForm(){
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("Not a valid e-mail address");
return false;
}
}
26.js标准
所有的现代浏览器完全支持 ECMAScript 3
(ES3
,JavaScript
的第三版,从 1999
年开始)。
ECMAScript 4(ES4)
未通过。
ECMAScript 5
(ES5
,2009
年发布),是 JavaScript
最新的官方版本。
随着时间的推移,我们开始看到,所有的现代浏览器已经完全支持ES5
。
27.javaScript JSON
JSON
是用于存储和传输数据的格式。
JSON
通常用于服务端向网页传递数据 。
1)什么是JSON
?
JSON
英文全称 JavaScript Object Notation
JSON
是一种轻量级的数据交换格式。
JSON
是独立的语言 。
JSON
易于理解。
*注意:JSON
使用 JavaScript
语法,但是 JSON
格式仅仅是一个文本
。
文本
可以被任何编程语言
读取及作为数据格式
传递。
eg:
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
2)JSON
格式化后为 JavaScript
对象
JSON
格式在语法上与创建 JavaScript
对象代码是相同的。
由于它们很相似,所以 JavaScript
程序可以很容易的将JSON
数据转换为 JavaScript
对象。
3)JSON 语法规则
数据为 键/值 对
。
数据由逗号
分隔。
大括号保存对象
方括号保存数组
4)JSON
字符串转换为JavaScript
对象
通常我们从服务器中读取 JSON
数据,并在网页中显示数据。
eg:
创建 JavaScript
字符串,字符传为 JSON
格式的数据:
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:
var obj = JSON.parse(text); // 将json格式字符串转为js对象
28.javascript:void(0)含义
我们经常会使用到 javascript:void(0)
这样的代码,那么在JavaScript
中 javascript:void(0)
代表的是什么意思呢?
javascript:void(0)
中最关键的是void
关键字, void
是 JavaScript
中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值
。
eg:
<a href="javascript:void(0)">单击此处什么也不会发生</a>
<head>
<script type="text/javascript">
function getValue(){
var a,b,c;
a = void ( b = 5, c = 7 );
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
}
</script>
</head>
// 输出结果: a=undefined b = 5 c = 7 。void(); ()里面计算一个表达式,但是不返回值
1)href="#"与href="javascript:void(0)"的区别
#
包含了一个位置信息,默认的锚是#top
也就是网页的上端。
而javascript:void(0)
, 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id
。
eg:
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br> <p id="pos">尾部定位点</p>
29.函数
1)匿名函数
var x = function (a, b) {return a * b}; // 匿名函数声明
var z = x(4, 3); // 函数调用
2)Function() 构造函数
函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。
var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3); // 函数调用
*注意:在 JavaScript 中,很多时候,你需要避免使用 new 关键字。所以建议一般不适用new
关键字去创建
3)函数提升 Hoisting
参考:http://www.jb51.net/article/30719.htm
在js
中:与c
语言不一样,c
语言有块级作用域,js
却没有,因为JavaScript
是函数级作用域(function-level scope
)
这和C系语言
是完全不同的。块
,就像if
语句,并不会创建一个新的作用域。只有函数
才会创建新的作用域
。
C,C++,C#或是Java
块级作用域。
var x = 1;
console.log(x); // 1
if (true) {
var x = 2;
console.log(x); //2
}
console.log(x);// 2
因为JavaScript
函数的灵活性,对于这个问题我们有一个解决方案。如果你必须在函数中创建一个临时的作用域
,请像下面这样做:
function foo() {
var x = 1;
if (x) {
(function () {
var x = 2;
// some other code
}());
}
// x is still 1.
}
开辟临时作用域:
(function(){ })
这种方面确实非常灵活,它使用在任何需要创建一个临时作用域的地方,不仅仅是某个块中。但是,我强烈建议多花点时间好好理解下JavaScript scoping
。它实在是非常强力,而且它也是我最喜欢的语言特性之一。如果你很好的理解了scoping
,理解hoisting
将会更加容易。
function myFunction(a, b){
return a *b;
}
var text = myFunction.toString();
1)js中提升,有变量提升
和函数提升
var v='Hello World';
(function(){
var v;
alert(v); // 结果是undefined
v='I love you';
})()
可见js
中的作用域是以函数为边界的
函数的写法: 一种是函数表达式
,另外一种是函数声明方式
*注意:js没有块级作用域的概念
变量提升与js
的预编译
有关
js
预编译时会先在当前作用域
中找到var
声明的变量分配空间,赋值为undefined
,如果找不到就会到下一级作用域
中找
解析器
在向执行环境中加载数据时,对函数声明
和函数表达式
并非一视同仁。
解析器
会率先读取函数声明
,并使其在执行任何代码之前可用(可以访问);至于函数表达式
,则必须等到解析器
执行到它所在的代码行,才会真正被解释执行。
*注意:
参考:http://www.cnblogs.com/Wayou/p/javascript_arguments_passing_with_reference.html
1.匿名函数无法在声明前调用
- 参数变更影响到函数外部
当传递给函数的参数是一个数组或对象时,在函数体内对这个传入的参数的更改会影响到函数体外的原传入值。
一般说来,对参数的更改不会影响到原来变量的值,更改只在函数体内起作用:
但情况有所不同,当传入的参数是数组、对象时,在函数体内对参数所做的更改会反映到原变量上。
3.使用arguments来接收个数未定的参数
eg:这个是函数声明
alert(sum(10,10));
function sum(num1,num2)
{
return num1+num2;
}
以上代码完全可以正确执行,因为在代码开始执行之前,解析器
就已经通过一个名为函数声明提升
(function declaration hoisting
)的过程,读取并将函数声明
添加到执行环境
中。对代码求值时,JavaScript引擎
在第一遍会声明函数并将它们放到源代码
树的顶部。所以,即使声明函数的代码在调用它的代码后面,JavaScript引擎
也能把函数声明
提升到顶部。如果像下面的例子所示,把上面的函数声明改为等价的函数表达式
,就会在执行的时候出现错误。
这个是函数表达式,函数表达式不会提升函数
alert(sum(10,10)); // 报错
var sum=function(num1,num2)
{
return num1+num2;
};
try{
以上代码会在运行的时候出现错误,原因在于函数位于一个初始化语句
中,而不是一个函数声明
。换句话讲,在执行到函数所在的语句之前,变量sum
中不会保存有对函数的引用
;而且,由于第一行代码就会导致“unexpected identifier”
(意外标识符)错误,实际上也不会执行到下一行。
try,catch的使用:
}catch(e){
alert(e);
}
4)自调用函数
函数表达式可以 "自调用"。
自调用表达式会自动调用。
如果表达式后面紧跟 ()
,则会自动调用。
Y不能自调用声明的函数。
通过添加括号,来说明它是一个函数表达式
:
实例:
(function(){
var x = 'hellow!'; // 我将会自动调用自己
})();
语法:
( // 自动调用函数 )()
5)函数是对象
eg:
function(a, b){
return arguments.length; // 返回收到参数个数
}
6)函数默认参数
如果函数在调用时缺少参数,参数会默认设置为: undefined
有时这是可以接受的,但是建议最好为参数设置一个默认值:
eg:
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
或者,更简单的方式:
function myFunction(x, y) {
y = y || 0; // 如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。
}
7)函数的Arguments
对象
JavaScript
函数有个内置的对象 arguments
对象.
argument
对象包含了函数调用的参数数组。
如果函数调用时设置了过多的参数,参数将无法被引用,因为无法找到对应的参数名。 只能使用arguments
对象来调用
通过这种方式你可以很方便的找到最后一个参数的值:
eg:
x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {
var i, max = 0;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
8)通过值传递参数
在函数中调用的参数是函数的参数。
如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。
函数参数的改变不会影响函数外部的变量(局部变量
)。
9)通过对象传递参数
在JavaScript
中,可以引用对象
的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性
可作用于函数外部(全局变量
)。
10)函数的调用
JavaScript 函数
有 4 种调用方式。
每种方式的不同方式在于 this
的初始化。
a)作为一个函数调用
实例
function myFunction(a, b) {
return a * b;
}
myFunction(10, 2); // myFunction(10, 2) 返回 20
以上函数不属于任何对象。但是在 JavaScript
中它始终是默认的全局对象
。
在 HTML
中默认的全局对象是 HTML
页面本身,所以函数是属于HTML
页面。
在浏览器
中的页面对象
是浏览器窗口(window
对象)。以上函数会自动变为 window
对象的函数
。
myFunction()
和 window.myFunction()
是一样的:
全局对象:
当函数没有被自身的对象调用是, this 的值就会变成全局对象。
在 web
浏览器中全局对象
是浏览器窗口(window
对象)。
该实例返回 this
的值是 window
对象:
function myFunction() {
return this;
}
myFunction(); // 返回 window 对象
函数作为全局对象调用,会使 this
的值成为全局对象。
使用 window
对象作为一个变量容易造成程序崩溃。
b)函数作为方法调用
在 JavaScript
中你可以将函数定义为对象
的方法
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
*注意:这里,方法和函数的区别
c)使用构造函数调用函数
function myFunction(){
this.fir = arguments[0];
this.sec = arguments[1];
}
var my = new myFunction("a", "b");
alert(my.fir);
*注意:
构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。
d)作为函数方法调用函数
在 JavaScript
中, 函数是对象。JavaScript
函数有它的属性
和方法
。
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
例子1:
function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2); // 返回 20
例子2:
function myFunction(a, b) {
return a * b;
}
myArray = [10,2];
myFunction.apply(myObject, myArray); // 返回 20
11)js
闭包
JavaScript
变量可以是局部变量
或全局变量
。
私有变量
可以用到闭包
。
*注意:变量声明是如果不使用 var
关键字,那么它就是一个全局变量,即便它在函数内定义。
JavaScript
内嵌函数
所有函数都能访问全局变量。
实际上,在 JavaScript
中,所有函数都能访问它们上一层的作用域。
JavaScript
支持嵌套函数
。嵌套函数
可以访问上一层的函数变量。
JavaScript
闭包
函数自我调用 该函数会做什么?
eg:
var add = (function () {
var counter = 0;
return function () {
return counter += 1;
}
})();
add();
add();
add();
// 计数器为 3
变量add
指定了函数自我调用的返回字值。
自我调用函数只执行一次
。设置计数器为 0。并返回函数表达式。
add
变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作JavaScript 闭包
。它使得函数
拥有私有变量
变成可能。
计数器受匿名函数
的作用域
保护,只能通过 add 方法修改。
*注意:函数自调用和闭包的区别
30.HTML DOM
通过 HTML DOM
,可访问 JavaScript HTML
文档的所有元素。
当网页被加载时,浏览器
会创建页面的文档对象模型
(Document Object Model
)。
通过可编程的对象模型,JavaScript
获得了足够的能力来创建动态的HTML
。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
1)查找HTML元素
var x=document.getElementById("intro");
如果找到该元素,则该方法将以对象(在 x
中)的形式返回该元素。
如果未找到该元素,则 x
将包含 null
。
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
var x=document.getElementsByClassName("intro"); // 返回的一个数组,class = intro的数组
2)改变HTML输出流
document.write(Date());
绝对不要在文档加载完成之后使用document.write()
。这会覆盖该文档。
3)改变 HTML 内容
document.getElementById(id).innerHTML=new HTML
-
改变 HTML 属性
document.getElementById(id).attribute=new value
eg:document.getElementById("img").src = "landscape.jpg";
5)改变css
document.getElementById(id).style.property=new style
eg:
document.getElementById("p2").style.color="blue";
31.html dom事件
HTML DOM
使 JavaScript
有能力对 HTML
事件做出反应。
onclick=JavaScript
类型:
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
实例:
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
*注意:onclick
属性不适用以下元素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>
。
1)onload
和 onunload
事件
作用:
onload
和 onunload
事件会在用户进入或离开页面时被触发
onload
事件可用于检测访问者的浏览器类型
和浏览器版本
,并基于这些信息来加载网页的正确版本。
onload
和 onunload
事件可用于处理 cookie
。
2)<input> 的 onchange事件
3)onmouseover 和 onmouseout 事件
4)onmousedown、onmouseup 以及 onclick 事件
onmousedown
, onmouseup
以及onclick
构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown
事件,当释放鼠标按钮时,会触发 onmouseup
事件,最后,当完成鼠标点击时,会触发 onclick
事件。
32.HTML DOM EventListener
当用户点击按钮时触发监听事件:
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener()
方法用于向指定元素添加事件句柄。
addEventListener()
方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click
" 事件。
你可以向任何DOM 对象
添加事件监听,不仅仅是HTML 元素
。如: window
对象。
当你使用 addEventListener()
方法时,JavaScript
从 HTML
标记中分离开来,可读性更强, 在没有控制HTML
标记时也可以添加事件监听。
可以使用 removeEventListener()
方法来移除事件的监听。
1)语法:
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 "click"
或"mousedown"
).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
*注意:不要使用 "on"
前缀。 例如,使用"click"
,而不是使用 "onclick"
。
2)事件冒泡或事件捕获?
事件传递有两种方式:冒泡
与捕获
。
事件传递定义了元素事件触发的顺序。 如果你将 <p>
元素插入到 <div>
元素中,用户点击 <p>
元素, 哪个元素的 "click"
事件先被触发呢?
在 冒泡
中,内部元素的事件会先被触发,然后再触发外部元素,即: <p>
元素的点击事件先触发,然后会触发 <div>
元素的点击事件。
在 捕获
中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div>
元素的点击事件先触发 ,然后再触发 <p>
元素的点击事件。
默认值为false
, 即冒泡传递
,当值为 true
时, 事件使用捕获传递
。
捕获传递:
document.getElementById("myDiv").addEventListener("click", myFunction, true);
3)浏览器支持
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流浏览器,除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
33.HTML DOM 元素(节点)
1)给自己增加子节点,删除子节点
appendChild()
removeChild()
eg:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);