API备忘录
Bom常见API
- 获取浏览器信息
var ua = navigator.userAgent
if (ua.indexOf('Chrome')){
console.log("这是一个chrome浏览器!");
}
- 获取屏幕宽度和高度
screen.width
screen.height
- url拆解
// 获取当前页面网址(也可以通过赋值进行跳转)
location.href
// 获取协议
location.protocol
// 获取路径(不包含域名)
location.pathname
// 获取get信息
location.search
// 获取锚点信息
location.hash
- 根据浏览器历史,前进或后退
// 浏览器前进一个页面
history.forward()
// 浏览器后退一个页面
history.back()
Dom操作
- 获取节点
document.getElementById("test3"); // 单个
var pList = document.getElementsByTagName("p") // 集合
// 获取父元素
var parentNode = a1.parentElement;
console.log(parentNode);
// 获取子元素
var childs = parentNode.childNodes;
console.log(childs);
- 创建并添加节点
var a1 = document.createElement('a');
a1.innerHTML = "Youtebe";
a1.style.fontSize = '100px';
a1.style.color = "#c03035";
a1.href = "https://www.youtube.com/"
document.getElementsByTagName('body')[0].appendChild(a1)
- 删除节点
// 删除子元素节点
parentNode.removeChild(childs[0])
更改节点属性
// prototype/property(针对javascript对象的属性)
// 获取样式
pList[0].style.width
// 修改样式
pList[0].style.width = '100px'
// 获取className
pList[0].className
// 修改className
pList[0].className = 'colorP'
// Attribute(针对dom节点的属性)
var p = pList[1]
p.getAttribute('style')
p.setAttribute('style', 'font-size: 50px')
Attribute 和 prototype的区别:
- Attribute针对的主体是dom对象
- prototype针对的是javascript对象
关于时间
- 获取年/月/日/时/分/秒
// 当前时间 Fri Mar 02 2018 12:30:35 GMT+0800 (CST)
var dt = new Date()
// 获取年份
console.log("当前年份:"+dt.getFullYear());
// 获取月份(0-11)
console.log("当前月份"+ (dt.getMonth()));
// 获取日
console.log("当前日:"+dt.getDate());
// 获取小时
console.log("当前小时:"+dt.getHours());
// 获取分钟
console.log("当前分钟:"+dt.getMinutes());
// 获取秒
console.log("当前秒数:"+dt.getSeconds())
题目: 获取2018-03-02格式的字符串
function getNowDate(dt){
if(!dt){
dt = new Date();
}
var year = dt.getFullYear();
var month = dt.getMonth();
var day = dt.getDate();
// 将月份加1
month = month + 1;
// 将月份补齐到两位
if (month <= 9){
month = "0" + month;
}
// 将日补齐到两位
if (day <= 9){
day = "0" + day;
}
return year+"-"+month+"-"+day;
}
关于 Math
题目: 获取字符串, 要求是长度一致的字符串(10位)
(Math.random()+"0000000000").slice(2, 12)
数组 操作API
- 获取数组长度
var arr = [100, 300, 200, 500, 400]
arr.length
- forEach 对"每一个"元素进行函数运算(无法产生返回值)
arr.forEach(function(item, index){
console.log("索引:"+index+"值:"+item);
})
- 相当于"与",如果每一个符合条件, 则最终结果为true
arr.every(function(item, index){
if (item > 300){
return true
}
})
- 相当于"或",如果"有一个"符合条件的元素, 则返回true
arr.some(function(item, index){
if (item > 100){
return true;
}
})
- 对"每一个"元素进行函数处理, 会产生新的返回值
arrMap = arr.map(function(item, index){
return "<b>"+ index + "|" + item + "</b>";
})
- 对"每一个"元素进行过滤, 获取大于200的元素
var arrFilter = arr.filter(function(item, index){
if (item > 200){
return true;
}
})
- 升序排序(会影响原数组)
console.log("sort之前:"+arr);
var sortArr = arr.sort(function(a, b){
return a-b;
})
console.log("sort之后:"+arr);
对象
- for循环遍历json属性
var obj = {
name : "jianzhao",
age : 18,
}
for (key in obj){
if (obj.hasOwnProperty(key)){
console.log("键:"+key+"|"+"值:"+obj[key])
}
}
题目: 写一个能兼容遍历数组和对象的forEach函数
function forEach(oa){
// 如果传入的为object, 进行遍历
if (typeof(oa) == "object"){
// 如果为数组
if (oa instanceof Array){
oa.forEach(function(item, index){
console.log(index, item);
})
}
// 如果为对象
else{
for(key in oa){
console.log(key, oa[key]);
}
}
}
// 如果不是对象,直接原路返回
else{
return oa;
}
}
forEach({name:"zhaoolee", age: 12})
forEach(["第一", "第二", "第三"])
