原创

前端学习:javascript基本知识

本文为博主原创文章,欢迎转载,请注明出处
本文链接:https://pengshiyu.blog.csdn.net/article/details/79302410
javascript
    独立的语言,浏览器是js解释器
    存在形式
        - head <scrip> code </script>
        - 独立文件<script src=""> code </script>
        一般放在body底部
    注释:
        - 单行注释  //
        - 多行注释 /* */
    变量
        - python:
            name = "Tom"
        - javascript:
            name = "Tom"   # 全局变量
            var name = "Eric"  # 局部变量
    基本数据类型
        - 数字number(浮点型)
            var age = 18;
            parseInt() 转数字
            parseFloat() 转浮点数
            NaN  非数字 isNaN()
            Infinity  无穷大 isFinite()
            数值计算 Math.abs()...
        - 字符串string
            var s = "abcdef"
            s.charAt(索引位置)
            s.substring()
            s.length
            ...
        - 列表(数组)
            a = [1, 2, 3, 4]
        - 字典
            a = {"k1": "v1", "k2": "v2"}
        - 布尔
            true false
        - null undefined
    for循环
        1.循环时元素是索引
        a = [11, 22, 33, 44]
        for(var index in a){
            console.log(index)
        }
        a = {"k1": "v1", "k2": "v2"}
         for(var key in a){
            console.log(key)
        }
        2.下标
        a = [11, 22, 33, 44]
        for(var i=0; i<a.length; i++){

        }
        不支持字典循环


    while循环

    定时器
        setInterval("code", time(ms))
    console.log()

    条件语句
        if(condition){

        }else if(condition){

        }else{

        }
        == 值相等
        != 不相等
        === 值和类型都相等
        && and
        || or

    函数
        function func_name(parameter){

        }

参考:
《JavaScript》
http://www.cnblogs.com/wupeiqi/articles/5602773.html


dom文档对象
    1.找到标签
        直接查找
            通过id获取标签 document.getElementById()
            通过name属性获取标签 document.getElementsByName()
            通过class属性获取标签 document.getElementsByClassName()
            通过标签名获取标签 document.getElementsByTagName()
        间接操作
            parentElement    父亲
            children         孩子
            firstElementChild   第一个孩子
            lastElementChild    最后一个孩子
            nextElementSibling  下一个兄弟
            previousElementSibling   上一个兄弟

    2.操作标签
        innerText
            获取文本内容  var = tag.innerText
            设置文本内容  tag.innerText = "text"
        className
            整体操作 tag.className ="className"
            添加样式 tag.classList.add()
            删除样式 tag.classList.remove()
        checkbox
            获取值 var = checkbox.checked
            设置值 checkbox.checked = true
    事件
        οnclick=func(param)

    定时器

    示例:
        滚动字幕
        多选框
        模态对话框
        返回顶部
        左侧菜单

    作业:
        1.登陆,注册  练习position
        2.后台管理页面
            - 左侧菜单
            - 右边表格,全选,反选,模态框,返回顶部
        3.商城页面

侧边栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menu{
            width:200px;
        }
        .item{


        }
        .header{
            height: 40px;
            background-color: #0d3ea2;
            color:white;
            line-height: 40px;
            text-align: center;
            font-weight: bold;
        }
        .content div{
            height: 36px;
            line-height: 36px;
            text-align: center;
            background-color: #dddddd;
        }
        .hide{
            display:none;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="item">
        <div id="i1" class="header" onclick="changeMenu('i1')" >菜单1</div>
        <div class="content">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>

        </div>
    </div>
    <div  class="item" >
        <div id="i2" class="header" onclick="changeMenu('i2')">菜单2</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>

        </div>
    </div>
    <div class="item">
        <div id="i3"  class="header"  onclick="changeMenu('i3')">菜单3</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
    <div class="item">
        <div id="i4" class="header"  onclick="changeMenu('i4')">菜单4</div>
        <div class="content hide">
            <div>内容1</div>
            <div>内容2</div>
            <div>内容3</div>
        </div>
    </div>
</div>
<script>
    function changeMenu(tagId) {
        // menu -> items -> header + content->div
        //获取当前标签
        var current_header = document.getElementById(tagId);

        // 获取菜单栏二级标签
        var items = current_header.parentElement.parentElement.children;

        // 遍历所有二级标签,设置content都隐藏
        for(var i=0; i<items.length; i++){
            var item = items[i];

            item.children[1].classList.add("hide");
        }

        // 当前菜单的子菜单显示
        current_header.nextElementSibling.classList.remove("hide");
    }
</script>
</body>
</html>

效果
这里写图片描述

模态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }

        /*遮罩层*/
        .c1{
            background-color: black;
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 0.6;
            z-index: 9;
        }

        /*输入层*/
        .c2{
            background-color: white;
            width: 500px;
            height: 400px;
            z-index: 10;
            position: fixed;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -250px;
        }

        .hide{
            display: none;
        }

        /*form表格*/
        #i2 form{
            margin:0 auto ;
            width: 150px;
            height: 120px;
            /*border:1px solid red;*/
        }
    </style>
