王庆召_20210114 王庆召
一、知识点总结
1、CSS中的定位
1.1 定位的定义
定位( position )允许您从正常的文档流布局中取出元素，并使它们具有不同的行为，例如放在另一个 元素的上面，或者始终保持在浏览器视窗内的同一位置。 有许多不同类型的定位，您可以对HTML元素生效。
1.2 静态定位
静态( staitc )定位是每个元素获取的默认值——它只是意味着“将元素放入它在文档布局流中的正常位 置 ——这没有什么特别的。
如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都 是 static 。
1.3 相对定位
相对定位与静态定位非常相似，占据在正常的文档流中，除了你仍然可以修改它的最终位置，包括让它 与页面上的其他元素重叠。 给元素加上
相对定位生成相对定位的元素，相对于其正常位置进行定位
1.4 决定定位
position:absolute; 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。绝对定 位的元素不再存在于正常文档布局流中
1.5固定定位
fixed 固定定位，这与绝对定位的工作方式完全相同，只有一个主要区别：绝对定位固定元素是相对于 元素或其最近的定位祖先，而固定定位固定元素则是相对于浏览器视口本身。
2、z-index
当我们使用定位后，元素有可能会出现重叠现象。什么决定哪些元素出现在其他元素的顶部？当我们在 定位上下文中只有一个定位的元素，它出现在顶部，因为定位的元素胜过未定位的元素。如果是多个定 位元素，在后面的定位元素将出现在先定位与元素的顶部。 当然，我们可以使用 z-index 属性。 “z-index”是对z轴的参考。 网页也有一个z轴：一条从屏幕表面到你的脸（或者在屏幕前面你喜欢的任何其他东西）的虚线。 zindex 值影响定位元素位于该轴上的位置；正值将它们移动到堆栈上方，负值将它们向下移动到堆栈 中。默认情况下，定位的元素都具有z-index为auto，实际上为0。
3、position: sticky
还有一个可用的位置值称为 ·position: sticky·，比起其他位置值要新一些。它基本上是相对位置和固定位 置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶 部起10像素）为止，此后它就变得固定了。
4、JS选择器
- getElementById() 通过元素ID获取元素
- getElementsByName() 通过元素Name获取元素
- getElementsByTagName() 通过元素的标签名称获取元素
- getElementsByClassName() 通过元素的CSS类来获取元素
- Document.querySelector() 通用选择器
- Document.querySelectorAll() 多个元素获取的通用选择器
5、setTimeout()用法以及和setInterval()的区别
5.1 两者之间的区别;
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式， 而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。也就是说setTimeout()只执行一次，setInterval()可以执行多次。
两个函数的参数也相同，第一个参数是要执行的code或句柄，第二个是延迟的毫秒数
5.2 两个的用法：
function hello(){
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello,1000);
var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法
window.clearTimeout(t1);//清除定时器
//实时刷新时间单位为毫秒
setInterval('refreshQuery()',8000);
/* 刷新查询 */
function refreshQuery(){
$("#mainTable").datagrid('reload',null);
}
6、 js的组成部分
1、ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。
2、文档对象模型（DOM）：DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。请考虑下面的 HTML 页面：DOM 通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用 DOM API 可以轻松地删除、添加和替换节点（getElementById、childNodes、appendChild、 innerHTML）。
3、浏览器对象模型（BOM）对浏览器窗口进行访问和操作。例如弹出新的浏览器窗口，移动、改变和关闭浏览器窗口，提供详细的网络浏览器信息（navigator object），详细的页面信息（location object），详细的用户屏幕分辨率的信息（screen object），对cookies的支持等等。BOM作为JavaScript的一部分并没有相关标准的支持，每一个浏览器都有自己的实现，虽然有一些非事实的标准，但还是给开发者带来一定的麻烦。
7、 定时任务实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date</title>
</head>
<body>
<p id="timer"></p>
<hr />
<button onclick="start()" >开始</button>
<button onclick="pause()" >暂停</button>
<script type="text/javascript">
// 定时任务变量
var timer ;
// 获取当前时间对象
function start(){
// 如果已经开始了,先清除之前的
clearInterval(timer);
// 创建定时任务
timer = setInterval(time,1000);
}
function time(){
var date = new Date();
var str = date.toLocaleString();
var p = document.querySelector("#timer");
p.innerText = str;
}
function pause(){
clearInterval(timer);
}
</script>
</body>
</html>
8、网页倒计时实例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
a{
text-decoration: none;
}
p{
text-align: center;
font-size: 24px;
letter-spacing: 5px;
}
span{
font-size: 28px;
font-weight: bold;
}
</style>
</head>
<body>
<p><span id="num">3</span>秒后跳转到<a href="demo.html" id="a">demo</a>页面.或直接点击<a href="demo.html">此处</a>跳转!</p>
<script type="text/javascript">
// 先获取 数字
var num = document.querySelector("#num");
// 每个一秒 减 1
setInterval(jian,1000);
function jian(){
var cur = num.innerText - 1;
if(cur == 0){
// 跳转 document.querySelector("#a").href
location.href = "demo.html";
}
num.innerText = cur;
}
</script>
</body>
</html>
二、心得体会
- 有些概念容易混淆，如setTimeout()和setInterval()
- 学习js的时候，看老师敲代码很顺畅，但是到自己敲的时候，缺很难下手，还是要多看更要多敲代码，要多尝试、多运用、多熟悉；
近期评论