JavaScript总结
（一）基础
JavaScript是一门（客户端）脚本语言
JavaScript文件的扩展名 .js
您可以在文本字符串中使用反斜杠对代码行进行换行。如：docment.write("hello \ sjdlk");
方法是能够在对象上执行的动作，就是函数
输入的数据为字符串，要转换。
原生对象要声明，初始化，如var tody=new Date(); var d=gtody.etDate();
内置对象不用初始化，直接被使用，只有两个原生对象，Global，Math2
instanceof查看一个对象是否为一个类的实例
基本数据类型undefined、Null、Boolean、number、string
内置对象array,date,boolean、date、math、function,number,string,events,regexp
global,parseint(),parsefloat()
(二)面向对象
面向对象：就是将程序中的所有单位看作为对象
特点：封装，继承（对象冒充，call（），apply（）），多态
arry类
属性
constructor
//index
//input
length
prototype
方法
array.concat()
array.join()
shift（）
pop（）
unshift（）
push()
reverse（）
sort（）
slice()
indexof（）
splice()
toSource()
toString()
toLocaleString()
valueof()
Date类
方法
getDate()
getDay()得到星期几
getMonth()
getFullYear()
getHours()
getMinutes()
getSeconds()
getMiliseconds()
setDate()
setDay()
setMonth()
setFullYear()
setHours()
setMinutes()
setSeconds()
setMiliseconds()
toString()
toLocaleString()
toLocaleDateString()
toLocaleTimeString()
Math类
属性
PI
方法
abs()
ceil()
floor()
max(x,y,..)
min(x,y,..)
pow(x,y)
randow()
round(x)
Number类
属性
MAX_VALUE
MIN_VALUE
NaN
NEGATIVE_infinity
POSITIVE_infinity
方法
toFixed()
String类
属性
方法
anchor()
big()
blink()
bold()
charAt()
charCodeAt()
fixed()
fontcolor()
fontsize()
concat()
italics()
link()
replace()
slice()
small()
split()
strike()
sub()
sup()
//indexof()
lastindexof()
toLowerCase()
toUpperCase()
（三）事件
事件是用户或浏览器操纵网页时发生的行为
事件流是网页上的元素相应事件的顺序
为响应一个事件而被调用的函数称为事件处理程序
事件流事：件冒泡，事件捕获
阻止冒泡：属性cancelBubble=true，方法stopPropagation（）
事件处理程序
事件发生时采取什么处理程序
DOM2级：addEventListener（），removeEventListener（）；
有三个参数addEventListener（“事件名”，函数名，是否处理程序要用事件冒泡或事件捕获）
第三个参数设置为true，在事件捕获阶段
第三个参数设置为false，在事件冒泡阶段
这里事件名，不加on
Event对象
event对象包含了事件发生时的特定信息：包括触发事件对象，事件发生时的鼠标（键盘）事件
event是window对象的一个属性
IE中可直接访问event，因为这时event作为全局变量来使用
DOM标准中规定：event对象只能作为仅有的参数传递给事件处理程序
事件属性方法见P45
事件类型：
鼠标事件
click//只是点击那瞬间的效果
dblclick
mousedown//按下后效果一直在mousdown与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生
mouseup
mousemove
mouseenter
mouseover
mouseleave
mouseout
键盘事件
keydown、keyup、keypress
HTML事件
load（window.onload）、unload、abort、error、resize、scroll
submit、reset（onreset）、focus、blur、change、select
onchange
DOM
标记：告诉浏览器要做什么
DOM是一种XML文档的解析标准，对HTML进行处理
HTML注重展示效果。
XML越简单越好。
节点又称标记。
DOM提供的API，可以对节点树进行增删改查。
API就是一堆函数（函数库），DOM中属性都是API
DOM原理：
不使用IE浏览器。
body里的两种元素块级内嵌。
元素：包括标记，内容。如<div>123wwe</div>
123wwe就是文本节点
HTML注释节点<!--sdf-->
在Mozilla浏览器中，换行、空格被视为文本节点。
表单中用name才能提交值，value
append在元素后追加文本
文件选择框file
table>tr*3>td*4快捷
table｛border-collapse：collapse不分开，｝
DOM用于获取HTML中的元素，并且可以修改它
获取指定节点
getElementByTagName（“某元素/标签/标记名”）；得到是集合
getElementByName()
getElemeentById()
创建和操作节点
createElement(TagName)
createTextNode(Text)
apendChild()将给定的节点追加到某个节点的尾部；
function s(){
var op=document.createElement("p");
var optext=document.createTextNode("hahahaha");
op.appendChild(optext);
document.body.appenChild(op);
}
removeChild（），replaceChild（new,old），insertBefore(new,old);
HTML DOM特征功能
oimg.srrc="test1.html";
table方法
P92
innerHTML
改变HTML内容
innerTEXT包含标记
innerHTML
getAttribute(),setAttribute(),removeAttribute()
BOM
没有相关标准
窗口、导航对象、定位对象、屏幕对象
表单里不能嵌套表单
显示图片可用img 、type="img"
*通配符选择器不推荐用，效率低
body自带边距，要设置body{margin:0;}
hr水平分割线
window对象
window表示整个浏览器窗口
document.body.offsetWidth，容器自身宽度
document.body.offsetHeight，容器自身高度
div.offsetLeft;容器自身边界与浏览器（父元素）左窗口的距离，在设置定位后才能用
导航打开新窗口
window.open("URL"，"新窗口名字"，"字符特性p64页");
window.open();
window.close();
top.opener,用子窗口关闭父窗口,用这个比较安全
var fu=div.top.opener找到父窗口，fu.close关闭父窗口
系统对话框
window对象的alert（）、confirm（）、prompt（）方法。
时间间隔和暂停
以后还是用setTimeout
setTimeout（函数名/“hansu(num)/hans()”，毫秒数);
document.write会重载页面
setinterval（）
clearTimeout（）
clearInterval（）
disable无效=true
历史
ctrl+h,查看记录
window.history.go（-1）或history.go(-11)负数后退多少页，反则。。
history.back()前一个URL
history.forward（）后一个URL
document对象
属性
referrer
title，该属性可读写，可改变页面的标题
top.document.title="new title"；
url
对象的集合：就是查看元素的个数
anchors
forms
images
links
options
elements
var aa=fomm.forms;alert(aa);//2
document.write()
document.writeln()在字符串后默认添加一个换行符（\n）
location对象
解析URL
herf
host
pathname
port
protocol
search
跳转到新页面
location.herf（"新页面路径"）;精确
location.assign（""）;
location.replace没有历史记录
刷新页面
reload重新载入当前页
location.reload(false)从浏览器缓存中重载，默认为false
location.reload(true)从服务器端重载
document.location==window.location
navigator对象
获取浏览器信息
window.navigetor
navigetor.appname
第六章使用DOM操纵样式表
html中left权重大于right
rgb（0,0,0）黑色
第七章表单编程
js是用来做表单验证的
表单：input、select、textarea
提交按钮input type="submit"
input type="image"
form对象.submit()
1.对form元素进行脚本编写
post，get的区别
传递密码、有个人隐私的信息、中文信息、上传文件用post
默认字符集（iso8859-1）
中文<meta charset="UTF-8">
简体中文gbk,简体中文big5
1）获取表单元素方式
var a=document.getElementById();定位一个元素的方法
var oform=document.forms;使用文档表单集合
var b=document.forms[0];得到表单第一个元素
var c=document.myform; myform是name的值
2）访问表单域（字段）
访问表单里面的内容和属性
每个表单字段包含在表单表单的Elements集合中
var ofirstFiled=oform.Elements[0];得到第一个表单字段
还是用定位一个元素的方法好
3）表单提交按钮
普通按钮submit，和js绑定才能使用button，图像按钮，type=“image”src=“图片路径”
<form action="test1.html"id=forms,name=forms,onsubmit="return false;"/>//onsubmit="return false;"阻止表单提交,js能提交
<input type=submit value="提交"/>
<input type=image src="1.jpg"/>
<input type="button" onclick="document.form.submit()" />和js绑定才能提交
</form>
4）属性，方法，所有表单字段（除了隐藏字段）都有这些
disabled属性
readonly属性，只读
form属性
blur（）方法
blur事件
focus（）方法
focus事件
change
2.对文本框进行脚本编写
支持属性value，以获取文本框中的文本
1）获取更改本框
value属性是一个字符串，得到的是字符串值，可以使用字符串的所有属性和方法
value.length，计算长度（个数）；
value可以给文本框赋新值
2）选择文本框
两种文本框都支持select（）方法
select（）选择文本的内容
3）文本框事件
blur，focus，change，select
4）实现自动选择文本框
onfoucs="this.select";
5）文本框
style{resize:none;}//不能放大，缩小
textarea的提示直接写在标记中间<textarea name="" id=""cols="" rows="" style="resize:none;">请输入内容</textarea>
3.对列表框和组合框脚本编写
1）下拉列表
访问选项
options集合
option元素属性：text显示文本（文本结点），value显示值（html中的属性值），index指示它在options集合中的位置
length
2）获取/更改选中项
select的selectedIndex属性返回当前被选中的选项的索引，如果没有选中返回-1;要在提交后才看得到alert里的值
select元素的multiple属性值为multiple，允许多选
multiple:允许多选
select的属性selected指示选项是否被选中
size设置显示多少个
selectedIndex//选项是否被选中，selectedindex.length,选中返回下标，没选中返回-1；
selectedIndex设置返回下拉列表中被选项目的索引号
4.复选框和单选框
有和input元素共同的对象和属性
还有其他属性
checked属性，指示控件的状态，是否被选中
defaultchecked默认是否被选中
和input一样的方法，还可以用1click（）
<form action="1.html">
<input type="radio" name="sex" value="m"id="male"/><label for="male">男</label>//绑定用label的for与input的id相同的值
<input type="radio" name="sex" value="n"id="female"/><label for="female">女</label>
//这时name值是为了分组，value是为了提交表单值
</form>
5.表单进行验证
is NaN（参数）
字符串下标
（八）正则表达式
Regular Express(RegExp)
规定字符串格式。
基于人类神经发展起来的。
减少所写的验证代码，执行效率不一定高。
所有编程语言都可以用。
学习常用的：
1.什么是正则表达式？用于描述复杂规则的字符串的工具。用来验证字符串的
2.语法格式
3.最重要的是方法
RegExp.test()检测字符串string，看它是否含有与regEpx相匹配的文本
test（）最好用
var reg=/^lovo&/;//^表示匹配值的开头$表示匹配值的结束
div1.innerHTML=reg.test(txt.value);//
4.元字符
+、这个符号左边的第一个字符连续出现一次或多次
*、这个字符左边的第一个字符出现零次或多次
？、这个字符左边的第一个字符出现零次或一次
\s用于匹配单个空格符，包括tab和换行符
\S用于匹配除空格以外的所有字符
\d用于匹配从0到9的数字
\w用于匹配字母，数字或下划线字符
\W用于匹配所有与\W不匹配的字符
.用于匹配除换行符之外的所有字符
“^”开始标记，“$”结束标记
5.限定符 n必须为正整数
{n}确定次数
{n,m}n<=m次数在n到m之间包括n、m
{n,}次数>=n
{}表示出现的次数，[]对应位置上的取值选项。[]{2,4}2表示[]里面的每个元素出现的次数
（）表示一整体匹配值，不能改变
6.常用的正则表达式
邮件地址：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
校验是否全由数字组成:/^[0-9]{1,20}$/
校验邮政编码:/^[0-9]{6}$/
校验密码：只能输入6-20个字母、数字、下划线
/^(\w){6,20}$/
中文汉字:/^[\u4e00-\u9fa5]{2,}$/
事件处理方式有几种：传统处理方式，现代处理发送
传统处理方式
document.getElementById("id").onchange=funtion(){}
获得元素两种方法BOM，DOM
在js中直接用blur（像素值）模糊度，invert（0~1）饱和度，opacity（0~10%）透明度
img.style.opacity=0.1;
img.style.blur="10px";
1.使用步骤：在webstore中插入文件jquery-1.12.2.min.js
才能在JavaScript中写jquery代码
jquery
1.是一种快速，简洁的javaScript库，写在JavaScript中，在JavaScript中调用
2.它结合（BOM，DOM）的优点
3.获取元素（定位元素）采用css选择器的形式
4.版本
1）*.*（1.4.4、1.7.2、1.12.4）通用；
2）*.*（2.2.4）HTML5；
3）*.*（3.1.1）ES6；
5.浏览器的兼容性
6.jQuery是一些API，是一个查件
7.jQuery用$代替
8.选择器
9.css中有：ID选择器、类选择器、元素选择器、并集选择器。。。。
大于1gt(greater than)
小于lt（less than）
常用的
length对象中元素的个数
index()搜索匹配的元素，并返回相应的索引值，从0开始
slice(strat，end)选取一个匹配的子集
一、jQurey中的DOM操作
1.添加
在jQuery中声明变量 var $n=("<p></p>");
1）标签内
append
prepend
2）标签外
after
before
2.删除
remove
detach
empty置空
3.复制
clone
clone+true
4.替换
旧节点replaceWith（新节点）
新节点replaceAll（旧节点）
5.包裹
wrap有多少个包裹多少个
wrapall
wrapinner
6.属性节点
获取元素属性attr（属性名），attr(属性名，属性值)
修改多个attr（｛属性名：属性值，。。。｝）
删除removeattr
7.样式操作
AddClass
removeClass
toggleClass切换样式（综合添，删效果）；
hasClass（）判断某个元素是否有某个样式，返回true，false
8.设置与获取HTML和文本值
html(),innerHTML属性 包括元素之间的内容（标签和内容）
text(),innerTEXT属性只包括文本
val(),value属性获取表单里面的控件的值，设置表单控件默认值
9.遍历节点
children（）取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合，只考虑子元素而不考虑所有后代元素
parent（）取得一个包含着所有匹配元素的唯一父元素的元素集合
parents（）取得一个包含着所有匹配元素的祖先元素的元素集合（不包括根元素）
children（x）/parents(x) x可以选定指定的元素，就是对同辈元素进行筛选
next（）同辈下一个节点，prev（）同辈上一个节点
Sibling（）所有不包括自己的同辈节点
ancestor desecondant//在给定祖先元素下匹配所有后代元素
parent>child//在给定的父元素下匹配所有的子元素
:animated匹配所有正在执行动画效果的元素
20.CSS DOM操作
with（），height（）
position（）
offset（）相对于当前窗口偏移值（top，left）
hover（）事件
jQuery动画
show（）hide（），toggle（）
fadein（）fadeout（），Fadeto（），FadeToggle（）
slideup（）slidedown（），slideToggle（）
