1. JavaScript基础知识

  • 使用弹出框输出内容

    1
    alert("hello,world!");

  • 显示在控制台

1
console.log("hello,world!");
  • 使用innerHTML属性，给元素赋值
1
document.getElementById("id名").innerHtml="hello,world!";
  • 将内容输出到文档中
1
document.write("hello,world!");

null & undefined

null与undefined都可以表示”没有”，含义非常相似。

  • undefined 这个值表示变量不含有值
  • 可以通过将变量的值设置为 null 来清空变量

数组的基本操作

方法 描述
push 向数组的末尾添加一个或更多元素，并返回新的长度
pop 删除并返回数组的最后一个元素
join 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔。

自动转换规则

  • 自动转换为布尔值

当JavaScript遇到预期为布尔值的地方，会将非布尔值的参数自动转换为布尔值，比如if语句的条件部分。

  • 自动转换为字符串

字符串的自动转换，主要发生在加法运算时。当一个值为字符串，另一个值为非字符串，则后者转为字符串。

  • 自动转换为数值

通常在执行算数运算的时候会自动转换成数值类型。

举例：

var foo = “11” + 2 - “1”;
alert(foo); foo = 111;

自悟：

当是”+”的时候，”+”是连接的意思。11”和2，2自动变为字符串的格式，就变成了”112”, 进行”-“的时候，两个字符串自动转换为数值类型。

相等运算符

  • 相等运算符（==）（注：自动进行数据转换）
  • 全相等运算符（===）（注：不发生数据转换）

转换规则

  • 如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——false转换为0，而true转换为1；
  • 如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值。
  • 如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf方法，用得到的基本类型值按照前面的规则进行比较。（注：valueOf()类似于toString()方法）

for-in语句

用于遍历对象中的属性

1
2
3
4
5
6
7
var obj = {
    "name":"JavaScript",
    "age":21
};
for(var key in obj){
    console.log(key);
}

//输出结果：name age

什么是JSON

JSON的全称是JavaScript Object Notation，是一种数据交换格式。

  • 并列的数据之间用逗号（”,”）分隔。
  • 映射用(“:”)表示。
  • 并列数据的集合（数组）用方括号（”[]”）表示
  • 映射的集合(对象)用大括号（”{}”）表示

JSON常用方法

  • JSON.stringifg();用于将一个值转化为字符串。
  • JSON.parse();用于将JSON字符串转化为对象。

HTML DOM setAttribute()方法

  • setAttribute()方法添加指定的属性，并为其赋指定的值
  • 如果这个指定的属性已存在，则仅设置/更改值。

语法：element.setAttribute(attributename,attributevalue)

参数 类型 描述
attributename String 必需，您希望添加属性的名称
attributevalue String 必需，您希望添加的属性值

补充：getAttribute() 方法返回指定属性名的属性值。

js中return true、return false的区别

  • retrun true：返回正确的处理结果。相当于执行符
  • return false：就相当于终止符。只在当前函数有效，不会影响其他外部函数的执行

2. JavaScript 浏览器对象（BOM）

document对象

方法 描述
getElementById() 返回对拥有指定id的第一个对象的引用
getElementByName() 返回带有指定名称的对象的集合
getElementByTagName() 返回带有指定标签名的对象的集合
write() 向文档写HTML表达式或JavaScript代码

location对象

  • 包含有关当前 URL 的信息，代表浏览器的定位和导航
  • 可通过 window.location 属性来访问
  • 最常用的属性href
1
document.write(location.href);

3. JavaScript DOM操作

  • getElementById
1
2
// 获取id 为‘id'的元素
var element = document.getElementById('id');
  • getElementsByTagName
1
2
// 获取所有 p 元素的节点
var element = document. getElementsByTagName('p');
  • getElementsByClassName
1
2
//获取所有 class 为 'test' 的元素
var element = document. getElementsByClassName('test');

4. innerHTML属性

获取或设置指定节点之中所有的HTML内容

  • 获取指定节点中html内容
1
var elementsHTML = HTMLElementObject.innerHTML;
  • 设置指定节点中html内容
1
HTMLElementObject.innerHTML= newHtmltext;

5. DOM样式操作

Style对象代表一个单独的样式声明。可从应用样式的文档或元素访问 Style 对象。

  • 语法
1
document.getElementById("id").style.property="值";
  • 示例
1
document.getElementById("id").style.color = "red";

6. JavaScript 事件

  • load 事件

当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外
部资源），就会触发window上面的load事件。

1
2
3
window.onload = function () {
    console.log('loaded');
}
  • click事件

在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发

1
<input type="button" value="确定" onclick="clickOk() " />
  • change事件
    1
    change事件在<input>, <select>, 和<textarea> 元素的value由于用户的输入而发生变化时被触发

7. HTML DOM splice() 方法

定义和用法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。

语法

arrayObject.splice(index,howmany,item1,…..,itemX)

1
2
3
4
参数	            描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>

输出

1
2
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin

解释

1
2
3
4
arr.splice(2,0,"William")
括号里的2代表添加/或删除的位置，0代表要删除的项目数量，此时为0，所以“William”直接添加到数组里面。
如果  arr.splice(2,3,"William")
则结果为George,John,William，Martin

8. HTML DOM confirm() 方法

定义和用法

confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。

语法

confirm(message)

1
2
参数	描述
message	要在 window 上弹出的对话框中显示的纯文本（而非 HTML 文本）

说明

如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对JavaScript代码的执行，在用户作出响应之前，不会执行下一条语句。
实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<script type="text/javascript">
function disp_confirm()
  {
  var r=confirm("Press a button")
  if (r==true)
    {
    document.write("You pressed OK!")
    }
  else
    {
    document.write("You pressed Cancel!")
    }
  }
</script>
</head>
<body>

<input type="button" onclick="disp_confirm()"
value="Display a confirm box" />

</body>
</html>

9. JavaScript push() 方法

定义和用法

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

要想数组的开头添加一个或多个元素，请使用 unshift() 方法。

语法

arrayObject.push(newelement1,newelement2,….,newelementX)

1
2
3
4
参数	描述
newelement1	必需。要添加到数组的第一个元素。
newelement2	可选。要添加到数组的第二个元素。
newelementX	可选。可添加多个元素。

返回值

把指定的值添加到数组后的新长度。
注释

该方法会改变数组的长度。

10. 全页面刷新方法

  • window.location.reload();刷新当前页面。
  • parent.location.reload();刷新父亲对象（用于框架）
  • opener.location.reload();刷新父窗口对象（用于单开窗口）
  • top.location.reload();刷新最顶端对象（用于多开窗口）

10. dialog子窗口给父窗口的text表单传值

window.parent.document.getElementById(“host_location”).value = “asd”;

这样的话，父窗口的text表单里面就会赋值”asd”。

var ss = window.parent.document.getElementById(“host_location”).value;
alert(ss);

这样的话，子窗口就能获取父窗口的text表单的值。

11. HTML DOM setInterval() 方法

定义和用法

  • setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
  • setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
    语法

setInterval(调用的函数,时间(单位毫秒))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<body>

<input type="text" id="clock" size="35" />
<script language=javascript>
var int=self.setInterval("clock()",50)
function clock()
  {
  var t=new Date()
  document.getElementById("clock").value=t
  }
</script>
</form>
<button onclick="int=window.clearInterval(int)">
Stop interval</button>

</body>
</html>

12. 当