05_进一步操作页面的元素

Posted zach0812

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了05_进一步操作页面的元素相关的知识,希望对你有一定的参考价值。

前面复习:

技术图片

 

 

 

获取文档中对象的方法:

技术图片

操作标签的属性:

技术图片

 

 

操作元素的样式:

技术图片

 

 

技术图片

 

 

 

技术图片

 

 

案例:

前提:

js/common.js代码如下:

1 /**
2  * 根据id 或者根据tagName 返回相应的元素
3  * */
4 function getId$(id){
5    return document.getElementById(id);
6 }
7 function getTags$(tagName) {
8     return document.getElementsByTagName(tagName)
9 }

 

 

点击按钮禁用/启用文本框:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="禁用" id="btn">
 9         <input type="text" value="文本框" id="text" >
10         <script src="js/common.js"></script>
11         <script>
12             getId$(btn).onclick = function () {
13                 if (this.value ==禁用){
14                     getId$(text).disabled = true;
15                     this.value = 开启;
16                 }else{
17                     getId$(text).disabled = false;
18                     this.value = 禁用;
19                 }
20             };
21         </script>
22     </body>
23 </html>
View Code

 

点击按钮修改列表背景颜色:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="改变背景颜色" id="btn">
 9         <ul id="ulist">
10             <li>河南</li>
11             <li>江西</li>
12             <li>吉林</li>
13             <li>北京</li>
14             <li>深圳</li>
15         </ul>
16 
17         <script src="js/common.js"></script>
18         <script>
19             getId$(btn).onclick = function () {
20                 getId$(ulist).style.backgroundColor="cyan";
21             };
22         </script>
23     </body>
24 </html>
View Code

 

阻止超链接   默认的跳转:

它用的是return false .

这样默认的跳转就不会跳转了。

第一种写法:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8 <!--        <a href="https://www.baidu.com" onclick="alert(‘弹框了.....‘)">百度</a>-->
 9 <!--        如何让 弹框之后 也不跳转到百度页面呢?-->
10 <!--        使用return false-->
11         <a href="https://www.baidu.com" onclick="alert(‘弹框了...‘); return false ">百度</a>
12     </body>
13 </html>
View Code

第二种写法:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8 
 9         <a href="https://www.baidu.com" onclick="return f1()">百度</a>
10 <!--        注意:onclick 中写的是 return  f1()   其实就是return false-->
11         <script>
12             function f1() {
13                 alert(弹框了...);
14                 return false;
15             }
16         </script>
17     </body>
18 </html>
View Code

第三种写法:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <a href="https://www.baidu.com" id="a">百度</a>
 9         <script src="js/common.js"></script>
10         <script>
11             getId$(a).onclick = function () {
12                 alert(弹框了...);
13                 console.log("hahhahahha");
14                 return false;
15             };
16         </script>
17     </body>
18 </html>
View Code

 

总之一句话就是要在相应事件中  return false 。 

 

点击小图显示大图(不跳转的):

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <a href="images/1.png" id="a"><img src="images/1.png" width="100" alt=""></a>
10         <img src="" alt="" id="big-img">
11         <script src="js/common.js"></script>
12         <script>
13             getId$(a).onclick = function () {
14                 getId$(big-img).src = this.href;
15                 //阻止它跳转
16                 return false;
17             };
18         </script>
19     </body>
20 </html>
View Code

 

美女画廊:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             *{
 8                 margin:0;
 9                 padding:0;
10             }
11             .main{
12                 width: 450px;
13                 height: 550px;
14                 margin: 0 auto;
15             }
16             #imageGallery{
17                 width: 400px;
18                 height: 100px;
19                 display: inline-block;
20             }
21             #imageGallery img{
22                 width: 100px;
23                 height: 100px;
24             }
25             #imageGallery li{
26                 float: left;
27                 list-style: none;
28             }
29             #imageGallery img:hover{
30                 border:1px solid palevioletred;
31                 width: 98px;
32                 height: 98px;
33             }
34             #big-img{
35                 width: 400px;
36                 height: 400px;
37                 background-color: cyan;
38                 display: block;
39             }
40 
41 
42         </style>
43     </head>
44     <body>
45         <div class="main">
46             <h2>美女画廊</h2>
47             <ul id="imageGallery">
48             <li><a href="images/0.png" title="美女A">
49                 <img src="images/0.png"  alt="美女A">
50             </a>
51             </li>
52             <li>
53                 <a href="images/1.png" title="美女B">
54                     <img src="images/1.png"  alt="美女B">
55                 </a>
56             </li>
57             <li>
58                 <a href="images/2.png" title="美女C">
59                     <img src="images/2.png"  alt="美女C">
60                 </a>
61             </li>
62             <li>
63                 <a href="images/3.png" title="美女D">
64                     <img src="images/3.png"  alt="美女D">
65                 </a>
66             </li>
67         </ul>
68 <!--        下面显示大图-->
69             <img id="big-img" src="" alt="">
70             <p id="p">选择一个图片</p>
71         </div>
72         <script src="js/common.js"></script>
73         <script>
74             //获得所有的a标签 对象
75             var aObjs = getId$("imageGallery").getElementsByTagName("a");
76             //循环
77             for(var i =0 ;i<aObjs.length;i++){
78                 //为每个 a 注册事件
79                 aObjs[i].onclick = function () {
80                     //将当前a 的href 赋给 大图的src
81                     getId$(big-img).src = this.href;
82                     //给p 标签修改文字
83                     getId$(p).innerText = this.title;
84                     //阻止跳转
85                     return false;
86                 };
87             }
88         </script>
89     </body>
90 </html>
View Code

