API是我么程序员提供的一个接口,帮助我们实现某种功能;
Web API主要针对游览器提供的接口,主要针对游览器做交互效果;
一、获取元素
可以有以下几种方式:
根据ID获取;根据标签名获取;通过HTML5新增的方法获取;通过特殊元素获取;
根据ID:利用getElementByld()
返回一个匹配到id的DOM Ekement对象,若在当前Document下没有找到,则返回null。
利用console.dir可以返回元素对象可以更好的查看里面的属性和方法。
利用标签名:getElmentByTagName()
利用类名:document.getElementsByClassName('类名');//根据类名返回元素对象集合。
document.querySelector('.nav'); //根据指定的选择器返回第一个元素对象。
document.querySelectorAll('li’); //根据指定选择器返回所有元素对象。
注意:里面的选择需要加符号 .box #nav。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>生僻字</li>
<li id="nav">英文字</li>
</ul>
<script>
var lis=document.getElementsByTagName('li');
console.log(lis);
//返回的是获取过来元素的对象的集合 以伪数组的形式存储
console.log(lis[0]);
//依次打印可以采取遍历的方式
for(var i=0;i<lis.length;i++){
console.log(lis[i]);
}
//element.getElementsByTagName()可以得到这个元素里的某些标签
var nav=document.getElementById('nav');
var navLis=nav.getElementsByTagName('li');
console.log(navLis);
</script>
</body>
</html>
获取特殊元素:(1)获取body元素,document.body()返回Body元素对象
(2)获取html元素,document.documentElement,返回html元素对象。
二、事件基础
1、常见的鼠标事件
鼠标事件 | 触发条件 |
onclick | 鼠标点击右键触发 |
onmouseover | 鼠标经过触发 |
onmouseout | 鼠标离开触发 |
onfous | 获得鼠标焦点触发 |
onblur | 失去鼠标焦点触发 |
onmousemove | 鼠标移动触发 |
onmouseup | 鼠标弹起触发 |
onmousedown | 鼠标按下触发 |
2、事件是由三部分组成,事件源 事件类型 事件处理程序
事件源:事件被触发的对象 谁 按钮;
事件类型:如何触发,例点击,经过;
事件处理程序:通过一个函数赋值的方式完成。
3、改变元素内容:
element.innerText,从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉。
element.innerHTML,起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行。
html标签即为像<strong>这类的标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 300px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: pink;
}
</style>
</head>
<body>
<button>显示当前时间</button>
<div>某个时间</div>
<p></p>
<script>
var botton=document.querySelector('button');
var div=document.querySelector('div');
botton.onclick=function(){
// div.innerText='2019-6-6'
div.innerText=getDate();
}
function getDate(){
var date=new Date();
var year=date.getFullYear();
var month=date.getMonth()+1;
var dates=date.getDate();
var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
var day=date.getDay();
return '今天是'+year+'年'+month+'月'+dates+'日'+arr[day];
}
var p=document.querySelector('p');
p.innerText=getDate();
//不用添加事件,直接写出结果。
</script>
</body>
</html>
第一个时间是点击了上面的按钮才显示,而第二个则是直接显示。
4、案例演示:
(一)点击对应按钮显示对应的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<button id="qiqi">成毅</button>
<button id="yuanyuan">王源</button><br>
<img src="../pic/qiqi.jpeg" alt="" title="成毅">
<script>
//获取元素
var qiqi=document.getElementById('qiqi');
var yuanyuan=document.getElementById('yuanyuan');
var img=document.querySelector('img');
//注册事件
qiqi.onclick=function(){
img.src='../pic/qiqi.jpeg';
//修改元素属性
img.title='成毅';
}
yuanyuan.onclick=function(){
img.src='../pic/yuanyuan.jpeg';
img.title='王源';
}
</script>
</body>
</html>
(二)根据时间显示对应图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<img src="../pic/night.jpeg" alt="">
<p>早上好</p>
<script>
var img=document.querySelector('img');
var p=document.querySelector('p');
var date=new Date();
var h=date.getHours();
if(h<12){
img.src='../pic/zhongwu/jpeg';
p.innerHTML='现在是早晨';
}
else if(h<18){
img.src='../pic/zhongwu/jpeg';
p.innerHTML='现在是中午';
}
else {
img.src='../pic/night.jpeg';
p.innerHTML='现在是夜晚';
}
</script>
</body>
</html>
5、表单操作
根据DOM可以操作如下表单元素属性:
type,value,check,selected,disabled
6、
btn.οnclick=function(){
input.value='被点击了';
this.disabled=true;//this指的是事件函数的调用者btn
//如果想要某个表单被禁用 不能再点击可以设disabled 我们想要这个按钮button禁用
}
案例:仿京东显示隐藏密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入iconfont -->
<link rel="stylesheet" href="../循环结构/fonts/iconfont.css">
<style>
/* 写一些基本样式 */
.box {
margin: auto;
margin-top: 200px;
width: 500px;
height: 30px;
border-bottom: 1px solid #333;
}
input {
width: 440px;
border: none;
/* 不让输入框的边框出现 */
}
input:focus {
outline: none;
/* 点击后没有黑框框出现 */
}
#eye {
cursor: pointer;
/* 改变鼠标样式 */
}
</style>
</head>
<body>
<div class="box">
<input type="password" name="请输入密码" id="pwd">
<i class="iconfont icon-yanjing_xianshi"></i>
<!-- 运用了iconfont的相关知识 如果不懂点击下面链接了解 -->
</div>
<script>
var pwd = document.getElementById('pwd');
var eye = document.getElementById('eye');
var flag = 0;
eye.onclick = function() {
if (flag == 0) {
pwd.type = 'text';
eye.setAttribute('class', 'iconfont icon-kejian') //改变eye的css样式使其睁眼和闭眼
flag = 1;
} else {
pwd.type = 'password';
eye.setAttribute('class', 'iconfont icon-bukejian') //改变eye的css样式使其睁眼和闭眼
flag = 0;
}
}
</script>
</body>
</html>
7、样式属性操作:
通过js修改元素的大小、颜色、位置、样式。
element.style 行内样式操作;
获得元素修改样式 如果样式比较少或者功能简单的情况下使用
element.className 类名样式操作;
更改元素样式,适合于样式比较多或者功能复杂的情况,className会直接更改元素的类名,会覆盖原先的类名。
注意:JS里面的样式采取驼峰命名法,比如fontSize、backgroundColor;JS修改style样式操作,产生是行内样式,css权重比较高。
案例:二维码隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
<title>Document</title>
<style>
.box{
position: relative;
width: 74px;
height: 88px;
border: 1px solid #ccc;
margin: 100px auto;
font-size: 12px;
text-align: center;
color: #f40;
}
.box img{
width: 60px;
margin-top: 5px;
}
.con-chacha{
position: absolute;
top: -1px;
right: -16px;
width: 14px;
height: 14px;
color: #333;
border: 1px solid #ccc;
line-height: 14px;
font-family: Arial, Helvetica, sans-serif;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
淘宝二维码
<img src="../pic/cd222eb7c22b1007424a8aa7fce00ef2.gif" alt="">
<i class="iconfont con-chacha">×</i>
<!-- <div class="con-chacha">×</div> -->
</div>
<script>
var btn=document.querySelector('.con-chacha');
var box=document.querySelector('.box');
btn.onclick=function(){
box.style.display='none';
}
</script>
</body>
</html>
有规律精灵图案例
核心思路:用for循环,修改精灵图的背景图片background-position
让循环里的i索引号乘以每个精灵图的高度(每个高度需要相同)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
<title>Document</title>
<style>
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var lis=document.querySelectorAll('li');
for(var i=0;i<lis.length;i++){
var index=i*44;
lis[i].style.backgroundPosition='0-'+index+'px';
}
</script>
</body>
</html>
表单案例
题目要求:
首先需要获得2个新事件,获得焦点onfocus 失去焦点onblur;
如果获得焦点,判断表单里面内容是否为默认文字,如果是默认文字就清空表单内容;
如果失去焦点,判断表单内容是否为空,如果为空,则表单内容改为默认文字
<body>
<input type="text" value="手机">
<script>
var text=document.querySelector('input');
text.οnfοcus=function(){ onfocus获得焦点
if(this.value=='手机'){
this.value='';
}
this.style.color='#333';
}
text.οnblur=function(){ onblur失去焦点
if(this.value==''){
this.value='手机';
}
this.style.color='#999';
}
</script>
</body>
案例:表单输入密码的正确格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
<link rel="stylesheet" href="./fonts/font-rigth/iconfont.css">
<title>Document</title>
<style>
div{
display: flex;
}
input{
width: 200px;
height: 22px;
margin-top: 15px;
}
.message{
display: inline-block;
font-size: 18px;
color: #999;
/* background: url(../pic/right.jpeg) no-repeat left center; */
padding-left: 20px;
}
.wrong{
font-size: 18px;
color: #999;
}
.icon-cuowu{
color: red;
font-size: 18px;
}
</style>
</head>
<body>
<div class="register">
<input type="text" class="ipt">
<p class="message"><i class="iconfont">请你输入6-16个整数</i></p>
</div>
<script>
//首先判断事件是表单失去焦点 onblur
//如果输入正确则显示正确的信息,正确的小图标
//如果输入不足6-16位,则提示错误,错误的小图标
//里面变化样式较多,采取className修改样式;
var ipt=document.querySelector('.ipt');
var message=document.querySelector('.message');
ipt.onblur=function(){
if(this.value.length<6||this.value.length>16){
message.className='message wrong';
message.innerHTML='输入的数字个数不符合要求';
iconfont.className='icon-cuowu';
}
else{
message.className='message right';
message.innerHTML='您输入的格式正确';
iconfont.className='icon-zhengque';
}
}
</script>
</body>
</html>
(代码有点小问题,小图标显示不出来,以后慢慢解决)
8、获取元素:
var imges=document.querySelector('.baidu').querySelectorAll('imges')8\
循环注册事件:
for(var i=0;i<imges.length;i++){
imges[i].οnclick=function(){
document.body.style.backgroundImage='url('+this.src+')';
}
}
9、排他思想
如果有一组元素,想要某一个元素实现某种样式,需要用到循环的排他思想
①所有元素全部清楚样式(干掉其他人)
②给当前元素设置样式
③注意顺序不能颠倒,首先干掉其他人,再设置自己。
案例:选中列表变色
案例分析:用到鼠标经过onmouseover,鼠标离开onmouseout;
核心思路:鼠标经过tr行,当前的行变背景颜色,鼠标离开去掉当前的颜色背景颜色;
第一行(thead里面的行)不需要变换颜色,因此我们获取的tbody里面的行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
<link rel="stylesheet" href="./fonts/font-rigth/iconfont.css">
<title>Document</title>
<style>
table {
margin: 100px auto;
box-sizing: border-box;
}
thead {
width: 600x;
border: 1px solid #333;
text-align: center;
}
thead tr{
height: 30px;
background-color: skyblue;
border: 1px solid #333;
}
tbody tr{
height: 30px;
}
tbody td{
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg{
background-color:pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农行金穗三个月定期开放债券</td>
<td>1.075</td>
<td>1.074</td>
</tr>
<tr>
<td>003526</td>
<td>农行金穗三个月定期开放债券</td>
<td>1.075</td>
<td>1.074</td>
</tr>
<tr>
<td>003526</td>
<td>农行金穗三个月定期开放债券</td>
<td>1.075</td>
<td>1.074</td>
</tr>
</tbody>
</table>
<script>
var trs=document.querySelector('tbody').querySelectorAll('tr');
for(var i=0;i<trs.length;i++){
trs[i].onmouseover=function(){
this.className='bg';
}
trs[i].onmouseout=function(){
this.className='';
}
}
</script>
</body>
</html>
案例:全选关联
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
<link rel="stylesheet" href="./fonts/font-rigth/iconfont.css">
<title>Document</title>
<style>
table{
margin: 100px auto;
border: 1px solid #333;
width: 260px;
}
thead {
background-color: skyblue;
color: #fff;
height: 45px;
}
tbody{
height: 35px;
}
tbody td{
border: 1px solid #333;
text-align: center;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll">
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="j_tbs">
<tr>
<td>
<input type="checkbox">
</td>
<td>iphone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>ipad pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>ipad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>apple watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
//1.全选做法:让下面的所有选框的checked属性跟随
var j_cbAll=document.getElementById('j_cbAll');
var j_tbs=document.getElementById('j_tbs').getElementsByClassName('input');
j_cbAll.onclick=function(){
console.log(this.checked);
for(var i=0;i<j_tbs.length;i++){
j_tbs[i].checked=this.checked;
}
}
for(var i=0;i<j_tbs.length;i++){
j_tbs[i].onclick=function(){
var flag=true;
for(var i=0;i<j_tbs.length;i++){
if(!j_tbs[i].checked){
flag=flase;
}
}
j_cbAll.checked=flag;
}
}
</script>
</body>
</html>
(以上代码错误不知道怎么改)
10、自定义属性操作
获取属性:
element.属性 获取属性值;获取内置属性值
element.getAttribute('属性’);主要获得自定义的属性值,我们程序员自定义 的属性值。
var div=document.querySelector('div');
console.log(div.getAttribute('index'));
设置元素属性值:
(1)element.属性=‘值’ 例:div.id='test'; div.className='navs';
(2)element.setAttribute('属性’,‘值’);主要针对自定义属性
div.setAttribute('index','2');
div.steAttribute('class','footer'); 注意这里写的是class而不是className.
移除属性:removeAttribute(属性)
div.removeAttribute('index');
tab栏切换案例:
思路分析:(1)点击会改变背景颜色,排他思想,加上变颜色类名
(2)下面显示模块和上面的相对应,核心思路:给上面的小li添加自定义属性index,属性从0开始编号;(不是直接添加而是使用setAttribute()添加)
(3)当我们点击tab_con里面对应序号的内容显示,其余隐藏(排他思想)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./fonts/font_9wrj6x0kdmd/iconfont.css">
<link rel="stylesheet" href="./fonts/font-rigth/iconfont.css">
<title>div</title>
<style>
li{
list-style: none;
}
.tab {
width: 600px;
margin: 100px auto;
}
.tab_list{
width: 1000px;
}
.tab_list ul {
display: flex;
}
.tab_list li{
/* float: left; */
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
background-color: gray;
}
.tab_list .current{
background-color: #c81623;
color: #fff;
}
.item_info{
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current" >商品介绍</li>
<li >规格与包装</li>
<li >售后与保障</li>
<li >商品评价</li>
<li >手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display:block;" >
商品介绍模块内容
</div>
<div class="item" >
规格介绍模块内容
</div>
<div class="item" >
售后介绍模块内容
</div>
<div class="item">
评价介绍模块内容
</div>
<div class="item">
手机介绍模块内容
</div>
</div>
</div>
<script>
//排他思想,点击一个背景颜色改变其他的恢复。
var tab_list=document.querySelector('.tab_list');
var lis=tab_list.querySelectorAll('li');
var items=document .querySelectorAll('.item');
for(var i=0;i<lis.length;i++){
lis[i].setAttribute('index',i);
lis[i].onclick=function(){
//清楚其他所有li的样式
for(var i=0;i<lis.length;i++){
lis[i].className='';
}
//留下自己的样式
this.className='current';
var index=this.getAttribute('index');
console.log(index);
for(var i=0;i<items.length;i++){
items[i].style.display='none';
}
items[index].style.display='block';
}
}
</script>
</body>
</html>