复习前端知识(一)(基础h5+css+js)

笔记:

HTML
    1、一套规则,浏览器认识的规则。
    2、开发者:
        学习Html规则
        开发后台程序:
            - 写Html文件(充当模板的作用) ******
            - 数据库获取数据,然后替换到html文件的指定位置(Web框架)

    3、本地测试
         - 找到文件路径,直接浏览器打开
         - pycharm打开测试
    4、编写Html文件
        
        - doctype对应关系
        - html标签,标签内部可以写属性 ====> 只能有一个
        - 注释:  <!--  注释的内容  -->
    5、标签分类
        - 自闭合标签
            <meta charset="UTF-8">
        - 主动闭合标签
            title>老男孩</title>
    6、
        head标签中
            - <meta  -> 编码,跳转,刷新,关键字,描述,IE兼容
                    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
            - title标签
            - <link /> 搞图标,欠
            - <style />- <script>7、body标签
         - 图标,  &nbsp;  &gt;   &lt;
         - p标签,段落
         - br,换行
         ======== 小总结  =====
            所有标签分为:
                块级标签: div(白板),H系列(加大加粗),p标签(段落和段落之间有间距)
                行内标签: span(白板)
            标签之间可以嵌套
            标签存在的意义,css操作,js操作
            ps:chorme审查元素的使用
                - 定位
                - 查看样式
        - h系列
        - div
        - span
        - input系列 + form标签
            input type='text'     - name属性,value="赵凡" 
            input type='password' - name属性,value="赵凡" 
            input type='submit'   - value='提交' 提交按钮,表单
            input type='button'   - value='登录' 按钮
            
            input type='radio'    - 单选框 value,checked="checked",name属性(name相同则互斥)
            input type='checkbox' - 复选框 value, checked="checked",name属性(批量获取数据)
            input type='file'     - 依赖form表单的一个属性 enctype="multipart/form-data"
            input type='rest'     - 重置
    
            <textarea >默认值</textarea>  - name属性
            select标签            - name,内部option value, 提交到后台,size,multiple
        
        - a标签
            - 跳转
            - 锚     href='#某个标签的ID'    标签的ID不允许重复
            
        - img 
             src
             alt
             title
             
        - 列表
            ul
                li
            ol
                li
            dl
                dt
                dd
        - 表格
            table
                thead
                    tr
                        th
                tbody
                    tr
                        td
            colspan = ''
            rowspan = ''
        - label
            用于点击文件,使得关联的标签获取光标
            <label for="username">用户名:</label>
            <input id="username" type="text" name="user" />
        - fieldset
            legend
        
    - 20个标签
CSS
    
    在标签上设置style属性:
        background-color: #2459a2;
        height: 48px;
        ...
    
    编写css样式:
        1. 标签的style属性
        2. 写在head里面 style标签中写样式
            - id选择区
                  #i1{
                    background-color: #2459a2;
                    height: 48px;
                  }
                  
            - class选择器 ******
                
                  .名称{
                    ...
                  }
                  
                  <标签 class='名称'> </标签>
            
            - 标签选择器
                    div{
                        ...
                    }
                    
                    
                    所有div设置上此样式
            
            - 层级选择器(空格) ******
                   .c1 .c2 div{
                        
                   }
            - 组合选择器(逗号) ******
                    #c1,.c2,div{
                        
                   }
            
            - 属性选择器 ******
                   对选择到的标签再通过属性再进行一次筛选
                   .c1[n='alex']{ width:100px; height:200px; }
                   
            PS:
                - 优先级,标签上style优先,编写顺序,就近原则
            
        2.5 css样式也可以写在单独文件中
            <link rel="stylesheet" href="commons.css" />
            
        3、注释
            /*   */
    
        4、边框
             - 宽度,样式,颜色  (border: 4px dotted red;)
             - border-left
        
        5、  
            height,         高度 百分比
            width,          宽度 像素,百分比
            text-align:ceter, 水平方向居中
            line-height,垂直方向根据标签高度
            color、     字体颜色
            font-size、 字体大小
            font-weight 字体加粗
        
        6、float
            让标签浪起来,块级标签也可以堆叠
            老子管不住:
                <div style="clear: both;"></div>
            
        7、display
            display: none; -- 让标签消失
            display: inline;
            display: block;
            display: inline-block;
                     具有inline,默认自己有多少占多少
                     具有block,可以设置无法设置高度,宽度,padding  margin
            ******
            行内标签:无法设置高度,宽度,padding  margin
            块级标签:设置高度,宽度,padding  margin
            
            
        8、padding  margin(0,auto)
            
            
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
View Code

 

