Javascript的数据类型
基本数据类型
Nummber
String
Boolean
特殊数据类型
Null
Undefined
undefined和null的区别
区别
Undefined表示没有为变量设置值或属性不存在
Null表示变量是有值的，只是其值为null
但比较是undefined派生自null
Javascript把他们定义为相等的
系统对话框
Alert()警告对话框
Confirm()消息对话框
Prompt()提示对话框
常用系统函数
将字符串转换为整型数字parseint(“字符串”);
将字符串转换为浮点型数字parseFloat(“字符串”);
检查其参数是否是非数字isNaN(x);
自定义函数语法(参数，return，返回值，都可选，可有可无)
Function 方法名(参数1,参数2......){
Return 返回值;
}
var a="aqwerbtyuxiocp";
var b=a.length;
document.write(b+"<br />");
document.write("查找指定位置的字符"+a.charAt(4)+"<br />");
document.write("查找指定字符的位置"+a.indexOf("b")+"<br />");
document.write("按长度截取"+a.substr(3,7)+"<br />");
document.write("按前后下标截取"+a.substring(3,7)+"<br />");
document.write(a.toUpperCase()+"<br />");
document.write(a.toLowerCase()+"<br />");
document.write("拆分"+a.split("")+"<br />");
document.write("替换"+a.replace("ocp","AAA"));History对象
保存用户上网记录，可通过window.history属性访问
属性length 返回历史记录列表中的网址数
方法：
back()加载History对象列表中的前一个URL
forward()加载history对象列表中的下一个URL
go()加载history对象列表中的某个具体URL
history.back() 等于history.go(-1)
history().forward() 等于 history(1)
Location对象
包含有关当前URL的信息，可通过window.location属性访问
属性href 设置或返回完整的URL (跳转一定要用'='赋值)
方法：
reload() 重新加载当前文档
replace() 用新的文档替换当前文档
Document对象代表整个HTML文档
方法：
getElementByid() 返回对拥有指定id的第一个对象的引用.唯一
getElementByName() 返回带有指定名称的对象的集合
getElementByTagName() 返回带有指定标签名的对象集合
write()向文档写文本，HTML表达式或javaScript代码
属性innerHTML设置或获取开始标签和结束标签之间的内容。
超时函数
setTimeout('a()',2000);
间歇函数
setInterval("a()",2000);
Array对象
| 类别 | 名称 | 描述 |
|---|---|---|
| 属性 | length | 属性设置或返回数组中的元素的数目 |
| 方法 | join() | 把数组的所有元素放入一个字符串，通过逗号或指定的分隔符进行分离 |
| sort() | 对数组排序 | |
| push() | 像数组末尾添加一个或更多元素并返回新的长度 | |
| forEach() | 遍历数组，forEach()方法不会直接修改原始数组 |
Date对象
截取当前日期和时间
newDate()获取当前日期
getDate()返回Date对象的一个月中的每一天
newDay()返回Date对象的星期中的每一天，其值介于0~6之间
getHours()返回Date对象小时数
getMinutes()返回Date对象的分钟数
getSeconds()返回Date对象的秒数
getMonth()返回Date对象的月份，其值介于0~11之间
getFullYear()返回Date对象的年份，其值为4位数
getTime()返回自某一刻(1970年1月1日以来的毫秒数)；
Math对象
ceil()对参数进行上舍入
floor()对参数进行下舍入
round()返回0~1之间的函数
1~100(含1和100)之间的数量
Math.floor(Math.random()*100+1);
DOM文档对象模型
nodeName:节点名称
元素节点的标签名称
属性节点的属性名称
文本系节点的nodeName永远是#text
文档节点的nodeName永远是#document
nodeValue：节点值
文本节点包含的文本
属性接节点的属性值
对文档节点和元素节点不可用
nodeType：节点类型
Element(元素(1))
Attr(属性(2))
Text(文本(3))
访问节点
| 属性名称 | 描述 |
|---|---|
| parentNode | 返回节点的父节点 |
| childNode | 返回自节点集合，childNodes[] |
| firstChild | 返回节点的第一个子节点，是访问该元素的文本节点（文本） |
| firstElementChild | 返回节点的第一个子节点，是访问该元素节点(元素) |
| lastChild | 返回节点的最后一个子节点(文本) |
| lastELementChild | 返回节点的最后一个子节点(元素) |
| nextSibling | 返回下一个节点(文本) |
| nextElementSibling | 返回下一个节点(元素) |
| previousSibling | 返回上一个节点(文本) |
| previousElementSibling | 返回上一个节点(元素) |
Style属性
HTML元素.style.样式属性=”值“;
document.getElementById("a").style.color="red";
操作节点的属性
获取节点属性
节点元素.getAttribute(“属性名”);
设置节点属性
节点属性.setAttribute("属性名","属性值");
创建节点
document.createElement("img");创建一个标签为img的新元素节点
element.cloneNode(false)复制某个指定节点，参数为布尔类型，若为true，则同时复制当前节点的所有子节点若为false
则仅复制当前节点
插入节点
A.appendChild(b)把b节点追加之A的子节点列表的末尾
parentNode.insertBefore(A,B)把A节点插入到B节点之前
删除节点
node.removeChild()删除指定的子节点
node.remove()删除当前节点
node.replaceChild(newChild,OldChild)用其他节点代替指定子节点
JQuery
$()代表jquery对象：等同于jQuery()，将DOM对象转化为jQuery对象
语法：$(document).ready()与window.onload类似，但也有区别
window.onload
必须等待网页中所有的内容加载完毕后(包括图片等)才能执行，同一页下能同时编写多个
$(document).ready,网页中所有DOM文档结构绘制完毕后即可执行，与DOM元素关联的内容(图片，视频等)可能并没有加载完，同一页面
能同时编写多个
简写：$(function){
//执行代码
}）;
基础选择器包括:ID选择器，类选择器，标签选择器，全局选择器和并集选择器。
ID选择器：$(“#title”)选取id为title的元素
类选择器$(".title")选取所有class为title的元素
标签选择器$("h2")选取所有h2元素
| 比较项 | windows.onload | $(document).ready( ) |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后( 包括图片,视屏,flash等 )才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行,与DOM元素关联的内容( 图片,视频,flash等 ) 可能并没有加载完 |
| 编写次数 | 同一网页不能同时编写多个 | 同一网页能同时编写多个 |
| 简化 | 无 | $( function(){ //执行代码 } ); |
JQuery基础选择器
| 类型 | 语法 | 描述 | 返回值 | 示例 |
|---|---|---|---|---|
| id选择器 | #id | 根据指定的id匹配元素 | 单个元素 | $( "#content" )选取id为content的元素 |
| 类选择器 | .class | 根据指定的class名称匹配元素 | 元素集合 | $( ".content" )选取class为content的元素 |
| 标签选择器 | element | 根据指定的标签名称匹配元素 | 元素集合 | $( "p" )选取所有p标签元素 |
| 全局选择器 | * | 匹配所有元素 | 元素集合 | $( "*" )选取所有元素 |
| 并集选择器 | selector1,selector2,selector3......,selectorN | 将每个选择器匹配到的元素合并到一起返回 | 元素集合 | $( "div,p,#content" )选取所有div,p和id为content的元素 |
层次选择器
| 类型 | 示例 |
|---|---|
| 后代选择器 | $("#menu span")选取#menu下的<span>元素 |
| 子选择器 | $("#menu>span")选取#menu的子元素<span> |
| 相邻元素选择器 | $("h2+dl")选取紧邻<h2>元素后的同辈元素<dl> |
| 同辈元素选择器 | $("h2~dl")选取紧邻<h2>元素之后所有同辈元素 |
基本过滤选择器
| 类型 | 示例 |
|---|---|
| :first | $(“li:first”)选取所有<li>元素中的第一个<li>元素 |
| :last | $(“li:last”)选取所有<li>元素中的最后一个<li>元素 |
| :not(selector) | $("li:not(.three)")选取class不是three的<li>元素 |
| :even | $("li:even")选取所有<li>元素中索引值是偶数的<li>元素 |
| :odd | $("li:odd")选择所有<li>元素中索引值是奇数的<li>元素 |
| :eq(index) | $("li:eq(1)")选取索引等于1的<li>元素 |
| :gt(index) | $("li:gt(1)")选取索引大于1的<li>元素 |
| :lt | $("li:gt(1)")选取索引小于1的<li>元素 |
属性选择器
| 语法 | 示例 |
|---|---|
| [attribute] | $("[href]")选取含有href属性的元素 |
| [attribute=value] | $("[href=‘#’]")选取href属性值为“#”的元素 |
| [attribute!=value] | $("[href=‘#’]")选取href属性值不为“#”的元素 |
| [attribute^=value] | $("[href^='en']")选取href属性值以en开头的元素 |
| [attribute$=value] | $("[href$='.jpg']")选取href属性值以.jpg结尾的元素 |
| [attribute*=value] | $("[href*='txt']")选取href属性中含有txt的元素 |
创建节点
| 语法 | 功能 |
|---|---|
| $("<li>大头儿子</li>"); | 创建节点 |
元素内部插入节点
| 语法 | 功能 |
|---|---|
| append(content) | $(A).append(B)表示将B追加到A中，如$("ul").append($newNode1); |
| prepend(content) | $(A).prepend(B)表示将B前置插入到A中,如$("ul").prepend($newNode1); |
元素外部插入同辈节点
| 语法 | 功能 |
|---|---|
| after(content) | $(A).after(B)表示将B插入到A之后，如$("ul").after($newNode1) |
| before(content) | $(A).before(B)表示将B插入到A之前，如$("ul").before($newNode1) |
删除整个节点
$(selector).remove([selector]);
删除整个节点，保留元素时间和数据
$(selector).detach([selector]);
清空节点内容
$(selector).empty();
复制节点
$( selector ).clone( [true | false] ); 是否复制元素的事件和数据,默认为false
替换节点
replaceAll( target ) $( A ).replaceAll( B )表示用A替换B
replaceWith( content) $( A ).replaceWith( B )表示用B替换A
获取属性值
$( selector ).attr( attribute )
设置单个属性: $( selector ).attr( attribute,value);
设置多个属性: $( selector ).attr( { attribute:value,attribute:value,.... } );
删除元素属性: $( selector ).removeAttr( attribute )
遍历子元素
获取子元素
$(”selector“).children();
获取紧邻匹配元素之后的元素
$("li:eq(1)").next().attr("class","a");
获取紧邻匹配元素之前的元素
$("li:eq(1)").prev().attr("class","a");
获取匹配元素的同辈元素
$("li:eq(1)").silbings().attr("class","a");
获取匹配元素的父级元素
$("li:eq(1)").parent().attr("class","a");
获取匹配元素的祖先元素
$("li:eq(1)").parents().attr("class","a");
each()方法规定对每个匹配元素执行的函数
$(selector).each()(function(index,element));
参数index表示当前元素下标，从0开始
参数element表示当前元素，也可以在函数中使用this表示
当function函数返回false时可以停止循环
操作元素
| 方法 | 说明 |
|---|---|
| html() | 获取当前设置所有匹配元素的HTML内容或文本内容 |
| text() | 获取设置所有匹配元素的文本内容 |
| val() | 获取和设置元素的value属性值 |
单击事件
onclick
获取焦点事件
onfocus
失去焦点事件
onblur
获取样式
$(selector).css("属性");
$(selector).css(["属性1","属性2"...])
设置样式值
$(selector).css("属性"，"属性值")
$(selector).css({"属性1":"属性值1","属性2","属性值2"})
追加样式
$(selecctor).addClass("classname");
$(selector).addClass(["classname1","classname2"...])
移除样式
$(selector).removeClass("classname")
$(selector).removeClass(["classname1","classname2"...])
$(selector).removeClass()
样式切换
$(selector).toggleClass();
事件
鼠标事件
| 方法 | 描述 | 执行时机 |
|---|---|---|
| click() | 将事件处理函数附加到click事件 | 鼠标单击时 |
| mouseover([function]) | 将事件处理函数附加到mouseover事件 | 鼠标指针移入时 |
| mouseout([function]) | 将事件处理函数附加到mouseout事件 | 鼠标指针移除时 |
| mouseenter([function]) | 将事件处理函数附加到mouseenter事件 | 鼠标指针进入时 |
| mouseleave([function]) | 将事件处理函数附加到mouseleave事件 | 鼠标指针离开时 |
mouseover()和mouseenter()方法的区别
| 方法 | 不同点 |
|---|---|
| mouseover() | 鼠标指针移动到选取的元素及其子元素上时触发 |
| mouseenter() | 鼠标指针移动到选取的元素上时触发 |
mouseover(),mouseenter()
鼠标在其被选元素的子元素上来回进入时：触发mouseover,不触发mouseenter
mouseover(),mouseenter()
鼠标在其被选元素的子元素上来回离开时：触发mouseout,不触发mouseleave
键盘事件
| 方法 | 描述 |
|---|---|
| keydown() | 按下键盘按键时 |
| keyup() | 释放键盘按键时 |
表单事件
| 方法 | 描述 |
|---|---|
| focus() | 元素获得焦点时 |
| blur() | 元素失去焦点时 |
| change() | 元素的值发生改变时 |
| submit() | submit事件只适用于<form>元素，当提交表单时触发 |
表单选择器
| 方法 | 描述 |
|---|---|
| input | 匹配所有的input,textarea,select和button元素 |
| text | 匹配所有的单行文本框 |
| password | 匹配所有的密码框 |
| radio | 匹配所有单选按钮 |
| checkbox | 匹配所有的复选框 |
| image | 匹配所有图像域 |
| file | 匹配所有文件域 |
| reset | 匹配所有重置按钮 |
| button | 匹配所有按钮 |
| submit | 匹配所有提交按钮 |
| hidden | 匹配所有不可见的元素 |
正则表达式
正则表达式就是一种用于匹配是否满足表达式规则的字符串
常用正则表达式
用户名 /^[a-z0-9-]{3,16}$/ 密码 /^[a-z0-9-]{6,18}$/ 十六进制值 /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ 电子邮箱 /^([a-z0-9_.-]+)@([\da-z.-]+).([a-z.]{2,6})$/ /^[a-z\d]+(.[a-z\d]+)@(\da-z?)+(.{1,2}[a-z]+)+$/ URL /^(https?:\/\/)?([\da-z.-]+).([a-z.]{2,6})([\/\w .-])\/?$/ IP 地址 /((2[0-4]\d|25[0-5]|[01]?\d\d?).){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/ /^(?:(?:25[0-5]|20-4|[01]?0-9?).){3}(?:25[0-5]|20-4|[01]?0-9?)$/ HTML 标签 /^<([a-z]+)(<+)(?:>(.)<\/\1>|\s+\/>)$/ 删除代码\注释 (?<!http:|\S)//.$ Unicode编码中的汉字范围 /^[\u2E80-\u9FFF]+$/
怎么使用正则表达式
1.获取正则表达式对象
var reg=new RegExp(匹配规则);//创建正则表达式对象
例:从输入框获取到了一个字符串，现在判断它是否满族匹配规则
var username=“zhangsan”;
test()方法来测试是否满足匹配
reg.test(username);//如果满足,返回true，否则返回false
2.第二种，直接写规则的正则表达式
var reg=/^匹配规则$/;
3.匹配规则
[abc] 中括号:代表中括号中任意字符出现一次
[^abc] 中括号中包含字符以外的任意字符出现一次
[a-z] a到z中的字符出现一次
[A-Z]A到Z中的字符出现一次
[0-9] 0到9的数字出现一次
\w 任意字符出现任意次
\W 任意非字符出现任意次
\D 任意非数字出现任意次
\d 任意数字出现任意次
{5} 前面的内容出现五次
{1,6} 前面的内容至少出现一次，最多出现五次
*： 匹配前一项,出现一次
+: 匹配前一项，出现1次或多次。 ?: 匹配前一项，出现0次或1次
4.匹配对象,创建匹配对象的时候可以用两个参数
第一个参数:代表的是要满足匹配的规则
第二个参数:代表的是附加参数
-
：i 忽略匹配内容的大小写
-
: g 在全局范围内进行匹配，
-
: m 进行多行匹配。
5.常见表达式规则
用户名: 4-16位，字母开头
var reg=/^[a-zA-Z0-9] [a-zA-Za-z0-9]{3,15}$/;
密码： 4-10位，数字或者字母
var reg = /^[a-zA-Z0-9]{4,10}$/;
年龄: 0-120岁
var reg =(1[0-1]|[1-9])?\d ;
邮箱：任意字符@任意字符.两位或者三位字母 出现一次或者两次
var reg = /^\w+@\w+(.[a-zA-Z]{2,3}){1,2}$/;
手机号：首字母1开头 接着是356789任意一个数字出现一次，数字出现9次
var reg = /^1[356789]\d{9}$/;
使用HTML5的方式验证表单
HTML5新增属性
placeholder :提供一种提示（hint），输入域为空时显示，获得焦点输入内容后消失
required 规定输入域不能为空
pattern 规定验证input域的模式（正则表达式）
validity属性
validityState对象
stepMismatch
输入的值不符合step特性所推算出的规则。用于填写数值的表单元素可能需要同时设置min、max和step特性，这就限制了输入的值必须是最小值与step特性值的倍数之和。例如范围从0到10，step特性值为2，因为合法值为该范围内的偶数，其他数值均无法通过验证。如果输入值不符合要求，则stepMismatch属性返回true，否则返回false
customError
使用自定义的验证错误提示信息。使用setCustomValidity( )方法自定义错误提示信息：setCustomValidity(message)会把错误提示信息自定义为message，此时customError属性值为true；setCustomValidity("")会清除自定义的错误信息，此时customError属性值为false。
自定义对象(两种方式)
基于object对象创建自定义对象
var 对象名称=new object()；
使用字面量赋值方式创建自定义对象
var student={
name：”张三"，
age：18，
showname:function(){
alert(this.name);
}
}
定义构造函数,用以创建特定类型的对象(首字母大写,以区别其他函数)
function Student(name,age,email,hobby){
this.name=name;
........
this.showname=function(){alert(this.name)}
}
扫一扫
3002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
