Javascript常用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')

Attributeprototype的区别:

  • 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(["第一", "第二", "第三"])

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端知识分享

第34天:日期函数、定时器、倒计时

一、日期函数(Date()) 设置本地日期:年月日时分秒 1、声明日期 var date=new Date();//创建一个新的日期函数 2、使用函数 date...

14220
来自专栏菩提树下的杨过

Reactor 3 学习笔记(2)

上面的代码,reduce相当于把1到10累加求和,reduceWith则是先指定一个起始值,然后在这个起始值基础上再累加。(tips: 除了累加,还可以做阶乘)...

41820
来自专栏xingoo, 一个梦想做发明家的程序员

希尔排序

希尔排序的时间复杂度,最好的情况下仍然是正序时,可达到O(n),平均复杂度为O(nlogn)。 算法思想: 采用跳跃式处理数组,使得数组粗粒度的实现基本有序。...

21650
来自专栏Pythonista

Golang实现一个密码生成器

20330
来自专栏向治洪

React 之props属性

React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性(Props)来实现功能,但内部细节可能有非常复杂的实现。 可以使用 JSX ...

22750
来自专栏angularejs学习篇

angularjs通过ng-change和watch两种方式实现对表单输入改变的监控

angularjs通过ng-change和watch两种方式实现对表单输入改变的监控

27510
来自专栏更流畅、简洁的软件开发方式

[自定义服务器控件] 第二步:下拉列表框。

前面发了一个文本框的,这回发一个下拉列表框。 一般在写自定义控件之前都要考虑一下原来的控件(系统代的)有什么优缺点,有哪些功能是我想要的,但是自带的控件没有提...

31460
来自专栏偏前端工程师的驿站

JS魔法堂:追忆那些原始的选择器

一、前言                                                                            ...

24870
来自专栏debugeeker的专栏

用xerces-c来进行xml schema校验

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

11710
来自专栏前端迷

头条秋招面试题以及答案

答案: 定义 3D 转换,只是用 Z 轴的值。 拓展: transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜...

11930

扫码关注云+社区

领取腾讯云代金券