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()在字符串后默认添加一个换行符（ ）

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（）