多个tab栏切换class封装
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
.box {
width: 350px;
height: 300px;
border:1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.mt span {
display: inline-block;
width: 80px;
height: 30px;
background-color: pink;
text-align: center;
line-height: 30px;
cursor: pointer;
}
.mt span.current {
background-color: purple;
}
.mb li {
width: 100%;
height: 270px;
background-color: purple;
display: none;
}
.mb li.show {
display: block;
}
</style>
<script>
window.onload = function(){
//要想多个盒子不相互影响 ，我们可以通过id 给他们分开
//封装tab栏切换函数
function tab(obj){
var target = document.getElementById(obj);
var spans = target.getElementsByTagName("span");
var lis = target.getElementsByTagName("li");
for(var i=0;i<spans.length;i++)
{
spans[i].index = i;
spans[i].onmouseover = function(){
for(var j=0; j<spans.length;j++)
{
spans[j].className = "";
lis[j].className = "";
}
this.className = "current";
lis[this.index].className = "show";
}
}
}
tab("one");
tab("two");
tab("three");
}
</script>
</head>
<body>
<div class="box" id="one">
<div class="mt">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>八卦模块</li>
</ul>
</div>
</div>
<div class="box" id="two">
<div class="mt">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>八卦模块</li>
</ul>
</div>
</div>
<div class="box" id="three">
<div class="mt">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>八卦模块</li>
</ul>
</div>
</div>
</body>
两个小循环（比较少用）
以前所学：for（初始化；条件；增量）{}
新的：while() 当 do{} while{}
while(条件){ 语句 }
只要条件满足，就一直执行
var j = 1;
while(j<=100)
{
sum1+=j;
j++;
}
console.log(sum1);
结果5050
如果用for的话，一般主要是用for
var sum = 0, sum1 = 0, sum2 = 0;
for(var i=1;i<=100;i++)
{
sum = sum + i;
}
console.log(sum);
结果5050
do{} while()语句
var k = 1;
do {
sum2 += k;
k++;
}
while(k<=100);
console.log(sum2);
结果5050
while（）与do（）while（）的区别是什么？
do（）while（）先执行后判断，至少执行一次。
while（）先判断，如果不符合就不进行，如果符合再执行。不一定，有可能一次也不执行。
switch多分支语句
switch跟if else几乎是一样的，但是效率会更高。可以优先考虑switch。
switch(参数)
{
case 参数1：
语句；
break； 退出的意思
}
{
case 参数2：
语句；
break； 退出的意思
}
{
default； 默认（这句可有可不有）
语句；
}
<script>
window.onload = function(){
//获取元素
var txt = document.getElementById("txt");
var btn = document.getElementById("btn");
btn.onclick = function(){
var val = txt.value;
switch(val)
{
case "苹果":
alert("苹果的价格是: 5元");
break;
case "香蕉":
alert("香蕉的价格是: 2元");
break;
case "梨":
alert("梨的价格是: 1.5元");
break;
case "大白菜":
alert("大白菜的价格是: 9毛");
break;
default:
alert("今天没进货");
}
}
}
</script>
</head>
<body>
<input type="text" id="txt"/> <button id="btn">查询价格</button>
下拉菜单事件onchange
<style>
body {
background: url(images/chun1.jpg) no-repeat;
}
</style>
<script>
window.onload = function() {
var cho = document.getElementById("choose");
cho.onchange = function() {
var val = this.value;
switch (val)
{
case "1":
document.body.style.background="url(images/chun1.jpg) no-repeat";
break;
case "2":
document.body.style.background="url(images/xia1.jpg) no-repeat";
break;
case "3":
document.body.style.background="url(images/qiu1.jpg) no-repeat";
break;
case "4":
document.body.style.background="url(images/dong1.jpg) no-repeat";
break;
}
}
}
</script>
</head>
<body>
<select id="choose">
<option value="1">春意绵绵</option>
<option value="2">夏日炎炎</option>
<option value="3">秋风瑟瑟</option>
<option value="4">冬雪皑皑</option>
</select>
</body>
星座运势案例
这个案例的重点是选择下拉列表，有三个元素跟着一起改变。其中包含精灵图，以及星星的长度变化。
<script>
window.onload = function() {
function $(id) {return document.getElementById(id)};
var textArr = ["白羊座运势","金牛座运势","双子座运势","巨蟹座运势","狮子座运势","处女座运势","天秤座运势","天蝎座运势","射手座运势","摩羯座运势","水瓶座运势","双鱼座运势"];
var arr = [10,9,6,9,7,7,9,8,9,9,7,7];
$("stAr").style.width = arr[0]*8+"px";
$("sele").onchange = function() {
$("ico").style.backgroundPosition="0 "+(-50*this.value)+"px";
$("content").innerHTML = textArr[this.value];
$("stAr").style.width = arr[this.value]*8+"px";
}
}
</script>
</head>
<body>
<div class="box">
<div class="dt">星座运势</div>
<div class="dd">
<div class="dd-t">
<div class="icon" id="ico"></div>
<div class="right">
<select name="" id="sele">
<option value="1">白羊座 03.21-04.19</option>
<option value="2">金牛座 03.21-04.19</option>
<option value="3">双子座 03.21-04.19</option>
<option value="4">巨蟹座 03.21-04.19</option>
<option value="5">狮子座 03.21-04.19</option>
<option value="6">处女座 03.21-04.19</option>
<option value="7">天秤座 03.21-04.19</option>
<option value="8">天蝎座 03.21-04.19</option>
<option value="9">射手座 03.21-04.19</option>
<option value="10">摩羯座 03.21-04.19</option>
<option value="11">水瓶座 03.21-04.19</option>
<option value="12">双鱼座 03.21-04.19</option>
</select>
<div> 今日运势:
<span class="yunshi">
<span class="star" id="stAr"></span>
</span>
</div>
</div>
</div>
<div class="dd-b" id="content">
这几天的财运都很强，但是危机总在不知不觉之中发生了，例如：因为太过乐观而误判情势，导致投...[详细]
</div>
</div>
</div>
</body>
数组的常用方法
添加数组
push()方法可以向数组的末尾添加一个或多个元素，并返回新的长度。
var arr = [1,3,5];
arr.push(7,9); // 把 7 9 放到 arr 数组的后面
console.log(arr);
结果是[1,3,5,7,9]
unshift()可向数组的开头添加一个或更多元素，并返回新的长度。
var demo = [1,3,5];
demo.unshift(0);
console.log(demo);
结果是[0,1,3,5]
注意：
var dom = [1,3,5];
console.log(dom.push(7)); // 返回的是 数组的长度
结果是4，因为返回的是数组的长度。
删除数组内容
pop()删除最后一个元素，返回值是返回最后一个值。
var arrdele = [1,3,5];
console.log(arrdele.pop()); //返回的是 5
arrdele.pop(); // 删除3
console.log(arrdele); // 结果 1
shfit()删除第一个元素，返回值是第一个值
var arrdele = [1,3,5];
arrdele.shfit(); // 删除3
console.log(arrdele); // 结果 3,5
连接两个数组
concat()该方法用于连接两个或多个数组，它不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
aa.concat(bb);
var aa = [1,3,5]; var bb = ["a","b"];
console.log(aa.concat(bb)); /*结果[1,3,5,"a","b"]*/
join()把数组转换为字符串（常用）
arrayObject.join(separator)
数组名.join(符号) +-*/都可以转换。
var txt = ["aa","bb","cc"];
console.log(txt.join("*"));
结果aa*bb*cc
例子：var arr = [1,2,3,4];
var test = arr.join(“-”);
console.log(test) 1-2-3-4
var arr = [1,2,3,4];
arr.join(“*”);
注意：console.log(arr); [1,2,3,4] 为什么不变了，因为输出的是数组，数组是不变的，如果赋予一个变量承载，那么这个变量是改变的。
split()把字符串转换为数组（常用）
var txt = "aa-bb-cc";
console.log(txt.split("-"));
结果是[aa,bb,cc]
DOM(重点)
文档对象模型，处理网页内容的方法和接口。
DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能够让js操作html元素而制定的一个规范。
DOM树
节点
getElementById() id 访问节点
getElementsByTagName() 标签访问节点
getElementsByClassName() 类名 有兼容性问题
主流浏览器支持 ie 67 8 不支持 怎么办？ 我们自己封装自己的 类 。
封装自己的class类（以后用的多，要多写）
原理：我们要取出所有的盒子，利用遍历的方法，通过每一个盒子的className来判断，如果相等就留下。
封装一个class类（简单版），最后得出所要求的class类的个数。封装后可以键一个js文件，存进去以后直接调用。
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
<script>
window.onload = function() {
function getClass(classname) {
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
var arr = [];
var dom = document.getElementsByTagName("*");
for(var i= 0;i<dom.length;i++)
{
if(dom[i].className==classname)
{
arr.push(dom[i]);
}
}
return arr;
}
console.log(getClass("demo").length);
}
</script>
</head>
<body>
<div></div>
<div class="demo"></div>
<div class="demo"></div>
<div></div>
<div></div>
<div class="demo"></div>
<div></div>
<div></div>
<div class="demo"></div>
<div></div>
</body>
完善版（当类名中一个class是多个类名组成该如何取）
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
<script>
window.onload = function() {
// 封装自己的类名
function getClass(classname)
{
//判断支持否
if(document.getElementsByClassName)
{
return document.getElementsByClassName(classname);
}
var arr = []; //用于返回 数组
var dom = document.getElementsByTagName("*");
for(var i=0;i<dom.length;i++) // 遍历所有的 盒子
{
var txtarr = dom[i].className.split(" "); // 分割类名 并且 转换为数组
// ["demo","test"];
for(var j=0;j<txtarr.length;j++) // 遍历 通过类名分割的数组
{
if(txtarr[j] == classname)
{
arr.push(dom[i]); // 我们要的是 div
}
}
}
return arr;
}
var test=getClass("test");
for(var i=0;i<test.length;i++)
{
test[i].style.backgroundColor = 'purple';
}
}
</script>
</head>
<body>
<div></div>
<div class="demo"></div>
<div class="test"></div>
<div></div>
<div></div>
<div class="demo test one"></div>
<div class="demo one"></div>
<div></div>
<div class="demo"></div>
<div class="one two test"></div>
</body>
如果是取盒子里面的长类名，那么要使用id父亲来进行
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
margin: 10px;
}
</style>
<script>
window.onload = function() {
// 封装自己的类名
function getClass(classname,id)
{
//分为 支持 classname
if(document.getElementsByClassName)
{
//有id 的情况
if(id)
{
var eleId = document.getElementById(id);
return eleId.getElementsByClassName(classname);
}
else // 没有id
{
return document.getElementsByClassName(classname);
}
}
//不支持的情况
if(id)
{
var eleId = document.getElementById(id);
var dom = eleId.getElementsByTagName("*");
}
else
{
var dom = document.getElementsByTagName("*");
}
var arr = [];
for(var i=0;i<dom.length;i++)
{
var txtarr = dom[i].className.split(" ");
for(var j=0;j<txtarr.length;j++)
{
if(txtarr[j] == classname)
{
arr.push(dom[i]);
}
}
}
return arr;
}
// console.log(getClass("test","one").length);
var aa = getClass("test","one");
for(var i=0;i<aa.length;i++)
{
aa[i].style.backgroundColor = 'purple';
}
}
</script>
</head>
<body>
<div></div>
<div class="demo"></div>
<div class="test"></div>
<div></div>
<div></div>
<div id="one">
<div class="demo test one"></div>
<div class="demo one"></div>
<div></div>
<div class="demo"></div>
<div class="one two test"></div>
</div>
</body>
判断真假
| 我们用条件语句来判断5大数据类型中的真假； |
|
| 数据 |
结论 |
| 数字类型 |
所有数字都是真，0是假 |
| 字符串 |
所有字符串都是真，’ ’串是假 |
| 对象 |
所有对象都是真，null是假 |
| 未定义 |
undefined是假，没有真 |
节点关系
父节点：parentNode（常用）
demo.parentNode.appendChild(demo.cloneNode());把demo复制一份，然后放到自己爸爸的孩子里，也就是给自己添加一个兄弟。
关闭二维码案例：
<script>
window.onload = function(){
var x = document.getElementById("x");
x.onclick = function(){
this.parentNode.style.display = "none";
// 关掉的是他的 父亲
}
}
</script>
兄弟节点
nextSibling 下一个兄弟 亲的 ie 678 认识
nextElementSibling 其他浏览器认识的
previousSibling 上一个兄弟 ie 678 认识
previousElementSibling 其他浏览器认识的
我们想要兼容 我们可以合写 || 或者 （ie和其他浏览器都兼容，one的下一个兄弟div的颜色为红色）必须先写正常浏览器，最后在写ie678
var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";
下一个兄弟例子：
<script>
window.onload = function(){
var one = document.getElementById("one");
//one.nextSibling.style.backgroundColor = "red";
var div = one.nextElementSibling || one.nextSibling;
div.style.backgroundColor = "red";
}
</script>
</head>
<body>
<ul>
<li>123123</li>
<li>123123</li>
<li id="one">123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
</ul>
</body>
子节点（很少用）
firstChild 第一个孩子 ie678
firstElementChild 第一个孩子 正常浏览器
var one.firstElementChild || one.firstChild;
lastChild 最后一个孩子 ie678
lastElementChild 最后一个孩子 正常浏览器
常用的方式，子节点
childNodes 选出全部的孩子
childNodes：它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点 （嫡出）
火狐 谷歌等高本版会把换行也看做是子节点。nodeType==1就只会获取元素节点，不把换行也当成是子节点了。
拓展nodeType==2属性节点，nodeType==3文本节点
<body>
<ul id="ul">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script>
var ul = document.getElementById("ul");
var childrens = ul.childNodes; // 选择全部的孩子 亲的
//alert(childrens.length);
for(var i=0;i<childrens.length;i++)
{
if(childrens[i].nodeType == 1)
{
childrens[i].style.backgroundColor = "pink";
}
}
</script>
</body>
常用（重要）
children选取所有孩子，只包括元素节点。庶出，但是最好用。
DOM节点操作
新建节点，插入节点，删除节点，克隆节点
创建节点：
var div = document.createElement(“li”); 比如新创建一个li标签（节点）
插入节点：（只能创建子节点）
appendChild(); 添加子节点，添加孩子。并且放在最后面。如果之前有子节点，那么就在这个节点之后，再插入一个子节点。
insertBefore(); 插入谁谁谁的前面
insertBefore(插入的节点，参照节点);
如果第二个参数，也就是参照节点为null，那么则默认这个新生盒子放到最后面。怎么参照节点为null呢？在没有参照节点的时候用null。
childrens[0]意思是第一个孩子
childrens[0] == firstChild 虽然相等，但是firstChild第一个空格也能算出来，会出错，所以使用childrens[0]代表第一个元素节点更好。最后意思是把test放在最前面。
删除节点
removeChild(); 只能删除孩子节点。
克隆节点
cloneNode(); 复制节点
括号里面可以跟参数，如果里面是true，则深层复制，除了复制本盒子，还复制子节点。如果false，则浅层复制，只复制本节点，不复制子节点。
<body>
<div id="demo">
<div id="one"></div>
<div id="xiongda"></div>
</div>
<script>
var demo = document.getElementById("demo"); /*获取大盒子demo*/
var childrens = demo.children; /*代表大盒子里的所有子盒子*/
// 创建节点
var firstDiv = document.createElement("div"); /*新建了一个名为firsDiv的div*/
// 添加节点
demo.appendChild(firstDiv); /*把firsDiv这个div放在demo里的子盒子中最后*/
var test = document.createElement("div"); /*新建了一个text的div*/
demo.insertBefore(test,null); /*没有参照物用null，并且默认放到最后一个*/
//移除节点
var da = document.getElementById("xiongda"); /*获取id为xiongda并赋予变量名da*/
demo.removeChild(da); /*移除xiongda这个节点*/
//克隆节点
var last = childrens[0].cloneNode(); /*把第一个孩子克隆*/
demo.appendChild(last); /*把新克隆的放在子盒子中最后*/
demo.parentNode.appendChild(demo.cloneNode(true)); /*在demo的父亲里插入一个，这个是以demo为原型，并深层克隆*/
//他的爸爸添加孩子 就是我的兄弟
</script>
</body>
function tab(obj){}
tab(“a”);
tab(“b”);
tab(“c”);
这样的形式，在想多个盒子相互不影响，要单个控制调用的时候用，一般用ID给他们分开。封装tab栏切换函数。例子：多个tab栏切换。
function $(id){}
当有一个动作时，例如选择或者点击时，有很多的id类会有样式或者其他的变化，可以使用id的调用方法。
对于动态添加节点，可以先把整体样式做出来，然后再做添加节点，原本的类以及可以自动生成的删除即可。