zoukankan      html  css  js  c++  java

  • 005 DOM02

    　　在上一篇DOM的基础上，继续案例的实践。

    一：案例

    1.禁用文本框

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="禁用文本框" id="btn1">
 9     <input type="text" value="文本框" id="text">
10     <script>
11         var btn1=document.getElementById("btn1");
12         btn1.onclick=function () {
13             document.getElementById("text").disabled=true;
14         }
15     </script>
16 </body>
17 </html>

    　　效果：

    　　

    2.点击超链接，在下面出现一个大图

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <a href="image/00_1.png" id="ak">
 9         <img src="image/00_2.jpg" alt="">
10     </a><br>
11     <img src="" alt="" id="big">
12     <script>
13         document.getElementById("ak").onclick=function () {
14             document.getElementById("big").src=document.getElementById("ak").href;
15             return false;
16         }
17     </script>
18 </body>
19 </html>

    　　效果：

    　　

    3.相册

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         img {
 8             width: 150px;
 9             height: 100%;
10         }
11     </style>
12 </head>
13 <body>
14     <a href="image/00_3.jpg" title="A">
15         <img src="image/00_3.jpg" alt="111" title="A">
16     </a>
17     <a href="image/00_5.jpg" title="B">
18         <img src="image/00_5.jpg" alt="" title="B">
19     </a>
20     <a href="image/00_6.jpg" title="C">
21         <img src="image/00_6.jpg" alt="" title="C">
22     </a>
23     <a href="image/00_7.jpg" title="D">
24         <img src="image/00_7.jpg" alt="" title="D">
25     </a>
26 
27     <br>
28     <img src="" alt="" id="image" style=" 600px;">
29     <p id="des">选择一个图片</p>
30 
31 
32     <script>
33         var a = document.getElementsByTagName("a");
34         for (var i=0;i<a.length;i++){
35             a[i].onclick=function () {
36                 document.getElementById("image").src=this.href;
37                 document.getElementById("des").innerText=this.title;
38                 return false;
39             }
40         }
41     </script>
42 </body>
43 </html>

    　　效果：

    　　

    4.隔行变色

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         li {
 8             list-style: none;
 9         }
10     </style>
11 </head>
12 <body>
13     <input type="button" value="隔行变色" id="btn">
14     <ul id="ul">
15         <li>色白板擦</li>
16         <li>无色的农维年费</li>
17         <li>列为可能粉扑舞IE牛排</li>
18         <li>明晚地玻尿酸单车呢</li>
19         <li>依然未必</li>
20         <li>美津浓你后悔</li>
21         <li>不能说地方居委会吃</li>
22         <li><问客服部农委非农></问客服部农委非农></li>
23     </ul>
24     <script>
25         document.getElementById("btn").onclick=function () {
26             var li = document.getElementById("ul").getElementsByTagName("li");
27             for (var i=0;i<li.length;i++){
28                 if (i%2==0){
29                     li[i].style.backgroundColor="#ccc";
30                 } else{
31                     li[i].style.backgroundColor="#aaa";
32                 }
33             }
34         }
35 
36 
37     </script>
38 </body>
39 </html>

    　　效果：

    　　

    5.鼠标经过变色

    　　这里这要是鼠标的事件。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         li {
 8             list-style: none;
 9         }
