JS 操作对象 事件 样式
1、获取标记对象
css 1 - class 2 - id 3 - 标记选择器
js 1 - class 2 - id 3 - 标记 4 - name
+ document.getElementById('id')； - 获取一个对象
+ document.getElementsByClassName('class'); - 获取的是一个数组
+ document.getElementsByTagName('标记'); - 获取的也是一个数组
<input type="button" name="ccc"/> 这里的name是给服务器发送的
+ document.getElementsByName('name'); - 获取的也是一个数组
2、掌握三个事件
+ onclick - 点击事件
+ onmouseover - 鼠标移入事件
+ onmouseout - 鼠标移出事件
3、控制标记的样式
标记对象.style.样式 = "值";
样式里带 “-” 要删掉，后面的第一个字母变为大写
放在等号右边是取值，可以看到元素内联样式的值
js里，对象的index属性，可以记录一个int类型的值
例如：移入div 变大 移出的时候便会原位
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <title></title> 4 <style type="text/css"> 5 #aaa {width:100px; 6 height:100px; 7 background-color:red; 8 } 9 </style> 10 </head> 11 <body> 12 <div id="aaa"></div> 13 14 </body> 15 </html> 16 <script type="text/javascript"> 17 var a = document.getElementById('aaa'); 18 //移入 变大 19 a.onmouseover = function () { 20 a.style.width = "200px"; 21 a.style.height = "200px"; 22 } 23 //移除回到原位 24 a.onmouseout = function () { 25 a.style.width = "100px"; 26 a.style.height = "100px"; 27 } 28 </script>
移入的时候变成蓝色 移出的时变成原来的颜色
1 <style type="text/css"> 2 #aaa {width:100px; 3 height:100px; 4 background-color:red; 5 } 6 </style> 7 </head> 8 <body> 9 <div id="aaa"></div> 10 11 </body> 12 </html> 13 <script type="text/javascript"> 14 var a = document.getElementById('aaa'); 15 //移入 变大 16 a.onmouseover = function () { 17 a.style.backgroundColor = "blue"; 18 } 19 //移除回到原位 20 a.onmouseout = function () { 21 a.style.backgroundColor = "red"; 22 } 23 </script>
导航栏变色
1 <style type="text/css"> 2 .aaa {width:100px; 3 height:100px; 4 background-color:red; 5 float:left; 6 margin-right:10px; 7 } 8 </style> 9 </head> 10 <body> 11 <div class="aaa"></div> 12 <div class="aaa"></div> 13 <div class="aaa"></div> 14 <div class="aaa"></div> 15 <div class="aaa"></div> 16 17 </body> 18 </html> 19 <script type="text/javascript"> 20 var a = document.getElementsByClassName('aaa'); 21 for (var i = 0; i < a.length; i++) 22 { 23 //移入的时候变为绿色 24 a[i].onmouseover = function () { 25 this.style.backgroundColor = "green";//这里的this代表移入哪个div 代表的哪个div 26 //就是a[i] 不过i在function函数里面不是那个索引了 是长度了所以用this 27 } 28 //移出的时候变为红色 29 a[i].onmouseout = function () { 30 this.style.backgroundColor = "red";//同上 31 } 32 } 33 </script>
有导航条
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title></title> 4 <style type="text/css"> 5 .aaa { 6 width: 100px; 7 height: 100px; 8 background-color: red; 9 float: left; 10 margin-right: 10px; 11 } 12 13 .div2 { 14 width: 100px; 15 height: 600px; 16 background-color: green; 17 display: none; 18 float:left; 19 margin-right:10px; 20 margin-top:110px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="aaa"> 26 <div class="div2"></div> 27 </div> 28 <div class="aaa"> 29 <div class="div2"></div> 30 </div> 31 <div class="aaa"> 32 <div class="div2"></div> 33 </div> 34 <div class="aaa"> 35 <div class="div2"></div> 36 </div> 37 <div class="aaa"> 38 <div class="div2"></div> 39 </div> 40 </body> 41 </html> 42 <script type="text/javascript"> 43 var a = document.getElementsByClassName('aaa'); 44 var b = document.getElementsByClassName('div2'); 45 for (var i = 0; i < a.length; i++) { 46 //索引 47 a[i].index = i; 48 //移入的时候变为蓝色 49 a[i].onmouseover = function () { 50 this.style.backgroundColor = "blue";//这里的this代表移入哪个div 代表的哪个div 51 //就是a[i] 不过i在function函数里面不是那个索引了 是长度了所以用this 52 b[this.index].style.display = "block"; 53 } 54 //移出的时候变为红色 55 a[i].onmouseout = function () { 56 this.style.backgroundColor = "red";//同上 57 b[this.index].style.display = "none"; 58 } 59 } 60 </script>
上面几个是移入移出的 这里在加上点击事件
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title></title> 4 <style type="text/css"> 5 .aaa { 6 width: 100px; 7 height: 100px; 8 background-color: red; 9 float: left; 10 margin-right: 10px; 11 } 12 13 .div2 { 14 width: 100px; 15 height: 600px; 16 background-color: green; 17 display: none; 18 float:left; 19 margin-right:10px; 20 margin-top:110px; 21 } 22 </style> 23 </head> 24 <body> 25 <div class="aaa"> 26 <div class="div2"></div> 27 </div> 28 <div class="aaa"> 29 <div class="div2"></div> 30 </div> 31 <div class="aaa"> 32 <div class="div2"></div> 33 </div> 34 <div class="aaa"> 35 <div class="div2"></div> 36 </div> 37 <div class="aaa"> 38 <div class="div2"></div> 39 </div> 40 </body> 41 </html> 42 <script type="text/javascript"> 43 var a = document.getElementsByClassName('aaa'); 44 var b = document.getElementsByClassName('div2'); 45 for (var i = 0; i < a.length; i++) { 46 //索引 47 a[i].index = i; 48 //点击的时候 变为黑色 导航条显示 49 a[i].onclick = function () { 50 //每个导航都变为原来的颜色 导航条隐藏 51 for(var j=0;j<a.length;j++) 52 {a[j].style.backgroundColor="red"; 53 b[j].style.display="none"; 54 } 55 this.style.backgroundColor = "black"; 56 b[this.index].style.display = "block"; 57 } 58 //移入的时候变为蓝色 59 a[i].onmouseover = function () { 60 if(this.style.backgroundColor!="red") 61 this.style.backgroundColor = "blue"; 62 } 63 //移出的时候变为红色 导航条隐藏 64 a[i].onmouseout = function () { 65 if(this.style.backgroundColor!="balck") 66 { this.style.backgroundColor = "red";} 67 } 68 } 69 </script>
选项卡
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title></title> 4 <style type="text/css"> 5 .aaa { 6 width: 100px; 7 height: 30px; 8 background-color: red; 9 float: left; 10 margin-right: 10px; 11 } 12 13 .div2 { 14 position: absolute; 15 width: 540px; 16 height: 330px; 17 margin-top:33px; 18 background-color: green; 19 z-index= 20 } 21 </style> 22 </head> 23 <body> 24 <div class="aaa"></div> 25 <div class="aaa"></div> 26 <div class="aaa"></div> 27 <div class="aaa"></div> 28 <div class="aaa"></div> 29 <!-- 下面带数字 更更直观看到那一页--> 30 <div class="div2">111</div> 31 <div class="div2">222</div> 32 <div class="div2">333</div> 33 <div class="div2">444</div> 34 <div class="div2">555</div> 35 36 </body> 37 </html> 38 <script type="text/javascript"> 39 var a = document.getElementsByClassName('aaa'); 40 var b = document.getElementsByClassName('div2'); 41 var zend = 20; 42 for (var i = 0; i < a.length; i++) { 43 //索引 44 a[i].index = i; 45 //点击 打开哪一个导航 就打开那一页选项卡 46 a[i].onclick = function () { 47 for (var j = 0; j < a.length; j++) { 48 a[j].style.backgroundColor = "red"; 49 } 50 this.style.backgroundColor = "black"; 51 b[this.index].style.zIndex = zend; 52 zend++; 53 } 54 //移入 颜色变为蓝色 55 a[i].onmouseover = function () { 56 if (this.style.backgroundColor != "black") 57 this.style.backgroundColor = "blue"; 58 } 59 //移出 颜色变为原来的颜色 红色 60 a[i].onmouseout = function () { 61 if (this.style.backgroundColor == "blue") 62 this.style.backgroundColor = "red"; 63 } 64 } 65 </script>
非自动的大图轮播
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title></title> 4 <link href="StyleSheet.css" rel="stylesheet" /> 5 </head> 6 <body> 7 <!--大图轮播总框架--> 8 <div class="all"> 9 <img class="imga" src="1L.jpg" style="display: block;" /> 10 <img class="imga" src="2.jpg" /> 11 <img class="imga" src="3.jpg" /> 12 <img class="imga" src="4.jpg" /> 13 <img class="imga" src="5.jpg" /> 14 <div id="left"><</div> 15 <div id="right">></div> 16 </div> 17 </body> 18 </html> 19 <script type="text/javascript"> 20 var left = document.getElementById("left"); 21 var right = document.getElementById("right"); 22 var count = 0; 23 var tu = document.getElementsByClassName('imga'); 24 //点击右边 25 right.onclick = function () { 26 for (var i = 0; i < tu.length; i++) { 27 tu[i].style.display = "none"; 28 } 29 count++; 30 if (count > (tu.length - 1)) 31 count = 0; 32 tu[count].style.display = "block"; 33 } 34 //点击左边 35 left.onclick = function () { 36 for (var i = 0; i < tu.length; i++) { 37 tu[i].style.display = "none"; 38 } 39 count--; 40 if (count < 0) 41 count = tu.length - 1; 42 tu[count].style.display = "block"; 43 } 44 </script>
css的
1 .all { 2 position: relative; 3 margin-top: 30px; 4 margin-left: 10%; 5 width: 80%; 6 height: 500px; 7 background-color: blue; 8 } 9 10 .imga{ 11 position: absolute; 12 width: 100%; 13 height: 100%; 14 display:none; 15 } 16 17 #left { 18 position: absolute; 19 left: 10px; 20 top: 200px; 21 width: 30px; 22 height: 100px; 23 z-index: 1000; 24 cursor: pointer; 25 color: white; 26 font-size: 60px; 27 line-height:100px; 28 background-color: black; 29 } 30 31 #right { 32 position: absolute; 33 right: 10px; 34 top: 200px; 35 width: 30px; 36 height: 100px; 37 z-index: 1000; 38 cursor: pointer; 39 color: white; 40 font-size: 60px; 41 line-height:100px; 42 background-color: black; 43 }
用函数简化点
1 head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title></title> 4 <link href="StyleSheet.css" rel="stylesheet" /> 5 </head> 6 <body> 7 <!--大图轮播总框架--> 8 <div class="all"> 9 <img class="imga" src="1L.jpg" style="display: block;" /> 10 <img class="imga" src="2.jpg" /> 11 <img class="imga" src="3.jpg" /> 12 <img class="imga" src="4.jpg" /> 13 <img class="imga" src="5.jpg" /> 14 <div id="left"><</div> 15 <div id="right">></div> 16 </div> 17 </body> 18 </html> 19 <script type="text/javascript"> 20 var left = document.getElementById("left"); 21 var right = document.getElementById("right"); 22 var count = 0; 23 var tu = document.getElementsByClassName('imga'); 24 //点击右边 25 right.onclick = function () 26 { 27 move(1); 28 } 29 //点击左边 30 left.onclick = function () { 31 move(0); 32 } 33 34 35 function move(a) { 36 for (var i = 0; i < tu.length; i++) { 37 tu[i].style.display = "none"; 38 } 39 //如果向左移 那么给a=0 40 if (a == 0) { 41 count--; 42 if (count < 0) 43 count = tu.length - 1; 44 tu[count].style.display = "block"; 45 } 46 //否则向右移动 47 else 48 { 49 count++; 50 if (count > (tu.length - 1)) 51 count = 0; 52 tu[count].style.display = "block"; 53 } 54 55 } 56 </script>
