JavaScript
定义
只有一个弱类型var 变量名；变量可以不声明直接赋值，不推荐使用
变量没有赋值经默认赋予undefined
Null空与undefined一样
Number
Boolean
String
组成
ECMscript script标准
DOM 文档对象模型
BOM 浏览器对象模型
语法
<script type=”text/javascript”>
</script>
Alert（“提示信息”）
Prompt（“提示信息”，“输入内容这里为空”）
如：Prompt（“请输入信息”，“”）
数组
Var 数组名 =new Array （长度）;
赋值 var 数组名 =new Array （“啊”，”啊”，”啊”，”啊”）;
通过下标赋值
数组名 [0]= “d”;
数组名 [1]= “d”;
数组名 [2]= “d”;
常用属性方法
属性lenght
方法：
Join（） 把数组的所以元素放入一个字符串中，通过分隔符分割
Sort（） 对数组排序
Push（） 尾部添加一个或多个元素，返回新长度
运算符
多两个：=== ！== 数据类型一致时判断
控制语句
If 条件判断
Switch 多分支
For、 while
For-in 循环
Alert 弹出消息框
Prompt 输入信息
经验
<script>...<script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存中即可
特点
像HTML页面中添加交互行为
脚步语言，语法和java类似
解释性语言，边执行边解释
外部引用
<script src=”export.js” type=”text/javascript”><script>
注意
作为导入文件的<script>标签不要在其内部写内容
For循环是用var定义数据类型
内部js
<input type=”butter” value=”弹出框” onclink=”javascript:alert(‘欢迎’)”>
Debug
- 在浏览器中设置断点：打开开发者工具——找到Source菜单——在左侧目录中找到对应HTML文件双击
- 在想要进行调试的位置设置断点（直接在行号处单机左键即可出现蓝色标识即可）
- 启动调试直接通过刷新页面实现
- 常用快捷键：F8停止调试，F10单步执行，F5启动调试（刷新页面）
函数
函数：类似于java中的方法，是完成特定任务的代码语句块
使用更简单：不用定义属于某个类，直接使用
函数分类：系统函数，自定义函数
系统函数
parseInt（“字符串”）将字符串转换为整形数字
parseFloat（“字符串”）将字符串转换为浮点型数字
IsNaN（）检查其他参数是否是非数字
Document.getElementsByTagName(“标签”)[shu]
事件：
Onload一个页面或一副图像完成加载
Onclick鼠标单击某个对象
Onmouseover鼠标指导移到某个元素上
Onmouseout鼠标移出 涉及子集
Onmouseleave鼠标移出 不涉及子集，在子元素中移动不会显示
Onkeydown某个键盘按键被按下
Onkeyup键盘抬起
Onchange域的内容被改变
自定义函数
语法：
Function 函数名（参数1，参数2，参数3...）{
JavaScript语句
Return 返回值
}
调用函数：
事件名称=“函数名（）”；
注释
在HTLM中注释分两种
<!——内容——> 常用注释
<%——内容——%> 又称隐式注释 特点
BOM：
innerHTML=”” 改变内容
常用属性
Window:
History 有关客户访问的URL的信息
Location 有关当前URL的信息
Document:
Referrer 返回载入当前文档的URL
URL 返回当前文档URL
语法：
Windows.
Document.
常用方法：
Prompt（） 显示可提示用户输入对话框
Alert（） 显示带有提示和确定按钮的警示框
Confirm（） 一个带提示确定取消的对话框
Close（） 关闭浏览器
Open（） 打开一个新浏览器窗口，加载给定URL指定文档
SetTimeout（） 指定毫秒数后调用函数或计算表达式
setInterval（） 按指定周期调用指定毫秒数后调用函数或计算表达式
Document:
getElementByid()
getElementsByName()
getElementsByTagName()
Write()
DOM
Document Object Model文档对象模型
节点属性
parentNode 返回节点的父节点
childNode 返回子节点集合
firstChild 返回节点的第一个子节点，最普遍访问元素的文本节点
lastChild 返回节点的最后一个子节点
NextSibling 下一个节点
previousSibling 上一个节点
Element（元素）属性
firstElementChild 返回节点的第一个子节点
LastElementChild 返回节点的最后一个子节点
NextElementSibling 下一个节点
PreciousElementSibling 上一个节点
节点类型
NodeNeme（节点名称）
nodeValue（节点值）
nodeType（节点类型）
Element 元素 1
Attr 属性 2
Text 文本 3
Commrnts 注释 8
Document 文档 9
创建节点
createElement（“标签名”） 创建一个标签
A.appendChild(B) 把B节点追加至A节点末尾
insertBefore（A，B） 把A节点插入B节点之前
clone（deep） 复制某个指定节点
删除和替换节点
removeChild（“节点名”） 删除指定节点
repaceChild（“新节点”，“旧结点”） 用其他节点（新节点）替换指定节点（旧结点）
HTML中元素的属性
offsetLeft 返回当前元素左边界到他上级元素左边界的距离，只读属性
offsetTop 返回当前元素上边界到它上级元素的上边界的距离，只读
offsetHeight 返回元素高度
offsetWidth 返回元素宽度
offsetParent 返回元素的偏移容器，即对最近动态定位的包含元素引用
scrollTop 返回匹配元素的滚动条的垂直位置
scrollLeft 返回匹配元素的滚动条的水平位置
chientWidth 返回元素的可见宽度 窗口的宽高
clientHeight 返回元素的课件高度 窗口的宽高
方法：
如：Document.documentElement.scrollTop||document.body.scrollTop (获取滚动条距离顶部位置)
面向对象
自定义对象
字面量赋值：通过一个对象直接赋值给对象，全部以逗号隔开，最后一个不用
如：
Var flower={
Name:”长春花”，
Genera:”佳作他可”，
ShowName:function(){ alert(this.name) }
}
Flower.showName;
常见的内置对象
String（字符串） 对象：
Length属性
indexOf（） replace（）
Date（时间） 对象：
Get X X X：获取年，月，日，时，分，秒
Set x x x：设置年，月，日，时，分，秒
Array（数组） 对象：
Length 属性
Sort（） concat（） join（）
Boolean（逻辑） 对象
True 或false
Math（算数） 对象：
Round（） max（） min（）
RegExp （正则表达式） 对象：
Constructor
构造器，
Instanceof
检测是否属于
Prototype
这是一个指针，指向一个对象
用于在函数外添加属性
如：
Function Flower（）{ }
Flower.prototype.name=”名”;
Flower.prototype.showName=function(){
Alert(this.name);
}
原型
一个构造通过prototype可以找到原型 a.prototype
原型通过constructor可以找到他的构造 a._proyo_.constructor
一个对象通过_proto_可以对的他的原型 a._proyo_
对象通过constructor可以找到他的构造 a.constructor
在javascript中创建对象的方式：
通过object创建对象
New Object（）
通过创建构造函数重用代码：
Function person（_name_,_age_）{ this.name=_name_； this.age=_age_ }
Var o2=new person（“tom”，20）；
Var o3=new person（“can”，15）；
通过字面量赋值方式创建对象
Var o4={ name：“tom”， age：20， show：function（）{内容} }
o4.show（）；
Constructor和instanceof
Constructor：指定对象的构造函数
如：person.constructor==person
Instanceof:检测对象的类型
如：person instanceof Person
一般用于条件判断，当对象属于某个函数时才执行对应的操作
原型对象：
若是函数通过：prototype属性
若是对象通过：_proto_
作用：通过prototype为函数添加属性或方法
如：function person(){ }
Person.prototype.name=”tom”;
Person.prototype.show=function(){ }
javascript中的函数：
函数名称首字母大写
Function（）{ }；定义一个匿名函数（一般为方法赋值）
构造函数中的this关键字指代当前函数
JavaScript中的继承
通过原型继承
Function a（）{ }
Function b（）{ }
实现b继承a： b.prototype=new a();
通过call（）方法继承
Function a（name）{ this.name=name }
Function b（）{ A.call（this，“tom”）；}
在继承关系中，直接创建子类对象即可访问父类属性和方法
会读会画原型图
通过原型链了解函数对象之间的层级关系以及属性方法的访问权限
JQuery
创建于2006年
是对JavaScript对象和函数的封装，是目前最流行的程序库
写的少做的多（write less，do more）
用于访问操作Dom元素
控制页面效果，处理事件
能与Ajax技术完美结合（ajax用于前后台数据交换的技术，属于异步请求技术）
优势：
对DOM的封装，写的少做的多
文件体积小
提供了一些强大的选择器
兼容性好
相对于JavaScript操作简单，性能较好
获取：
分类：
开发版jquery.3.2.1.js
发布版jquery.3.2.1.min.js
引入
<script src=”js.jquery.3.2.1.js” type=”text/javascript”><script>
注：只做引入jquery文件，标签内不可添加代码
加载
语法$(document).ready(function(){});
与window.onload的区别：
Jquery当页面结构加载完成后即可加载（不考虑图片、音乐等）
Onload当页面内容加载完整后再加载（考虑图片音乐等）
编写数量：
Jquery：同页面可存在多个
Onload：同页面只能存在一个
简化：
Jquery：$(function(){})
Onload:无
Jquery方法：
Html（）：获取或设置元素文本内容
css（）：设置元素样式
$（“选择器”）.css（“属性”，“属性值”）；
$（“选择器”）.css（{“属性”：“属性值”，“属性”，“属性值”}）
Addclass（）：给元素添加或删除样式
$（“选择器”）.addclass（“类样式名称”）；
$（“选择器”）.removeClass（“类样式名称”）；
show（）：显示隐藏的元素
$("#a").show();
Hide（）：隐藏元素
$("#a").hide();
Eq（）：获取同类元素中指定索引位置的元素
Siblings（）：获取所有的兄弟元素
参数：获取同级所有指定类型的元素
如：$（“div”）.siblings（“span”）；获取所有与div同级的span元素
$（“div”）.siblings（）：获取所有与div同级的元素不分类型
Jquery选择器
层次选择器：
后代选择器 元素，元素 获取被选择下的所有指定元素
子选择器 元素>元素 获取指定元素下的子元素
相邻选择器 元素+元素 获取指定的元素后一个的同级元素
兄弟选择器 元素~元素 获取所有与他同级的元素
属性选择器：
E[属性] 通过属性名称获取对应的元素
E[属性=‘属性值’] 通过属性及对应属性值获取指定的元素
E[属性！=‘属性值’] 属性对应属性值不是当前值得元素
E[属性^=‘字符’] 获取属性值中以指定字符开头的元素
E[属性$=‘字符’] 获取属性值中以指定字符结尾的元素
E[属性*=‘字符’] 获取属性中包含指定字符的元素
过滤选择器：
Eq[index] 索引值为index的元素
First 获取第一个指定的元素
Last 获取最后一个
Gt（index） 大于索引值为index的所有元素
Lt（index） 索引小于index的所有元素
Odd 获取奇数行元素
Even 获取偶数行元素
Not（选择器） 获取不包含指定选择器的元素
Header 获取标题元素
可见性过滤选择器
Visible 获取所有显示的元素
Hidden 获取所有隐藏的元素
事件
鼠标事件
单机事件：click
鼠标移入：mousemove
鼠标移出：mouseout
鼠标移过：mouseenter
鼠标离开：mouseleave
键盘事件
Keydown 按下时
Keyup 释放时 常用
Keypress 产生可打印字符时
KeyCode 键盘对应码 event或keyCode属性
绑定事件
Bind（“事件名称”，function） 绑定事件
Unbind（“事件名”，解除绑定的对应方法） 解除绑定
绑定多个函数：
$（选择器）.bind（{“事件”：function（）{动作}，“事件”：function（）{}，……}）
Toggle（） 连续点击事件
toggleClass（）等同于添加删除
动画
Show（）.hide（） 控制元素胡显示隐藏
语法:show（“速度”，function（）{}）
以页面左上角为起始点
常用参数：
Slow 慢
Fast 快
Normal 正常
可设置毫秒数：1000
Function（）{}：动作执行完毕后触发的函数
FadeIn（）淡入
Fadeout（）淡出
以元素本身变化
都脱了标准文档流
Slideup 高度变短
Slidedown 高度边长
自定义动画
Animate（{params}，speed，callback）
Params定义动画css属性
Speed速度
Callback
Find（） 找子元素
Attr（） 获取属性和设置属性
Offset（） 获取元素与边界的距离
Width（） 获取元素宽度
Jquery操作document
样式操作
css（）：设置获取元素样式
设置：$（“div”）.css（“color”，“red”）；
获取：$（“div”）.css（“color”）
Addclass（）：给元素添加类样式
RemoveClass（）：删除类样式
toggleClass（）：是addClass与removeClass（）组合，实现类样式添加删除
Offset（）：元素左边界到父级边框的距离
ScrollsTop（）：滚动条距离顶部距离
Onscroll（）：滚动事件
scrollLeft（）：滚动条到左边的距离
Width（）获取或设置元素宽度
内容操作
Html（）：获取或设置元素内容，获取匹配的第一个，设置同text（），可以设置元素节点
Text（）：获取或设置元素内容，获取匹配的所有元素，（）中是什么显示什么
Val（）：获取或设置文本的value值，操作value的值
属性操作
Attr（）设置或获取元素的属性或属性值
获取属性值：$（“选择器”）.attr（“属性名称”）
设置属性值：$（“选择器”）.attr（“属性名称”，“属性值”）
removeAttr（）删除元素的属性或属性值
$（“选择器”）.removeAttr（“属性名称”）
节点操作
查找：强大的选择器
标签
类
Id
层次
结构伪类
属性
创建节点：
$（“节点”）；
如：var node=$（“<li>内容</li>”）或$（“<li class=‘a’>内容</li>”）
插入节点：
append（）；在指定元素后追加新元素
appendTo（）；将一个元素添加到指定元素后
Prepend（）；在指定元素前添加新元素
penpendTo（）；将一个元素添加到指定元素前
After（）：在指定元素后追加
inserAfter（）
Before（）：在指定元素前追加
inserBefore（）
注：
append（）\prepend（）：为指定元素拼接子元素添加同perpend（）
after（）\before（）：为指定元素追缴同级元素
删除节点：
remove（）：删除元素及绑定事件
Empty（）：清空元素内容
Detach（）：删除元素但保留元素事件
修改节点：
replaceWith（）：修改指定节点
ReplaceAll（）：修改所有所在位置的元素
用法与append（）/appendTo（）同理
复制节点：
Clone（true/false）
配合使用插入方法插入到指定位置
如：var a =$（“选择器”）.clone（true/false）；的到一个节点
a.appendTo（$（“选择器”））
遍历节点
Each（）：遍历
End（）：清空之前的设置从新开始
Eq（n）：获取第n个位置的指定元素
Find（）：获取制动元素内对应元素
Siblings（）：获取指定元素的所有同级元素
first（）：获取指定元素的第一个元素
Last（）：获取指定元素的最后元素
Next（）：获取指定元素的下一个元素
Ptev（）：获取指定元素的上一个元素
Each()遍历
$（“节点”）.each（function（i，v））{
Console.log（i+“……”$(v).html()）;
}
或：
Var obj={“1”：“tom”，“2”：“jerry”}
$.each（obj.function（i，v）{
Console.log（i+“……”+v）；
}）
表单验证
减轻服务器压力
保证输入字符分合法性
实现表单验证
获取表单中的值
在Javascript或jquery中进行判断
在表单的事件中触发JavaScript进行判断
验证
非空：值==“”
是否存在某字符，indexOf（‘字符’）==-1
长度：值length
判断是否
表单事件和方法
事件：
Onblur（） 失去焦点，当光标离开某个文本框是触发
Onfocus（） 获得焦点，当光标进入某个文本框时触发
方法：
Blur（） 从文本域中移开焦点
Focus（） 在文本域中设置焦点，即获得光标
Select（） 获取文本域中的内容，突出显示输入区域的内容
正则表达式
Exec 检索字符中是否是正则表达式的匹配
Test 检索字符串中指定的值
Global 是否全局匹配
ignoreCase 忽略大小写
Multiline 多行匹配
/……/ 声明正则开始结束
^ 开始
$ 结束
\s 空白字符
\d 数字[0~9]
\w 字母，数字，下划线{a-zA-Z0-9}
. 换行符意外的所有字符
“\S,\D,\W均与小写相反”
{n} 匹配n次
{n，} 匹配至少n次
{n，m} 匹配n次，不超过m次
+ 至少匹配一次
？ 匹配0次或1次
* 零次或多次
Validity属性
valueMissing 验证是否必填项
True空
False非空
typeMismatch 与type是否匹配
True匹配
False不匹配
PatternMismatch验证与正则匹配
True匹配
False不匹配
tooLong长度超范围
rangeUnderflow小于min时true
H5：
Required 非空验证
Placehold 提示信息
Pattern 正则验证
1141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