10     </style>
11 </head>
12 <body>
13     <input type="button" value="鼠标经过变色" id="btn">
14     <ul id="ul">
15         <li>色白板擦</li>
16         <li>无色的农维年费</li>
17         <li>列为可能粉扑舞IE牛排</li>
18         <li>明晚地玻尿酸单车呢</li>
19         <li>依然未必</li>
20         <li>美津浓你后悔</li>
21         <li>不能说地方居委会吃</li>
22         <li><问客服部农委非农></问客服部农委非农></li>
23     </ul>
24     <script>
25         document.getElementById("btn").onclick=function () {
26             var li = document.getElementById("ul").getElementsByTagName("li");
27             for (var i=0;i<li.length;i++){
28                 //
29                 li[i].onmouseover=function () {
30                     this.style.backgroundColor="yellow";
31                 }
32                 //
33                 li[i].onmouseout=function () {
34                     //恢复事件
35                     this.style.backgroundColor="";
36                 }
37             }
38         }
39 
40 
41     </script>
42 </body>
43 </html>

    　　效果：

    　　

    6.鼠标经过二维码的展示与离开

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .nodeSmall {
 8             width: 50px;
 9             height: 50px;
10             background: url(image/bgs.png) no-repeat -159px -51px;
11             position: fixed;
12             right: 10px;
13             top: 40%;
14         }
15         .erweima {
16             position: absolute;
17             top: 0;
18             left: -150px;
19         }
20         .nodeSmall a {
21             display: block;
22             width: 50px;
23             height: 50px;
24         }
25         .hide {
26             display: none;
27         }
28         .show {
29             display: block;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="nodeSmall" id="node_small">
35         <a href="#"></a><!--锚定-->
36         <div class="erweima hide" id="er">
37             <img src="image/456.png" alt=""/>
38         </div>
39     </div>
40     <script>
41         var a = document.getElementById("node_small").getElementsByTagName("a")[0];
42         a.onmouseover=function () {
43             document.getElementById("er").className="erweima show";
44         }
45         a.onmouseout=function () {
46             document.getElementById("er").className="erweima hide";
47         }
48     </script>
49 </body>
50 </html>

    　　效果：

    　　

    7.根据表单标签的name值，获取value

    　　有一个新的函数

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="获取" id="btn"><br>
 9     <input type="text" name="AAA"><br>
10     <input type="text" name="BBB"><br>
11     <input type="text" name="CCC"><br>
12     <input type="text" name="AAA"><br>
13     <script>
14         document.getElementById("btn").onclick=function(){
15             var names=document.getElementsByName("AAA");
16             for (var i=0;i<names.length;i++){
17                 names[i].value=names[i].name;
18             }
19         }
20 
21     </script>
22 </body>
23 </html>

    　　效果：

    　　

    8.根据类的样式来获取元素

    　　有新函数，但是兼容性需要考虑，因为属于H5的

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .dv {
 8             width: 200px;
 9             height: 50px;
10             background-color: #ccc;
11             margin-top: 20px;
12         }
13         .dv2 {
14             width: 200px;
15             height: 50px;
16             background-color: red;
17             margin-top: 20px;
18         }
19     </style>
20 </head>
21 <body>
22     <p>额佛典欧恩</p>
23     <p>么破门委们</p>
24     <span class="dv">读课文你发我呢</span><br>
25     <span>拍农产品</span><br>
26     <div class="dv">
27         23233223ljhfnpoweijfn
28     </div>
29 
30     <script>
31         //根据样式class获取
32         var dv =document.getElementsByClassName("dv");
33         for (var i=0;i<dv.length;i++){
34             dv[i].onmouseover=function () {
35                 this.className="dv2";
36             }
37             dv[i].onmouseout=function () {
38                 this.className="dv";
39             }
40         }
41     </script>
42 </body>
43 </html>

    　　效果：

    　　

    9.根据选择器获取元素

    　　这个是根据id来获取。

    　　也属于H5的。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" value="效果" id="btn">
 9     <script>
10         var btn = document.querySelector("#btn");
11         btn.onclick=function () {
12             alert("njmnjnjolin");
13         }
14     </script>
15 </body>
16 </html>

    　　效果：

    　　

    10.获取焦点与失去焦点

    　　主要是失去焦点与获取焦点的事件

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <input type="text" value="输入内容" id="btn">
10     <script>
11         var btn = document.querySelector("#btn");
12         btn.onfocus=function () {
13             if(this.value=="输入内容"){
14                 this.value="";
15                 this.style.color="black";
16             }
17         }
18         btn.onblur=function () {
19             if(this.value.length==0){
20                 this.value="输入内容";
21                 this.style.color="gray";
22             }
23         }
24     </script>
25 </body>
26 </html>

    11.innerText，textContext，与兼容代码

    　　说明在代码中。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             width: 300px;
 9             height: 200px;
10             background-color: #ccc;
11         }
12     </style>
13 </head>
14 <body>
15     <input type="button" value="输入内容" id="btn">
16     <div id="dv"></div>
17     <script>
18         var btn = document.querySelector("#btn");
19         btn.onclick=function () {
20             // IE8不支持textContent，其他浏览器都支持；然后innerText是IE8的标准，都支持，不过火狐版本低时不支持
21             // document.getElementById("dv").textContent="洗净忧伤的尘埃";
22             // document.getElementById("dv").innerText="洗净忧伤的尘埃";
23 
24             //因此，写兼容代码，判断这个属性的类型，如果是undefined，则不支持
25             //设置任意的标签中间的任意文本内容
26             function setInnerText(ele,text) {
27                 //判断浏览器是否支持这个属性
28                 if(typeof ele.textContent=="undefined"){
29                     ele.innerText=text;
30                 }else {
31                     ele.textContent=text;
32                 }
33             }
34 
35             var text="洗净忧伤的尘埃";
36             setInnerText(document.getElementById("dv"),text);
37         }
38     </script>
39 </body>
40 </html>

    　　效果：

    　　

    12.innerHtml

    　　所有的浏览器都支持。

    　　所以，推荐使用。

    　　主要的功能是在标签中设置新的html标签内容，有显示效果。

    　　

    二：自定义属性

    1.获取li的自定义属性

    　　获取自定义属性，使用getAttribute函数。直接点是不能获取的。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         li {
 8             cursor: pointer;
 9             list-style: none;
10         }
11     </style>
12 </head>
13 <body>
14     <ul id="ul">
15         <li score="20">数学</li>
16         <li score="30">英语</li>
17         <li score="40">语文</li>
18         <li score="50">体育</li>
19     </ul>
20     <script>
21         var li = document.getElementById("ul").getElementsByTagName("li");
22         for (var i=0;i<li.length;i++){
23             li[i].onclick=function () {
24                 alert(this.getAttribute("score"));
25             }
26         }
27     </script>
28 </body>
29 </html>

    　　效果：

    　　

    2.给标签添加自定义属性

    　　使用setAttribute函数。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         li {
 8             cursor: pointer;
 9             list-style: none;
10         }
11     </style>
12 </head>
13 <body>
14     <ul id="ul">
15         <li>数学</li>
16         <li>英语</li>
17         <li>语文</li>
18         <li>体育</li>
19     </ul>
20     <script>
21         var li = document.getElementById("ul").getElementsByTagName("li");
22         for (var i=0;i<li.length;i++){
23             //先添加自定义属性
24             li[i].setAttribute("score",i+10);
25             li[i].onclick=function () {
26                 alert(this.getAttribute("score"));
27             }
28         }
29     </script>
30 </body>
31 </html>

    3.移除自定义属性

    　　使用removeAttribute函数。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div {
 8             width: 400px;
 9             height: 200px;
10             background-color: #ccc;
11         }
12     </style>
13 </head>
14 <body>
15     <input type="button" value="移除" id="btn">
16     <div id="di" score="10"></div>
17     <script>
18         document.getElementById("btn").onclick=function () {
19             document.getElementById("di").removeAttribute("score");
20         }
21     </script>
22 </body>
23 </html>

    　　移除类样式：

    　　　　这种方式，看效果后，知道是清除不干净的。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .cs {
 8             width: 400px;
 9             height: 200px;
10             background-color: #ccc;
11         }
12     </style>
13 </head>
14 <body>
15     <input type="button" value="移除" id="btn">
16     <div id="di" score="10" class="cs"></div>
17     <script>
18         document.getElementById("btn").onclick=function () {
19             document.getElementById("di").className="";
20         }
21     </script>
22 </body>
23 </html>

    　　效果：

    　　

    　　

    4.删除自带的属性

    　　可以继续使用removeAttribute函数。

    　　这样清除属性更加干净。

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .cs {
 8             width: 400px;
 9             height: 200px;
10             background-color: #ccc;
11         }
12     </style>
13 </head>
14 <body>
15     <input type="button" value="移除" id="btn">
16     <div id="di" score="10" class="cs"></div>
17     <script>
18         document.getElementById("btn").onclick=function () {
19             document.getElementById("di").removeAttribute("class");
20         }
21     </script>
22 </body>
23 </html>

    三：tab切换案例

    1.程序

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         ul {
13             list-style-type: none;
14         }
15 
16         .box {
17             width: 400px;
18             height: 300px;
19             border: 1px solid #ccc;
20             margin: 100px auto;
21             overflow: hidden;
22         }
23 
24         .hd {
25             height: 45px;
26         }
27 
28         /*上面*/
29         .hd span {
30             display: inline-block;
31             width: 96px;
32             background-color: pink;
33             line-height: 45px;
34             text-align: center;
35             cursor: pointer;
36         }
37         .hd span.current {
38             background-color: #ccc;
39         }
40 
41         /*影藏与展示*/
42         .bd li {
43             height: 255px;
44             background-color: #ccc;
45             display: none;
46         }
47         .bd li.current {
48             display: block;
49         }
50     </style>
51 </head>
52 <body>
53     <div class="box" id="box">
54         <div class="hd">
55             <span class="current">体育</span>
56             <span>娱乐</span>
57             <span>新闻</span>
58             <span>综合</span>
59         </div>
60         <div class="bd">
61             <ul>
62                 <li class="current">我是体育模块</li>
63                 <li>我是娱乐模块</li>
64                 <li>我是新闻模块</li>
65                 <li>我是综合模块</li>
66             </ul>
67         </div>
68     </div>
69     <script>
70         var box = document.getElementById("box");
71         var hd = box.getElementsByTagName("div")[0];
72         var bd = box.getElementsByTagName("div")[1];
73         var li = bd.getElementsByTagName("li");
74 
75         //所有的span
76         var span = hd.getElementsByTagName("span");
77         for (var i=0;i<span.length;i++){
78             // 保存索引
79             span[i].setAttribute("index",i);
80             //上面的功能实现
81             span[i].onclick=function () {
82                 for (var j=0;j<span.length;j++){
83                     span[j].removeAttribute("class");
84                 }
85                 this.className="current";
86 
87                 //下面的功能
88                 var index = this.getAttribute("index");
89                 for (var j=0;j<span.length;j++){
90                     li[j].removeAttribute("class");
91                 }
92                 li[index].className="current";
93             }
94         }
95 
96     </script>
97 </body>
98 </html>

    　　效果：

    　　

    　　

    　　
  • 相关阅读:
    Java IO: 读取classpath资源
    Java IO: Reader和Writer
    Java IO: 读写zip文件
    OpenFlow运行机制总结
    OpenFlow流表概述
    Java日志系统（学习总结）
    卷积神经网络重要回顾
    Java Servlet学习笔记
    fragment实例
    Fragment应用
  • 原文地址：https://www.cnblogs.com/juncaoit/p/11221530.html
Copyright © 2011-2022 走看看