1.JavaScript核心操作——DOM对象
- window对象
通过window对象，可以操作和浏览器软件相关的信息
// window.alert();//调用浏览器的对话框操作
// history对象：项目中几乎不用
//window.history.back();//后退操作,返回上一个访问历史
//window.history.forward();//前进操作，访问下一个访问历史
//window.history.go(2);//跳转到某一个访问历史
// location对象：项目中的url操作
/*console.log(location);
console.log(location.href);// 获取当前网页的url地址
console.log(location.protocol);//获取当前访问协议
console.log(location.host);// 获取访问网页的主机地址
console.log(location.hostname);
console.log(location.post);// 访问端口*/
// JS代码控制页面的指向
/*setTimeout(function() {
location.href="http://www.baidu.com"
}, 2000)*/
/*setTimeout(function() {
location.reload()// 刷新网页
}, 5000)*/
// screen对象
// screen表示电脑屏幕的意思
// screen.width/height表示的是电脑屏幕的宽度和高度分辨率
// screen.availWidth/screen.availHeight:屏幕的宽度和高度【不包含任务栏】
// console.log(screen.width, screen.height);
// console.log(screen.availWidth, screen.availHeight);
// navigator对象：浏览器软件的信息
- screen对象
- history对象
- location对象
- navigator对象
- document对象
- window事件操作
- onload页面数据加载事件
- onscroll页面滚动条事件
- 兼容问题：获取滚动条卷去网页高度
2.DOM基础API操作
- 获取标签DOM对象
直接通过id属性值使用DOM对象
通过id属性值获取：document.getElementById()
通过标签名称获取：document.getElementsByTagName()
通过class属性值获取：document.getElementsByClassName()
通过name属性值获取：document.getElementsByName()
混合获取，通常是id模式和tagName模式混合获取
代码操作
// 直接通过标签的id属性，得到标签对象【 不推荐】
console.log(box);
box.innerText = "可以通过标签的id属性直接使用标签"
// 通过getElemnetById("id")函数，来通过id属性值获取标签，【推荐】
var _box = document.getElementById("box2");
_box.innerText = "通过ElementById()函数获取标签对象，进行操作"
// 通过标签名称，可以获取到一组标签
var _boxes = document.getElementsByTagName("div");
console.log(_boxes);
_boxes[2].innerText = "这是通过getElementsByTagName()获取的元素"
// 通过标签的name属性，也可以获取到一组标签
var _jerry = document.getElementsByName("jerry");
console.log(_jerry);
_jerry.innerText = "通过name属性获取标签"
// 通过标签的class属性获取标签：IE8.0+
var _container = document.getElementsByClassName("container");
console.log(_container);
_container[0].innerText = "这个是通过class属性获取到的标签对象"
操作标签的DOM对象属性
- 标准函数操作
获取属性值：
var x = getAttribute(name)
设置属性值：setAttribute(name, value)
移除属性：removeAttribute(name);
- 方括号操作
获取属性值：
var x = dom[“name”];
设置属性值：dom[“name”]=value;
- 连接符.操作
获取属性值：
var x = dom.name;
设置属性值：dom.name = value;
备注：dom表示dom对象，name表示属性名称，value表示属性值
操作标签的DOM对象样式
- 获取DOM对象样式
var x = document.currentStyle[name];兼容IE低版本的获取样式的方式
var x = getComputedStyle(dom)[name];获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】
Window.getComputedStyle()方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS代码操作标签的样式</title>
<style>
#box{height: 200px;background:red;}
</style>
</head>
<body>
<div id="box" style="width:100px;"></div>
<script>
/*操作标签的样式*/
/*增删改查*/
/*获取样式、设置样式*/
var _box = document.getElementById("box");
/**************************************************/
// 获取样式：有两种方式
// 1. 获取样式的值 100px
// 2. 获取样式的数值 100
// 获取标签对象的样式【标签内嵌、页面内嵌、外部样式 都可以获取到】
// 获取样式存在兼容性问题【兼容IE9+ 和其他浏览器】
var _h = window.getComputedStyle(_box).height;
var _w = window.getComputedStyle(_box).width;
console.log(_w, _h);
// 兼容IE低版本的获取样式的方式【我们只需要了解即可】
// var _h1 = _box.currentStyle.height;
// var _w1 = _box.currentStyle.width;
// 获取样式的数值
var _wvalue = _box.offsetWidth;
var _hvalue = _box.offsetHeight;
console.log(_wvalue, _hvalue);
/**************设置样式************************************/
// 标签对象.style.样式名称 使用这样的语法，是用来操作标签内嵌样式的！
// 给标签设置样式，统一使用 标签对象.style.样式名称 = 样式值;
_box.style.width = "300px";
</script>
</body>
</html>
控制台输出结果
- 设置DOM对象样式
直接通过style进行行内样式设置。
dom.style.样式名称 = 样式值;
样式名称可能是多个单词组成的 background-color，在JS中进行操作的时候需要将名称转换成驼峰命名法：backgroundColor
注意：尽量不要在JS中进行大量样式的设置。
- 对于标签内容的操作，有三种方式
- innerText：给指定标签的开始标签和结束标签中增加文本内容【非W3C标准】
- textContent：dom操作，给标签的开始标签和结束标签中增加文本内容，W3C标准操作
- innerHTML：给标签的开始标签和结束标签中，增加一段HTML代码；慎重使用，容易造成代码注入漏洞！
扩展：所谓代码注入漏洞，是用于可以在客户端通过输入包含代码的字符串的方式，将带入注入到我们的网页中进行执行的过程
innerHTML的使用规则
对于数据的来源，完全信任的情况下使用它。其他时候禁止使用！
代码操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JS操作标签属性</title>
</head>
<body>
<!-- value是input标签的属性 -->
输入年龄：<input type="text" id="uname" value="100">
<script>
var _name = document.getElementById("uname");
// 1. 直接通过 [标签对象.属性]来操作标签的属性值
_name.value = "120";
_name.id = "age";
console.log(_name.value, _name.id);
// 2. 通过 标签对象.["属性名称"] 来操作标签的属性值
_name["value"] = 110;
_name["id"] = "phone";
console.log(_name["value"], _name["id"]);
// 3. DOM操作方式，通过getAttribute("属性名称")获取标签的属性值
_name.setAttribute("value", 119);
_name.setAttribute("id", "sex");
// _name.className = "sex";
_name.removeAttribute("value");
console.log(_name.getAttribute("value"), _name.getAttribute("id"));
</script>
</body>
</html>
备注：在使用原生JS操作标签的属性时，规则如下
- id属性、title属性，建议通过 标签对象.属性名称 的语法进行处理。
- class属性，建议通过标签对象.className 的语法进行处理。
- 其他属性，建议使用set/getAttribute()的语法进行处理。
删除value属性。。。。：这样的语法是不能删除属性的
_name.value = null;
3.DOM核心API操作
节点属性API——获取元素定位
- 元素的尺寸(宽度、高度)、位置(top.left)
| 属性/函数名称 | 描述 |
|---|---|
| offsetWidth | 获取元素宽度；包含padding值\border值 |
| offsetHeight | 获取元素高度；包含padding值\border值 |
| offsetTop | 获取元素距离浏览器顶部的距离 |
| offsetLeft | 获取元素距离浏览器左边的距离 |
备注：如果父元素进行了relative/absolute定位，offsetTop/offsetLeft就是相对父元素的顶部和左边的距离，如果父元素默认定位，就是相对浏览器窗口的距离
备注：获取网页可视区域宽度，高度
var clientWidth =
window.innerWidth||document.documentElement.clientWidth;
var clientHeight =
window.innerHeight||document.documentElement.clientHeight;
获取网页文档的宽度、高度
var bodyWidth = document.body.clientWidth;
var bodyHeight = document.body.clientHeight;
实例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#container{
position:static;// relative
width:800px;
height:400px;
margin-left:100px;
margin-top:100px;
background-color: #069;
padding:1px;
}
#box{
padding:50px;
width:100px;
height:100px;
/*position:absolute;
top:50px;
left:50px;
margin:50px 0 0 50px;
background-color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="box"></div>
</div>
<script>
function getStyle(dom, styleName) {
if(dom.currentStyle) {
return dom.currentStyle[styleName];
} else {
return getComputedStyle(dom)[styleName];
}
}
var box = document.getElementById("box");
console.log(getStyle(box,"width") + "---" + box.offsetWidth);
console.log(getStyle(box, "height") + "---" + box.offsetHeight);
console.log(getStyle(box, "margin-left") + "---" + box.offsetLeft);
console.log(getStyle(box, "margin-top") + "---" + box.offsetTop);
// 获取网页可视区域高度、宽度
console.log(window.innerHeight + "--" + window.innerWidth);
console.log(document.documentElement.clientHeight + "--" + document.documentElement.clientWidth);
// 获取网页文档的高度、宽度
console.log(document.body.clientHeight + "--" + document.body.clientWidth);
</script>
</body>
- 节点查询API
| 属性/函数名称 | 描述 |
|---|---|
| hasChildNodes() | 判断是否包含子节点，返回一个布尔值 |
| children | 获取元素所有的子元素节点集合/数组 |
| childNodes | 获取元素所有的子节点集合/数组 |
| firstChild | 获取元素第一个子节点 |
| firstElementChild | 获取元素第一个子元素节点 |
| lastChild | 获取元素最后一个子节点 |
| lastElementChild | 获取元素最后一个子元素节点 |
| previousSibling | 获取元素前一个兄弟节点 |
| previousElementSibling | 获取元素前一个兄弟元素节点 |
| nextSibling | 获取元素后一个兄弟节点 |
| nextElementSibling | 获取元素后一个兄弟元素节点 |
| parentNode | 获取元素的父节点 |
| textContent | 操作(获取/设置)元素内容 |
- 节点创建/添加API
| 属性/函数名称 | 描述 |
|---|---|
| createElement(tagName) | 根据名称创建一个元素节点 |
| createTextNode(text) | 根据文本创建一个文本节点 |
| insertBefore(new,old) | 在指定的节点前面添加节点 |
| appendChild(child) | 在子节点的末尾追加节点 |
| replaceChild(new,old) | 使用新的节点替换指定的节点 |
| removeChild(child) | 移除指定的子节点 |
| className | 设置标签class属性样式值 |
代码操作
<body>
<div id="container">
<div id="box">
原有标签
</div>
</div>
<script>
var container = document.getElementById("container");
var box = document.getElementById("box");
// 创建第一个元素节点
var d = document.createElement("div");
// 创建文本节点
var t = document.createTextNode("这是div文本");
// 创建第二个元素节点
var d2 = document.createElement("p");
var t2 = document.createTextNode("这是p文本");
// 添加元素节点到指定节点中
d.appendChild(t);
// 追加节点到指定节点前面
container.insertBefore(d, box);
// 追加节点到子节点末尾
d2.appendChild(t2);
d2.className = "test";
container.appendChild(d2);
</script>
</body>
4.简单特效开发
- 抽奖
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>抽奖</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.container{
width: 500px;height: 600px;background: white;border:solid 2px orange;margin: auto;border-radius: 10px;}
.box,.show,.show_active{width: 450px;height: 450px;border-radius: 50%;}
.box{border:2px orange solid;padding: 10px;margin: 10px auto;}
.show{background-color: pink;font-size: 70px;line-height: 450px;text-align: center;}
.show_active{background-color: #D0D0D0;color:#fff;font-size: 70px;line-height: 450px;text-align: center;}
#btn{width: 200px;height: 40px;background-color:pink;display: block;margin: auto;font-size: 20px;}
</style>
</head>
<body>
<div class="container">
<div class="box">
<div id="show" class="show">
等待抽奖
</div>
</div>
<button id="btn" onclick="playGame()">开始抽奖</button>
</div>
<script type="text/javascript">
var _names=["iphone7 plus","iPad Pro","apple watch","iPad mini4","iphone6","apple"]
//获取页面中要使用的标签对象
var _btn=document.getElementById("btn");
var _show=document.getElementById("show");
var _timer;
var _flag=false;
function playGame(){
if (!_flag){
_flag=true;
_timer=setInterval(function(){
// 获取随机下标
var _no=Math.floor(Math.random(_names)*_names.length);
// 获取中奖礼品
var _n=_names[_no];
// 展示中奖礼品
_show.textContent=_n;
// 修改按钮的文本
_btn.textContent="停止抽奖";
// 修改展示的样式
_show.className="show_active"
},50);
}else{
_flag=false;
clearInterval(_timer);
// 修改按钮的文本
_btn.textContent = "开始抽奖";
// 修改展示的样式
_show.className = "show";
}
}
</script>
</body>
</html>
效果展示：
抽奖
- 飞机飞行进度演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>飞机飞行进度演示</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#nav{position: relative;
height: 128px;
width: 1200px;
border:solid 1px #8E8E8E;
}
#nav img{
position: absolute;
left: 0px;
top:0px;
}
#process{
height: 128px;
background:#FFA042;
width: 0px;
}
</style>
</head>
<body>
<div id="nav">
<div id="process"></div>
</div>
<button onclick="start()">开始飞行</button>
<script type="text/javascript">
// 获取小飞机图片
var _plane=document.getElementById("plane");
var _process=document.getElementById("process");
// 定义一个变量，用来存放计时器
var _timer;
// start()函数
function start(){
_timer=setInterval(function(){
// 获取left的样式数值
var _left=_plane.offsetLeft;
var _width=_process.offsetWidth;
// 飞行过程left的值增加
_left+=10;
_width+=10;
// 设置随着飞机的飞行 飞机的图片发生改变
if (_left>200 && _left<800) {
_plane.setAttribute("src","images/flying.png");
_process.style.background="#6FB7B7";
}else if(_left>800){
_plane.setAttribute("src","images/flyend.png");
_process.style.background="#02DFB2"
}
// 边界的判断
if (_left>=1200){
// 停止计时函数
clearInterval(_timer);
}
// 设置样式
_plane.style.left=_left+"px";
_process.style.width=_width+"px";
},100)
}
</script>
</body>
</html>
效果展示：
飞机飞行进度演示
5.JavaScript事件——Event
事件操作：
事件就是一种发生在网页上的行为；鼠标单击、鼠标双击、键盘按下、键盘抬起、获得焦点、失去焦点等等各种行为
常见的事件：
- 鼠标事件
| 属性/函数名称 | 描述 |
|---|---|
| onmouseout | 鼠标离开 |
| onmouseenter | 鼠标进入 |
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
- 键盘事件
| 属性/函数名称 | 描述 |
|---|---|
| altKey | 返回当事件被触发时，"ALT" 是否被按下。 |
| button | 返回当事件被触发时，哪个鼠标按钮被点击。 |
| clientX | 返回当事件被触发时，鼠标指针的水平坐标。 |
| clientY | 返回当事件被触发时，鼠标指针的垂直坐标。 |
| ctrlKey | 返回当事件被触发时，"CTRL" 键是否被按下。 |
| metaKey | 返回当事件被触发时，"meta" 键是否被按下。 |
| relatedTarget | 返回与事件的目标节点相关的节点。 |
| screenX | 返回当某个事件被触发时，鼠标指针的水平坐标。 |
| screenY | 返回当某个事件被触发时，鼠标指针的垂直坐标。 |
| shiftKey | 返回当事件被触发时，"SHIFT" 键是否被按下。 |
焦点事件：常用于表单元素标签
onfocus 获取焦点事件【获得光标事件】
onblue 失去焦点事件
onchange 内容修改事件，
事件的绑定方式：
1.标签属性绑定
2.dom元素绑定
- 鼠标拖拽功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标拖动</title>
<style type="text/css">
#box{
position:absolute;
width: 336px;
height: 300px;
background-image:url("images/mv33.jpg"); }
</style>
</head>
<body>
<div id="box">
</div>
<script type="text/javascript">
var _box=document.getElementById("box");
// event事件对象，可以通过事件对象，获取到鼠标的位置
_box.onmousedown=function(event){
var _clientX = event.clientX;
var _clientY = event.clientY;
var _boxl = _box.offsetLeft;
var _boxt = _box.offsetTop;
var _left = _clientX - _boxl;
var _boxt = _clientY - _boxt;
document.onmousemove = function(event){
var _clientX1 = event.clientX;
var _clientY1 = event.clientY;
var _l = _clientX1 - _left;
var _t = _clientY1 - _boxt;
_box.style.left = _l + "px";
_box.style.top = _t + "px"
}
document.onmouseup=function(event){
document.onmousemove=null;
}
}
</script>
</body>
</html>
效果展示：
鼠标拖拽
扩展
- 瀑布流式布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<style>
*{margin:0px;padding:0px;}
#container{width: 1200px;margin:auto;position:relative;}
.box{padding:5px;float:left;position:absolute;left:0;top:0;}
.item{padding:5px;border:solid 1px #888;width:190px;border-radius:5px;}
.item > img{border:none;width:190px;border-radius:5px;vertical-align:bottom;}
</style>
</head>
<body>
<div id="container">
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
<div class="box">
<div class="item"></div>
</div>
</div>
<script>
// 网页中的标签和图片加载
// 等待网页中的所有数据加载完成，再执行代码
// window.onload 页面数据加载事件
window.onload = function() {
var _container = document.getElementById("container");
// 获取所有的图片
var _imgs = document.getElementsByClassName("box");
// 计算一行可以存放多少张图片
var _containerWidth = _container.offsetWidth;
var _imgWidth = _imgs[0].offsetWidth;
var _cols = Math.floor(_containerWidth / _imgWidth);
// 声明一个记录高度的数组
var _height = [];
// 遍历所有的图片，开始定位
for(var i = 0; i < _imgs.length; i++) {
if(i < _cols) {
// 保存第一行中每一张图片的高度
_height.push(_imgs[i].offsetHeight);
_imgs[i].style.left = _imgWidth * i + "px";
} else {
// 计算数组中的最小值
var _minHeight = Math.min.apply(null, _height);
console.log(_minHeight);
var _minIndex = getMinIndex(_minHeight, _height);
console.log(_minIndex);
// i 指的是循环到else的 i与function getMinIndex函数返回值 i不是一个值
_imgs[i].style.top = _minHeight + "px"；
_imgs[i].style.left = _minIndex * _imgWidth + "px";
// 更新最小高度
_height[_minIndex] += _imgs[i].offsetHeight;
}
}
}
/*value是最小值， arr是这个值所在的数组*/
function getMinIndex(value , arr){
for(var i = 0; i < arr.length; i ++) {
if(value == arr[i]){
return i;
}
}
}
</script>
</body>
</html>
效果展示：
瀑布流式布局
网友评论