head中:

<!DOCTYPE html>
<!-- 类似html这种格式,标签,html标签 <html>fasdfasdf</html>
# 标签内部的属性-->
<html lang="en">
<head>
    <!-- 声明编码 -->
    <meta charset="UTF-8">
    <!-- 三秒刷新 -->
    <meta http-equiv="Refresh" Content="3">
    <!-- 三秒后跳转到制定网站 -->
    <meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">
    <!-- 关键字,给搜索引擎用 -->
    <meta name="keywords" content="汽车,汽车之家,汽车网,汽车报价,汽车图片,新闻,评测,社区,俱乐部"/>
    <!-- 对网站的描述 -->
    <meta name="description" content="汽车之家为您提供最新汽车报价,汽车图片,汽车价格大全,最精彩的汽车新闻、行情、评测、导购内容,是提供信息最快最全的中国汽车网站。"/>
    <!-- ie兼容 -->
    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
    <title>老男孩</title>
    
    <link /> 搞图标,欠
    <style />欠
    <script/> 欠
</head>
<body>
    <div></div>

    <a href="http://www.oldboyedu.com">老男孩</a>
</body>
</html>
View Code

 浏览器和python的小交互:

# -*- coding: utf-8 -*-
import tornado.web
# pip3 install tornado

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        print(111)
        u = self.get_argument('user')
        e = self.get_argument('email')
        p = self.get_argument('pwd')
        if u == 'alex' and p == '123' and e == 'alex@126.com':
            self.write("OK")
        else:
            self.write("")

    def post(self, *args, **kwargs):
        u = self.get_argument('user', None)
        e = self.get_argument('email', None)
        p = self.get_argument('pwd', None)
        print(u, e, p)
        self.write('POST')


application = tornado.web.Application([
    (r"/index", MainHandler),
])
if __name__ == "__main__":
    application.listen(8889)
    tornado.ioloop.IOLoop.instance().start()
View Code
<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <form action="http://localhost:8889/index">
    <input type="text" name="user"/>
    <input type="text" name="email"/>
    <input type="password" name="pwd"/>
    <input type="button" value="button" />
    <input type="submit" value="submit" />
    </form>
</body>
</html>
View Code

 form表单提交:

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <input type="text" name="user"/>
            男:<input type="radio" name="gener" value="1" />
            女:<input type="radio" name="gener" value="2" />
            Alex:<input type="radio" name="gener" value="3"/>
            <p>爱好:</p>
            足球:<input type="checkbox" name="favor" value="football"/>
            篮球:<input type="checkbox" name="favor" value="basketball"/>
            <p>技能</p>
            撩妹:<input type="checkbox" name="skill" value="up" checked="checked"/>
            写代码<input type="checkbox" name="skill" value="coding" />
            <p>上传文件</p>
            <input type="file" name="fname">
            <textarea name="meno">asdas</textarea>
            <select name="city" size="10" multiple="multiple">
                <optgroup label="江苏省">
                    <option value="nanking">南京</option>
                    <option value="suzhou">苏州</option>
                    <option value="others">others</option>
                </optgroup>
                <optgroup label="浙江省">
                    <option value="hangzhou">杭州</option>
                    <option value="taizhou">台州</option>
                    <option value="ningbo">宁波</option>
                </optgroup>
            </select>
        </div>
        <input type="submit" name="提交"/>
        <input type="reset" name="重置"/>
    </form>
</body>
</html>
View Code

 a标签:跳转和锚点

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="#i1">第一章</a>
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>
    <div id="i1" style="height: 600px;">第一章的内容</div>
    <div id="i2" style="height: 600px;">第二章的内容</div>
    <div id="i3" style="height: 600px;">第三章的内容</div>
    <div id="i4" style="height: 600px;">第四章的内容</div>
</body>
</html>
View Code

 table标签

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
                <th>表头4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="3">333</td>
            </tr>
            <tr>
                <td rowspan="2">1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
View Code

 label:给input绑定标签,点击获取光标

<!DOCTYPE html>
<html>
<head>
    <title>title</title>
