javascript组成
/*
javascript组成:
ECMAScript(当前学习版本6) 规定了JS的基本语法
BOM (浏览器对象模型)
DOM (文档对象模型)
*/
/*
javascript常用场景:
行为交互
数据交互
逻辑交互
*/
/*
javaScript的学习阶段
基础语法结构
页面元素操作
深入学习---数据交互、组件实现、框架使用等
*/
特效交互的原理
特效交互:用js改变 我们的样式 或者 html结构 1. 写出结构 2. 找到需要修改的样式 3. 先手动模拟一下JS的操作 1) 排除布局问题 2) 大概形成思路 4. 写js btn2 点击: 找到box 给box 设置样式 display: none;
<button id="btn1" onclick="document.getElementById('box').style.display='block'">显示</button>
<button id="btn2" onclick="document.getElementById('box').style.display='none'">隐藏</button>
<div id="box"></div>
/* 获取元素 */
document.getElementById("btn1");
/*
document.getElementById("idName");
在文档中通过id来获取元素
document 文档
get 获取
Element 元素
By 通过
Id
console.log(); //在控制台输出信息
事件:与文档元素或浏览器发生的一些特定的交互瞬间,
会产生事件事件由系统事先设定的、
能被对象识别和响应的动作,如果click,mouseover...
可以绑定一个事件处理函数,当事件发生时,执行相对应的代码
onclick 点击事件(当用户点击这个元素的时候,我们要做的一些事情)
*/
函数
function fn(){
alert(1);
}
fn();
fn();
document.getElementById("btn1").onclick = fn;
/*
function 函数名(){
执行代码
}
函数名(); 正常调用函数
元素.onclick = 函数名; 在事件中调用函数
*/
document.getElementById("btn1").onclick = function(){
document.getElementById("box").style.display = "block";
};
变量
/*
变量:用来储任意类型的数据
变量声明: var 变量名字;
变量赋值: 变量名字 = 变量的值
变量使用:变量名字
注意: 使用变量前要先声明,否则程序会报错
*/
// var a;
// a = 1;
var a = 10;
a = 100;
alert(a);
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
var box = document.getElementById("box");
/*
函数:
匿名函数
有名字函数
命名:
由数字、字母、下划线和美元符($)组成
首字符不能使数字
不能使用JS的关键字和保留字
*/
btn1.onclick = function(){
box.style.display = "block";
};
btn2.onclick = function(){
box.style.display = "none";
};
btn3.onclick = function(){
box.style.width = "200px";
box.style.height = "200px";
};
命名
var miaovIndex = 1;
var MiaovIndex = 2;
console.log(miaovIndex,MiaovIndex);
/*
函数:
匿名函数
有名字函数
命名:
由数字、字母、下划线和美元符($)组成
首字符不能使数字
不能使用JS的关键字和保留字
关键字:js语法中正在使用的单词
保留字:将来可能在语法中使用的单词
大驼峰 --- 多个单词组合,从第一单词开始首字母大写
小驼峰 --- 多个单词组合,从第二单词开始首字母大写
*/
元素获取
<div id="box"></div>
var box = document.querySelector('.box');
console.log(box);
/*
document.querySelector('css 选择器');
根据一个 css 选择器 来获取元素
注意事项:
1) 当选择器匹配多个元素时,只能找到第一个
2) querySelector 是 h5 中 新增的方法,不支持IE8及以下
*/
属性操作
<div id="box" class="box">box1</div>
var box = document.querySelector('.box');
console.log(box.id);
box.id = "box2";
/*
属性的读操作
el.属性名
属性的写操作
el.属性名 = val
*/
属性操作注意事项
//1.
box.style.background = "blue";//样式的设置
//操作 style 属性,操作是元素的行间样式
//2.
console.log(box.className);
//在 js 中 元素的class 不叫 class 叫 className
//3.
console.log(box.innerHTML);
//el.innerHTML 元素从 开始标签到结束标签之间的内容
数字和字符串
var a = "1";
var b = "2";
console.log(a + b);
/*
在 js 中,放在一对引号之间的 0 到多个字符叫做字符串
+ 碰倒字符串的话,会进行字符串连接
*/
+=
var a = 1;
//a = a + 2;
a += 2; //自身再加2
console.log(a);
函数表达式
var a = function(){
alert("a");
};
a();
CssText
<div id="box"></div>
<input type="button" id="btnBg" value="background">
<input type="button" id="reset" value="重置">
var btnBg = document.querySelector('#btnBg');
var reset = document.querySelector('#reset');
btnBg.onclick = function(){
box.style.background = "blue";
};
reset.onclick = function(){
//box.style.cssText += "width:200px";
/*
box.style.cssText = "width:200px";
直接设置cssText 会把之前行间的所有样式都覆盖掉
*/
//console.log(box.style.cssText);
box.style.cssText = "";
};
属性操作的第二种写法
<select id="select">
<option>width</option>
<option>height</option>
<option>background</option>
</select>
<input type="text" value="300px" id="val">
<input type="button" value="设置" id="setBtn">
<div id="box"></div>
var box = document.getElementById('box');
var select = document.querySelector('#select');
var val = document.querySelector('#val');
var setBtn = document.querySelector('#setBtn');
setBtn.onclick = function(){
var attr = select.value;
var value = val.value;
//box.style.attr = value;
box.style[attr] = value;
/*
使用 . 操作属性时,属性名不能用变量
如果 属性名 是一个变量调用 请用 第二种写法 []
[] 属性操作第二种写法,在[] 接收是个字符串
*/
/*
加法运算
如果两边都为数字,做加法运算
字符串拼接
如果有一边为字符串,会把另一边转成字符串,做字符串拼接
*/
};
ClassList
<div id="box" class="box2 box3 box4"></div>
var box = document.querySelector('#box');
console.log(box.classList[2]);
//length 个数下标第几个: js 中从0开始计数
box.classList.add("box5","box6")
//向元素中添加class,每个class之间以, 号隔开
box.classList.remove("box2")
//删除元素中的某个class
box.onclick = function(){
box.classList.toggle("box5");
};
/*
toggle:
如果是一个已有的 class 就删除
如果是新的class 就添加
*/
box.onclick = function(){
console.log(box.classList.contains("box2"));
};
/*
contains 判断是否有这个class,
当元素中有这个class 就返回true,
否则返回false
布尔值:true(真,正确),false(假,错误)
*/
模拟复选框
#box {
margin: 100px auto;
width: 20px;
height: 20px;
border: 1px solid #000;
padding: 4px;
background-clip: content-box;
}
.checked {
background: #000;
}
<div id="box" class="checked"></div>
var box = document.querySelector('#box');
box.onclick = function(){
box.classList.toggle("checked")
};
if语句
/*
if(布尔值,判断条件的执行结果){
true 的时候执行里边的代码
}
*/
// if(false){
// console.log(1);
// }
/*
if(布尔值,判断条件的执行结果){
true 的时候执行里边的代码
} else {
false 的时候执行里边的代码
}
*/
if(true){
console.log(1);
} else {
console.log(2);
}
比较运算符
/*
常用比较运算符:
> 大于,< 小于, == 等于
>= 大于等于,<= 小于等于
比较运算符的运算结果 是 我们的 布尔值 true 或者 false
*/
var a = 1;
var b = 2;
console.log(a > b);
案例-图片切换
<img src="img/img01.jpg" class="show">
var img = document.querySelector('img');
var isFirst = true;// 里边 isFirst 记录当前显示的是哪一张,如果true代表显示第1张,false 代表显示第2张
img.onclick = function(){
if(isFirst){
// 如果为true 代表显示的第1张
img.src = "img/img02.jpg";
// 已经显示了 第二张,把 isFirst 改成 false
isFirst = false;
} else {
// false 代表显示第2张
img.src = "img/img01.jpg";
// 已经显示了 第1张,把 isFirst 改成 true
isFirst = true;
}
};
/*
自定义判断条件(开关)
没有特别的合适判读条我们可以人为去添加一些条件
*/
数字加减
<input type="button" value="+" id="next">
<input type="button" value="-" id="prev">
var next = document.querySelector('#next');
var prev = document.querySelector('#prev');
var nub = 0;
// next 点击的时候 nub + 1;
// prev 点击的时候 nub - 1;
/*
当 nub > 5 就 停止自增
当 nub < 0 就 停止自减
*/
next.onclick = function(){
//nub = nub + 1;
nub++;//自增 在自身的基础上 +1;
if(nub > 5){
nub = 5;
}
console.log(nub);
};
prev.onclick = function(){
//nub = nub - 1;
nub--;//自减 在自身的基础上 -1;
if(nub < 0){
nub = 0;
}
console.log(nub);
};
数组
var arr = [
"img/img01.jpg",
"img/img02.jpg",
"img/img03.jpg",
"img/img04.jpg"
];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[3]);
/*
length
下标
length - 1;
*/
console.log(arr[arr.length-1]);
多张图片切换-数组版
<div id="wrap">
<input type="button" value="prev" id="prev">
<input type="button" value="next" id="next">
<p id="page">0/0</p>
<img src="img/img01.jpg">
</div>
var next = document.querySelector('#next');
var prev = document.querySelector('#prev');
var img = document.querySelector('img');
var page = document.querySelector('#page');
var nub = 0;
var arr = [
"img/img01.jpg",
"img/img02.jpg",
"img/img03.jpg",
"img/img04.jpg"
];
page.innerHTML = (nub+1)+"/"+arr.length;
/*
0 - 2
获取数组的最后一位
*/
var toNext = function(){
nub++;
if(nub > arr.length - 1){
// 走过了最后一张,我们需要让他回到 0 张
nub = 0;
}
img.src = arr[nub];
page.innerHTML = (nub+1)+"/"+arr.length;
};
next.onclick = toNext;
prev.onclick = function(){
nub--;
if(nub < 0){
//走过了第一张,我们需要让他回到 最后一张
nub = arr.length - 1;
}
img.src = arr[nub];
page.innerHTML = (nub+1)+"/"+arr.length;
};
元素获取更多
// 在头部获取元素,由于代码还没有解析到下边的结构所以,找不到元素
// var box = document.getElementById("box");
// alert(box);
// console.log(box);
// null 空(空对象,找不到对象)
/*
window 是JS中的顶层对象
onload 加载完成
window.onload 页面上所有的资源加载完成之后,执行
*/
window.onload = function(){
var box = document.getElementById("box");
alert(box);
console.log(box);
};
var box = document.querySelectorAll('.box');
box[0].onclick = function(){
alert(1);
};
box[1].onclick = function(){
alert(1);
};
/*
parent.querySelectorAll('css选择器');
通过 css 选择器获取一组元素(类数组)
parent.getElementsByTagName('标签名');
通过 标签获取一组元素(类数组)
parent.getElementsByClassName('类名');
通过 class 获取一组元素(类数组)
一组元素在js中,不能直接操作哪怕,这组元素只有一个
操作一组元素的时候,需要使用使用下标,每次操作一个
如果我们想要批量操作一组元素的时候,需要使用 循环
*/
Parent
<div id="wrap">
<ul class="list">
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li>
<button>3</button>
</li>
<li>
<button>4</button>
</li>
</ul>
</div>
/*
document.getElementById("id名字")
parent.querySelector("css 选择器");
parent.querySelectorAll("css 选择器");
parent.getElementsByTagName("标签名字")
parent.getElementsByClassName("class名字")
*/
var wrap = document.getElementById('wrap');
var list = wrap.querySelector('.list');
var lis = list.getElementsByTagName("li");
var btns = list.querySelectorAll('button');
console.log(wrap,list,lis,btns);
//合法的CSS选择器
var wrap = document.getElementById('wrap');
var list = wrap.querySelectorAll('.list li:nth-of-type(2n)');
console.log(list);
循环
<div id="wrap">
<ul class="list">
<li>
<button>1</button>
</li>
<li>
<button>2</button>
</li>
<li>
<button>3</button>
</li>
<li>
<button>4</button>
</li>
</ul>
</div>
var wrap = document.getElementById('wrap');
var btns = wrap.querySelectorAll('button');
/*
在js不能直接操作一组元素,
如果我们想要批量操作一组元素,请使用循环
*/
// btns[0].onclick = function(){
// console.log(1);
// };
// btns[1].onclick = function(){
// console.log(1);
// };
// btns[2].onclick = function(){
// console.log(1);
// };
// btns[3].onclick = function(){
// console.log(1);
// };
for(var i = 0; i < 4; i++){
btns[i].onclick = function(){
console.log(1);
}
}
/*
1. 给 btns 这些按钮统一添加一个点击事件
2. 点击之后,弹出自己的value
*/
循环语句的执行流程
// 1. 初始值
// 2. 判断条件
// 3. 执行语句
// 4. 自增
/*
for (初始值; 判断条件;自增) {
执行语句
}
*/
/*
for循环过程
1. 初始化变量
2. 条件判断
3. 成立,执行循环体
4. 循环体执行完,条件变化
5. 进行2、3、4、2、3、4步骤
直到条件判断不成立,for循环停止
*/
for (var i = 0; i < 4;i++) {
console.log(i);
}
// for (var i = 1; i < 5;i += 2) {
// console.log(i);//1 3
// }
for(var i = 1; i <= 7; i += 3){
// 1 4 7
}
// 10
console.log(i);
通过for循环生成元素
#box {
width: 500px;
border: 1px solid #000;
overflow: hidden;
}
#box div {
float: left;
width: 98px;
height: 98px;
border: 1px solid #fff;
}
<div id="box"></div>
window.onload = function(){
var box = document.getElementById("box");
var inner = "";
for(var i = 0; i < 10; i++){
if(i < 5){
inner += '<div style="background:red;">'+i+'</div>';
} else {
inner += '<div style="background:yellow;">'+i+'</div>';
}
}
box.innerHTML = inner;
// 操作完innerHTML 之后,再去获取元素
var divs = box.querySelectorAll('div');
for(var i = 0; i < divs.length; i++){
// 循环是在页面加载完之后执行的
divs[i].onclick = function(){
/*
点击事件中的代码是在 用户点击之后才会执行,
这会外边的循环已经执行完了,所以在这里使用
外边循环中 i,只能拿到循环之后结果
*/
alert(i);
}
}
};
this
window.onload = function(){
var box = document.getElementById("box");
var inner = "";
for(var i = 0; i < 10; i++){
if(i < 5){
inner += '<div style="background:red;">'+i+'</div>';
} else {
inner += '<div style="background:yellow;">'+i+'</div>';
}
}
box.innerHTML = inner;
var divs = box.querySelectorAll('div');
for(var i = 0; i < divs.length; i++){
divs[i].onclick = function(){
console.log(this.innerHTML);
/*
在事件函数中,需要拿到当前的事件发生在
哪个元素 我们就需要用 this
this 在事件函数中,代表的是调用这个事件的元素
*/
}
}
};
window.onload = function(){
var box = document.getElementById("box");
box.onclick = sayThis;// 事件调用中,this指向当前事件发生的元素
function sayThis(){
console.log(this);
}
sayThis();//非事件调用 this 指向 window
};
选项卡头部&单选模拟
.nav {
width: 300px;
height: 30px;
border: 1px solid #000;
}
.nav a {
float: left;
width: 98px;
font: 14px/28px "宋体";
text-align: center;
border: 1px solid #000;
color: #000;
text-decoration: none;
}
.nav .active {
color: #fff;
background: #000;
}
<nav class="nav">
<a href="javascript:;" class="active">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</nav>
var nav = document.querySelector('.nav');
var navs = nav.querySelectorAll('a');
for(var i = 0; i < navs.length; i++){
navs[i].onclick = fn;
}
function fn(){
// 点击的时候 先清除所有
for(var i = 0; i < navs.length; i++){
navs[i].classList.remove("active");
}
this.classList.add("active");
}
一组多选模拟器
.nav {
width: 300px;
height: 30px;
border: 1px solid #000;
}
.nav a {
float: left;
width: 98px;
font: 14px/28px "宋体";
text-align: center;
border: 1px solid #000;
color: #000;
text-decoration: none;
}
.nav .active {
color: #fff;
background: #000;
}
<nav class="nav">
<a href="javascript:;">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</nav>
var nav = document.querySelector('.nav');
var navs = nav.querySelectorAll('a');
for(var i = 0; i < navs.length; i++){
navs[i].onclick = fn;
}
function fn(){
this.classList.toggle("active");
}
选项卡
.wrap {
margin: 50px auto;
width: 302px;
}
.nav {
height: 30px;
border: 1px solid #000;
}
.nav a {
float: left;
width: 98px;
font: 14px/28px "宋体";
text-align: center;
border: 1px solid #000;
color: #000;
text-decoration: none;
}
.nav .active {
color: #fff;
background: #000;
}
.cons {
border: 1px solid #fff;
}
.cons img {
width: 100%;
display: none;
}
.cons .show {
display: block;
}
<div class="wrap">
<nav class="nav">
<a href="javascript:;" class="active">选项一</a>
<a href="javascript:;">选项二</a>
<a href="javascript:;">选项三</a>
</nav>
<div class="cons">
<img src="img/img01.jpg" class="show">
<img src="img/img02.jpg">
<img src="img/img03.jpg">
<div>
</div>
/*
事件: onmouseover 鼠标移入 onmouseout 鼠标移出
1. 清除其他选中的
2. 给当前操作的加上选中状态
3. 鼠标移入 第 0 项 第0张img 显示,鼠标输入第1项,第1张显示..
*/
var navs = document.querySelectorAll('.nav a');
var imgs = document.querySelectorAll('.cons img');
for(var i = 0; i < navs.length; i++){
navs[i].index = i;// 想要在事件中知道,当前操作的是哪一个
navs[i].onmouseover = function(){
/* 去掉所有项的选中 或显示 */
for(var i = 0; i < navs.length; i++){
navs[i].classList.remove("active");
imgs[i].classList.remove("show")
}
/* 选中当前项 */
this.classList.add("active");
//console.log(this.id);
/* 把当前项对应的内容显示出来 */
imgs[this.index].classList.add("show");
};
}
自定义属性
var btn = document.querySelector('input');
btn.妙味课堂 = "大家都棒棒的";
console.log(btn.妙味课堂);
btn.onclick = function(){
alert(this.妙味课堂);
};
/*
内置属性:标准中已经给元素规定的属性
自定义属性:我们自己给元素设置的标准以外的属性
*/
##百度音乐全选
.wrap {
width: 764px;
height: 800px;
margin: 0 auto;
position: relative;
background: url(../img/bg.png) no-repeat center center;
overflow: hidden;
}
.baidu {
width: 480px;
height: 300px;
background: #fff url(../img/logo.png) no-repeat center center;
margin: 100px auto;
border-radius: 5px;
box-shadow: 2px 2px 3px rgba(0,0,0,.3);
}
#list {
width: 100%;
background: rgba(255,255,255,.9);
border-radius: 5px;
padding: 19px 0;
}
#list li {
height: 36px;
padding: 0 30px;
box-sizing: border-box;
color: #000000;
}
#list li div,.select .selectAll {
float: left;
width: 12px;
height: 12px;
-border: 1px solid #cacaca;
position: relative;
top: 11px;
margin-right: 20px;
font: 14px/12px arial;
cursor: pointer;
}
#list li span {
height: 100%;
font: 14px/36px "微软雅黑";
}
#list li span:nth-of-type(1) {
float: left;
}
#list li span:nth-of-type(2) {
float: right;
}
.select {
width: 100%;
height: 46px;
background: #e15671;
box-sizing: border-box;
padding: 0 30px;
font: 14px/46px "微软雅黑";
color: #eee;
border-radius: 0 0 5px 5px;
}
.select .selectAll {
top: 16px;
position: relative;
}
.select .selectAll span {
position: absolute;
top: 0px;
right: -48px;
cursor: pointer;
}
.select .selectAll:hover {
color: #fff;
}
.select div {
float: right;
height: 100%;
width: 300px;
}
.select div span {
display: inline-block;
height: 100%;
margin-right: 42px;
}
.select div span:nth-child(3) {
margin: 0;
}
.select div span em {
display: inline-block;
width: 24px;
height: 20px;
background: url(../img/1.png) no-repeat;
margin-right: 10px;
position: relative;
top: 5px;
}
.select div span:nth-of-type(1) em {
background-position: 0 0;
}
.select div span:nth-of-type(2) em {
background-position: 0 -21px;
height: 24px;
top: 6px;
}
.select div span:nth-of-type(3) em {
background-position: 0 -46px;
height: 24px;
}
<div class="wrap">
<div class="baidu">
<ul id="list">
<li>
<div><input type="checkbox" /></div>
<span>泡沫</span>
<span>邓紫棋</span>
</li>
<li>
<div><input type="checkbox" /></div>
<span>说爱你</span>
<span>蔡依林</span>
</li>
<li>
<div><input type="checkbox" /></div>
<span>稻香</span>
<span>周杰伦</span>
</li>
<li>
<div><input type="checkbox" /></div>
<span>我的梦</span>
<span>张靓颖</span>
</li>
<li>
<div><input type="checkbox" /></div>
<span>怎么说我不爱你</span>
<span>萧敬腾</span>
</li>
<li>
<div><input type="checkbox" /></div>
<span>无处安放</span>
<span>白若溪</span>
</li>
</ul>
<div class="select">
<span class="selectAll">
<input type="checkbox" id="selectAll" />
<span>
全选
</span>
</span>
<div class="others">
<span><em></em>收藏</span>
<span><em></em>添加</span>
<span><em></em>删除</span>
</div>
</div>
</div>
</div>
/*
1. 隔行变色 %
2. 绑定鼠标移入事件处理
移入的元素background为yellow
3. 绑定鼠标移出事件处理
如果 当下的input被选中
依然保持background为yellow
否则
还原之前移动隔行变色的颜色
4. 点击全选
如果 全选选中
所有的button都被选中,并且background为yellow
否则
所有的button都不被选中,并且background为还原回隔行变色的颜色
5. 点击单选
利用计数的方式,如果每一个checkbox都选中,则加一
如果 计的总数和checkbox总数相同
全选选中
否则
全选不选中
*/
// 1.获取元素
var lis = document.querySelectorAll('#list li');
var checkboxs = document.querySelectorAll('#list input');
var n = 0;
var len = lis.length;
for( var i = 0; i < len; i++ ){
// 2. 隔行变色
lis[i].style.background = i % 2 == 0 ? '#fff' : 'red';
// 5记录下标
lis[i].index = i;
// 3. 鼠标移入 背景颜色为 yellow
lis[i].onmouseover = function(){
this.style.background = 'yellow';
}
// 4. 移开 回到之前隔行变色的背景颜色
lis[i].onmouseout = function(){
// 5. 移开的时候,判断一下li中的checkbox是否是选中状态
// ! 取反的意思
if(!checkboxs[this.index].checked){
this.style.background = this.index % 2 == 0 ? '#fff' : 'red';
}
}
// 7. 单选 是否都选中 计数的方式 只要选中一个+1
// 计数总数 和 len 比较 如果相同 都选中 如果不相同 没全选中
checkboxs[i].onclick = function (){
n = 0; // 重置一下
// var n = 0;
for( var i = 0; i < len; i++ ){
if(checkboxs[i].checked){ // 如果checkbox选中
n++;
}
}
if( n == len ){
selectAll.checked = true;
}else{
selectAll.checked = false;
}
}
}
// 6全选
var selectAll = document.querySelector("#selectAll");
selectAll.onclick = function (){
for( var j = 0; j < len; j++ ){
checkboxs[j].checked = this.checked;
if(this.checked){ // 全选
lis[j].style.background = 'yellow';
}else{
lis[j].style.background = j % 2 == 0 ? '#fff' : 'red';
}
}
}