常正慧_20200114-常正慧
知识点
定位
静态定位
- 静态定位指的是将元素放在他的文档布局流中的正常位置上
- 如果所有的父元素都没有定义
position属性，那么所有的父元素都默认position属性都是static
相对定位
- 相对定位占据在正常的文档流中，除非你修改他的位置或者让他与其他元素重叠
- 如果单单给元素加上
position：relativ；并不会改变元素的位置，即需要使用top,bottom,left,right属性 - 相对定位是相对于正常位置进行定位
- 如果单单给元素加上
绝对定位
position:absolute;
-
生成绝对定位的元素，是相对于static定位以外的第一个父元素行进定位。
-
绝对定位的元素不在正常文档布局流中.
-
固定元素相对于元素或距离其最近的定位祖先
固定定位
- 固定定位固定元素是相对于浏览器视口本身定位
- fixed固定定位
z-index
- z-index是对Z轴的参考
- 默认情况下z-index是auto
- 正值将它往上移动，负值向下移动
- 解决元素重叠问题
position:sticky
- 相对定位与绝对定位的混合体
- 允许被定位的元素表现和相对定位一样，知道滚动到某个阈值点（比如说：规定距离顶部100像素，到达改为之后则固定不动了。）
JavaScript
- JavaScript由三部分构成：
ECMAScript，DOM，BOM
BOM (浏览器对象模型)
bom主要处理浏览器窗口和框架
window
window对象
-
window.document.getElementById("header");二者相同
-
document.getElementById("header");
window 尺寸
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
-
示例
var w=window.innerWidth
var h=window.innerHeight
其他window方法
- >
> window.open() - 打开新窗口
> window.close() - 关闭当前窗口
> window.moveTo() - 移动当前窗口
> window.resizeTo() - 调整当前窗口的尺寸
>
window location
-
window.location对象用于获取当前页面的URL（全球资源定位器（Uniform Resource Locator）），并把浏览器重新定向到新的页面 -
window.location对象在编写时可以不用window前缀，例如
location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）
location href
-
location.href属性返回当前页面的URL
<script>
document.write(location.href);
</script>
window history
-
window history对象包含浏览器的历史
-
可不用window前缀
history.back() 与在浏览器中点击后退按钮相同
history.forword 与在浏览器中点击前进按钮相同
history.go() 可以实现向前后退功能
- ```
* ```
<head>
<meta charset="utf-8">
<script>
function goForward()
{
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" onclick="goForward()">
</body>- ```
function a(){
history.go(1); // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面
}
function b(){
history.go(-1); // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面
}function a(){
history.go(0); // go() 里面的参数为0,表示刷新页面
}
弹窗
- 在JavaScript中可以创建三种消息框：警告框，确认框，提示框。
警告框
window.alert("sometext");
-
window.alert()方法可以不带上window对象，直接使用alert()方法。 -
示例
- ```
- ```
确认框
window.confirm("sometext");
-
window.confirm()； 方法可以不带上window对象，直接使用confirm()方法。 -
<head> <meta charset="UTF-8">
<title></title>
<script>
var r=confirm("按下按钮");
if (r==true)
{
x="你按下了\"确定\"按钮!";
}
else
{
x="你按下了\"取消\"按钮!";
}
</script>
</head>
//提示：确认 取消
提示框
window.prompt("sometext","defaultvalue");
-
window.prompt()方法可以不带上window对象，直接使用prompt()方法。- ```
计时事件
- 设定一个时间间隔后执行代码，由两个关键方法
setlnterval()方法-
setInterval()间隔指定的毫秒数不停地执行指定的代码 -
window.setInterval("javascript function",milliseconds);
-
可以不使用window前缀
-
setlnterval()第一个参数是函数（function),第二个参数是间隔的毫秒数 -
示例
- ```
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
} - ```
-
停止执行
-
clearInterval()方法用于停止setInterval()方法执行的函数代码。 -
window.clearInterval(intervalVariable)
-
要使用
clearInterval()方法, 在创建计时方法时必须使用全局变量： -
myVar=setInterval("javascript function",milliseconds);
-
示例
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
clearInterval(myVar);
}
</script>
setTimeout（）方法-
语法
myVar= window.setTimeout("javascript function", milliseconds);
-
setTimeout()方法会返回某个值。在上面的语句中，值被储存在名为myVar的变量中。如果要取消这个setTimeout()，可以使用这个变量名来指定它 -
setTimeout()的第一个参数是含有 JavaScript 语句的字符串。对函数的调用
第二个参数指示从当前起多少毫秒后执行第一个参数。
-
等待三秒，跳出弹框
setTimeout(function(){alert("Hello")},3000);
-
停止运行
-
clearTimeout()方法用于停止执行setTimeout()方法的函数代码。 -
语法
window.clearTimeout(timeoutVariable)
-
要使用
clearTimeout()方法, 必须在创建超时方法中（setTimeout）使用全局变量:
myVar=setTimeout("javascript function",milliseconds);
-
示例
- ```
var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}function myStopFunction()
{
clearTimeout(myVar);
} - ```
document
document.querySelector()-
document.querySelector方法接受一个CSS选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null 。
document.querySelectorAll(css选择器)- 返回一个数组
document.getElementsByTagName()document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一 个类似数组对象(HTMLCollection实例)，可以实时反映 HTML 文档的变化。如果没有任何匹配的元 素，就返回一个空集。
document.getElementsByClassName()- 通过class属性查找元素，返回一个数组
document.getElementsByName()document.getElementsByTagName("某个标签的名") 如果是用document调用这个方法，则获取的是所有这个标签名的元素，返回一个HTMLCollection对象
document.getElementById()document.getElementById("某个id名") 获取该id所对应的标签，如果有多个id，只取第一个，这个方法一般只用document调用
心得体会
今天主要学习的是JavaScript的内容。感觉有点难度，但是实现的东西也越来越有趣，理解倒是不难，主要是还没记住那些选择器，以及方法对象，而且不太熟悉，所以在编程的时候就有点小困难，自我检查，还是要多写多练，俗话说熟能生巧，只要写的多了，自然而然也就记住了。
点赞 - ```
评论留言