</head>
<body>
    <label for="username">用户名:</label>
    <input id="username" type="text" name="username">
</body>
</html>
View Code

 position:fixed,菜单固定在顶部

<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
    <style>
        .header{
            background-color: #aca9a9;
            position: fixed;
            top:0;
            left: 0;
            right: 0;
            height: 40px;

        }
        .content{
            margin:42px 0 0;
            height: 5000px;
            background-color: #dddddd; 
        }
    </style>
</head>
<body>
    <div class="header">头部</div>
    <div class="content">内容</div>
</body>
</html>
View Code

position的relative和absolute的联合使用:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative;width: 500px;height: 200px;margin: 5px auto;border: 1px solid red;">
        <div style="position: absolute;left: 3px;bottom: 3px;background-color: black;height: 50px;width: 50px;">
        </div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;margin: 5px auto;border: 1px solid red;">
        <div style="position: absolute;left: 3px;bottom: 3px;background-color: black;height: 50px;width: 50px;">
        </div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;margin: 5px auto;border: 1px solid red;">
        <div style="position: absolute;left: 3px;bottom: 3px;background-color: black;height: 50px;width: 50px;">
        </div>
    </div>
    <div style="position: relative;width: 500px;height: 200px;margin: 5px auto;border: 1px solid red;">
        <div style="position: absolute;left: 3px;bottom: 3px;background-color: black;height: 50px;width: 50px;">
        </div>
    </div>
</body>
</html>
View Code

 z-index:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <div style="/*display: none;*/z-index:10;position: fixed;top: 50%;left: 50%;
    margin-left: -250px;margin-top: -200px;background-color: white;height: 400px;width:500px;">
        <input type="text" name=""/>
        <input type="text" name=""/>
        <input type="text" name=""/>
    </div>

    <div style="/*display: none;*/z-index:9;position: fixed;background-color: black;
    top: 0;left: 0;bottom: 0;right: 0;opacity: 0.5;">
    </div>
</body>
</html>
View Code

 overflow:hidden和auto

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;width: 300px; overflow: auto;">
        <img src="1.jpg">
    </div>
    <div style="height: 200px;width: 300px; overflow: hidden;">
        <img src="1.jpg">
    </div>
</body>
</html>
View Code

 

图标效果

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>Title</title>
    <style>
        .user_input{
            position: absolute;
            right: 6px;
            top: 10px;
            display: inline-block;
            height: 16px;
            width: 16px;"
        }
    </style>
</head>
<body>
    <div style="height: 35px;width: 400px;position: relative;">
        <input type="text" name="username" style="width: 370px;height: 35px;padding-right: 35px;" />
        <span class="user_input" style="background-image: url(i_name.jpg);"></span>
    </div>
</body>
</html>
View Code

 

 

js的定时器做个动态效果:

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>Title</title>
</head>
<body>
    <div id="show">欢迎来路飞学城玩呀</div>

    <script type="text/javascript">
        function myfun() {
            var tag = document.getElementById('show');
            var show = tag.innerText;

            var f = show.charAt(0);
            var left = show.substring(1,show.length);
            console.log(f);
            console.log(left);
            var new_content = left + f; 
            tag.innerText = new_content;
        }

        setInterval('myfun()',800);
    </script>
</body>
</html>
View Code

Js遍历数组的另一种方式:

var arr =['f1','werwe2','wer3'];
for(item in arr){
    console.log(arr[item])
}
View Code

 JS的  ==  值相等即可  === 值和类型都相等 

var a = '1';
var b = 1;
console.log(a==b);
console.log(a===b);
View Code

 

 Js的Dom相关初级:

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>Title</title>
</head>
<body>
    <div id="i1">我是i1</div>
    <a href="">adsas</a>
    <a href="">fds</a>
    <a href="">fhs</a>
    </script>
</body>
</html>
View Code

对应的在控制台写的Js:

document.getElementById('i1').innerText = 'simon';
tags = document.getElementsByTagName('a');
for(var i=0;i<tags.length;i++){
    tags[i].innerText='333';
}
View Code

 插入个相关笔记:

