1.下拉菜单比span有优势,可以直接得到value值
<script>
window.onload= function(){
//需求:select的更改联动con-middle的背景图,yellow-star,con-bottom的更改
//步骤:1,获取事件源;2,绑定事件;3,书写事件驱动程序
//1;
function$(id){returndocument.getElementById(id);}
//获取星星和文字的数组;
vararrStar =[10,6,3,5,2,6,4,3,7,8,9,7];
vararrTxt =["白羊座的内容","金牛座的内容","双子座的内容","巨蟹座的内容","狮子座的内容","处女座的内容","天秤座的内容","天蝎座的内容","射手座的内容","摩羯座的内容","水瓶座的内容","双鱼座的内容"];
//2;
$("con_sele").onchange= function(){
//3;
//更改背景图;
$("con_icon").style.backgroundPosition= "0 "+(-this.value*50)+"px";
//更改星星;
$("con_star").style.width= arrStar[this.value]*8+ "px";
//更改内容;
$("con_txt").innerHTML= arrTxt[this.value];
}
}
</script>
<divclass="con-middle-menu">
<selectname=""id="con_sele">
<optionvalue="0">白羊座03.21-04.19</option>
<optionvalue="1">金牛座04.20-05.20</option>
<optionvalue="2">双子座05.21-06.21</option>
</select>
</div>
2.数组的常用方法
数组的添加和删除
<script>
//在数组的后面放入;
vararr = [1,3,5];
arr.push(7,9);
console.log(arr);
/*==========注释==========*/
//在数组前面放入;
vardom = [1,2,3,4];
dom.unshift(0);
console.log(dom);
console.log(dom.push(7));//返回的是数组的长度
/*==========注释==========*/
//删除最后一个数组;
vararr1 = [3,8,4];
arr1.pop();
console.log(arr1);
console.log(arr1.pop());//返回的是最后一个数组
/*==========注释==========*/
//删除第一个数组;
vararr2 = [2,4,3,7];
arr2.shift();
console.log(arr2);
console.log(arr2.shift());
</script>
数组的转换
<script>
//数组的连接;
vararr = [1,2,3,4];
vardom = [5,6,7,8,"a","c"];
console.log(arr.concat(dom));
//数组转换成字符串;
vartxt = ["aa","bb","cc"];
console.log(txt.join("-"));
console.log(txt);
//字符串转换成数组;
vararr2 = "a-b-c";
console.log(arr2.split("-"));
</script>
3.DOM
封装自己的class类名
<script>
window.onload= function(){
//封装自己的class类名;
functiongetClass(classname){
//支持的浏览器
if(document.getElementsByClassName){
returndocument.getElementsByClassName(classname);
}
//不支持的浏览器
vararr =[];//用于存放满足的数组
vardom =document.getElementsByTagName("*");
for(vari =0;i <dom.length;i++){
if(dom[i].className== classname){
arr.push(dom[i]);
}
}
returnarr;
}
console.log(getClass("demo").length);
}
</script>
<div></div>
<div></div>
<divclass="demo"></div>
<div></div>
<divclass="demo"></div>
<div></div>
<divclass="demo"></div>
<div></div>
<divclass="demo"></div>
<div></div>
封装自己的class类名分割版
window.onload= function(){
functiongetClass(classname){
//支持浏览器;
if(document.getElementsByClassName){
returndocument.getElementsByClassName(classname);
}
//不支持浏览器;
vararr =[];
vardom =document.getElementsByTagName("*");
for(vari =0;i <dom.length;i++){
//分割类名,转换成数组;
varTest =dom[i].className.split(" ");
for(varj =0;j <Test.length;j++){
if(Test[j]== classname){
arr.push(dom[i]);
}
}
}
returnarr;
}
console.log(getClass("test").length);
varchange = getClass("test");
for(vari =0;i <change.length;i++){
change[i].style.backgroundColor= "purple";
}
}
<divclass="demo"></div>
<div class="demo test"></div>
<div></div>
<div></div>
<divclass="test demo"></div>
<div></div>
<div></div>
<divclass="one test demo two"></div>
<div></div>
<div></div>
类添加id
window.onload= function(){
functiongetClass(classname,id){
//支持;
//有id的情况;
if(id){
vareleId =document.getElementById(id);
returneleId.getElementsByClassName(classname);
}else{
returndocument.getElementsByClassName(classname);
}
//不支持的情况;
//有id的情况;
if(id){
vareleId =document.getElementById(id);
returneleId.getElementsBytagName("*");
}else{
returndocument.getElementsByTagName("*");
}
vararr =[];
for(vari =0;i < dom.length;i++){
vartxt = dom[i].className.split(" ");
for(varj =0;j <txt.length;j++){
if(txt[j]==classname){
arr.push(dom[i]);
}
}
}
returnarr;
}
varaa = getClass("test","one");
for(vari =0;i <aa.length;i++){
aa[i].style.backgroundColor= "purple";
}
}
<divclass="demo"></div>
<div class="test"></div>
<div></div>
<divid="one">
<divclass="demo test one"></div>
<divclass="demo one"></div>
<div></div>
<divclass="demo"></div>
<divclass="one two test"></div>
</div>
<div></div>
<div></div>
<div></div>
4.节点
兄弟节点
window.onload=function(){
//兄弟节点;
varone =document.getElementById("one");
vartwo =one.nextElementSibling|| one.nextSibling;
two.style.backgroundColor= "red";
}
<ul>
<li>123123</li>
<li>123123</li>
<liid="one">123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
</ul>
孩子节点
<ulid="ul">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script>
varul = document.getElementById("ul");
varone = ul.childNodes;
//alert(one.length);
for(vari = 0;i < one.length;i++){
if(one[i].nodeType== 1){
one[i].style.backgroundColor= "red";
}
}
</script>
孩子节点--children
<ulid="ul">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script>
varul = document.getElementById("ul");
varone = ul.children;
alert(one.length);
</script>
节点操作
<divid="demo">
<divid="da"></div>
</div>
<script>
vardemo = document.getElementById("demo");
varchildrens = demo.children;
//创建节点;创造节点就要添加节点;
varone = document.createElement("div");
//添加节点;
demo.appendChild(one);//放到最后一个孩子的后面;
//创建节点;
vartwo = document.createElement("div");
//inserBefore必须写满两个参数;
demo.insertBefore(two,childrens[0]);//放到第一个孩子的前面;
demo.insertBefore(two,null);//放到最后一个;
//移除节点;
demo.removeChild(two);
//克隆节点;
varlast = childrens[0].cloneNode();
demo.appendChild(last);
demo.parentNode.appendChild(demo.cloneNode(true));
</script>