JavaScript学习小结

1. JavaScript的发展历史

   最初由王景公司研发一门叫做LiveScript，后与sun合作并将语言名字改为了JavaScript同时微软在JavaScript基础上研发了直接的Jscript

2. JavaScript的简介

   JavaScript是一门基于客户端的脚本编程语言（简称JS）
   客户端：客户只需要下载浏览器，浏览器内置了JavaScript执行的引擎

3. 特点 ： 解释性 基于对象 事件驱动 跨平台 安全性

• 作用： 交互式操作 表单验证 网页特效 Web游戏 服务器脚本开发

List item

JavaScript的基础
JavaScript和HTML的结合
内部式：将JavaScript代码写在HTML中
在HTML中的任意位置使用

JavaScript对象
Array对象
作用：数组独享，用于数据的存储
创建
var 数组名 = new Array()
var 数组名 = new Array(元素…)
var 数组名 = [元素…]
方法
join([分隔符])：将数组转换为字符串，并且使用特定的分隔符进行分割
sort(sortfunction)：将数组按照指定规则进行排序
pop()：删除并返回数组的最后一个元素
push(元素)：添加元素到数组的最后
shift()：删除并返回数组的第一个元素
Boolean对象
Number对象
Date对象
Math对象
String对象
创建
var str = new String(“xx”);
var str = “xxx”;
属性
length：字符串长度
方法
concar()
indexOf()
subString()
RegExp对象
概述：是一个正则表达式对象
正则表达式：检查字符串是否满足某种规则，这个规则就是正则表达式
符号
元字符
量词
常用方法
test()：检查字符串是否满足正则表达式
Global对象
概述：是一个全局对象，属性和方法可以直接使用，不需要创建对象
方法
encodeURI(str)：以URI的方式进行编码
decodeURI(str)：以URI的方式进行解码
eval(str)：计算数学表达式
parseInt(str)：将字符串转换为一个整数
isNaN(str)：检查是否不是数字
Function对象
作用：用于定义函数
创建
function 函数名(参数列表){函数体;}
var 函数名 = function(参数列表){函数体;}
属性
length：获取参数列表的长度
return：用于返回值
注意
function函数可以传递多个参数，调用的时候可以多或者少传参数，函数根据形参的个数获取实参的个数
函数中也可以定义函数

BOM对象和DOM对象的区别
BOM对象：Borwser Object Model
DOM对象：Document Object Model

JavaScript的BOM操作
简单的DOM操作
将html页面看到的内容看作一个文档那么就可以通过DOM操作对文档进行增删改查（html中的标签）操作
查找元素：var obj = document.getElementById(id);
html中的标签操作的内容
属性
文本信息
CSS样式
简单的事件介绍
静态的绑定事件
直接在标签中οnclick=“函数名称”
动态的绑定事件
作用：降低耦合度
步骤
获取到需要绑定的对象
对象.onclick = 函数名称
Window对象
创建：不需要创建直接使用，直接使用window来获取Window对象,并且window可以省略
属性
location：获取Location对象
history：获取History对象
screen：获取Screen对象
navigator：获取Navigator对象
document：获取Document对象
方法
打开对话框形式的方法
alert()：警告框
confirm()：确认框
prompt()：提示信息对话框
周期函数方法
一次性周期函数
setTimeout(function,毫秒,参数列表)：在指定的毫秒数后调用函数或计算表达式
clearTimeout()
周期函数
setInterval(function,毫秒,参数列表)：按照指定的周期（毫秒计时）来调用函数或计算表达式
cleatInterval()
打开和关闭浏览器窗口
打开窗口：open(url,name)
关闭窗口：close()
对象
Location对象
创建：通过window调用属性location，window可以省略因此可以直接使用小写location来获取对象
属性
href：完整的URL资源路径
host：获取主机名和端口号
hostname：获取主机名
port：获取端口号
方法
reload()：刷新页面
History对象
创建：通过window调用属性history，window可以省略因此可以直接使用小写history来获取对象
属性
length：当前窗口的历史记录个数
方法
forward()：类似浏览器上的前进按钮
back()：类似浏览器上的后退按钮
go(number)：指定跳转到具体的一个历史记录，整数表示前进，负数表示后退
Screen对象
Navigator对象
Document

JavaScript的DOM操作
概述：W3C文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式，DOM操作可以进行增删改查html中的标签、属性、文本、CSS样式、注释
三大部分
DOM的核心
Document对象：文档对象
创建：直接使用document就可以获取到Document对象
属性
firstChild
lastChild
方法
查找的方法
getElementById(id):通过id来获取元素(Element)
getElementsByClassName(class)：通过类名来获取元素们(Elements)
getElementsByTagName(标签名)：通过标签名来获取元素们(Elements)
getElementsByName(name)：通过标签的name属性来获取元素们(Elements)
创建的方法
createAttribute(name)：属性节点
createComment()：注释节点
createElement()：元素节点
createTextNode()：文本节点
Element对象：元素对象
创建
通过document对象调用createElement创建
通过document对象获取元素的方法来获取Element对象
属性
parentNode：获取父节点
firstChild：获取第一个子节点（注释、文本、标签）
lastChild：获取最后一个子节点（注释、文本、标签）
nextSibling：获取下一个紧接着的一个节点
previousSibling：获取上一个紧接着的一个节点
方法
获取的方法
getAttribute(“属性名”)
删除的方法
removeAttribute(“属性名”)
removeChild(对象名)
设置的方法
setAttribute(“属性名”,“属性值”)
节点的添加和删除
remove()：删除节点
removeChild()：父节点删除子节点
appendChild()：父节点添加子节点到最后一位
Attribute对象：属性对象
Text对象：文本对象
Comment对象：注释对象
Node对象：节点对象，节点对象是以上所有对象的父对象
XML DOM
HTML DOM
属性
获取：var 名称 = 通过元素对象.属性名
修改：元素对象。属性名 = “修改内容”
删除：元素对象.removeAttribute(“属性名”)
文本
innerText：获取标签中的文本
innerHTML：获取标签中的内容（文本和标签）
value：获取input标签中的值

事件
鼠标事件
onclick：单击事件
ondblclick：双击事件
onmousedown：鼠标按下事件
onmouseup：鼠标弹起事件
onmouseover：鼠标移入事件
onmouseout：鼠标移出事件
键盘事件
onkeypress：键盘按下并松开事件
表单事件
onfcous：获得焦点事件
onblur：失去焦点事件
onchange：内容改变事件

List item

	onsubmit：表单提交事件
	onselect：被选中事件
对象事件
	onload：页面或图片加载完成事件