上节作业问题:
    1、css重用
        
        <style>
            如果整个页面的宽度 > 900px时:
            {
                .c{
                   共有 
                }
                .c1{
                    独有
                }
            }
            
            .c2{
                独有
            }
        </style>
        
        <div class='c c1'></div>
        <div class='c c2'></div>
    2、自适应 和 改变大小变形
        左右滚动条的出现
        宽度,百分比
        
        页面最外层:像素的宽度 => 最外层设置绝对宽度
        
        
        自适应:media
        
    3、默认img标签,有一个1px的边框
        img{
            border: 0;
        }
    
    4、作业中的数量输入框
    
上节内容回顾
    1、块级和行内
    2、form标签
            <form action='http://sssss' methed='GET' enctype='multi'>
                <div>asdfasdf</div>
                <input type='text' name='q' />
                <input type='text' name='b' />
                # 上传文件
                <input type='file' name='f' />
                <input type='submit' />
            </form>
            GET: http://sssss?q=用户输入的值
                 http://sssss?q=用户输入的值&b=用户输入的内容
                 
            POST:
                请求头
                请求内容
    3、display: block;inline;inline-block
    4float<div>
            <div style='float:left;'>f</div>
            <div style='clear:both;'></div>
        </div>

    5、margin: 0 auto;
    6、padding, ---> 自身发生变化
    
    
CSS补充
    position:
        a. fiexd => 固定在页面的某个位置
        
        b. relative + absolute
        
            <div style='position:relative;'>
                <div style='position:absolute;top:0;left:0;'></div>
            </div>

    opcity: 0.5 透明度
    z-index: 层级顺序   
    overflow: hidden,auto
    hover
    
    background-image:url('image/4.gif'); # 默认,div大,图片重复访
    background-repeat: repeat-y;
    background-position-x:
    background-position-y:
    
    示例:输入框

JavaScript
    独立的语言,浏览器具有js解释器
    
    JavaScript代码存在形式:
        - Head中
                <script>
                    //javascript代码
                    alert(123);
                </script>
                
                <script type="text/javascript">
                    //javascript代码
                    alert(123);
                </script>
        - 文件
            <script src='js文件路径'> </script>
            
        PS: JS代码需要放置在 <body>标签内部的最下方
        
    注释
        当行注释 //
        多行注释  /*     */
        
    变量:
        
        python:
            name = 'alex'
        JavaScript:
            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'}
        布尔类型
            小写
      
    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
    
    
    
作业:
    1、登录、注册,练习:position
    2、后台管理页面
        - 左侧菜单
        - 右边表格,全选反向,模态框,返回顶部
    3、商城页面
View Code

 Js实现模态弹窗+表格反选:

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .c1{
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            background-color: black;
            opacity: 0.6;
            z-index: 9;
        }
        .c2{
            width: 550px;
            height: 400px;
            background-color: white;
            position: fixed;
            left: 50%;
            right: 50%;
            margin-top: 100px;
            margin-left: 100px;
            z-index: 10;
        }

    </style>
</head>
<body>
    <div>
        <input type="button" value="添加" onclick="ShowModel();"/>
        <input type="button" value="全选" onclick="ChooseAll();"/>
        <input type="button" value="取消" onclick="CancelAll();"/>
        <input type="button" value="反选" onclick="ReserveAll();"/>

        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机</th>
                    <th>端口号</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td>
                        <input type="checkbox" name=""/>
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" name=""/>
                    </td>
                    <td>1.1.1.2</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" checked="true" name=""/>
                    </td>
                    <td>1.1.1.3</td>
                    <td>190</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!-- 遮罩层开始 -->
    <div id="i1" class="c1 hide"></div>
    <!-- 遮罩层结束 -->

    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <label for="username">用户名:</label>
        <input type="text" name="username"/>
        <label for="psd">密码:</label>
        <input type="text" name="psd"/>
        <input type="button" value="确定" name="">
        <input type="button" value="取消" name=""  onclick="HideModel();">
    </div>
    <!-- 弹出框结束 -->
    <script type="text/javascript">
    function ShowModel() {
        document.getElementById('i1').classList.remove('hide');
        document.getElementById('i2').classList.remove('hide');
    }
    function HideModel() {
        document.getElementById('i1').classList.add('hide');
        document.getElementById('i2').classList.add('hide');
    }
    function ChooseAll(){
        var tr_list = document.getElementById('tb').children;
            for (var i=0;i<tr_list.length;i++) {
                tr_list[i].children[0].children[0].checked = 1;
            }
    }
    function ReserveAll(){
        var tr_list = document.getElementById('tb').children;
            for (var i=0;i<tr_list.length;i++) {
                tr_list[i].children[0].children[0].checked = !tr_list[i].children[0].children[0].checked;
            }
    }
    function CancelAll(){
        var tr_list = document.getElementById('tb').children;
            for (var i=0;i<tr_list.length;i++) {
                tr_list[i].children[0].children[0].checked = 0;
            }
    }
    </script>
