zoukankan      html  css  js  c++  java
  • 前端之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
  • 相关阅读:
    动态SQL的注意
    关于数据库抛出异常:Incorrect string value: 'xE1x...' for column '字段名' at row 1 问题的解决方法
    让.bashrc文件在终端自动生效
    期中考试题
    RAP、Mock.js、Vue.js、Webpack
    全局变量变为局部变量 & MVC思想
    用 JS + LeanCloud 给网页添加数据库(留言功能)
    闭包的使用
    从发请求到AJAX到同源政策
    从实现HTML页面局部刷新到JSONP
  • 原文地址:https://www.cnblogs.com/wspblog/p/6075702.html
Copyright © 2011-2022 走看看