一些前端知识

html处理重复代码

备忘一下

定位position:absolute、relative

position默认为relative

两者最核心的区别在于：absolute不受父元素里的其他元素影响，而relative会受到父元素里的其他元素影响。（要借助父元素定位，如果父亲除了自己还有别的孩子，就用absolute）

个人以为，relative和absolute的最大区别是，

relative根据最近的父元素定位（喜欢用%定位的话更好用噢）

absolute根据最近的relative定位（或者最近的absolute？发懵整了），
所谓的“子绝父相”,子元素绝对定位，父元素相对定位，？
（记住加粗的两条规律就OK）

弹性布局（display:flex;）属性详解

隐藏事物

visibility: hidden隐藏屏幕阅读器的内容。
display: none隐藏屏幕阅读器的内容。
clip: rect(0,0,0,0); position: absolute使内容对屏幕阅读器可见
1
2
3

clip:rect(0,0,0,0)剪裁问题

头尾拉伸 top: 0; bottom: 0;（absolute）

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
1
2
3
4
5

添加了top: 0 和 bottom: 0相当告诉absolute元素，让它的高度等于relative元素的高度，垂直方向（block direction）是上下重叠的。
bottom: 0; top: 0; 和 设置height:100% 差不多，都是自适应高度。
如果需要添加一个覆盖浏览器全屏的界面，modal窗口等，使用方案2会比方案1更好一些，尤其是在移动端，可以避免可能出现的浏览器网址输入框带来的一些问题。

.fixed {
 left: 0;
 width: 100%;
 top: 0;
 height: 100%;
}
1
2
3
4
5
6

.fixed {
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
}
1
2
3
4
5
6

隐藏滚动条

.outer-container{
	width: 360px;
	height: 200px;
	position: relative;
	overflow: hidden;
}
.inner-container{
	position: absolute;
	left: 0;
	top: 0;
	right: -17px;
	bottom: 0;
	overflow-x: hidden;
	overflow-y: scroll;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

z-index堆叠上下文

• 只有当元素的position为：relative,absolute,fixed等脱离了文档流的定位时，z-index才会生效，static时无效。
• 当父元素和子元素都处于堆叠上下文时，子元素继承父元素的优先级，故父元素大的就大，如果父元素没有处于堆叠上下文时，即z-index:auto;或者position:static;时，子元素不会继承父元素的优先级。
• z-index为0时依然处于堆叠上下文中，比负值高，比正值低。
• z-index为负值时不仅会处于z-index为0和正值元素的后面，还会处于非堆叠元素的后面

JS

HTML DOM Document 对象

HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

文档是一个文档节点。
所有的HTML元素都是元素节点。
所有 HTML 属性都是属性节点。
文本插入到 HTML 元素是文本节点。are text nodes。
注释是注释节点。

Document 对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

Document 对象是 HTML 文档的根节点。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

诸如此类

document.querySelectorAll

类似的，document.getElementById() 返回对拥有指定 id 的第一个对象的引用。
getAttribute() 方法通过名称获取属性的值。

//获取文档中 class="example" 的所有元素:
var x = document.querySelectorAll(".example");
1
2

获取文档中所有的 
 元素， 并为匹配的第一个 
 元素 (索引为 0) 设置背景颜色:

// 获取文档中所有的 
 元素
var x = document.querySelectorAll("p"); 
 
// 设置第一个 
 元素的背景颜色
x[0].style.backgroundColor = "red";
1
2
3
4
5
6
7

查找文档中共包含 "target" 属性的  标签，并为其设置边框:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.border = "10px solid red";
}
1
2
3
4
5
6

查找每个父元素为 
 的 
 元素，并为其设置背景颜色:

var x = document.querySelectorAll("div > p");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
}
1
2
3
4
5
6
7

匿名函数 var goLeft = function () {……}

看看JS正常普通函数怎么定义

addEventListener() 方法

姑且忽略第三个参数

element.addEventListener(event, function, useCapture)
1

addEventListener() 方法用于向 指定元素 添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
多看几个用法就OK

通过函数名来引用外部函数。

该实例演示了在用户点击  元素时如何执行函数:

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
1
2
3
4
5
6
7
8
9

当传递参数值时，使用"匿名函数"调用带参数的函数：

document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});

1
2
3
4
5
6

修改  元素的背景：

document.getElementById("myBtn").addEventListener("click", function(){
    this.style.backgroundColor = "red";
});
1
2
3
4
5

轮播图左按钮

  //右按钮事件
    var goRight = function () {
        if (index < 4) {
            index++
        } else {
            index = 0
        }
        goIndex()
    }

    //绑定点击事件监听
    // left.addEventListener('click', function () {
    //     goLeft()
    // })//这种写法过于冗杂
    left.addEventListener('click', goLeft)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15