tangerine702の笔记

前言：因为我的代码量不够，bug遇见的不够多，所以暂且前端后端一个页面，等多了我会自动分成两个页面的

偏前端（包含JavaScript）：

1.使用ElementsByTagName获取伪数组里的元素问题：

​ 今天学习JavaScript的时候发现使用ElementsByTagName的时候会出现获取元素变成undefined，教程上的完全一样，不懂什么问题，查阅了资料发现是js放在了head头部标签里，这样会导致js提前被加载，而获取不到body中的元素的问题，解决办法是直接在body末尾加上script代码，例如下面：

错误代码：

<html>
    <head>
        <title>JavaScript</title>
        <script src="two_demo.js"></script>
    </head>
    <body>
        <li>123</li>
        <li>456</li>
</html>
1
2
3
4
5
6
7
8
9

正确代码：

<html>
    <head>
        <title>JavaScript</title>
       
    </head>
    <body>
        <li>123</li>
        <li>456</li>
        <script src="two_demo.js"></script>
</html>
1
2
3
4
5
6
7
8
9
10

2.使用getElementsByClassName的一个小问题

今日在使用getElementsByClassName获取并初始化一个class标签时，什么都不显示；推测是没有获取到确定的标签，但是后面使用console.log验证时却能获取，几经查找终于发现了问题

原代码：

var btn=document.getElementsByClassName('btn');		//点击按钮
var box=document.getElementsByClassName('box');		//需要关闭的盒子
console.log(btn,box);								// 这里验证是能读出标签的
btn.onclick = function(){
	console.log('点击了');							//点击时没有任何提示，说明onclick没有执行
	box.style.display='none';
}
1
2
3
4
5
6
7

修改后代码：

var btn=document.getElementsByClassName('btn')[0];		// 这里添加了序号，表明是获取第一个元素
var box=document.getElementsByClassName('box')[0];		//同上
console.log(btn,box);
btn.onclick = function(){
	console.log('点击了');
	box.style.display='none';
}
1
2
3
4
5
6
7

思路：我个人猜测应该是没有指定class伪数组中的第几号元素；毕竟class是类元素，获取不像id一样具有唯一性，上面验证是能读出标签的是因为它默认把带有这个标签的元素全部读取出来了，而落实到具体的设定点击动作事件时无法判断需要给哪一个class，所以出现了不显示现象。此时只要指定是这个class标签里的第几个元素，指定了具体元素之后就不会发生以上类似的错误了

3.关于media移动端适配问题

22年10月11日即将上线漫画网站时出现@media部分代码失效，经过一番查找发现@media媒体查询代码需要放到CSS文件的文件末尾才可以生效覆盖，如果放到除末尾以外的任何地方则会导致bug和代码覆盖失效，特此记录

下面是各种情况：

HTML代码[略写]：

<p>这是一段文字</p>
<div>这是一段div</div>
1
2

CSS：[正确情况👇]

p{
	width:200px;
	margin: 0 auto;
	padding:10px 20px;
	background-color: #39C5BB;
}
div{
	width:1000px;
	margin:0 auto;
	background-color:#996699;
}
@media (max-width:768px) {				/*这里放到末尾即可根据最大width覆盖上面需要覆盖的样式*/
	p{
		width: 100px;
		background-color: #996699;
	}
	div{
		width: 200px;
		background-color: #39C5BB;
		}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

CSS：[错误情况👇]

p{
	width:200px;
	margin: 0 auto;
	padding:10px 20px;
	background-color: #39C5BB;
}

@media (max-width:768px) {			/*这里放到CSS代码中间导致后面的div代码没有覆盖*/
	p{
		width: 100px;
		background-color: #996699;
	}
	div{
		width: 200px;
		background-color: #39C5BB;
		}
}

div{
	width:1000px;
	margin:0 auto;
	background-color:#996699;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

永远记住代码是自上而下执行的，制行任何需要覆盖或者替换的代码时需要查看顺序是否正确

附：media代码失效自查：

  1. 格式书写错误and后面必须有空格例如下面代码；

    @media screen and (max-width:500px){ }
    1

  2. 样式冲突；@media查询代码的样式被后面的css所覆盖。 注意：建议在书写css的过程中，@media查询带的css写在后面，以免这样避免被前面的css覆盖

  3. css本身出了问题导致css不生效 注意：这是一种很常见的错误，例如块元素浮动导致父级元素没有高度；此时给父元素加背景颜色发现没有生效，实际上是css导致的错误，而没有显示。

  4. meta属性viewport属性，这个虽然基本常识，应该也会有人漏掉。

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    1

纯后端（例如Java）：