隔行变色:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="隔行变色" id="btn">
 9         <ul id="ulist">
10             <li>奥迪</li>
11             <li>凯迪拉克</li>
12             <li>奔驰</li>
13             <li>宝马</li>
14             <li>兰博基尼</li>
15             <li>红旗</li>
16             <li>大众</li>
17             <li>哈弗</li>
18         </ul>
19 
20         <script src="js/common.js"></script>
21         <script>
22             getId$(btn).onclick = function () {
23                 var liObjs = getId$(ulist).getElementsByTagName(li);
24                 for(var i =0;i<liObjs.length;i++){
25                     liObjs[i].style.backgroundColor =red;
26                     if(i %2==1){
27                         liObjs[i].style.backgroundColor = yellow;
28                     }
29                 }
30             };
31 
32         </script>
33     </body>
34 </html>
View Code
技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6     </head>
 7     <body>
 8         <input type="button" value="隔行变色" id="btn">
 9         <ul id="ulist">
10             <li>奥迪</li>
11             <li>凯迪拉克</li>
12             <li>奔驰</li>
13             <li>宝马</li>
14             <li>兰博基尼</li>
15             <li>红旗</li>
16             <li>大众</li>
17             <li>哈弗</li>
18         </ul>
19 
20         <script src="js/common.js"></script>
21         <script>
22             getId$(btn).onclick = function () {
23                 var liObjs = getId$(ulist).getElementsByTagName(li);
24                 for(var i =0;i<liObjs.length;i++){
25                     liObjs[i].style.backgroundColor = i%2==0 ? "red":"yellow";
26                 }
27             };
28         </script>
29     </body>
30 </html>
better version

 

列表的高亮显示:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             li{
 8                 list-style: none;
 9                 cursor: pointer;
10             }
11 
12 
13         </style>
14 
15 
16     </head>
17     <body>
18         <ul id="ulist">
19             <li>奥迪</li>
20             <li>凯迪拉克</li>
21             <li>奔驰</li>
22             <li>宝马</li>
23             <li>兰博基尼</li>
24             <li>红旗</li>
25             <li>大众</li>
26             <li>哈弗</li>
27         </ul>
28 
29         <script src="js/common.js"></script>
30         <script>
31             var liObjs = getId$(ulist).getElementsByTagName(li);
32             for (var i =0;i<liObjs.length;i++){
33                 console.log(liObjs[i]);
34                 //为每个li  注册两个鼠标事件
35                 //1 进入事件 enter
36                 liObjs[i].onmouseenter = function () {
37                     this.style.backgroundColor = yellow;
38                 };
39                 //2 离开事件 leave 
40                 liObjs[i].onmouseleave = function () {
41                     this.style.backgroundColor = ‘‘; //恢复默认的颜色
42                 };
43             }
44         </script>
45     </body>
46 </html>
View Code

 

获取元素的方式:

最常见的获取元素的方式:是通过getElementById()  和 getElementsByTagName().   这在前面已经说过。

下面是其他的方式: 

根据name属性值 获取元素:

基础的标签是没有name 属性的,例如div 等没有 name 属性,

主要是表单属性有name 属性 。 

所以,这里可以通过使用document.getElementsByName ()直接获得name的远的元素。

 

案例:点击按钮修改所有name 属性值为 name1 的文本框。

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6 
 7     </head>
 8     <body>
 9         <input type="button" value="显示效果" id="btn"><br />
