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(["第一", "第二", "第三"])
来源: http://www.jianshu.com/p/a523c62edd5c