码迷,mamicode.com
首页 > Web开发 > 详细

最近JS的一些问题

时间:2019-12-27 23:36:35      阅读:133      评论:0      收藏:0      [点我收藏+]

标签:res   同步   副本   ever   spl   正弦   属性   集群   push   

常见的DOM获取方式

一、通过元素类型的方法来操作:

  • document.getElementById();//id名,在实际开发中较少使用,选择器中多用class id一般只用在顶级层存在 不能太过依赖id
  • document.getElementsByTagName();//标签名
  • document.getElementsByClassName();//类名
  • document.getElementsByName();//name属性值,一般不用
  • document.querySelector();//css选择符模式,返回与该模式匹配的第一个元素,结果为一个元素;如果没找到匹配的元素,则返回null
  • document.querySelectorAll()//css选择符模式,返回与该模式匹配的所有元素,结果为一个类数组

二、通过关系树来获取

DOM(文档对象模型)可以将任何HTML、XML文档描绘成一个多层次的节点树。所有的页面都表现为以一个特定节点为根节点的树形结构。html文档中根节点为document节点。

所有节点都有nodeType属性,代表节点的不同类型,通过nodeType属性可以来判断节点的类型。经常使用的节点主要有以下几种类型

  • ement类型(元素节点):nodeType值为 1
  • Text类型(文本节点):nodeType值为 3
  • Comment类型(注释节点):nodeType值为8
  • Document类型(document节点):nodeType值为9;其规定的一些常用的属性有
    • document.body document.head 分别为HTML中的 <body><head>
    • document.documentElement为标签

所有的节点都有 hasChildNodes()方法 判断有无子节点 有一个或多个子节点时返回true

通过一些属性可以来遍历节点树:

  • parentNode//获取所选节点的父节点,最顶层的节点为#document
  • childNodes //获取所选节点的子节点们
  • firstChild //获取所选节点的第一个子节点
  • lastChild //获取所选节点的最后一个子节点
  • nextSibling //获取所选节点的后一个兄弟节点 列表中最后一个节点的nextSibling属性值为null
  • previousSibling //获取所选节点的前一兄弟节点 列表中第一个节点的previousSibling属性值为null
<div id="myDiv">
            <p>html</p>
            <p>css</p>
            <p>javascript</p>
        </div>
        <p>jquery</p>

    <script>
        var div = document.getElementById("myDiv");
        alert(div.childNodes.length);//7

技术图片

技术图片

三、基于元素节点树的遍历(遍历元素节点树):

  • parentElement //返回当前元素的父元素节点(IE9以下不兼容)
  • children // 返回当前元素的元素子节点
  • firstElementChild //返回的是第一个元素子节点(IE9以下不兼容)
  • lastElementChild //返回的是最后一个元素子节点(IE9以下不兼容)
  • nextElementSibling //返回的是后一个兄弟元素节点(IE9以下不兼容)
  • previousElementSibling //返回的是前一个兄弟元素节点(IE9以下不兼容)

Math对象的方法都有哪些?

  1. min()和max()方法
    Math.min()用于确定一组数值中的最小值。Math.max()用于确定一组数值中的最大值。
  2. 舍入方法
  • Math.ceil()执行向上舍入
  • Math.floor()执行向下舍入
  • Math.round()执行标准舍入
  1. random()方法
    Math.random()方法返回介于0到1之间一个随机数,不包括0和1。如果想大于这个范围的话,可以套用一下公式:
值 = Math.floor(Math.random() * 总数 + 第一个值)
  1. 其他的方法
方 法 说 明
Math.abs(num) 返回num的绝对值
Math.exp(num) 返回Math.E的num次幂
Math.log(num) 返回num的自然对数
Math.pow(num,power) 返回num的power次幂
Math.sqrt(num) 返回num的平方根
Math.acos(x) 返回x的反余弦值
Math.asin(x) 返回x的反正弦值
Math.atan(x) 返回x的反正切值
Math.atan2(y,x) 返回y/x的反正切值
Math.cos(x) 返回x的余弦值
Math.sin(x) 返回x的正弦值
Math.tan(x) 返回x的正切值

cookie、sessionStorage和localStorage区别,如何清除存储

cookie是用于客户端和服务端通信,本身具有存储功能。

