• 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 {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>
    View Code

    移入的时候变成蓝色  移出的时变成原来的颜色

     1 <style type="text/css">
 2     #aaa {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>
    View Code

    导航栏变色

     1 <style type="text/css">
 2     .aaa {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>
    View Code

    有导航条

     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              100px;
 7             height: 100px;
 8             background-color: red;
 9             float: left;
10             margin-right: 10px;
11         }
12 
13         .div2 {
14              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>
    View Code

     上面几个是移入移出的  这里在加上点击事件

     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              100px;
 7             height: 100px;
 8             background-color: red;
 9             float: left;
10             margin-right: 10px;
11         }
12 
13         .div2 {
14              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>
    View Code

    选项卡

     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              100px;
 7             height: 30px;
 8             background-color: red;
 9             float: left;
10             margin-right: 10px;
11         }
12 
13         .div2 {
14             position: absolute;
15              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>
    View Code

    非自动的大图轮播

     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>
    View Code

    css的

     1 .all {
 2     position: relative;
 3     margin-top: 30px;
 4     margin-left: 10%;
 5      80%;
 6     height: 500px;
 7     background-color: blue;
 8 }
 9 
10     .imga{
11         position: absolute;
12          100%;
13         height: 100%;
14         display:none;
15     }
16 
17 #left {
18     position: absolute;
19     left: 10px;
20     top: 200px;
21      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      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 }
    View Code

    用函数简化点

     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>
    View Code
  • 相关阅读:
    JVM 基础知识
    Maven 学习
    Java 中 split() 方法
    JDK、JRE、JVM三者联系与区别
    Effective C++ 笔记 —— Item 5: Know what functions C++ silently writes and calls
    Effective C++ 笔记 —— Item 4: Make sure that objects are initialized before they’re used
    Effective C++ 笔记 —— Item 3: Use const whenever possible
    Effective C++ 笔记 —— Item 2: Prefer consts, enums, and inlines to #defines
    Idea社区版使用插件完成正常开发
    DNS配置
  • 原文地址：https://www.cnblogs.com/zhangwei99com/p/6653513.html
Copyright © 2020-2023  润新知