杂题

　　2017.8.12

 

1、返回上一页，怎么定位到某个锚点

    在跳转之前改变浏览器的hash。这样在下一页直接history.go(-1)就可以定位到锚点处

2、url链接后的参数如何获取，并转化成对象

　　location.search获取参数串，获取数据如：?a=1&b=2&c=3;

　　然后通过截取字符串获得 [a=1,b=2,c=3]

　　最后将数组内处理成对象，或者直接用正则将?a=1&b=2&c=3转化成json字符串，然后eval,但不建议

3、同源策略

　　脚本只能读取和所属文档来源相同的窗口和文档的属性。如果两个文档在协议、主机以及载入文档的URL端口这三点中有一点不同，就认为他们不同源。

　　以下介绍三种实现“不严格的同源策略”的方法：

    a. 使用Document对象的domain属性

        默认情况下，属性domain存放的是载入文档的服务器的主机名。这一属性是可写的。

        如果两个窗口包含的脚本把domain设置为了相同的值，那么这两个窗口就不再受同源策略的约束，它们就可以相互读取对方的属性。

 

    b. 跨域资源共享（Cross-Origin Resource Sharing） 

        这种方法用新的“Origin：”请求头和新的响应头“Access-Control-Allow-Origin”来扩展HTTP。

    c. 跨文档消息（Cross-Document Messaging）

        允许来自一个文档的脚本可以传递文本消息到另一个文档里的脚本，不管来源是否相同。

        调用window对象的postMessage()方法，可以异步传递消息事件到窗口的文档里。这种方法仅仅是一种消息传递技术。

 

 

4、html5的doctype和html4的doctype区别

　　在 HTML 4.01 中，<!DOCTYPE> 声明引用 DTD，因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。

　　HTML5 不基于 SGML，所以不需要引用 DTD。

　　SGML：标准通用语言，是一种很强大但很复杂的标记语言，HTML、XML 就是从中衍生出来的。

5、css的选择器

　　id   class  tag   子选择器：div > span   后代选择器：div  span  

　　伪类选择器：a:hover    属性选择器：input[type="text"]

7、如何获取字符串内所有相同的字符的组合

　　　　

var arr = 'abcdaabc';

var info = arr
    .split('')
    .reduce((p, k) => (p[k]++ || (p[k] = 1), p), {});

console.log(info); //{ a: 3, b: 2, c: 2, d: 1 }

 

 

8、清除浮动的方法

　　　浮动产生的原因：使用了float属性，导致子元素撑不开父元素

　　　带来负作用：父元素不能正常展示，如背景 也影响父子元素之间的 padding和margin

　　　　清除浮动方法：

　　　　　　　　给父元素设置相应高度

　　　　　　　　clear:both

　　　　　　　　给父定义overflow：hidden

　　　　　　　　万能清除法 after伪类 清浮动（现在主流方法，推荐使用）

　　　　　　　　　　　　选择符:after{ content:"."; clear:both; display:block; height:0; overflow:hidden; visibility:hidden; }

　　　　　　　　　　　　　　同时为了兼容 IE6，7 同样需要配合zoom使用例如：

　　　　　　　　　　　　　　　　.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

　　　　　　　　　　　　　　　　　.clear{zoom:1;}

9、如何在某个div的结束标签后动态添加js代码语句

      可以通过创建script标签对象，然后插入到div后面去，

　　具体插入方法为：ele.insertAdjacentHTML('beforebegin','..some html..')；

　　　　　　　　或者：p.insertBefore(newNd,curNd):

 

10.padding的百分比取值，参考父元素的宽度