前端之css、JavaScript和DOM

css position

一般组合 relative+absolute,以relative为父元素，absolute依照relative进行定位。

opcity: 0.5 透明度
z-index: 层级顺序   数字越大，就会在前面。
overflow: hidden,auto
hover

注释：元素可拥有负的 z-index 属性值。
注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！

a:hover选择器

选择鼠标指针浮动在上面的元素的样式

:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

javascript

• Head中

<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
  
<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>

• 文件

JS代码需要放置在 标签内部的最下方，防止js代码执行时间过长导致界面响应时间比较长。

变量

        name = 'alex'     # 全局变量
        var name = 'eric' # 局部变量

写Js代码

    - html文件中编写
    - 临时，浏览器的终端 console

基本数据类型

    数字
        a = 18;
    字符串
        a = "alex"
        a.chartAt(索引位置)
        a.substring(起始位置，结束位置)
        a.lenght    获取当前字符串长度
        ...
    列表(数组)
        a = [11,22,33]
        
    字典
        a = {'k1':'v1','k2':'v2'}
    布尔类型
        小写  true false

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.
		for(var i=0;i<10;i=i+1){
            
        }
        
        a = [11,22,33,44]
        for(var i=0;i<a.length;i=i+1){
            
        }
        
        不支持字典的循环

条件语句

    if(条件){
    
    }else if(条件){
        
    }else if(条件){
        
    }else{
        
    }
    
    ==   值相等
    ===  值和类型都相等
    &&   and
    ||   or

函数

function 函数名（a,b,c）{

}
函数名（1,2,3）

Dom

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