html中 css js Dom初探

于 2018-07-20 19:23:51 发布
阅读量132 收藏
点赞数
分类专栏： WEB前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhuisaozhang1292/article/details/81137149
版权

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 48px;
            background-color: red;
            color: #dddddd;
            position: fixed;
            top:0;
            right: 0;
            left: 0;
        }
        .pg-body{
            background-color: pink;
            height: 5000px;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="pg-header">头部</div>
    <div class="pg-body">内容</div>
</body>
</html>

输出:

 

单用absolute，只能让内容定位在当前指定位置，当滑动页面时，内容会跟随上移，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
    <div style="height: 5000px;background-color: #dddddd;">
        asdfasdf
    </div>
    <div style="width: 50px;height: 50px;background-color: black;position: absolute;right: 0;bottom: 0;">asdf</div>
    
</body>
</html>

输出：

position属性的 relative和absolute 配合使用：使得黑框相对红框定位

输入：

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

        <div style="position: absolute;right:0;bottom:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>
    
    <div style="position: relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto;">

        <div style="position: absolute;right:0;top:0;width: 50px;height: 50px;background-color: black;"></div>
    </div>

</body>
</html>

输出：

 

a标签放置图片时，overflow 属性设置 auto、hidden

<!DOCTYPE html>
<html lang="en">
<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>

输出：

鼠标移过菜单栏，菜单栏换颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LOVE YOU</title>
    <style>
        .pg-header{
            position: fixed;
            right: 0;
            left: 0;
            top: 0;
            height: 48px;
            background-color: #2459a2;
            line-height: 48px;
        }
        .pg-body{
            margin-top: 50px;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px 0 10px;
            color: white;
        }
        /*当鼠标移动到当前标签上时，以下css属性才生效*/
        .pg-header .menu:hover{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="pg-header">
        <div class="w">
            <a class="logo">NJAU</a>
            <a class="menu">Pukou</a>
            <a class="menu">Weigang</a>
            <a class="menu">Baima</a>
            <a class="menu">Jiangpu</a>
        </div>
    </div>
    
    <div class="pg-body">
        <div class="w">You are the best!</div>
    </div>
    
</body>
</html>

输出：

通过background-repeat:no-repeat; 控制是否整列复制 其中可以单独X 或 Y 复制 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 100px;"></div>
    <div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;width:20px;border: 1px solid red;"></div>
</body>
</html>

输出：

radio用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <input class="c1" type="radio" name="gender" value="1" />
        <input type="radio" name="gender" value="2" />
        <input type="radio" name="gender" value="3" />
        <input type="radio" name="gender" value="4" />
    </div>
    
    <div>
        <input class="c1" type="radio" name="gender" value="1" />
        <input type="radio" name="gender" value="2" />
        <input type="radio" name="gender" value="3" />
        <input type="radio" name="gender" value="4" />
    </div>
    
</body>
</html>

输出：

登陆输入框： 在edge和360中的效果不一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="height: 35px;width: 400px;position: relative;background-color: red;">
        <input type="text" style="height: 35px;width: 400px;" />
        <span style="position:absolute;right:0;top:10px;background-image: url(i_name.jpg);height: 16px;width: 16px;display: inline-block;">
        </span>
    </div>
</body>
</html>

输出：

alert的用法：

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" id="user" >
    <input type="button" onclick="GetData();" value="Click me" />
    <script>
        function GetData(){
            var i = document.getElementById('user');
            alert(i.value);
        }
    </script>
</body>
</html>

输出：

 

javascript的使用 一般都是放在最后，是为了提升用户体验，因为 可能某些函数需要较长时间提取数据

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*css代码*/
    </style>

    <!--<script>-->
        <!--//javascript代码-->
        <!--alert(123);-->
    <!--</script>-->
</head>
<body>

</body>
</html>

例2 由于网站链接是不存在的，所以一直处于刷新状态， 应该是当达到timeout的时间后，会继续往下走，然后出现h标签内容

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<script src="https://www.gsta123123sdfasdfc.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
    <h1>asdf</h1>
    <h1>asdf</h1>
    <h1>asdf</h1>
    <h1>asdf</h1>
    <h1>asdf</h1>
    <h1>asdf</h1>
    <h1>asdf</h1>

    <script>
        function
    </script>
</body>
</html>

输出：

在js功能复用较多时，通常会将其单独建立一个.js配置文件 如下例common.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="commons.js">
    </script>
    
    <script type="text/javascript">
        //javascript代码
        alert(123);
    </script>
    
</head>
<body>

</body>
</html>

输出： 会弹出对话框两次

 

将数据从字符串转为整形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>sadf</h1>
    <script>
        /*
        name = 'hcl';
        function func(){
            var name = 'jane'
        }*/
        age = "18";
        i = parseInt(age);

    </script>
</body>
</html>

定时器的使用：

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        function f1(){
            console.log(1);
        }

        // 创建一个定时器
        //setInterval("alert(123);", 5000);
        setInterval("f1();", 2000);
    </script>
</body>
</html>

输出：

通过修改标签内容形成 文字流水灯

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NJAUB307</title>
</head>
<body>
    <div id="i1" style = "color: red">喜迎B307成立人工智能实验室</div>

    <script>
        function func(){
            // 根据ID获取指定标签的内容,定于局部变量接受
            var tag = document.getElementById('i1');
            // 获取标签内部的内容
            var content = tag.innerText;

            var f = content.charAt(0);
            var l = content.substring(1,content.length);

            var new_content = l + f;

            tag.innerText = new_content;
        }
        setInterval('func()', 500);
    </script>
</body>
</html>

 div与a标签

输入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="i1">我是i1</div>

    <a style = "background-color: red;">asdf</a>
    <a style = "background-color: yellow">909</a>
    <a style = "background-color: pink">kafsufd</a>
</body>
</html>

输出：

通过：getelementById等操作 找到父标签 兄弟标签 子标签

例如： 具体操作流程没写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <div></div>
        <div>
            c1
        </div>
    </div>
    <div>
        <div></div>
        <div id="i1">
            c2
        </div>
    </div>
    <div>
        <div></div>
        <div>
            c3
        </div>
    </div>
</body>
</html>

通过 js css实现三层内容：

输入：

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

    <div>
        <input type="button" value="添加" onclick="ShowModel();" />
        <input type="button" value="全选" onclick="ChooseAll();" />
        <input type="button" value="取消" onclick="CancleAll();" />
        <input type="button" value="反选" onclick="ReverseAll();" />

        <table>
            <thead>
                <tr>
                    <th>选择</th>
                    <th>主机名</th>
                    <th>端口</th>
                </tr>
            </thead>
            <tbody id="tb">

                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>1.1.1.1</td>
                    <td>190</td>
                </tr>
                <tr>
                    <td><input type="checkbox"f id="test" /></td>
                    <td>1.1.1.2</td>
                    <td>192</td>
                </tr>
                <tr>
                    <td><input type="checkbox" /></td>
                    <td>1.1.1.3</td>
                    <td>193</td>
                </tr>
            </tbody>
        </table>
    </div>

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

    <!-- 弹出框开始 -->
    <div id="i2" class="c2 hide">
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p>
            <input type="button" value="取消" onclick="HideModel();"/>
            <input type="button" value="确定"/>

        </p>

    </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(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = true;

            }
        }

        function CancleAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                checkbox.checked = false;

            }
        }

        function ReverseAll(){
            var tbody = document.getElementById('tb');
            // 获取所有的tr
            var tr_list = tbody.children;
            for(var i=0;i<tr_list.length;i++){
                // 循环所有的tr，current_tr
                var current_tr = tr_list[i];
                var checkbox = current_tr.children[0].children[0];
                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>
    <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>
        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++){
                var current_item = item_list[i];
                current_item.children[1].classList.add('hide');
            }

            current_header.nextElementSibling.classList.remove('hide');
        }
    </script>
</body>
</html>

输出：

淮南草
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值