</body>
</html>
View Code

 Js实现菜单显隐:

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px;"></div>

    <div style="width: 300px;">
        
        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu('i1')">
            菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header" onclick="ChangeMenu('i2')">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="header" onclick="ChangeMenu('i3')">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="header" onclick="ChangeMenu('i4')">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function ChangeMenu(nid){
            var current_header = document.getElementById(nid);
            var item_list = current_header.parentElement.parentElement.children;
            for(var i=0;i<item_list.length;i++){
                item_list[i].children[1].classList.add('hide');
            }
            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>
</html>
View Code

另一种写法:传this,不传id

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title></title>
    <style>
        .hide{
            display: none;
        }
        .item .header{
            height: 35px;
            background-color: #2459a2;
            color: white;
            line-height: 35px;
        }
    </style>
</head>
<body>
    <div style="height: 48px;"></div>

    <div style="width: 300px;">
        
        <div class="item">
            <div id="i1" class="header" onclick="ChangeMenu(this)">
            菜单1</div>
            <div class="content">
                <div>内容1</div>
                <div>内容1</div>
                <div>内容1</div>
            </div>
        </div>
        <div class="item">
            <div id="i2" class="header" onclick="ChangeMenu(this)">菜单2</div>
            <div class="content hide">
                <div>内容2</div>
                <div>内容2</div>
                <div>内容2</div>
            </div>
        </div>
        <div class="item">
            <div id="i3" class="header" onclick="ChangeMenu(this)">菜单3</div>
            <div class="content hide">
                <div>内容3</div>
                <div>内容3</div>
                <div>内容3</div>
            </div>
        </div>
        <div class="item">
            <div id="i4" class="header" onclick="ChangeMenu(this)">菜单4</div>
            <div class="content hide">
                <div>内容4</div>
                <div>内容4</div>
                <div>内容4</div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        function ChangeMenu(ths){
            // var current_header = document.getElementById(nid);
            var current_header = ths;
            var item_list = current_header.parentElement.parentElement.children;
            for(var i=0;i<item_list.length;i++){
                item_list[i].children[1].classList.add('hide');
            }
            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>
</html>
View Code

 

 

 

布局:左侧菜单栏固定

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title></title>
    <style>
        body{
            margin:0;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .left{
            float: left;
        }
        .pg-content .menu{
            position: fixed;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: fixed;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: purple;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">aaa</div>
        <div class="content left">
            <p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>
View Code

布局:左侧以及上下不动

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title></title>
    <style>
        body{
            margin:0;
        }
        .pg-header{
            height: 48px;
            background-color: #2459a2;
            color: white;
        }
        .left{
            float: left;
        }
        .pg-content .menu{
            position: absolute;
            top: 48px;
            left: 0;
            bottom: 0;
            width: 200px;
            background-color: #dddddd;
        }
        .pg-content .content{
            position: absolute;
            top: 48px;
            right: 0;
            bottom: 0;
            left: 200px;
            background-color: purple;
            overflow: auto;
        }
    </style>
</head>
<body>
    <div class="pg-header"></div>
    <div class="pg-content">
        <div class="menu left">aaa</div>
        <div class="content left">
            <p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p><p>asdasdassadasd</p>
        </div>
    </div>
    <div class="pg-footer"></div>
</body>
</html>
View Code

这两种只在postion上有区别

 

缺两段:

1、hover(悬停的时候出现下拉)

2、border-radius (50%的时候是个圆形)

 

js的匿名函数和自执行函数:

/*js的匿名函数*/
setInterval(function(){console.log('234');},5000);
/*自执行函数,创建完成之后直接执行*/
(function(arg){
    console.log(arg);
})('sad')
View Code

js序列化:

//字符串转成对象
var str = '[11,22,33,44,55]';
var arr = JSON.parse(str);
console.log(arr);
//对象转成字符串
var arr = [11,22,33,44,55];
var str = JSON.stringify(arr);
console.log(str);
View Code

 Js作用域(1、以函数为作用域;2、函数作用域在没有执行之前就已经被创建;3、函数的作用域存在作用域链,也是被调用之前就创建):

xo = 'alex';
function func(){
    var xo = 'eric';
    function inner(){
        console.log(xo);
    }
    return inner;
}
var ret = func();
ret();
View Code

 js函数内 局部变量 声明提前:

function func(){
    console.log(xo);
    var xo = 'alex';
}
func();
//下面这种则会报错
function func2(){
    console.log(xxo);
}
func2();
View Code

 input type='text'的为空提醒:

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title></title>
</head>
<body>
    <div style="width: 60px;margin: 0 auto;">
        <input type="text" value="请输入关键字" id="i1" onfocus="Foucs();" onblur="Blur();">
        <input type="text" name="" placeholder="请输入关键字">
    </div>
    <script type="text/javascript">
        function Foucs(){
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val=='请输入关键字'){
                tag.value = '';
            }
        }
        function Blur(){
            var tag = document.getElementById('i1');
            var val = tag.value;
            if(val.length==0){
                tag.value = '请输入关键字';
            }
        }
    </script>
</body>
</html>
View Code

 js加入标签的两种方式:字符串形式和对象形式

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title></title>
</head>
<body>
    <input type="button" name="" value="+" onclick="addlab1();">
    <input type="button" name="" value="+" onclick="addlab2();">
    <div id="i1">
        <p><input type="text" name=""></p>
    </div>

    <script type="text/javascript">
        function addlab1(){
            /*创建一个标签,然后将标签添加到li中*/
            var tag = "<p><input type='text'></p>";
            document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);
        }
        function addlab2(){
            var tag = document.createElement('input');
            tag.setAttribute('type','text');
            tag.style.fontSize = '16px';
            tag.style.color = 'red';

            var p = document.createElement('p');
            p.appendChild(tag);
            document.getElementById('i1').appendChild(p);
        }
    </script>
</body>
</html>
View Code

 获取当前ip:

console.log(location.href);/*获得当前运行的url*/
location.href = 'http://www.baidu.com';/*指定跳转url*/
location.reload();
View Code

 定时器相关:

var obj = setInterval(function(){console.log(123);clearInterval(obj);/*clear放这儿则执行一次就结束*/},1000);
/*清除定时器*/
clearInterval(obj);

/*表示执行到这儿的时候,3秒之后才去执行console.log(555);只执行一次,场景,比如成功之后,显示五秒就自动关闭*/
var timeout = setTimeout(function(){console.log(555);},3000);
clearTimeout(timeout);/*清除*/
View Code

定时器实例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title></title>
</head>
<body>
    <div id="status"></div>
    <input type="button" value="删除" onclick="deleteEle();" name="">
    <script type="text/javascript">
        function deleteEle(){
            document.getElementById('status').innerText = '已删除!';
            var obj = setTimeout(function(){
                document.getElementById('status').innerText = '';
            },3000);
            /* clearTimeout(obj);  清除*/
        }
    </script>
</body>
</html>
View Code

行为  样式 结构 相分离,实现表格的onmouseover和onmouseout事件:

<!DOCTYPE html>
<html>
<head>
    <meta charset="GBK">
    <title></title>
</head>
<body>
    <table border="1" width="300px;">
        <tr><td>1</td><td>2</td><td>3</td></tr>
        <tr><td>4</td><td>5</td><td>6</td></tr>
        <tr><td>7</td><td>8</td><td>9</td></tr>
    </table>

    <script type="text/javascript">
        var myTables = document.getElementsByTagName('tr');
        console.log(myTables);
        var len = myTables.length;
        for(var i=0;i<len;i++){
            myTables[i].onmouseover = function(){
                this.style.backgroundColor = 'red';
            }
            myTables[i].onmouseout = function(){
                this.style.backgroundColor = '';
            }
        }
    </script>
</body>
</html>
View Code

 

submit 的emmet查件的快捷键,如table.test>td*3>tr*2>{$zhangsan$} 再按tab就生成了一个3列2行的table test是类名,zhangsan的内容

 

posted on 2018-07-07 14:14  simon002  阅读(731)  评论(0编辑  收藏  举报

导航