一、css上一篇的补充
1、position（页面分层）
（1）fiexd将标签固定在页面的某个位置
position属性：top，left，right，bottom
（2）relative+absolute配合使用，定位到父标签框的相对位置
<div style="position: relative;background-color: #339ba3;height: 200px; 500px;border: 1px solid red;margin: 0 auto"> <div style="position: absolute;bottom: 0;left: 0; 50px;height: 50px;background-color: #0f0f0f"></div> </div>
2、opacity 页面的透明度 0-1
3、z-index：针对多层来设置的，层级顺序，值越高处于越上层
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .one-level{ background-color:white; z-index:10; position: fixed; width: 500px; height: 400px; top: 50%; left: 50%; margin-top:-200px; margin-left: -250px; display: block; } .tow-level{ background-color:black; z-index:5;position: fixed; opacity: 0.5; top: 0; right: 0; bottom: 0; left: 0; display: block; } </style> </head> <body> <div class="one-level"> <input type="text" name="user" value="老男孩"/> <input type="text" name="user" value="老男孩"/> <input type="text" name="user" value="老男孩"/> </div> <div class="tow-level"></div> <div style="height: 5000px;background-color: #1ba157;"></div> </body> </html>
4、overflow：
（1）hidden：只显示图片的部分
<div style="height: 200px; 300px;overflow: hidden">
<img src="1.jpg">
</div>
（2）auto:图片有滚动条
<div style="height: 200px; 300px;overflow: auto">
<img src="1.jpg">
</div>
5、hover
当鼠标移动到所在标签上时，当前标签设置的css属性才生效
设置方法是css后加hover：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; top:0; left: 0; right: 0; height: 48px; line-height: 48px; background-color: #1ba157; } .w{ margin: 0 auto; width: 980px; } .pg-header .menu{ display: inline-block; padding: 0 10px; color: white; } .pg-header .menu:hover{ background-color: #b92c28; } .pg-body{ margin-top: 50px; } </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">logo</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg-body">adafsdfj;sdkjf</div> </body> </html>
6、background：背景
（1）background-image（背景图片）
默认：div比图片大的话，图片会重复拼接，且上下都会拼接满
（2）background-repeat（图片重复拼接，以及是x横向，y纵向是否开启拼接）
no-repeat不重复拼接；
repeat-x只横向拼接；
repeat-y只纵向拼接
*（3）background-position-x: 10px；背景图片横移10像素（正向右移动，负向左移动）
background-position-y：10px；背景图片纵向移动10像素（正向下移动，负向上移动）
以上的另一种写法background-position：10px 10px；
二、javascript
1、javascript是独立的语言，在浏览器中具有相应js的解释器
2、js代码的存在形式：
（1）在head中存在
<script>
//javascript代码
alert(123);
</script>
<script type="text/javascript">
//javascript代码
alert(123);
</script>
（2）以文件的形式存在
调用代码：<script src='js文件路径'> </script>
（3）ps（默认）：js代码放在body标签内的最后部分
3、注释
行注释：//
多行注释：/* 内容 */
4、变量
name= “xxxx” 全局变量
var name = “xxxx” 局部变量
5、写js代码
（1）写在html文件中编写
（2）临时测试，可以在浏览器的console中
6、基本数据类型
（1）数字
a = 18
（2）字符串
a = “alex”
a.charArt(索引的位置)
a.substring(起始位置，结束位置) 不包括结束位置
a.length 获取当前a字符串的长度
具体可以查看 武sir的js链接地址：http://www.cnblogs.com/wupeiqi/articles/5602773.html
（3）数组 （类似于python的列表）
a = [11,22,33]
(4)字典
a= {"k1":"v1","k2":"v2"}
(5)布尔类型
python中的True及False，首字母是大写
js中是小写true及false
7、for循环
（1）循环时，循环的元素是索引
a = [11,22,33,44]
for(var item in a){
console.log(item);
}
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
（2）循环时，类似shell的i++
for(var i=0;i<10;i=i+1){
}
a = [11,22,33,44]
for(var i=0;i<a.length;i=i+1){
}
此不支持字典的循环
8、条件语句
if(条件){
}else if(条件){
}else if(条件){
}else{
}
== 值相等 !=不相等
=== 值和类型都相等 !==不相等
&& and
|| or
9、函数
function 函数名(a,b,c){
}
函数名(1,2,3)
三、DOM document 操作
1、找到标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、操作标签
a. innerText
获取标签中的文本内容
标签.innerText
对标签内部文本进行重新复制
标签.innerText = ""
b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
PS：
<div onclick='func();'>点我</div>
<script>
function func(){
}
</script>
c. checkbox
获取值
checkbox对象.checked
设置值
checkbox对象.checked = true