javaScript学习笔记

1.基本格式

表示在之间的是文本类型

2.可以与html文件独立使用

需要这种格式插入

3.JS在页面中的位置

4.变量

变量要先声明再赋值，如下： var mychar; mychar=”javascript”; var mynum = 6; 变量可以重复赋值，如下： var mychar; mychar=”javascript”; mychar=”hello”; 注意: 1. 在JS中区分大小写，如变量mychar与myChar是不一样的，表示是两个变量。 2. 变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用。

6.逻辑语句

7.函数

8.输出

JavaScript-输出内容（document.write） document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。 第一种:输出内容用”“括起，直接输出”“号内的内容。

document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。

第二种:通过变量，输出内容

var mystr="hello world!"; document.write(mystr); //直接写变量名，输出变量存储的内容。

第三种:输出多项内容，内容之间用+号连接。

var mystr="hello"; document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接

第四种:输出HTML标签，并起作用，标签使用”“括起来。

var mystr="hello"; document.write(mystr+" ");//输出hello后，输出一个换行符 document.write("JavaScript");

9.警示框

效果：

10.确认对话框

11.消息对话框

结果：

12.打开新的窗口

JavaScript-关闭窗口（window.close） close()关闭窗口 用法： window.close(); //关闭本窗口 或 <窗口对象>.close(); //关闭指定的窗口 例如:关闭新建的窗口。

var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中 mywin.close();

13.认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。 先来看看下面代码: 将HTML代码分解为DOM节点层次图:

14.通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。 语法: document.getElementById(“id”) 看看下面代码:

15.innerHTML 属性

innerHTML 属性用于获取或替换 HTML 元素的内容。 语法: Object.innerHTML 注意: 1.Object是获取的元素对象，如通过document.getElementById(“ID”)获取的元素。 2.注意书写，innerHTML区分大小写。 我们通过id=”con”获取

元素，并将元素的内容输出和改变元素内容，代码如下: 结果：

16.改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？ 语法: Object.style.property=new style; 注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。 基本属性表（property）: 看看下面的代码:

改变

元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：

<p id="pcon">Hello World!</p> <script> var mychar = document.getElementById("pcon"); mychar.style.color="red"; mychar.style.fontSize="20"; mychar.style.backgroundColor ="blue"; </script>

结果: 灰色(#CCC)

17.显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。 语法： Object.style.display = value 注意:Object是获取的元素对象，如通过document.getElementById(“id”)获取的元素。 value取值:

看看下面代码:

18.控制类名（className 属性）

className 属性设置或返回元素的class 属性。 语法： object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个css样式来更改该元素的外观 看看下面代码，获得

元素的 class 属性和改变className： 结果：