本文内容属学习记录及笔记，如有错误请多多指教。
第四周学习内容多而杂，总结一下。
最大的收获是一段话，来自大神
计算机专业背景学习JS要点：
非常重要：先要对JS这门语言要有整体、感性的认识；
掌握JS中的字符串、函数、对象、数组、字面量等基本概念，熟记所有内置的方法（包括参数和返回值）；
所有继承和原型相关内容跳过，注意，是跳过，不要看！没有这些JS一样可以活得很好，你的日常工作一样玩得飞起，当然，你没忍住看了相关知识也没关系，因为你会发现自己看不懂的；
DOM事件和所有DOM方法一定要掌握的牢不可破；
学好正则表达式；
然而，要记住JS所有字符串、函数、数组相关的方法，所有DOM相关方法是相当庞大的一项工作，因为，很容易忘记，方法也很简单，所谓好记性不如烂笔头。把编辑器的JS自带补全提示干掉，从小交互开始，尝试使用原生的JS书写，写着写着，一定就会记住了，这是最快学习成长的方法。
学习的过程一定是带有痛苦的，并且漫长的，千万不要出现类似“《JavaScript高级程序设计》和《JavaScript语言精粹》我都看完了，接下来我要学什么的言论”？你以为你是黄蓉啊，看一眼就记住啦！反复看，看完肯定会忘记，忘记了再看，我也是看这两本书学习JS的，《JavaScript高级程序设计》这本书已经被我翻到掉页了，《JavaScript语言精粹》上面满满的笔记，哪个知识点不记得了，基本上一翻就可以准确到对应的页数，因为也是翻了太多遍了。
最终学习是否成功的关键在于“坚持”。
1、照着PSD做了一个简单的首页布局，有以下收获。
- Clear:both，消除浮动影响.
<div style="float:left;height:200px;width:200px;background-color:#dedede;"></div>
<div style="float:left;height:200px;width:200px;background-color:#000;"></div>
<!-- 在这里 -->
<div style="float:left;height:200px;width:200px;background-color:#ccc;"></div>
<div style="float:left;height:200px;width:200px;background-color:#ddd;"></div>如果我们期望的布局是这样的，但实际上这一个盒子展示的效果是四个盒子并列一排的，这时候就可以在注释位置添加<div style="clear:both;"></div>消除浮动影响，从而获得想要的布局。
但是这样使用一个div的方式去消除浮动影响，我看网上有的大神们说会破坏文档结构(一脸萌比)，那就可以用伪类消除浮动影响。
<style type="text/css">
.papa:after {
content: ".";
clear: both;
display: block;
overflow: hidden;
height: 0;
</style>
<body>
<div class="Papa">
<div style="float:left;"></div>
<div style="float:left;"></div>
</div>
<div style="float:left;"></div>
<div style="float:left;"></div>这样也能消除，暂时我也不知道为什么要优选这个。
同时关于伪类before,after的用处还有很多，给自己留一个笔记 前辈们
响应式布局（未完成）
这周末尝试 @media ，参考网站 参考使用CSS3中的
@media完成响应式布局@media screen (max-width: px){}
max-width的语义是，当浏览器可视宽度小于某个数值事，采用{}中的样式，相反
@media screen (min-width: px){}
min-width则表示在大于某个数值时，采用{}中的样式
<!--从三栏到俩栏再变成一栏-->
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
.content{
zoom:1;
}
.content:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.leftBox, .rightBox{
float: left;
width: 20%;
height: 500px;
margin: 5px;
background: #ffccf7;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 2s ease;
transition: width 1s ease;
}
.middleBox{
float: left;
width: 50%;
height: 800px;
margin: 5px;
background: #b1fffc;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.rightBox{
background: #fffab1;
}
@media only screen and (min-width: 1024px){
.content{
width: 1000px;
margin: auto
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px){
.rightBox{
width: 0;
}
.leftBox{ width: 30%}
.middleBox{ width: 65%}
}
@media only screen and (max-width: 400px){
.leftBox, .rightBox, .middleBox{
width: 100%;
height: 200px;
}
}
</style>
</head>
<body>
<div class="content">
<div class="leftBox"></div>
<div class="middleBox"></div>
<div class="rightBox"></div>
</div>
</body>
</html>IE8和之前的浏览器并不支持@media，但是我们可以用以下方法解决
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->未解决问题: 2017年常用分辨率是多少？
2.Javascript Dom
- 元素选择器
（1）getElementById()
ById很好理解就是赋予元素ID的命名
如果出现了多个ID一样的元素，那么getElementById()将会选择第一个ID（）进行操作
<div id="test">颜色</div> <!--颜色变为红色-->
<div id="test">颜色</div> <!--颜色不变-->
<script>
var myDiv = document.getElementByid("test");
myDiv.style.color = " red ";
IE7下存在BUG，ID不分大小写，表单的name也会被视为ID
不能以JS中全局变量为ID命名
(2)getElementsByClassName() （未完成）
这个有点复杂，暂时只知道有这么个玩意
(3)getElementsByTagName()
有一个奇怪的现象，
<div>
<span></span>
<span></span>
</div>
<script>
var myDiv = document.getElementsByTagName('div');
</script>这样写我的浏览器会报错
var myDiv = document.getElementsByTagName('div');
而这样写就不会报错
(4)querySelector()，querySelectorAll()，matchesSelector()
先Mark地址，了解之后再写上自己的理解 前辈们
（整理未完成）
-
扫一扫
181
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
