1、querySelector

获取指定元素中匹配css选择器的元素。

// 作用在document
document.querySelector("#nav"); // 获取文档中id="nav"的元素
document.querySelector(".nav"); // 获取文档中class="nav"的元素
document.querySelector("#nav li:first-child"); // 获取文档中id="nav"下面的第一个li元素 // 也可以作用在其他元素
let nav = document.querySelector("#nav");
nav.querySelector("li"); // 如果有多个li的话,返回第一个li

2、querySelectorAll

获取指定元素中匹配css选择器的所有元素:

let list = document.querySelectorAll("li");  // NodeList(2) [li, li] 这里假设返回2个

注意:返回的值是一个类数组,可以使用forEach(有些浏览器无法使用,建议还是转一下),但是无法使用filtermap等,需要转换一下:

Array.from(list).map();

3、dataset

获取标签上以"data-"为前缀的属性集合:

<p data-name="蜘蛛侠" data-age="16"></p>
document.querySelector("p").dataset; // {name: "蜘蛛侠", age: "16"}

4、URLSearchParams

获取url中查询参数

假设浏览器的url参数是 "?name=蜘蛛侠&age=16"

new URLSearchParams(location.search).get("name"); // 蜘蛛侠

5、classList

操作dom的class

<p class="title"></p>
let elem = document.querySelector("p");

// 增加类名
elem.classList.add("title-new"); // "title title-new" // 删除类名
elem.classList.remove("title"); // "title-new" // 切换类名(有则删、无则增,常用于一些切换操作,如显示/隐藏)
elem.classList.toggle("title"); // "title-new title" // 替换类名
elem.classList.replace("title", "title-old"); // "title-new title-old" // 是否包含指定类名
elem.classList.contains("title"); // false

6、getBoundingClientRect

获取指定元素在当前页面的空间信息。

elem.getBoundingClientRect();

// 返回
{
x: 604.875,
y: 1312,
width: 701.625,
height: 31,
top: 1312,
right: 1306.5,
bottom: 1343,
left: 604.875
}

7、customEvent

自定义事件,就跟vue里面的onemit一样。

派发自定义事件:

window.dispatchEvent(new CustomEvent("follow", {
detail: {
name: "前端宇宙情报局"
}
}));

监听自定义事件:

window.addEventListener("follow", event => {
console.log(event.detail); // 输出 {name: "前端宇宙情报局"}
});

8、fullScreen

全屏,不仅仅可以作用在documentElement上,还可以作用在指定元素。

/**
* @method launchFullScreen 开启全屏
* @param {Object} elem = document.documentElement 作用的元素
*/
const launchFullScreen = (elem = document.documentElement) => {
if(elem.requestFullScreen) {
elem.requestFullScreen();
} else if(elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if(elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}
}

关闭全屏的时候需要注意的是,统一用document对象:

/**
* @method exitFullScreen 关闭全屏
*/
const exitFullScreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}

常用的web api总结的更多相关文章

  1. 几个不常用的 Web API

    1. 设备震动 vibrate Navigator.vibrate() 方法使设备(有震动硬件)产生有频率的震动.若设备不支持震动,该方法将无效.若某震动方式已经在进行中(当该方法调用时),则前一个震 ...

  2. web api 初体验 解决js调用跨域问题

    跨域界定 常见跨域: 同IP不同端口: http:IP:8001/api/user     http:IP:8002/api/user 不同IP不同端口: http://172.28.20.100:8 ...

  3. Spring Boot入门(四):开发Web Api接口常用注解总结

    本系列博客记录自己学习Spring Boot的历程,如帮助到你,不胜荣幸,如有错误,欢迎指正! 在程序员的日常工作中,Web开发应该是占比很重的一部分,至少我工作以来,开发的系统基本都是Web端访问的 ...

  4. Web API中常用Filter的执行顺序举例讲解

    在WEB Api中,引入了面向切面编程(AOP)的思想,在某些特定的位置可以插入特定的Filter进行过程拦截处理.引入了这一机制可以更好地践行DRY(Don’t Repeat Yourself)思想 ...

  5. 循序渐进学.Net Core Web Api开发系列【9】:常用的数据库操作

    系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇描述一 ...

  6. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  7. Hello Web API系列教程——Web API与国际化

    软件国际化是在软件设计和文档开发过程中,使得功能和代码设计能处理多种语言和文化习俗,在创建不同语言版本时,不需要重新设计源程序代码的软件工程方法.这在很多成熟的软件开发平台中非常常见.对于.net开发 ...

  8. Entity Framework 6 Recipes 2nd Edition(9-4)译->Web API 的客户端实现修改跟踪

    9-4. Web API 的客户端实现修改跟踪 问题 我们想通过客户端更新实体类,调用基于REST的Web API 服务实现把一个对象图的插入.删除和修改等数据库操作.此外, 我们想通过EF6的Cod ...

  9. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

随机推荐

  1. array_reduce() 与 array_map()

    相似部分: 二者同为 处理数组函数,可遍历 数组中的每一个元素, 对其通过 function callback(){} 处理. 不同处: 参数: array_reduce( array, callba ...

  2. Android笔记(四十一) Android中的数据存储——SQLite(三)select

    SQLite 通过query实现查询,它通过一系列参数来定义查询条件. 各参数说明: query()方法参数 对应sql部分 描述 table from table_name 表名称 colums s ...

  3. 学习python的日常2

    ---恢复内容开始--- 数组list 添加用.append(i,'xxx')方法 删除用.pop(i)方法,其中i为索引位置 数组可以直接作为元素插入数组 元组tuple(初始化后不能改变,所谓不变 ...

  4. openwrt使用3G拔号的实践笔记

    参照文档: https://soha.moe/post/make-4g-wifi-ap-with-openwrt.html 步骤: 1.安装必要的包: opkg update opkg install ...

  5. css详解1

    1.css的三种引入方式: 1.1.行内引入 <div style="color:red;">魔降风云变</div> <html> <he ...

  6. 小程序框架之视图层 View~基础组件

    框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发.详细介绍请参考组件文档. 什么是组件: 组件是视图层的基本组成单元. 组件自带一些功能与微信风格一致的样式. 一个组件通常 ...

  7. 零基础python教程—python数组

    在学习Python过程中数组是个逃不过去的一个关,既然逃不过去咱就勇敢面对它,学习一下python中数组如何使用. 1.数组定义和赋值 python定义一个数组很简单,直接 arr = [];就可以了 ...

  8. 关于Djiango中 前端多对多字段点(,)的显示问题

    去除点的方法: <td> {% for roles_son in roles.permissions.all %} {% if forloop.last %} # 利用模板语言中的循环机制 ...

  9. 020_Python3 File(文件) 方法

    1.open() 方法 Python open() 方法用于打开一个文件,并返回文件对象,在对文件进行处理过程都需要使用到这个函数,如果该文件无法被打开,会抛出 OSError. 注意:使用 open ...

  10. bzoj 5408: string 后缀自动机 + LCT

    联赛前练练码力. code: #include <vector> #include <cstdio> #include <cstring> #include < ...