10         <input type="text" value="你好"  name="name1"><br />
11         <input type="text" value="你好"  name="name3"><br />
12         <input type="text" value="你好"  name="name5"><br />
13         <input type="text" value="你好"  name="name1"><br />
14         <input type="text" value="你好"  name="name0"><br />
15         <input type="text" value="你好"  name="name3"><br />
16         <input type="text" value="你好"  name="name1"><br />
17         <script src="js/common.js"></script>
18         <script>
19             getId$(btn).onclick = function () {
20                 var name1List = document.getElementsByName(name1);  //这里只是针对表单表标签,它们有Name属性
21                 for (var i = 0;i<name1List.length;i++){
22                     name1List[i].value = "我很好";
23                 }
24             };
25         </script>
26     </body>
27 </html>
getElementsByName() 的使用

 

根据类样式的名字 获取元素:

getElementsByClassName ()  注意这个方法是在H5中才出现的。

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6 
 7         <style>
 8             div{
 9                 width: 200px;
10                 height: 50px;
11                 margin-top: 10px;
12             }
13             .cls{
14                 background-color: cyan;
15             }
16         </style>
17 
18 
19     </head>
20     <body>
21         <p>这就是个p</p>
22         <p class="cls">这是第二个p</p>
23         <span>这是第一个span</span> <br>
24         <span class="cls">这是第二个span</span> <br>
25         <div>这是第一个div </div>
26         <div class="cls">这是第二个div</div>
27         <input type="button" value="显示效果" id="btn">
28 
29         <script src="js/common.js"></script>
30 
31         <script>
32             //需求是 点击按钮  改变cls类样式的 背景颜色为  红色
33             getId$(btn).onclick = function () {
34                 var clsObjs = document.getElementsByClassName(cls);
35                 for (var i = 0;i<clsObjs.length;i++){
36                     clsObjs[i].style.backgroundColor = red;
37                 }
38             };
39 
40         </script>
41     </body>
42 </html>
View Code

 

其余的获取元素方式及总结:

1,querySelector() 

 

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         
 7     </head>
 8         <input type="button" value="显示效果" id="btn">
 9         <script src="js/common.js"></script>
10         <script>
11             document.querySelector(#btn).onclick = function () {
12                 alert("我又出来了");   
13             };
14 
15         </script>
16     </body>
17 </html>
View Code

:它拿到的是一个!  获取id 

 

2,querySelectorAll() 

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             .cls{
 8                 background-color: yellow;
 9             }
10         </style>
11     </head>
12     <body>
13         <p>这就是个p</p>
14         <p class="cls">这是第二个p</p>
15         <span>这是第一个span</span> <br>
16         <span class="cls">这是第二个span</span> <br>
17         <div>这是第一个div </div>
18         <div class="cls">这是第二个div</div>
19         <input type="button" value="显示效果" id="btn">
20 
21         <script src="js/common.js"></script>
22 
23         <script>
24             var clsObjs =  document.querySelectorAll(.cls);
25             getId$(btn).onclick = function () {
26                 for (var i =0 ;i<clsObjs.length;i++){
27                     clsObjs[i].style.backgroundColor = red;
28                 }
29             };
30         </script>
31     </body>
32 </html>
View Code

:它拿到的是多个。获取class 

 

 

总结:

技术图片

 

偶尔还会用下className .

 

 

案例:

 

div高亮显示:

技术图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>我是网页标题</title>
 6         <style>
 7             *{
 8                 margin:0;
 9                 padding:0;
10             }
11             div{
12                 width: 100px;
13                 height: 50px;
14                 background-color: yellowgreen;
15                 float: left;
16                 margin-left: 10px;
17 
18                 border: 1px solid yellowgreen;  /*它可以使得 下面高亮的时候不抖动  鼠标经过的时候无非是将已有边框从蓝色变为红色*/
19             }
20 
21         </style>
22     </head>
23     <body>
24         <div></div>
25         <div></div>
26         <div></div>
27         <div></div>
28         <div></div>
29         <script src="js/common.js"></script>
30 
31         <script>
32             var objs = document.getElementsByTagName(div);
33             for (var i =0 ;i<objs.length; i++){
34                 //鼠标进入 事件
35                 objs[i].onmouseenter = function () {
36                     this.style.border ="1px solid red";
37                 };
38                 //鼠标离开 事件
39                 objs[i].onmouseleave = function () {
40                     this.style.border = "";
41                 }
42 
43             }
44         </script>
45     </body>
46 </html>
View Code

 

以上是关于05_进一步操作页面的元素的主要内容,如果未能解决你的问题,请参考以下文章

如何访问 MainActivity() 中的片段元素?

11SpringBoot-CRUD-thymeleaf公共页面元素抽取

VSCode 如何操作用户自定义代码片段(快捷键)

使用绑定从片段访问父活动的 UI 元素

13 个非常有用的 Python 代码片段

代码片段 - Golang 实现集合操作