Javascript入门

关于js

首先js是一种脚本语言，可以用操作页面元素和浏览器，在js中，有三大核心分别为
- ECMAScript 也就是语法
- DOM 文档对象模型
- BOM 浏览器对象模型（Browser Object Model）
关于js的语法基本和java差不多，不过在类，函数等方面有一些不同，比如for in 等。
下面先讲BOM

BOM

即浏览器对象模型

BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

也就是使用BOM我们可以使用js达到操作浏览器的作用，比如打开窗口，前进，后退等等。

这是BOM的结构
先讲window对象

window对象

window对象的常用属性
- history 有关客户访问过得URL信息
- location 有关当前的URL信息
例如

window.location="http://www.baidu.com"；

跳转到百度
window对象的常用方法
- prompt() 显示可以使用户输入的对话框
- alert() 显示一个带有提示信息和一个确定按钮的警示框
- confirm() 显示一个带有提示信息，确定和取消按钮的对话框
- close() 关闭浏览器的窗口
- open() 打开一个新的浏览器窗口，加载指定的URL的文档
- setTimeout() 在指定的毫秒数后调用函数或者计算表达式
- setInterval() 按照指定的周期来调用函数表达式

confirm()与alert ()、 prompt()区别
alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变
prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息
confirm( )：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

• open()方法
  

  window.open(“弹出窗口的url”,”窗口名称”,”窗口特征”)

history对象

常用方法- back() 加载history对象的中的前一个URL- forward() 加载history对象中的后一个URL- go() 加载history对象中的具体URL例如`history.back() 等价于 history.go(-1)`同样`history.forward() 等价于 history.go(1)`

location对象

常用属性- host 设置或返回主机名和当前URL的端口号- hostname 设置或返回当前URL的主机名- href 设置或返回完整的URL常用方法- reload() 重新加载当前文档- replace() 用新的文档替换当前的文档可以使用href实现跳转和刷新

Document对象

常用属性- referrer 返回载入当前文档的URL- URL 返回当前文档的URL可以通过referrer属性判断是否是通过某个指定的链接来到达指定的网页，用来防止盗链。常用方法- getElenmentById() 返回拥有指定ID的第一个对象的引用。- getElenmentByName() 返回带有指定名称的对象的集合。- getElenmentByTagName() 返回带有指定标签名的对象的集合。- write() 向文档写文本，html表达式或者js代码。可以通过Document对象来改变层，标签中的内容。

Javascript内置的对象

• Array：用于在单独的变量名中存储一系列的值
• String：用于支持对字符串的处理
• Date：用于操作日期和时间
• Math：用于执行常用的数学任务，它包含了若干个数字常量和函数

这里js中的数组可以自动调整大小，而且可以当作map使用，使用键值对来存取。

Math来做数学计算，如果要精确到几位的话，只能先扩大该位的数倍，然后取整，然后再除回来。

Dom

DOM：Document Object Model（文档对象模型）

dom分为三个方面，DOM Core，HTML-Dom,CSS-Dom.

访问节点

使用getElenment系列方法范文指定节点

• getElenmentById()
• getElementsByName()
• getElementByTagName()
  分别为根据id,根据名字，根据标签名。

根据层次关系访问节点

element的属性
- firstElementChild 返回节点的第一个子节点，最普遍的用法是访问该元素的第一个元素节点
- lastElementChild 返回节点的最后一个元素子节点
- nextElementSibling 下一个元素子节点
- previousElementSibling 上一个元素节点

这里需要注意的就是上一个元素节点，下一个元素节点，对于空格等，文本等都算是一个节点，换行也是。如果在div中有一个小间隙，那么很可能是因为两个div中有一个空格导致的。

节点的信息

• nodeName 节点名称
• nodeValue 节点值
• nodeType 节点类型

其中节点类型是数值，常用类型为如下
- 元素element 1
- 属性attr 2
- 文本text 3
- 注释comments 8
- 文档document 9

操作节点

操作节点的属性

getAttribute("属性名")
得到属性的值
setAttribute("属性名","属性值")
设置属性的值

创建和插入节点

createElement( tagName)

创建一个标签名为tagName的新元素节点

A.appendChild( B)


把B节点追加至A节点的末尾

insertBefore( A,B )


把A节点插入到B节点之前

cloneNode(deep)

复制某个指定的节点

删除和替换节点

removeChild( node)

删除指定的节点

replaceChild( newNode, oldNode)属性attr

用其他节点替换指定的节点

操作节点的样式

• 改变样式的属性
  style属性
  className属性

通过各种触发事件来改变css样式
触发事件如下：
onclick 当用户单击某个对象时调用事件
onmouseover
鼠标移到某元素之上
onmouseout
鼠标从某元素移开
onmousedown
鼠标按钮被按下

可以直接改变style属性的值，形式为
HTML元素.style.样式属性＝"值"

举个栗子：
document.getElementById("titles").style.fontSize="25px ";

或者事先写好css样式表
直接改变className
像这样：
HTML元素.className="样式名称"


使用js来改变css可以获得非常强大的效果，通过对元素的显示，隐藏，放大，配合css3的新特性，简单的代码就足以做出简洁优雅的特效。