首页 > 代码库 > js基础3
js基础3
内置对象
内置对象就是JS提供的一套工具箱，我们通过内置可以很方便的进行一些操作。
Math对象：
Math.ceil() //向上取整，天花板
Math.floor() //向下取整，地板
Math.round() //四舍五入
Math.random() ：返回0-1之间的一个随机数，[0,1) 能取到0，取不到1
Math.abs() :取绝对值
Math.pow(num, power) :求num的power次幂
Math.sqrt(num) :对num开平方
Date对象：
"2016-07-25 10:14:09:991" 字符串的日期格式
2005，9，1日期的每一部分，注意月份是从0开始的
表示日期的毫秒形式1128096000000
Array对象：
检测目标是否是一个数组：arr instanceof Array
join方法：将数组的值拼接成字符串
toString()方法：将数组转换成字符串,调用了join方法
数组的拼接与截取：
concat()方法 ：concat 合并 注意：concat并不会影响原来的数组
1.slice方法截取数组只包含begin，不包含end。
2.slice方法的参数可以是负数，表示从后面往前数第几个元素，（慎用，容易搞混）
3.slice方法不会影响到原来的数组。
splice()方法 splice：拼接
splice() 方法用新元素替换旧元素，以此修改数组的内容。
indexOf()查找数组中元素第一次出现的位置，
HTML5中新增加了很多迭代方法，这些方法都不会修改原数组。
every()、filter()、forEach()、map()、some()
forEach()方法对数组进行遍历：forEach(参数)
filter()方法：对数组进行过滤，创建并返回一个新数组，包含了所有通过测试的元素
基本包装类型
简单数据类型是没有方法的。为了方便操作基本数据类型，JavaScript还提供了三个特殊的引用类型：String/Number/Boolean。
基本包装类型：把基本类型包装成复杂类型。
1.把简单类型转换成复杂类型：var s = new String(str);
2.调用包装类型的indexOf方法：var result = s.indexOf(“a”);
销毁刚刚创建的复杂类型
注意：基本包装类型我们只会用string的基本包装类型，number和布尔的不用，因为用的时候会引起歧义
String对象
字符串所有的方法都不会修改字符串本身，因为字符串是不可变的，操作完成会返回一个新的字符串
trim：只能去除两边的空白，内部的空白去不了
concat：字符串拼接，基本不用，拼接字符串使用+号更简单
截取：方法很多，记得越多越混乱，就记一个最好用的：substr
String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。
slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数。slice() 与 substr() 有所不同，
因为它用两个字符的位置来指定子串，而 substr() 则用字符位置和长度来指定子串。
slice：从start开始，end结束，并且取不到end
subString：从start开始，end结束，并且取不到end
substr：从start开始，截取length个字符
replace：字符串替换 var result = str.replace("a","b");只会替换一次
match（）：查找字符串中特定的字符串，并且如果找到的话，则返回这个字符
charAt（）：返回在指定位置的字符
charCodeAt（）：返回在指定的位置的字符的Unicode编码
search（）：检索与正则表达式相匹配的值
split()： 方法用于把一个字符串分割成字符串数组。
BOM
BOM基本概念
javascript的三个组成部分
ECMAScript、DOM、BOM
什么是BOM
BOM（Browser Object Model）：浏览器对象模型，提供了一套操作浏览器功能的工具
window.open与window.close
window.open(url,[name],[features]);参数1：需要载入url地址 参数2：新窗口的名称
_self:在当前窗口打开 _blank:在新的窗口打开
参数3：窗口的属性，指定窗口的大小 返回值：会返回刚刚创建的那个窗口，用于关闭
示例： var newWin = window.open("http://www.baidu.com","_blank","width=300,height=300");
newWin.close(); window.close()
location对象：
location对象也是window的一个属性，location其实对应的就是浏览器中的地址栏。
location.href = "http://www.baidu.com" 让页面跳转到百度首页
location.reload():让页面重新加载
location.reload(true):强制刷新 相当于ctrl+F5
location.reload(false):刷新 相当于F5
location的其他属性：
console.log(window.location.hash);//哈希值 其实就是锚点
console.log(window.location.host);//服务器 服务器名+端口号
console.log(window.location.hostname);//服务器名
console.log(window.location.pathname);//路径名
console.log(window.location.port);//端口
console.log(window.location.protocol);//协议
console.log(window.location.search);//参数
window.navigator的一些属性可以获取客户端的一些信息
navigator.userAgent：浏览器版本
history对象：
后退：
history.back();
history.go(-1);
前进：
history.forward();
history.go(1);
screen对象:
console.log(screen.width);//屏幕的宽度
console.log(screen.height);//屏幕的高度
console.log(screen.availWidth);//浏览器可占用的宽度
console.log(screen.availHeight);//浏览器可占用的高度
动画
offset
offset系列用于获取元素自身的大小和位置，在网页特效中有广泛应用
offset系列主要有：offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop
offsetHeight与offsetWidth
1.获取的是元素真实的高度和宽度（包括border）
2.获取到的是数值类型，方便计算
3.offsetHeight与offsetWidth是只读属性，不能设置。
style.height与style.width
1.只能获取行内样式
2.获取到的是字符串类型，需要转换
parentNode和offsetParent
parentNode始终是父元素
offsetParent是离当前元素最近的定位元素(absolute、relative)，如果没有，那就找body
offsetLeft与offsetTop
offsetLeft: 自身左侧到offsetParent左侧的距离：left + margin-left
offsetTop:自身顶部到offsetParent顶部的距离 : top + margin-top
offsetLeft与offsetTop 1.元素自身与offsetParent真实的距离 2.获取到的是数值类型，方便计算 3.只读属性，只能获取，不能设置 style.left与style.top 1.只能获取行内样式 2.获取到的是字符串，需要转换 3.可以获取，也可以设置
scroll
scroll:滚动
scroll家族用来获取盒子内容的大小和位置
offset家族用来获取盒子自身的大小和位置
scroll家族有：scrollWidth、scrollHeight、scrollLeft、scrollTop
scrollWidth与scrollHeight是盒子内容的真实的宽度和高度。与和盒子大小无关，仅仅与盒子的内容有关系。
对于有滚动条的盒子，可以使用onscroll注册滚动事件，每滚动一像素，就会触发该事件。
scrollTop是盒子内容被滚动条卷去的头部的高度。
scrollLeft是盒子内容被滚动条卷去的左侧的宽度。
获取页面的滚动坐标有兼容性问题
现代浏览器（除了IE678外的浏览器）
window.pageYOffset
IE和IE678
document.documentElement.scrollTop
未声明 DTD
document.body.scrollTop
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
function scroll() {
return {
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
};
}
client
offset家族用来获取元素自身的大小和位置
scroll家族用来获取元素内容的大小和位置
client（客户区、可视区）家族用来获取元素可视区域的大小
clientWidth与clientHeight
偏移offsetWidth: width + padding + border
卷曲scrollWidth: width + padding 不包含border 内部内容的大小
可视clientWidth: width + padding 不包含border(绿色背景的部分)
clientTop与clientLeft完全没有用，他们就是borderTop与borderLeft
但是：如果有滚动条，还会包含滚动条的宽度，但是见过滚动条在上边或者左边的？
网页可视宽高
现代浏览器浏览器（除了IE678外的浏览器）
window.innerWidth
IE678 (标准模式)
document.documentElement.clientWidth
IE678（怪异模式，不声明DTD）
document.body.clientWidth
function client(){
return{
width:window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height:window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
onresize事件会在窗口被调整大小的时候发生。
事件对象
为什么要有事件对象？
在执行事件的时候，需要一些和事件相关的数据。
在触发事件的时候，会产生一个事件对象event，这个对象中包含了与事件相关的信息。
但是在IE678里面，支持window.event
事件对象的常用属性
screenX与screenY：光标相对于屏幕左上角的水平位置与垂直位置
clientX与clientY：光标相对于页面可视区左上角的水平位置和垂直位置
pageX与pageY：光标相对于网页（文档）左上角的水平位置与垂直位置（推荐使用）
在IE678中，没有pageX与pageY属性，但是我们可以通过scrollTop + clientY的方式进行计算来获得。
function getPageX（event）{
return event.pageX || event.clientX + document.documentElement.scrollLeft;
}
function getPageY(event){
return event.pageY || event.clientY + document.documentElement.scrollTop;
}
清除选中文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
移除事件：
语法：target.removeEventListener(type, listener, [useCapture])
//type：事件类型
//listener:事件处理程序，注意要移除事件的话，在注册的时候不能使用匿名函数。
//useCapture:与注册的时候一致。
在IE678里面不支持addEventListener和removeEventListener，而是支持attchEvent和detachEvent两个方法。
注意：
1.在attchEvent里面的this指向的不是事件的调用者，而是window（奇葩）
2.attachEvent的type一定要加上on，不然没效果
注册事件
function addEvent(obj,type,fn){
if(obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj.attachEvent){
obj.attachEvent("on" + type,fn);
}else{
obj["on"+type] = fn;
}
移除事件
function removeEvent(obj,type,fn){
if(obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj.detachEvent){
obj.detachEvent("on"+type,fn);
}else{
obj["on"+type] = null;
}
}
事件流
当HTML元素产生一个事件时，这个事件会在元素节点与根节点之后的路径传播，路径
所经过的节点都会接受到这个事件，这个传播过程称为DOM事件流
DOM事件流分为冒泡事件流和捕获事件流
事件冒泡：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这个过程称为事件冒泡；
说白了就是：当我们触发了子元素的事件后，元素对应的事件也会被触发
这个事件从原始元素开始一直冒泡到DOM树的最上层
不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload（关闭页面）
阻止事件冒泡
正常浏览器：event.stopPropagation() 可以阻止事件冒泡
IE678 ： event.cancelBubble = true;阻止冒泡
function stopPropagation(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
事件捕获
老版本浏览器只支持事件冒泡，不支持事件捕获（我们基本用的都是事件冒泡）
事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递
事件的三个阶段
捕获阶段 目标阶段，执行当前对象的事件处理程序 冒泡阶段
注意：事件的三个阶段一直都在执行，只不过我们通常都会去干预冒泡阶段，而不会去干预捕获阶段
正则
正则表达式（Regular Expression）：用来匹配规律规则的表达式
用途：表单验证、高级搜索、生化科学
通过构造函数创建
var regExp = new RegExp(/\d/);
正则表达式的字面量（推荐）
var reg = /\d/;//正则表达式字面量
| 表示或 或的优先级最低 可以通过()提升优先级
[]表示一个字符的位置，[]里面写这个位置可以出现的字符
^表示该位置不可以出现的字符
^表示开头 []里面的^表示取反
$表示结尾
*：表示能够出现0次或者更多次，x>=0;
+：表示能够出现1次或者更多次，x>=1；
?：表示能够出现0次或者1次，x = (0|1);
{n}：表示能够出现n次
{n,}：表示能够出现n次或者多次
{n,m}：表示能够出现n次到m次
{}大括号限定出现的次数
[]表示一个字符的出现位置
()用来提升优先级js基础3
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。