JavaScript的进阶学习笔记
正则用来定义一些字符串的规则,程序可以根据这些规则来判断一个字符串是否符合规则, 也可以将一个字符串中符合规则的内容提取出来。
创建正则表达式
var reg = new RegExp("正则","匹配模式");
var reg = /正则表达式/匹配模式
1 2
复制
语法:
表达式 | 说明 |
---|---|
i | 忽略大小写 |
g | 全局匹配模式 |
表达式 | 说明 |
---|---|
| | 或 |
[] | 定义匹配的字符范围 |
[^ ] | 除了 |
[a-z] | 小写字母 |
[A-Z] | 大写字母 |
[A-z] | 任意字母 |
[0-9] | 任意数字 |
表达式 | 说明 |
---|---|
{n} | 正好n次 |
{m,n} | m-n次 |
{m,} | 至少m次 |
+ | 至少1次 {1,} |
? | 0次或1次 {0,1} |
* | 0次或多次 {0,} |
表达式 | 说明 |
---|---|
\ | 在正则表达式中使用\作为转义字符 |
\. | 表示. |
\\ | 表示\ |
. | 表示任意字符 |
\w | 相当于[A-z0-9_] |
\W | 相当于[^A-z0-9_] |
\d | 任意数字 |
\D | 除了数字 |
\s | 空格 |
\S | 除了空格 |
\b | 单词边界 |
\B | 除了单词边界 |
方法: test()
日期的对象,在JS中通过Date对象来表示一个时间
创建对象
创建一个当前的时间对象
创建一个指定的时间对象
方法:
getDate()
当前日期对象是几日(1-31)
getDay()
返回当前日期对象时周几(0-6)
getMonth()
getFullYear()
从 Date 对象以四位数字返回年份。
getHours()
返回 Date 对象的小时 (0 ~ 23)。
getMinutes()
返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()
返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds()
返回 Date 对象的毫秒(0 ~ 999)。
getTime()
now()
可以获取当前代码执行时的时间戳
Math属于一个工具类,它不需要我们创建对象,它里边封装了属性运算相关的常量和方法 我们可以直接使用它来进行数学运算相关的操作
方法:
Math.PI
常量,圆周率
Math.abs()
绝对值运算
Math.ceil()
向上取整
Math.floor()
向下取整
Math.round()
四舍五入取整
Math.random()
Math.pow(x,y)
求x的y次幂
Math.sqrt()
对一个数进行开方
Math.max()
求多个数中最大值
Math.min()
求多个数中的最小值
Document Object Model 文档对象模型
文档对象模型,通过DOM可以来任意来修改网页中各个内容
在网页中浏览器已经为我们提供了document对象,它代表的是整个网页,它是window对象的属性,可以在页面中直接使用。
document查询方法:
根据元素的id属性查询一个元素节点对象:
根据元素的name属性值查询一组元素节点对象:
根据标签名来查询一组元素节点对象:
通过具体的元素节点来查询:
读取标签内部的文本内容
<h1>h1中的文本内容</h1>
<script>元素.firstChild.nodeValue</script>
1 2
复制
document对象的其他的属性和方法
读取元素的属性:
语法: 元素.属性名
例子:
修改元素的属性:
innerHTML
innerHTML和innerText
读取和修改内联样式
使用style属性来操作元素的内联样式
读取内联样式: 语法:
元素.style.样式名
1
复制
修改内联样式: 语法:
元素.style.样式名 = 样式值
1
复制
通过style修改的样式都是内联样式,由于内联样式的优先级比较高, 所以我们通过JS来修改的样式,往往会立即生效, 但是如果样式中设置了!important,则内联样式将不会生效。
读取元素的当前样式
正常浏览器
//获取元素的宽度
getComputedStyle(box , null)["width"];
1 2
复制
IE8
元素.currentStyle.样式名
1
复制
其他的样式相关的属性 注意:以下样式都是只读的
clientHeight 元素的可见高度,指元素的内容区和内边距的高度
clientWidth 元素的可见宽度,指元素的内容区和内边距的宽度
offsetHeight 整个元素的高度,包括内容区、内边距、边框
offfsetWidth 整个元素的宽度,包括内容区、内边距、边框
offsetParent 当前元素的定位父元素 离他最近的开启了定位的祖先元素,如果所有的元素都没有开启定位,则返回body
offsetLeft,offsetTop 当前元素和定位父元素之间的偏移量 offsetLeft水平偏移量 offsetTop垂直偏移量
scrollHeight,scrollWidth 获取元素滚动区域的高度和宽度
scrollTop,scrollLeft 获取元素垂直和水平滚动条滚动的距离
判断滚动条是否滚动到底
scrollHeight - scrollTop = clientHeight
1
复制
浏览器在加载一个页面时,是按照自上向下的顺序加载的,加载一行执行一行。
如果将js代码编写到页面的上边,当代码执行时,页面中的DOM对象还没有加载,此时将会无法正常获取到DOM对象,导致DOM操作失败。
解决方式一:
<body>
<button id="btn">按钮</button>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
};
</script>
</body>
1 2 3 4 5 6 7 8 9
复制
解决方式二:
<script>
window.onload = function(){
var btn = document.getElementById("btn");
btn.onclick = function(){
};
};
</script>
1 2 3 4 5 6 7 8
复制
事件指的是用户和浏览器之间的交互行为。比如:点击按钮、关闭窗口、鼠标移动。。。
我们可以为事件来绑定回调函数来响应事件。
可以在标签的事件属性中设置相应的JS代码 例子:
可以通过为对象的指定事件属性设置回调函数的形式来处理事件 例子:
当响应函数被调用时,浏览器每次都会将一个事件对象作为实参传递进响应函数中, 这个事件对象中封装了当前事件的相关信息,比如:鼠标的坐标,键盘的按键,鼠标的按键,滚轮的方向。。
可以在响应函数中定义一个形参,来使用事件对象,但是在IE8以下浏览器中事件对象没有做完实参传递,而是作为window对象的属性保存 例子:
元素.事件 = function(event){
event = event || window.event;
};
元素.事件 = function(e){
e = e || event;
};
1 2 3 4 5 6 7 8 9
复制
事件的冒泡指的是事件向上传导,当后代元素上的事件被触发时,将会导致其祖先元素上的同类事件也会触发。
事件的冒泡大部分情况下都是有益的,如果需要取消冒泡,则需要使用事件对象来取消
可以将事件对象的cancelBubble设置为true,即可取消冒泡 例子:
元素.事件 = function(event){
event = event || window.event;
event.cancelBubble = true;
};
1 2 3 4
复制
使用 对象.事件 = 函数
的形式绑定响应函数,它只能同时为一个元素的一个事件绑定一个响应函数,不能绑定多个,如果绑定了多个,则后边会覆盖掉前边的
addEventListener()
attachEvent()
定义一个函数,用来为指定元素绑定响应函数:
addEventListener()中的this,是绑定事件的对象 attachEvent()中的this,是window 需要统一两个方法的this
/*
* 参数:
* obj 要绑定事件的对象
* eventStr 事件的字符串(不要on)
* callback 回调函数
*/
function bind(obj , eventStr , callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr , callback , false);
}else{
/*
* this是谁由调用方式决定
* callback.call(obj)
*/
//IE8及以下
obj.attachEvent("on"+eventStr , function(){
//在匿名函数中调用回调函数
callback.call(obj);
});
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
复制
提取一个专门用来设置拖拽的函数
/*
* 提取一个专门用来设置拖拽的函数
* 参数:开启拖拽的元素
*/
function drag(obj){
//当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown
obj.onmousedown = function(event){
//设置box1捕获所有鼠标按下的事件
/*
* setCapture()
* - 只有IE支持,但是在火狐中调用时不会报错,
* 而如果使用chrome调用,会报错
*/
/*if(box1.setCapture){
box1.setCapture();
}*/
obj.setCapture && obj.setCapture();
event = event || window.event;
//div的偏移量 鼠标.clentX - 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
obj.style.left = left+"px";
obj.style.top = top+"px";
};
//为document绑定一个鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时,被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//当鼠标松开时,取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();
};
/*
* 当我们拖拽一个网页中的内容时,浏览器会默认去搜索引擎中搜索内容,
* 此时会导致拖拽功能的异常,这个是浏览器提供的默认行为,
* 如果不希望发生这个行为,则可以通过return false来取消默认行为
*
* 但是这招对IE8不起作用
*/
return false;
};
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61
复制
element.onmousewheel = function(event){
event = event || window.event;
//event.wheelDelta 可以获取鼠标滚轮滚动的方向
//向上滚 120 向下滚 -120
//wheelDelta这个值我们不看大小,只看正负
//wheelDelta这个属性火狐中不支持
//在火狐中使用event.detail来获取滚动的方向
//向上滚 -3 向下滚 3
//判断鼠标滚轮滚动的方向
if(event.wheelDelta > 0 || event.detail < 0){
//向上滚
}else{
//向下滚
}
/*
* 使用addEventListener()方法绑定响应函数,取消默认行为时不能使用return false
* 需要使用event来取消默认行为event.preventDefault();
* 但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错
*/
event.preventDefault && event.preventDefault();
/*
* 当滚轮滚动时,如果浏览器有滚动条,滚动条会随之滚动,
* 这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
*/
return false;
};
//为火狐绑定滚轮事件
bind(element, "DOMMouseScroll", element.onmousewheel);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
复制
onkeydown——按键被按下
onkeyup——按键被松开
获取按键:
设置input不能输入数字:
input.onkeydown = function(event){
event = event || window.event;
//console.log(event.keyCode);
//数字 48 - 57
//使文本框中不能输入数字
if(event.keyCode >= 48 && event.keyCode <= 57){
//在文本框中输入内容,属于onkeydown的默认行为
//如果在onkeydown中取消了默认行为,则输入的内容,不会出现在文本框中
return false;
}
};
1 2 3 4 5 6 7 8 9 10 11
复制
Browser Object Model 浏览器对象模型
判断浏览器:
var ua = navigator.userAgent;
console.log(ua);
if(/firefox/i.test(ua)){
alert("你是火狐!!!");
}else if(/chrome/i.test(ua)){
alert("你是Chrome");
}else if(/msie/i.test(ua)){
alert("你是IE浏览器~~~");
}else if("ActiveXObject" in window){
//如果通过UserAgent不能判断IE11,还可以通过一些浏览器中特有的对象,来判断浏览器的信息
//比如:ActiveXObject
alert("你是IE11,枪毙了你~~~");
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
复制
代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
如果直接打印location,则可以获取到地址栏的信息(当前页面的完整路径)
如果直接将location属性修改为一个完整的路径,或相对路径 则我们页面会自动跳转到该路径,并且会生成相应的历史记录
location = "http://www.baidu.com";
location = "01.BOM.html";
1 2
复制
assign() 用来跳转到其他的页面,作用和直接修改location一样
location.assign("http://www.baidu.com");
1
复制
reload() 用于重新加载当前页面,作用和刷新按钮一样 如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面
location.reload(true);
1
复制
replace() 可以使用一个新的页面替换当前页面,调用完毕也会跳转页面 不会生成历史记录,不能使用回退按钮回退
location.replace("01.BOM.html");
1
复制
代表浏览器的历史记录,可以通过该对象来操作浏览器的历史记录 由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页 而且该操作只在当次访问时有效
length 属性,可以获取到当成访问的链接数量
alert(history.length);
1
复制
back() 可以用来回退到上一个页面,作用和浏览器的回退按钮一样
history.back();
1
复制
forward() 可以跳转下一个页面,作用和浏览器的前进按钮一样
history.forward();
1
复制
go() 可以用来跳转到指定的页面 它需要一个整数作为参数:
这些BOM对象在浏览器中都是作为window对象的属性保存的,可以通过window对象来使用,也可以直接使用
定时调用
可以将一个函数,每隔一段时间执行一次
参数:
返回值: 返回一个Number类型的数据 这个数字用来作为定时器的唯一标识
clearInterval() 可以用来关闭一个定时器 方法中需要一个定时器的标识作为参数,这样将关闭标识对应的定时器
// clearInterval() 可以接收任意参数
// 如果参数是一个有效的定时器的标识,则停止对应的定时器
// 如果参数不是一个有效的标识,则什么也不做
clearInterval(timer);
1 2 3 4
复制
在开启定时器之前,需要将当前元素上的其他定时器关闭
创建一个可以执行简单动画的函数:
//尝试创建一个可以执行简单动画的函数
/*
* 参数:
* obj:要执行动画的对象
* attr:要执行动画的样式,比如:left top width height
* target:执行动画的目标位置
* speed:移动的速度(正数向右移动,负数向左移动)
* callback:回调函数,这个函数将会在动画执行完毕以后执行
*/
function move(obj, attr, target, speed, callback) {
//关闭上一个定时器
clearInterval(obj.timer);
//获取元素目前的位置
var current = parseInt(getStyle(obj, attr));
//判断速度的正负值
//如果从0 向 800移动,则speed为正
//如果从800向0移动,则speed为负
if(current > target) {
//此时速度应为负值
speed = -speed;
}
//开启一个定时器,用来执行动画效果
//向执行动画的对象中添加一个timer属性,用来保存它自己的定时器的标识
obj.timer = setInterval(function() {
//获取box1的原来的left值
var oldValue = parseInt(getStyle(obj, attr));
//在旧值的基础上增加
var newValue = oldValue + speed;
//判断newValue是否大于800
//从800 向 0移动
//向左移动时,需要判断newValue是否小于target
//向右移动时,需要判断newValue是否大于target
if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
newValue = target;
}
//将新值设置给box1
obj.style[attr] = newValue + "px";
//当元素移动到0px时,使其停止执行动画
if(newValue == target) {
//达到目标,关闭定时器
clearInterval(obj.timer);
//动画执行完毕,调用回调函数
callback && callback();
}
}, 30);
}
/*
* 定义一个函数,用来获取指定元素的当前的样式
* 参数:
* obj 要获取样式的元素
* name 要获取的样式名
*/
function getStyle(obj, name) {
if(window.getComputedStyle) {
//正常浏览器的方式,具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式,没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
复制
//定义一个函数,用来向一个元素中添加指定的class属性值
/*
* 参数:
* obj 要添加class属性的元素
* cn 要添加的class值
*
*/
function addClass(obj , cn){
//检查obj中是否含有cn
if(!hasClass(obj , cn)){
obj.className += " "+cn;
}
}
/*
* 判断一个元素中是否含有指定的class属性值
* 如果有该class,则返回true,没有则返回false
*
*/
function hasClass(obj , cn){
//判断obj中有没有cn class
//创建一个正则表达式
//var reg = /\bb2\b/;
var reg = new RegExp("\\b"+cn+"\\b");
//返回结果
return reg.test(obj.className);
}
/*
* 删除一个元素中的指定的class属性
*/
function removeClass(obj , cn){
//创建一个正则表达式
var reg = new RegExp("\\b"+cn+"\\b");
//删除class
obj.className = obj.className.replace(reg , "");
}
/*
* toggleClass可以用来切换一个类
* 如果元素中具有该类,则删除
* 如果元素中没有该类,则添加
*/
function toggleClass(obj , cn){
//判断obj中是否含有cn
if(hasClass(obj , cn)){
//有,则删除
removeClass(obj , cn);
}else{
//没有,则添加
addClass(obj , cn);
}
}
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
复制
JavaScript Object Notation JS对象表示法
JS中的对象只有JS自己认识,其他的语言都不认识
JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别, 并且可以转换为任意语言中的对象,JSON在开发中主要用来数据的交互
JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号,其他的和JS语法一致 JSON分类:
JSON中允许的值:
将JSON字符串转换为JS中的对象 在JS中,为我们提供了一个工具类,就叫JSON 这个对象可以帮助我们将一个JSON转换为JS对象,也可以将一个JS对象转换为JSON
JSON.parse() —— json --> js对象 可以将以JSON字符串转换为js对象 它需要一个JSON字符串作为参数,会将该字符串转换为JS对象并返回
JSON.stringify() —— JS对象 ---> JSON 可以将一个JS对象转换为JSON字符串 需要一个js对象作为参数,会返回一个JSON字符串
JSON这个对象在IE7及以下的浏览器中不支持,所以在这些浏览器中调用时会报错
eval() 这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块 如果不希望将其当成代码块解析,则需要在字符串前后各加一个() eval()这个函数的功能很强大,可以直接执行一个字符串中的js代码, 但是在开发中尽量不要使用,首先它的执行性能比较差,然后它还具有安全隐患
var str = '{"name":"节奏葳","age":21,"gender":"男"}';
var obj = eval("("+str+")");
1 2 3
复制