day 15 html（2） css，javascript，dom

1、CSS补充

　　position:fixed =>固定在页面的某个位置；

　　　　　　absolute=>绝对定位，不能固定某个位置，一般与relative搭配使用

　　　　　　<div style="position:relative;">

　　　　　　　　<div style="position:absolute;top:0;right;0;"></div>

　　　　　　<div>

　　　　　　放在父类标签的某个位置

　　　　　　用fposition:fixed属性能够放置多层，叠加顺序由z-index决定，数值越大越靠上

　　　　　　opcity：0.5设置透明度

　　当放置的图片过大时，能够经过div 中的overflow：hidden或auto来设置隐藏多余部分或出现滚动条

　　<div style="height: 200px;width: 200px;overflow: auto;">
 　　   <img src = 'img/111.jpg'/>
　　</div>
　
　　hover当鼠标移到相应标签时，如下属性才生效

　　.pg-header .logo:hover {
　　    background-color: blue;
　　}
　　background-image:url('111.jpg') 设置背景色，若是图片太小，则会重复叠放
　　　　　　background-repeat:no-repeat\repeat-x\repeat-y设置叠放的方向或不叠放
　　　　　　background-position-x:
　　　　　　background-position-y:指定显示图片的起始位置，实现大图片的显示定位
　　　　　　background：能够把上述属性加入其中

2、JavaScript
　　独立的语言，浏览器具备js解释器
　　编写js程序，须要语句末尾添加";",切记
　　通常存在于html中，能够在head头中添加，能够建立js文件而后在<script src="js文件路径"></script>中引用，js路径能够是网络路径
　　<script type='asdf/javascript'>
　　　　js代码
　　</script>

　　html从上到下解释，若是放在head中，下边body中的东西得不到执行
　　因此《script》的调用最好放在body的最下边

　　js的注释//和/*注释内容*/
　　写js代码：
　　　　——html文件中编写
　　　　——临时文件能够在浏览器终端console中编写查看结果

　　变量：
　　JS：
　　　　name = 'alex'; #全局变量

　　　　var name = 'eric' #局部变量

　　基本数据类型
　　数字（number）
　　　　parseInt() 转换为整型
　　　　parseFloat（） 转换为浮点型
　　字符串（string）
　　　　a.charAt(n):获取第n个位置的字符
　　　　a.substring（m,n）获取m到n的字符串
　　　　a.length获取字符串长度
　　　　obj.length    长度

　　　　　　obj.trim()   移除空白

　　　　　　obj.trimLeft()

　　　　　　obj.trimRight)

　　　　　　obj.charAt(n)  返回字符串中的第n个字符

　　　　　　obj.concat(value, ...)   拼接

　　　　　　obj.indexOf(substring,start)  子序列位置

　　　　　　obj.lastIndexOf(substring,start) 子序列位置

　　　　　　obj.substring(from, to)    根据索引获取子序列

　　　　　　obj.slice(start, end)  切片

　　　　　　obj.toLowerCase()  大写

　　　　　　obj.toUpperCase() 小写

　　　　　　obj.split(delimiter, limit)分割

　　　　　　obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)

　　　　　　obj.match(regexp) 全局搜索，若是正则中有g表示找到所有，不然只找到第一个。

　　　　　　obj.replace(regexp, replacement)替换，正则中有g则替换全部，不然只替换第一个匹配项，

         　　$数字：匹配的第n个组内容；

        　　$&：当前匹配的内容；

        　　$`：位于匹配子串左侧的文本；

        　　$'：位于匹配子串右侧的文本

     　　 　$$：直接量$符号　　　　

　　列表(数组)
　　　　　a = [11,22,33]
　　　　　　obj.length          数组的大小
　　　　   obj.push(ele)       尾部追加元素 
　　　　　　obj.pop()           尾部获取一个元素
　　　　　　obj.unshift(ele)    头部插入元素
　　　　　　obj.shift()         头部移除元素
　　　　　　obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                     obj.splice(n,0,val) 指定位置插入元素
                     obj.splice(n,1,val) 指定位置替换元素
                     obj.splice(n,1)     指定位置删除元素
　　　　　　obj.slice( )        切片 
　　　　　　obj.reverse( )      反转 
　　　　　　obj.join(sep)       将数组元素链接起来以构建一个字符串 
　　　　　　obj.concat(val,..)  链接数组 
　　　　　　obj.sort( )         对数组元素进行排序
　　字典
　　　　a={'k1':2,'k2':3,2:5}
　　布尔类型 ：小写
　　　　true 
　　　　false

　　条件语句
　　　　if（条件）{
　　　　}else if（条件）{
　　　　}else if（条件）{
　　　　}else{}
　　　　==值相等
　　　　===值相等、类型相同
　　　　！=值不等
　　　　！=值不等，类型不一样
　　　　&&与 ||或
　　for循环
　　　　a=[11,22,33]
　　一、　　for (var item in a){//能够循环数组，字典
　　　　　　console.log(item,a[item]);
　　　　}
　　二、　　for (var i=0;i<a.length;i=i+1){//只能循环数组
　　　　　　console.log(a[item]);
　　　　}
　　函数
　　　　js中编写函数须要使用function 函数名(形参1，形参2，...){函数体}

　　alert(弹出框内容) 弹出一个窗口

　　setInterval（‘执行的代码’，间隔（ms））每间隔多少毫秒执行一次函数，定时器

　　console.log()在console中打印一条信息

3、dom
　直接查找
　　一、找到标签
　　　　documnent.getElementById('i1')//根据id获取单个元素
　　　　document.getElementById（‘name1’）
　　　　document.getElementById             根据ID获取一个标签

　　　　document.getElementsByName          根据name属性获取标签集合

　　　　document.getElementsByClassName     根据 class 属性获取标签集合

　　　　document.getElementsByTagName       根据标签名获取标签集合

　　二、操做标签
　　　　标签.innerText //获取标签中的文本内容
　　　　className//设置class
　　　　classList.add('样式名')//添加指定样式
　　　　classList.remove('样式名') //删除指定样式

　　　　ps:
　　　　　　<div onclick='func();'>点我</div>
　　　　　　<script>
　　　　　　　　function fun(){
　　　　　　　　}
　　　　　　</script>

　　　　checkbox
　　　　　　获取值
　　　　　　checkbox对象.checked=true或false设置checkbox选与不选

　间接查找
　　　　 parentNode          //父节点

　　　　childNodes           / /  全部子节点

　　　　firstChild           / /  第一个子节点

　　　　lastChild            / /  最后一个子节点

　　　　nextSibling          / /  下一个兄弟节点

　　　　previousSibling      / /  上一个兄弟节点

　　　　parentElement            / /  父节点标签元素

　　　　children                 / /  全部子标签

　　　　firstElementChild        / /  第一个子标签元素

　　　　lastElementChild         / /  最后一个子标签元素

　　　　nextElementtSibling      / /  下一个兄弟标签元素

　　　　previousElementSibling   / /  上一个兄弟标签元素