js基础第四天
2015-11-19 00:27
483 查看
多个tab栏切换class封装
两个小循环(比较少用)
以前所学:for(初始化;条件;增量){}
新的:while() 当 do{} while{}
while(条件){ 语句 }
只要条件满足,就一直执行
结果5050
如果用for的话,一般主要是用for
结果5050
do{} while()语句
结果5050
while()与do()while()的区别是什么?
do()while()先执行后判断,至少执行一次。
while()先判断,如果不符合就不进行,如果符合再执行。不一定,有可能一次也不执行。
switch多分支语句
switch跟if else几乎是一样的,但是效率会更高。可以优先考虑switch。
switch(参数)
{
case 参数1:
语句;
break; 退出的意思
}
{
case 参数2:
语句;
break; 退出的意思
}
{
default; 默认(这句可有可不有)
语句;
}
下拉菜单事件onchange
星座运势案例
这个案例的重点是选择下拉列表,有三个元素跟着一起改变。其中包含精灵图,以及星星的长度变化。
数组的常用方法
添加数组
push()方法可以向数组的末尾添加一个或多个元素,并返回新的长度。
结果是[1,3,5,7,9]
unshift()可向数组的开头添加一个或更多元素,并返回新的长度。
结果是[0,1,3,5]
注意:
结果是4,因为返回的是数组的长度。
删除数组内容
pop()删除最后一个元素,返回值是返回最后一个值。
shfit()删除第一个元素,返回值是第一个值
连接两个数组
concat()该方法用于连接两个或多个数组,它不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
aa.concat(bb);
join()把数组转换为字符串(常用)
arrayObject.join(separator)
数组名.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()把字符串转换为数组(常用)
结果是[aa,bb,cc]
DOM(重点)
文档对象模型,处理网页内容的方法和接口。
DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构。目的其实就是为了能够让js操作html元素而制定的一个规范。
DOM树
节点
getElementById() id 访问节点
getElementsByTagName() 标签访问节点
getElementsByClassName() 类名 有兼容性问题
主流浏览器支持 ie 67 8 不支持 怎么办? 我们自己封装自己的 类 。
封装自己的class类(以后用的多,要多写)
原理:我们要取出所有的盒子,利用遍历的方法,通过每一个盒子的className来判断,如果相等就留下。
封装一个class类(简单版),最后得出所要求的class类的个数。封装后可以键一个js文件,存进去以后直接调用。
完善版(当类名中一个class是多个类名组成该如何取)
如果是取盒子里面的长类名,那么要使用id父亲来进行
判断真假
节点关系
父节点:parentNode(常用)
demo.parentNode.appendChild(demo.cloneNode());把demo复制一份,然后放到自己爸爸的孩子里,也就是给自己添加一个兄弟。
关闭二维码案例:
兄弟节点
nextSibling 下一个兄弟 亲的 ie 678 认识
nextElementSibling 其他浏览器认识的
previousSibling 上一个兄弟 ie 678 认识
previousElementSibling 其他浏览器认识的
我们想要兼容 我们可以合写 || 或者 (ie和其他浏览器都兼容,one的下一个兄弟div的颜色为红色)必须先写正常浏览器,最后在写ie678
下一个兄弟例子:
子节点(很少用)
firstChild 第一个孩子 ie678
firstElementChild 第一个孩子 正常浏览器
var one.firstElementChild || one.firstChild;
lastChild 最后一个孩子 ie678
lastElementChild 最后一个孩子 正常浏览器
常用的方式,子节点
childNodes 选出全部的孩子
childNodes:它是标准属性,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点 (嫡出)
火狐 谷歌等高本版会把换行也看做是子节点。nodeType==1就只会获取元素节点,不把换行也当成是子节点了。
拓展nodeType==2属性节点,nodeType==3文本节点
常用(重要)
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,则浅层复制,只复制本节点,不复制子节点。
function tab(obj){}
tab(“a”);
tab(“b”);
tab(“c”);
这样的形式,在想多个盒子相互不影响,要单个控制调用的时候用,一般用ID给他们分开。封装tab栏切换函数。例子:多个tab栏切换。
function $(id){}
当有一个动作时,例如选择或者点击时,有很多的id类会有样式或者其他的变化,可以使用id的调用方法。
对于动态添加节点,可以先把整体样式做出来,然后再做添加节点,原本的类以及可以自动生成的删除即可。
<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的调用方法。
对于动态添加节点,可以先把整体样式做出来,然后再做添加节点,原本的类以及可以自动生成的删除即可。
相关文章推荐
- js基础第3天
- js基础第二天
- js基础第一天
- JS中eval函数(转)
- [javascript]数组基础
- 用js读、写、删除Cookie代码分享及详细注释说明
- [转]去百度面试的javascript 收获
- JavaScript SHA1加密算法实现详细代码
- js链表操作(实例讲解)
- js调用屏幕宽度的简单方法
- javascript中数组的定义及使用实例
- javascript获取系统当前时间的方法
- 基于JavaScript实现点击页面任何位置返回
- 12个常用的js正则表达式
- js鼠标点击图片切换效果实现代码
- 每天一篇javascript学习小结(属性定义方法)
- 跟我学习javascript的作用域与作用域链
- 跟我学习javascript的this关键字
- 跟我学习javascript的Date对象
- javascript获取系统当前时间的方法