Day4
Tab栏封装函数:
多个Tab栏的函数封装:
<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>
注: onchange 事件:
当域内容发生改变时触发事件.
小结:
主要运用了对象的自定义属性获取并赋值索引号(obj.index = i) 以及排他思想和函数传参的特点进行的,
解读多个tab栏中封装函数具体实现流程:
首先创建函数进行封装,声明形参获取ID变量(var target = document.getElementById(id);),以便为下面的变量提供需要改变类别的相关内容(如:属性,具体内容等),接着获取某个类别的标签元素,(如:span,li等.),然后再通过target形参的某个对象进行指定某个类别中的span,li等.接着跟之前的tab切换和排他思想 对象的自定义属性值用以对当前对象的className进行赋值,最后调用函数给予某类对象参数.
三个循环:
1 for(){...;}
2
var i = 0;
while(表达式){
...;
i++;
}
3 do(...;){
表达式;
i++;
}
obj = 值;
switch:
switch(值){
case “值1”:
代码..
break;
case “值2”:
代码..
break;
case “值3”:
代码..
break;
default:
代码..
break;
}
下拉菜单选项改变背景:
知识点: switch的应用
回顾代码:
var sele = document.getElementById(“seleObj”);
sele.onchange = function(){
switch(this.value){ //以获取当前的value值进行对case匹配
case “1”:
document.body.style.backgroundImage = “url(xx.jpg)”;
break;
case “2”:
document.body.style.backgroundImage = “url(xx.jpg)”;
break;
case “3”:
document.body.style.backgroundImage = “url(xx.jpg)”;
break;
case “4”:
document.body.style.backgroundImage = “url(xx.jpg)”;
break;
}
}
星座运势:
关键点:
1 obj.index = 值;
2 this.value 以及 this.value 对position 和 width的计算和使用的小细节.[ “0 ”+ (this.value * -平均值) + “px” ]
3 原有逻辑代码简化的函数封装.
4 数组的应用.
5 默认显示第一个的相应内容.
数组的添\删常用方法:
添加:
push():给数组末尾加入新值并返回新长度.
注意：
var arr = [1,2,3,4];
console.log(arr.push(8)); 结果是 5 返回改数组的长度
如果这么写：
var arr = [1,2,3,4];
arr.push(8);
console.log(arr); 结果 就是 [1,2,3,4,8]
unshift():给数组最前加入新值并返回新长度.
删除:
pop(): 删除数组最后一个加入新值并返回最后一个值.
注意:
var arr = [1,2,3,4,5,6,12];
console.log(arr.pop()); 结果是 12 返回最后一个元素
var arr = [1,2,3,4];
arr.pop(); //删除最后一个元素
console.log(arr); 结果 就是 [1,2,3]
shift():删除数组第一个值并返回第一个值.
concat ():
两个数组合并: var arr1 = [1,2,3] var arr2 = [‘a’,’b’,’c’]
用法: arr1.concat(arr2); 得到 [1,2,3,’a’,’b’,’c’];
join(): 数组转换为字符串
语法:
arrayObject.join(separator) //分隔符
数组名.join(符号)
参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
var arr = [1,2,3];
console.log(arr.join(“-”)) 结果就是： 1-2-3 字符串
例:
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():
把字符串转换为数组.
语法:
stringObject.split(separator,howmany) //多少
参数 separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
例:
var txt = “1-2-3”;
var test = txt.split(“-”)
console.log(test) [“1”,”2”,”3”];
DOM:
分为三个部分:
1 ECMAscript 欧洲计算机制造商协会
制定js操作节点的规范.描述了JS的语法和基本对象。
2 DOMdocument object modle 文档对象模型
访问节点的对象模型
3 BOMbrowser object modle浏览器对象模型
与浏览器交互的方法和接口
DOM 定义:
DOM为文档提供了结构化表示,并定义了如何通过脚本来访问文档结构.
目的就是为了让JS操作HTML元素制定的一个规范.
节点\访问节点:
就是访问结构中的元素. 如: 标签 标记 元素, 都是 节点.
整个文档就是一个文档节点。
而每一个HMTL标签都是一个元素节点。标签中的文字则是文字节点。标签的属性是属性节点。一切都是节点……
几个访问节点 ：
getElementById() id 访问节点
getElementsByTagName() 标签访问节点
getElementsByClassName() 类名 有兼容性问题
主流浏览器支持 ie 678 不认识
封装自己的class类:
场景:
在于体现出使用多个相同样式的classname类名中,方便对这个类别进行统一更改,有非常好的维护性,复用性等..
回顾:
//第一种支持该语句的方式直接返回classname
if(document.getElememntByClassName){
return document.getElementByClassName(classname);
}
//第二种不支持上段代码条件的解决方案,针对IE浏览器
//创建后续需要存储的数组容器
var arr = [];
//获取文档内所有的标签元素用于过滤符合条件的
var dom = document.getElementsByTagName(“*”);
//遍历文档所有的元素以获取符合条件的
for(var i = 0;i<dom.length;i++){
//声明一个类似数组的变量用于对获取到的元素进行分割(为排出两个及两个以上的类名包含该classname)
var txtarr = dom[i].className.split(“ ”);
注:该语句是为了文档内所有标签的className(类名)进行” ”的分割,支持分割符的则存储到txtarr,所以这里的txtarr类似于数组容器
//再进行对txtarr数组内的元素进行遍历以获取最终符合条件(classname的那个标签)
for(var j = 0; j<txtarr.length;j++){
//判断该数组内的元素是否等于传参的那个对象,符合则把该元素类名的那个标签存储到arr的数组中.
if(txtarr[j] == classname){
//最关键的地方:这里是满足符合classname 的这个条件的标签元素存储到arr数组中,而不是classname!!
arr.push(dom[i]);
}
}
}
return arr;
后续再进行对该存储的数组进行操作.
源代码:
<script>
window.onload = function(){
function getClass(classname){
//如果浏览器支持则直接返回
if (document.getElementsByClassName) {
return document.getElementsByClassName(classname);
}
//创建存放元素的盒子
var arr =[];
//获取所有标签用于判断标签内是否含有classname
var dom = document.getElementByTagName("*");
//遍历文档内所有元素
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]); //为什么是i? 因为i是该类名的盒子(div)
}
}
}
return arr;
}
}
访问关系:
父节点:
parentNode 最大的 亲的
某个元素.parentNode.style.backgroundColor = “#333”;
兄弟节点:
nextSibling 下一个兄弟 IE678 认识
nextElementSibling 其他浏览器认识
previousSibling 上一个兄弟
previousElemetSibling 其他浏览器认识
要兼容可写成:
obj.previousSibling || obj.previousElementSibling
子节点:
firstChild 第一个孩子 IE678
firstElementChild 第一个孩子 正常浏览器
lastChild 最后一个孩子 IE678
lastElementChild 最后一个孩子 正常浏览器
孩子节点:
childNodes:选出全部的孩子
它是标准属性,返回指定元素的子元素集合,包括HTML节点,所有属性,文本节点
火狐和谷歌等高版本浏览器会把注释也解析为子节点
例:
<ul>
<li>123</li>
<li>123</li> //这里有七个节点
<li>123</li>
</ul>
利用nodeType == 1 时才是节点,来获取元素节点,标签
ps:
nodeType == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点
<a href =”xxxxx”> 文本 </a>
<a>: 元素节点 href: 属性节点 文本: 文本节点
解决换行符被解析为节点的方法:
<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>
children:
(重要) 选取所有的孩子(只有元素节点)
这个更合适,但是IE678包含注释节点,需要避开, 使用nodeType == 1 解决
DOM节点操作:
新建 插入 删除 克隆 等.
创建节点:
var somevalue = document.creatElement(“somenode”);
生成一个新的元素节点,
插入节点:
创建完的节点必须要插入使用才有效!
1: appendChild( ); 添加孩子,
2: insertBefore(插入的节点, 参照节点 ); 子节点,添加孩子
例:
demo.insertBefore(test,childrens[0]); //放到第一个孩子的前面
demo.insertBefore(test,null);
如果参照的节点为null 那么这个新添加的节点则放到孩子的最后面,
删除节点:
removeChild(); 孩子节点
例:
var da = document.getElementById(“xiongda”);
demo.removeChild(da);
克隆节点:
cloneNode();
复制节点
里面可跟参数, 如果是true 则深层复制, 复制本身并复制子节点,
如果是false 则浅层赋值,则只复制本身不复制子节点.
浙公网安备 33010602011771号