前端开发：JavaScript---DOM & BOM
DOM：Document Object Model 文档对象类型
模态框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>模态框案例</title>
<style type="text/css">
*{margin:0;padding: 0;}
html,body{height: 100%;}
/* 4. 设置所创建的div的样式*/
/*rgba最后一个参数表示透明度，0~1之间取值*/
#box{height: 100%;width: 100%;background: rgba(0,0,0,0.3);} /*8. 设置p标签的样式*/
#content{
position: relative;
top: 150px;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: black;
background-color: red;
margin:auto;
/*margin:auto 表示上下左右自动居中*/
} /*10. 设置span标签的样式*/
#span1{
position: absolute;
top: 0;
right: 0;
width: 20px;
width: 20px;
line-height: 20px;
color: black;
background-color: white;
text-align: center; }
</style>
</head>
<body>
<!-- id是button的属性；为其添加一个方法（事件）onclick，不要写在行内，写在js标签里 -->
<button id="btn" >弹出</button> </body> <script type="text/javascript">
// dom 树状结构；每个标签被视为一个节点，节点称为DOM元素
console.log(document)
// 1. getElementById() ：通过标签ID获取DOM元素
var btn = document.getElementById("btn")
console.log(btn) // 2. 创建一个DOM元素 div
var oDiv = document.createElement("div")
// 为创建的这个div DOM元素设置ID
oDiv.id = "box";
// 5. 创建 p DOM元素
var oP = document.createElement("p")
oP.id = "content";
// 6. 为p标签添加内容
oP.innerHTML = "模态框成功弹出"
// 7. 把p标签添加到div中
oDiv.appendChild(oP) // 添加子节点 // 9. 创建span DOM 元素， 并p标签中添加 span,并为span标签添加内容 X
var oSpan = document.createElement("span")
oSpan.id = "span1";
oSpan.innerHTML = "X";
oP.appendChild(oSpan) // onclick对应一种方法
btn.onclick = function(){
// alert(111)
// 3. 动态的在 body 中 在 btn 前面添加一个div
console.log(this)
// btn.parentNode.insertBefore(oDiv,btn)
// 所以上面的代码可以用this 代替，如下
this.parentNode.insertBefore(oDiv,btn) } // 11. 点击X 关闭弹出的页面
oSpan.onclick = function(){
// removeChild() ： 移除子节点; body这个父节点调用的removeChild()这个方法，所以oDiv.parentNode
oDiv.parentNode.removeChild(oDiv)
// oDiv.parentNode 不能用 this.parentNode代替，因为 this.parentNode表示oSpan的父节点 oP
} </script> </html> <!--
总结：
getElementById() // 获取节点DOM元素
createElement() // 创建节点DOM元素
oDiv.id = "box" // 设置节点的属性
oP.innerHTML = "模态框成功弹出" // 设置节点中的内容（字符串格式）
appendChild() // 往父节点中添加子节点
onclick // 点击事件
parentNode // 获取父节点
insertBefore(所插入的新节点,新节点后面的节点) // 插入新节点
removeChild() // 移除子节点 -->
点击有惊喜 案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>点击有惊喜</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{
width: 200px;
height: 200px;
background: red;
text-align: center;
color: white;
line-height: 200px;
margin:30px auto;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜 !
</div> </body> <script type="text/javascript">
// 通过 类名 获取DOM元素
var oBox = document.getElementsByClassName("box")[0]
console.log(oBox) var a = 0; oBox.onclick = function(){
a++;
// 通过 a%4 取余的方式实现循环
if (a%4===1){
this.style.background = "green"; // this指的是 oBox
// innerText表示只取到标签内的文本；innerHTML是把标签内的所有元素都取到
this.innerText = "继续点";
}else if (a%4===2){
this.style.background = "blue";
this.innerText = "哈哈，骗你的"
}else if (a%4===3){
this.style.background = "transparent"; // 表示 透明的
this.innerText = ""
}else{
this.style.background = "red";
this.innerText = "点击有惊喜 !"
} } </script> </html> <!--
style中有很多属性,background只是其中之一
-->
简易留言板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>简易留言板</title>
<style type="text/css"> </style>
</head>
<body>
<h1>简易留言板</h1>
<div id="box"></div> <textarea id="msg"></textarea>
<input type="button" id="btn" value="留言">
<button onclick="sum()">统计</button> </body>
<script type="text/javascript">
// 创建ul标签
var ul = document.createElement("ul");
// 获取box标签
var box = document.getElementById("box"); box.appendChild(ul); var btn = document.getElementById("btn"); // 获取 textarea 中值的方法：
var msg = document.getElementById("msg");
// msg.value // 通过 msg.value能获取到msg中的值 // 定义一个全局变量，用于统计计数；button点击一次加1，span标签点击一次减1
var count = 0; // btn有一个onclick事件
btn.onclick = function(){
// btn 的onclick事件是 获取到 textarea中的值并追加到 ul中
console.log(msg.value); // 在点击事件的时候创建 li 标签
var li = document.createElement("li"); // 设置li的内容
li.innerHTML = msg.value + " " + "<span>X</span>"; // 利用 ul.appendChild(li) 多次添加li时，新添加的li会添加到原先的li后面
// 通过 标签名 获取 上面创建的 DOM元素
var lis = document.getElementsByTagName("li"); // 类似数组（HTMLCollection[]）的形式
console.log(lis) // 如果lis 中内容为空，则直接在ul中添加li；如果ul中已经有li，则新的li添加到原先的li前面
if (lis.length == 0) {
ul.appendChild(li);
count++; // button点击则加1
}else{
ul.insertBefore(li,lis[0]); // lis[0] 表示第一个 li标签
count++; // button点击则加1
}
msg.value = ""; // 清空 textarea 中的内容 // 遍历 span 标签，为每个 span 标签添加 onclick 事件：点击span标签即移除相应的li
span = document.getElementsByTagName("span")
for (var i=0; i<span.length;i++){
span[i].onclick = function(){
ul.removeChild(this.parentNode); // this 表示相应的 span 标签；this.parentNode即相应的 li
count--; // span点击一次则减1
}
} } // 用于统计条数
function sum(){
alert("总共有"+count+"条留言"); }
</script>
</html>
选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
*{padding: 0;margin: 0;}
#tab{
width: 480px;
margin: 20px auto;
border:1px solid red;
}
ul{list-style: none;}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #C6C3C6;
}
ul li a{
text-decoration: none;
color: black;
}
li.active{
background-color: #FDFDFD;
}
p{
display: none;
height: 200px;
line-height: 200px;
text-align: center;
background-color: #FDFDFD;
}
p.active{
display: block;
} </style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div> </body>
<script type="text/javascript"> var tabli = document.getElementsByTagName("li");
var tabContent = document.getElementsByTagName("p"); // 遍历 tabli 添加 onclick 点击事件
for (var i=0;i<tabli.length;i++){
// 遍历时的i保存为相应的 index
tabli[i].index = i; // 需要注意的地方 // 添加点击事件
tabli[i].onclick = function(){
// 给相应的li添加 class = "active" 之前，先遍历把所有的li的 class 清空、p 的class清空；
for (var j=0;j<tabli.length;j++){
tabli[j].className = "";
tabContent[j].className = "";
}
// 点击之后让相应li的 class="active"
this.className = "active"; // 通过 className 获取类的值
// 并让相应p的 class="active"
console.log(this.index); // this 表示 tabli[i]
tabContent[this.index].className = "active"; // 需要注意的地方：此外不能直接写成 tabContent[i].className = "active" 因为遍历完之后i为最后一个数
}
} </script>
</html>
仿淘宝搜索框（该功能用 palceholder 也能实现）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>仿淘宝搜索框</title>
<style type="text/css">
*{margin: 0;padding: 0}
#search{position: relative;}
input{
outline: none; /* 去除输入框的默认颜色 */
display: block;
width: 300px;
height: 30px;
margin-top: 20px;
font-size: 20px;
border:2px solid red;
border-radius: 10px;
} label {
position: absolute;
top: 6px;
left: 10px;
font-size: 15px;
color: grey;
} </style>
</head>
<body> <div id="search">
<input type="text" id="text1">
<label for="txt" id="msg">路飞学城</label>
</div> </body> <script type="text/javascript">
var txt = document.getElementById("text1");
var msg = document.getElementById("msg"); // oninput ：检测用户表单输入
txt.oninput = function(){
if (this.value == ""){ // this.value表示输入框中的内容
msg.style.display = "block";
}else{
msg.style.display = "none";
}
} </script>
</html>
获取当前最新时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>获取当前最新时间</title>
<style type="text/css"> </style>
</head>
<body> </body>
<script type="text/javascript"> // 定时器
setInterval(function(){
var date = new Date(); var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate(); // getDate()得到的结果是: 0~11
var h = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds(); document.body.innerHTML = "今天是" + y + "年" + m + "月" + d + "日" + " " + sum(h) + ":" + sum(min) + ":" + sum(s); // 让时分秒调用sum函数 function sum(x){ // 加0函数：如果时分秒小于10，则在其前面加0
if(x<10){
return "0" + x;
}
return x;
} },1000)
</script>
</html>
匀速运动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>匀速运动案例</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.box{
width: 100px;
height: 100px;
background: pink;
position: relative;
top: 150px;
left: 0;
}
</style>
</head>
<body>
<div class="wrap">
<button id="btn">运动</button>
<div class="box" id="box1"></div>
</div> </body>
<script type="text/javascript">
var btn = document.getElementById("btn");
var box = document.getElementById("box1") var sum = 0;
var timer = null; // 用于储存定时器返回的 id
btn.onclick = function(){
timer = setInterval(function(){
sum += 2;
if (sum >= 1226){
clearInterval(timer);
box.style.display = "none";
// sum = 0; // 如果 sum >= 1226,则返回左侧重新进行
}else{
box.style.left = sum + "px"; // 要记得加单位 px
} },10); } </script>
</html>
5秒之后关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>5秒之后关闭广告</title>
<style type="text/css">
*{margin: 0;padding: 0;}
img{position: fixed;}
#left{left: 0;}
#right{right: 0;}
ul{list-style: none;}
</style>
</head>
<body>
<img src="./1.jpg" id="left">
<img src="./2.jpg" id="right">
<ul>
<li>屠龙宝刀，点击就送</li>
<li>倚天长剑，点击就送</li>
<li>屠龙宝刀，点击就送</li>
<li>倚天长剑，点击就送</li>
<li>屠龙宝刀，点击就送</li>
<li>倚天长剑，点击就送</li>
<li>屠龙宝刀，点击就送</li>
<li>倚天长剑，点击就送</li>
<li>屠龙宝刀，点击就送</li>
<li>倚天长剑，点击就送</li>
<li>屠龙宝刀，点击就送</li>
</ul> </body>
<script type="text/javascript"> window.onload = function(){ // window.onload 表示窗口加载的时候 执行后面的函数
var pic1 = document.getElementById("left");
var pic2 = document.getElementById("right"); // 设置定时器
setTimeout(function(){ // 执行一次，所以用 setTimeout
pic1.style.display = "none";
pic2.style.display = "none"; },5000) }
</script>
</html>
小米滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>小米滚动</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.wrap{
width: 468px;
height: 400px;
border:3px solid #14191D;
position: relative;
overflow: hidden;
margin: 100px auto;
}
#xiaomi{
position: absolute;
top: 0; /* 通过top值的变化 来实现图片的上下移动 */
left: 0;
}
span{
display: block;
width: 100%;
height: 200px;
position: absolute;
}
#picUp{top: 0;}
#picDown{top: 200px;}
</style>
</head>
<body>
<div id="box" class="wrap">
<img src="./小米6X.jpg" id="xiaomi">
<span class="up" id="picUp"></span>
<span class="down" id="picDown"></span>
</div> </body>
<script type="text/javascript">
var upSpan = document.getElementById("picUp");
var downSpan = document.getElementById("picDown"); var img = document.getElementById("xiaomi"); var count = 0;
var timer = null; upSpan.onmouseover = function(){ // 表示鼠标移到 xxx 上面的时候
// 先清定时器
clearInterval(timer) // 移到上面的时候把下面的定时器清掉
timer = setInterval(function(){
count -= 1;
count >= -828 ? img.style.top = count + "px" : clearInterval(timer); // condition ? result1 : result2; 即相当于 if.. else.. 语句； 828 = 1228（图片高度）- 400（盒子高度）
},10)
}; downSpan.onmouseover = function(){
clearInterval(timer) // 移到下面的时候把上面的定时器清掉
timer = setInterval(function(){
count += 1;
count <= 0 ? img.style.top = count + "px" : clearInterval(timer);
},10)
}; </script>
</html>
无缝轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>无缝轮播图</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{list-style: none;} .box{
width: 600px;
height: 200px;
margin: 50px auto;
overflow: hidden;
position: relative; } ul li{float: left;}
.box ul{
width: 500%; /* 设置宽度，一张图片是100% */
position: absolute;
top: 0;
right: 0; /* 通过right值的变化 来移动图片 */
} img{
width: 300px;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="./1.jpg"></a></li>
<li><a href="#"><img src="./2.jpg"></a></li>
<li><a href="#"><img src="./5X.jpg"></a></li>
<li><a href="#"><img src="./go.jpg"></a></li>
<li><a href="#"><img src="./python2.png"></a></li> </ul> </div> </body>
<script type="text/javascript">
var box = document.getElementsByClassName("box")[0];
var ul = box.children[0]; // 通过children能够获取子节点 var timer = null;
var count = 0;
timer = setInterval(autoPlay,10) // autoPlay后面不要加 () // 函数的声明
function autoPlay(){
count--;
count <= -900 ? count=0 : count;
ul.style.left = count + "px";
} // 鼠标移上去时，清除定时器
box.onmouseover = function(){
clearInterval(timer)
}
// 鼠标离开时，开启定时器
box.onmouseout = function(){
timer = setInterval(autoPlay,10); // 此处也需要返回timer
} </script>
</html>
BOM
BOM输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>BOM为了输出</title>
</head>
<body> <button onclick="printLuffy()">打印</button>
<button onclick="findLuffy()">查找</button> </body>
<script type="text/javascript">
// 1. BOM: Browser Object Model 浏览器对象模型
// 核心：浏览器 // 输出、屏幕的宽高、滚动的宽高、 setInterval setTimeout window.open() close() location等等 // 输出；常用输出有以下4个（这些都是window的功能，window可省略不写）
// 1.弹出框：alert(1)
// 2. console // 主要用于浏览器的调试
// 3. prompt(message,defaultValue)
var pro = prompt("路飞学城")
console.log(pro)
// 4. confirm(): 相较于alert()，confirm()多了“取消”功能；如果点出“确定”，返回true,如果点出“取消”，返回false
var m = confirm("学习BOM");
console.log(m)
// 输出扩展：
// 5. print() ： 调用打印机
function printLuffy(){
print(); // 打印功能；
}
// 6. find() ：查找
function findLuffy(){
var m2 = confirm("学习BOM");
find(m2);
} </script>
</html>
open/close方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>open和close方法</title>
</head>
<body> <!-- 行内JS中的open()方法，window不能省略 -->
<button onclick="window.open('https://www.luffycity.com/')">路飞学城</button> <button>打开百度</button> <button onclick="window.close()">关闭</button> <button>关闭</button> </body>
<script type="text/javascript"> var oBtn = document.getElementsByTagName("button")[1];
oBtn.onclick = function(){
// open("https://www.baidu.com/")
open("about:blank","_self") // 在当前页面（_self）打开一个空白页面(about:blank)
} var closeBtn = document.getElementsByTagName("button")[3];
closeBtn.onclick = function(){
if (confirm("是否关闭？")){
close();
}
} </script>
</html>
BOM其它的对象和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>其它的BOM对象</title>
</head>
<body> </body>
<script type="text/javascript"> // 返回浏览器的用户设备信息
console.log(window.navigator.userAgent) // PC端还是移动端 console.log(window.location) // 取到浏览器本地的信息 // 经常使用的方法
window.location.href = "https://www.baidu.com"; // 跳转 // 全局刷新 (尽量少用)
window.location.reload(); // 这个方法会重新把所有的代码走一遍 </script>
</html>
client系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>client系列</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
position: relative;
border:1px solid red;
margin: 10px 0px 0px 0px;
padding: 10px;
}
</style>
</head>
<body>
<div class="box"> </div> </body>
<script type="text/javascript">
// client系列
// clientTop ：内容区域到边框顶部的距离
// clientLeft ： 内容区域到边框左部的距离
// clientWidth ： 内容区域的 + 左右padding值，即可视宽度
// clientHeight ： 内容区域的 + 上下padding值，即可视高度
var oBox = document.getElementsByClassName("box")[0]; console.log(oBox.clientTop)
console.log(oBox.clientLeft)
console.log(oBox.clientWidth)
console.log(oBox.clientHeight)
</script>
</html>
屏幕的可视区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>屏幕的可视区域</title>
</head>
<body> </body>
<script type="text/javascript">
// 通常需要写 window.onload = ...
window.onload = function(){
window.onresize = function(){ // window.onresize能够监听浏览器可视区域的大小；当浏览器大小发生变化时，自动触发该方法
console.log(document.documentElement.clientWidth); // 浏览器屏幕的可视宽度
console.log(document.documentElement.clientHeight); // 浏览器屏幕的可视高度
}
}
</script>
</html>
注：单个区域用client，整个屏幕用 document.documentElement
offset系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>offset系列</title>
</head>
<body> <div style="position: relative;">
<div id="box" style="width: 200px;height: 200px;border:1px solid red;padding: 10px;margin: 10px;position: absolute;top:20px;left: 30px;"> </div>
</div> </body>
<script type="text/javascript">
window.onload = function(){
var box = document.getElementById("box"); // 占位宽 高 Top Left
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetWidth);
console.log(box.offsetHeight); // offsetTop ：如果盒子没有设置定位：到浏览器顶部的距离；如果盒子设置定位：以盒子为基准的top值
// offsetLeft ：如果盒子没有设置定位：到浏览器左部的距离；如果盒子设置定位：以盒子为基准的left值
// offsetWidth ：内容+左右padding + 左右border
// offsetHeight : 内容+上下padding + 上下border
}
</script>
</html>
scroll系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>scroll系列</title>
<style type="text/css">
*{margin: 0;padding: 0;}
</style>
</head>
<body style="width: 2000px;height: 2000px;">
<div style="height: 200px;background-color: red;"></div>
<div style="height: 200px;background-color: green;"></div>
<div style="height: 200px;background-color: blue;"></div>
<div style="height: 200px;background-color: black;"></div>
<div style="height: 200px;background-color: yellow;"></div> <div id="box" style="width: 200px;height: 200px;border:1px solid red;overflow: auto;">
<p>
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
</p>
</div> </body>
<script type="text/javascript">
window.onload = function(){ // 实时监听滚动事件
// window.onscroll 是获取整个屏幕
// window.onscroll = function(){ // onscrll：监听滚动事件
// console.log(111) // console.log("上"+document.documentElement.scrollTop); // 距离浏览器顶部的距离
// console.log("左"+document.documentElement.scrollLeft); // 距离浏览器左侧的距离
// console.log("宽"+document.documentElement.scrollWidth); // 屏幕的宽度
// console.log("高"+document.documentElement.scrollHeight); // 屏幕的高度
// } var box = document.getElementById("box");
box.onscroll = function(){ // id为box的区域调用 onscroll()
console.log("上"+box.scrollTop); // 距离盒子顶部的距离
console.log("左"+box.scrollLeft); // 距离盒子左侧的距离
console.log("宽"+box.scrollWidth); // 内容的宽度（包含padding，但不包含 边框和margin），即 内容的宽度+padding
console.log("高"+box.scrollHeight); // 内容的高度（包含padding，但不包含 边框和margin），即 内容的高度+padding
}
}
</script>
</html>
前端开发：JavaScript---DOM & BOM的更多相关文章
- 第十一章 前端开发-JavaScript
第十一章 前端开发-JavaScript 11.3.1 js引入方式 行内样式 <p id="" class="" style="" ...
- 1+x 证书 Web 前端开发 JavaScript 专项练习
官方QQ群 1+x 证书 Web 前端开发 JavaScript 专项练习 http://blog.zh66.club/index.php/archives/198/
- 前端06 /JavaScript之BOM、DOM
前端06 /JavaScript 目录 前端06 /JavaScript 昨日内容回顾 js的引入 js的编程要求 变量 输入输出 基础数据类型 number string boolean null ...
- 前端开发 JavaScript 干货知识点汇总
很多初学的朋友经常问我,前端JavaScript都需要学习哪些东西呀?哪些是JavaScript的重点知识啊? 其实做前端开发工程师,所有的知识点都是我们学习必备的东西,只有扎实的技术基础才是高薪的关 ...
- Web前端开发JavaScript提高
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
- 前端开发 - JavaScript - 总结
一.JavaScript的特征 javaScript是一种web前端的描述语言,也是一种基于对象(object)和事件驱动(Event Driven)的.安全性好的脚本语言.它运行在客户端从而减轻服务 ...
- 前端开发 JavaScript 规范文档
一,规范目的 为提高团队协作效率,便于前端后期优化维护,输出高质量的文档. 二.基本准则 符合web标准,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序, 尽可能的减小服务器负载,保 ...
- JavaScript DOM&BOM
1.DOM含义 D: Document 文档 一份文档就是一棵节点树,每个节点都是一个对象O:Object 对象 JavaScript语言里对象可以分为三种类型: (1)用户定义的对象(user-de ...
- 15款不容错过的前端开发Javascript和css类库 - 2017版本~
前端的JS和CSS类库日新月异, 在今天这篇介绍中,我们将精挑细选15款超棒的JS/CSS类库, 希望大家在开发过程中会觉得有帮助~ Core UI 基于Bootstrap4的一套UI类库, Core ...
随机推荐
- 10-1 浮动框架iframe
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- Webform 三级联动例子
首先分别做三个下拉列表 <body> <form id="form1" runat="server"> <asp:DropDown ...
- 45 个非常有用的 Oracle 日期查询语句
日期/时间 相关查询 获取当前月份的第一天 运行这个命令能快速返回当前月份的第一天.你可以用任何的日期值替换 “SYSDATE”来指定查询的日期. SELECT TRUNC (SYSDATE, 'MO ...
- java数据结构和算法05（二叉树）
对于树这个数据结构,第一次看到这个树肯定是一脸蒙逼,玛德,树?种树的那个树么?哈哈哈,当然不是,前面我们说过数组添加.删除数据很慢,查询数据很快:而链表添加.删除数据很快,但是查找数据很慢,我们就想啊 ...
- openID 无效
1.appid 和秘钥一定要是你目前正在测试公众号的数据,如果 appid 和 秘钥是测试账号的,而目标测试业务是在正式的公众号,及时能取到acces——token ,也会报无效的openid 遇到的 ...
- 重构29-Remove Middle Man（去掉中间人）
有时你的代码里可能会存在一些"Phantom"或"Ghost"类,Fowler称之为"中间人(Middle Man)".这些中间人类仅仅简单 ...
- 合并百度影音的离线数据 with python 2.2 bdv格式的更新
百度影音的bdv格式又有变化. 此次存在2种bdv格式. 格式1:每个文件夹内就一个bdv文件,文件合并后改名avi即可. 格式2:每个文件夹内一个bdv文件作为索引,其他附加guid的文件作为数据. ...
- iOS UI 顶级布局
状态栏. 导航栏. tabbar. uiviewcontroller视图区域.
- Java软件开发不同薪资级别-技术要求
15~20万 WEB应用服务器(Tomcat.Weblogic.Jetty.JBoss.WebSphere) NoSQL(Redis.MongoDB.HBase.Memcache) 消息中间件(Kaf ...
- chsh - 改变登录 shell
总览 (SYNOPSIS) chsh [ -s shell ] [ -l ] [ -u ] [ -v ] [ username ] 描述 (DESCRIPTION) chsh 用于 改变 用户的 登录 ...