使用document.cookie获取

清除cookie:

//清除所有cookie函数
function clearAllCookie() {
    var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
    if (keys) {
        for (var i = keys.length; i--;)
            document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
    }
}

有效期:在cookie过期时间之前有效,即使关闭了浏览器或窗口
会话cookie在浏览器关闭是清除

cookie的存储量小,最多存储4KB

会始终在请求中携带,会影响资源的获取效率

localStorage和sessionStorage

共同点:

都是H5专门为了存储设计的api,最大容量是5M

简单好用,语法类似

—— localStorage.setItem(key, value);localStorage.getItem(key)

——sessionStorage.setItem(key,value);sessionStorage.getItem(key)

不同点:

数据有效期不同,sessionStorage只在当前浏览器或窗口关闭时候有效,localStorage除非主动清除,不然一直存在。

localStorage支持事件通知机制,可以把数据更新通知给监听者

相同浏览器下,不同标签页间数据传递只有localStorage可以做到

清除存储:
//存储session
window.sessionStorage.setItem("this_session", "This is session!");
window.sessionStorage.setItem("user", "This is User");

//取出session
var thisSession = window.sessionStorage.getItem("this_session");

function clearUser() {
        //删除数据
        sessionStorage.removeItem("user");
     }
清空
sessionStorage.clear();
localStorage.clear()

数组方法

转换方法

toString()返回数组的字符串表示

toLocalString()

valueOf()返回数组本身

栈方法:

push()在数组的最后位添加参数(可以是任意的数量),返回一个添加后的数组长度

pop()在数组的最后尾删除内容,返回删除的内容

队列方法

shift()移除首位的项,返回移除的项,数组长度-1

unshift()与shift()相反,在数组前端添加任意项,返回新数组长度

重排序方法

reverse()反转数组顺序

sort() 比较字符串排序默认升序,可以接受一个比较函数,根据比较函数结果进行排序

两种方法返回的都是重新排序后的新数组

操作方法

concat()方法 先创建数组副本,然后把参数加入的副本末尾,返回这个副本新数组

slice() 接受一到两个参数,如果接受的是一个参数,则返回从该位置到末尾的数组,如果是两个参数,返回的是起始位置和结束位置之间的项,但是不包含最后一项(如果结束位置小于起始位置,返回空数组)

splice() 向数组的中部插入项,返回新数组,

指定2个参数,删除作用,参数分别指:要删除的第一项位置和要删除的项数

指定3个参数,插入作用,参数分别指:其实位置、要删除的项数、和要插入的项。

数组中包含从原始数组中删的项,没有删除,则返回空数组

位置方法:

indexOf()和lastindexOf()接受要查找的项和(可选的)查找起点位置的索引

没有找到返回-1.找到返回该项在数组中的位置

迭代方法

5中迭代方法中都接受2个参数:在每一项上运行的函数和(可选的)运行改函数的作用域对象

every() 如果对每一项都返回true,则返回true
filter() 返回改函数返回true的项组成的数组
forEach() 对数组中每一项运行给定函数,没有返回值
map() 对数组中每一项都运行给定函数,返回每次调用结果的数组
some() 有一项为true,则返回true

归并方法

reduce()和reduceRight() 接受两个参数:在每一项上调用的函数和(可选的)作为归并基础的初始值

函数接受4个参数:前一个值、当前值、项的索引和数组对象
函数返回的任何值都会作为第一个参数传给下一项

reduceRight和reduce类似,不过方向相反,从后往前遍历

AJAX请求

xhr.open("get","",true)

这里面的true作用是让ajax请求异步,如果为false就为同步请求

Nginx反向代理原理

nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器
Nginx的作用:

  • 反向代理
  • 负载均衡

反向代理:主要用于服务器集群分布式部署的情况下,反向代理隐藏了服务器的信息

反向代理解决跨域:就是把http请求转发到另一个或者一些服务器上。通过把本地一个url前缀映射到要跨域访问的web服务器上,就可以实现跨域访问对于浏览器来说,访问的就是同源服务器上的一个url。

最近JS的一些问题

标签:res   同步   副本   ever   spl   正弦   属性   集群   push   

原文地址:https://www.cnblogs.com/housheng/p/12109698.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!