</head>
<body>
    <!--主体内容开始-->
    <div>
        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody id="tb">
                <tr>
                    <td><input type="checkbox"></td>
                    <td>李白</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>杜甫</td>
                    <td>24</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>白居易</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>李清照</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
    </div>
    <!--主体内容结束-->

    <button onclick="showModel()">添加</button>
    <button onclick="chooseAll()">全选</button>
    <button onclick="cancelAll()">取消</button>
    <button onclick="reverseAll()">反选</button>

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

    <!--输入层开始-->
    <div id="i2" class="c2 hide">
        <form action="">
            <p><input type="text"></p>
            <p><input type="text"></p>
            <p><input type="button" onclick="hideModel()" value="确认"></p>
        </form>
    </div>
    <!--输入层结束-->

    <script>
        // 显示
        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(){
            // tbody - > tr -> td -> input(checkbox)
            var tbody = document.getElementById("tb");

            // 获取所有标签
            var trs = tbody.children;

            // 循环所有标签
            for(var i=0; i<trs.length; i++){
                var tds = trs[i].children;
                var checkbox = tds[0].firstChild;
                checkbox.checked = true;
            }
        }

         //取消全选
        function cancelAll(){
            // tbody - > tr -> td -> input(checkbox)
            var tbody = document.getElementById("tb");
            var trs = tbody.children;

            for(var i=0; i<trs.length; i++){
                var tds = trs[i].children;
                var checkbox = tds[0].firstChild;
                checkbox.checked = false;
            }
        }

         //反选
        function reverseAll(){
            // tbody - > tr -> td -> input(checkbox)
            var tbody = document.getElementById("tb");
            var trs = tbody.children;

            for(var i=0; i<trs.length; i++){
                var tds = trs[i].children;
                var checkbox = tds[0].firstChild;

                if(checkbox.checked){
                    checkbox.checked = false;
                } else{
                    checkbox.checked = true;
                }
            }
        }
    </script>
</body>
</html>

效果
这里写图片描述

滚动的文字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="i">hello world</div>
<script>
    function func() {
        //获取id=i的标签
        var tag = document.getElementById("i");

        //获取标签内容
        var content = tag.innerText;

        var left =content.charAt(0);
        var right = content.substring(1, content.length);
        var new_content = right + left;
        tag.innerText = new_content;
    }

    setInterval("func()", 1000);
</script>
</body>
</html>

效果
这里写图片描述

注册框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*注册框主体*/
        .pg-main{
            width:600px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #dddddd;

        }

        /*标题*/
        .pg-head{
            height: 80px;
            line-height: 80px;
            font-size: 35px;
            font-weight: bold;
            margin-left:50px;
        }

        /*主体框*/
        .pg-body{
            height: 270px;
            color: #7b7b7b;
        }

        /*注册行*/
        .pg-body-line{
            height: 42px;
            line-height: 42px;
        }
        /*左边文字*/
        .pg-body-left{
            float:left;
            width: 200px;
            text-align: right;
        }
        /*星号*/
        .pg-body-left span{
            color:red;
        }
        /*右边*/
        .pg-body-right{
            float:left;
            width: 400px;
            font-size:14px;
        }
        /*右边输入框*/
         .pg-body-right input{
             width:250px;
             height: 28px;
         }
         /*验证码行输入框*/
         .pg-body-right-verify input{
             width:140px;
             height: 28px;
             float: left;
             /*margin:0 auto;*/
             margin-top: 4px;
        }
         /*验证码图片*/
        .pg-body-img{
            width: 50px;
            height: 28px;
            float: left;
            margin-top: 4px;
        }
        /*验证码图片大小*/
        .pg-body-img img{
            height: 28px;
        }
         /*下部*/
        .pg-foot {
            height: 120px;
            /*background-color: orange;*/
        }
        /*协议勾选行*/
        .pg-foot div{
            margin-bottom: 10px;
            text-align: center;
            font-size:12px;
        }
        /*信息提交按钮*/
        .pg-foot-button{
            background-color:  #e4393c;
            width: 260px;
            height: 36px;
            color:white;
            font-size: 16px;
            text-align: center;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <!--注册框开始-->
    <div class="pg-main">

        <!--头部标题开始-->
        <div class="pg-head">
            新用户注册
        </div>
         <!--头部标题结束-->

        <!--信息输入部分开始-->
        <div class="pg-body">

            <div class="pg-body-line">
                <div class="pg-body-left">
                    <span>*</span>用户名:
                </div>
                <div class="pg-body-right">
                    <input type="text">
                </div>
            </div>

             <div class="pg-body-line">
                <div class="pg-body-left">
                    <span>*</span>用户名:
                </div>
                <div class="pg-body-right">
                    <input type="text">
                </div>
             </div>

             <div class="pg-body-line">
                <div class="pg-body-left">
                    <span>*</span>手机号:
                </div>
                <div class="pg-body-right">
                    <input type="text">
                </div>
             </div>

            <div class="pg-body-line">
                <div class="pg-body-left">
                    <span>*</span>登陆密码:
                </div>
                <div class="pg-body-right">
                    <input type="password">
                </div>
            </div>

            <div class="pg-body-line">
                <div class="pg-body-left">
                    <span>*</span>确认密码:
                </div>
                <div class="pg-body-right">
                    <input type="password">
                </div>
            </div>

            <div class="pg-body-line">
                <div class="pg-body-left">
                    <span>*</span>验证码:
                </div>
                <div class="pg-body-right-verify">
                    <input type="text">
                </div>
                <div class="pg-body-img">
                    <img src="img/verify.png" alt="">
                </div>
            </div>
        </div>
        <!--信息输入部分结束-->

        <!--信息提交开始-->
        <div class="pg-foot">
            <div><input type="checkbox" class="pg-foot-checkbox">
                我已阅读并同意《用户注册协议》</div>
            <div>
                <input type="submit" class="pg-foot-button" value="同意以上协议并注册">
            </div>

        </div>
        <!--信息提交结束-->
    </div>
</body>
</html>

效果:
这里写图片描述

文章最后发布于: 2018-02-09 22:59:37
展开阅读全文
0 个人打赏

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览