day 16 JS DOM 继续

为什么有jquey了还学DOM ？

因为JQuey 是大而全，可能有10k 但是我们用到的只有1k 网站小没事，网站大流量就是问题

所以大网站都是自己用DOM 实现一个类似于JQuey 的适合自己公司的模块

所以需要学习DOM 。

回顾下上次内容：

min-width 设置最小宽度，在页面缩放的时候，当宽度小于指定宽度时，使用最小宽度

左边菜单不动

学一个新技能，只要改一个属性就能实现菜单左边固定不动和菜单随右边内容滚动

实践：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

        }

        .left{

            float: left;

        }

        .right{

            float: right;

        }

        .pg-header{

            height: 48px;

            background-color: #2459a2;

            color: white;

        }

        .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;

            min-width: 980px;

            overflow: auto;

        }

    </style>

</head>

<body>

    <div class="pg-header"></div>

    <div class="pg-content">

        <div class="menu left">a</div>

        <div class="content left">

            <!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->

            <!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->

            <div style="background-color: purple">

            <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p style="margin: 0;">asdf</p>

                </div>

        </div>

    </div>

    <div class="pg-footer"></div>

</body>

</html>

调整为圆形的就调整这个参数为50%

实践：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .item{

            background: #dddddd;

        }

        .item:hover{

            color: red;

        }

        .item:hover .b{

            background-color: #396bb3;

        }

    </style>

</head>

<body>

    <div class="item">

        <div class="a">aa</div>

        <div class="b">bb</div>

    </div>

</body>

</html>

效果：

我们如何使用第三方的图标呢？

下载css库，然后引用，直接使用就可以了：

效果：

调整padding参数，变圆：

9 序列化

时间，就是一个类，有很多方法：

作用域：

就近原则，找变量，和python 一样

声明变量没有赋值就是 undefined

解决每个对象需要用共同的东西，但是又不想占用更多内存的方法：

未解决前：

使用原形解决：

原形创建于类里面这样就不存在于对象中了

对html的操作：

操作：

1 使用text

2 使用html

操作文本框：

select 框：

查找分为两种形式：

select 特有的可以通过 index 设置

大文本框的获取及更改：

实现一个搜索框的默认有文字，鼠标点击后文字消失的功能：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div style="width: 600px; margin: 0 auto">

        <input type="text" id="i1" onfocus="Focus();"  onblur="Blur();" value="请输入关键字"/>

    </div>

    <script>

        function Focus() {

            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>

效果：

JavaScripts 函数一般用驼峰样式写

操作html 标签：

第二种方法：

写一个个人菜单的样式效果：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

        }

        .left{

            float: left;

        }

        .right{

            float: right;

        }

        .pg-header{

            height: 48px;

            background-color: #2459a2;

            color: white;

            line-height: 48px;

        }

        .pg-header .logo{

            width: 200px;

            background-color: cadetblue;

            text-align: center;

        }

        .pg-header .user{

                margin-right: 60px;

            padding: 0 20px;

            color: white;

            height: 48px;

        }

        .pg-header .user:hover{

            background-color: #204982;

        }

        .pg-header .user .a img{

            height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;

        }

        .pg-header .user .b{

                z-index: 20;

                position: absolute;

                top: 48px;

                right: 44px;

                background-color: white;

            color: black;

            width: 160px;

            display: none;

        }

        .pg-header .user:hover .b{

            display: block;

        }

        .pg-header .user .b a{

            display: block;

        }

        .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;

            overflow: auto;

            z-index: 9;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="logo left">

            老男孩

        </div>

        <div class="user right" style="position: relative">

            <a class="a" href="#">

                <img src="22.jpg">

            </a>

            <div class="b">

                <a>我的资料</a>

                <a>注销</a>

            </div>

        </div>

    </div>

    <div class="pg-content">

        <div class="menu left">a</div>

        <div class="content left">

            <!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->

            <!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->

            <div style="background-color: purple">

            <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

            <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>

                </div>

        </div>

    </div>

    <div class="pg-footer"></div>

</body>

</html>

效果：

day 16 JS DOM 继续的更多相关文章

货架工程项目之js dom实现项目工程进度图
笔者最近要负责有个项目工程网站的安装进度过程,实现的效果要求大概如下图所示由于笔者没有参与到数据库的制作,得知他们这个项目设计工序的时候就一个开始日期的和完成日期,连整个项目的安装结束时间都没有简直 ...
js DOM优化相关探索
我在这尝试两个方面:-->DOM与js -->DOM与浏览器 (最近在秒味视频上学到不少,哈哈哈) 一.DOM与js 1.js与dom的交互问题频繁的与dom交互,是一件浪费时间与金钱的 ...
js DOM的几个常用方法
<div id="div1">这是个测试</div> <p </p> <p </p> //js DOM的几个常用方法 / ...
JS DOM 来控制HTML元素
JS DOM 来控制HTML元素 (ps:这个有很多方法,挑一些详解,嘻嘻) 1.getElementsByName():获取name. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ...
JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
Js DOM 详解
DOM事件类基本概念 DOM事件的级别 1.DOM0 element.onclick = function(){} 2.DOM2 element.addEventListener("cli ...
JS DOM对象控制HTML元素详解
JS DOM对象控制HTML元素详解方法: getElementsByName() 获取name getElementsByTagName() 获取元素 getAttribute() 获取元素 ...
css3动画和JS+DOM动画和JS+canvas动画比较
css3兼容:IE10+.FF.oprea(animation):safari.chrome(-webkit-animation) js+dom:没有兼容问题: js+canvas:IE9+:(性能最 ...
JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...

随机推荐

linux 跳过登陆修改用户密码
2017-02-11 20:41 6人阅读评论(0) 收藏编辑删除分类: Linux 版权声明:本文为博主原创文章,未经博主允许不得转载. Linux 系统默认的是有0 1 2 3 ...
oracle最高账号sys的密码认证模式
CONNECT USERNAME/PASSWORD@SERVERNAME AS SYSDBAconnect 是指连接到username是指用户名password是指密码servername是指服务名a ...
Ubuntu 14.04 安装caffe深度学习框架
简介:如何在ubuntu 14.04 下安装caffe深度学习框架. 注:安装caffe时一定要保持网络状态好,不然会遇到很多麻烦.例如下载不了,各种报错. 一.安装依赖包 $ sudo apt-ge ...
基于PowerShell的Lync Server管理使用C# 之 Telephony 功能查看 /修改
本以为这个属性可以在用户信息中直接反应出来,但是看了好几遍还是没找到这个属性名称这个功能没有在get-User 的结果中直接反映出来但是可以通过 Property 查找单个选项如: Get-Cs ...
【mydigitallife.info】如何禁用Aero窗口自动最大化
Go to Control Panel. Click on Ease of Access link or Ease of Access Center icon. Select Change how y ...
IOS 九宫图解锁（封装）
NJLockView.h /.m @class NJLockView; @protocol NJLockViewDelegate <NSObject> - (void)lockViewDi ...
World Wind Java开发之三显示状态栏信息（转）
http://blog.csdn.net/giser_whu/article/details/40920315 先来看下本篇博客索要达到的效果: 找到源码下的gov.nasa.worldwind.ut ...
Nginx+proxy实现简单的负载均衡
环境说明:操作系统centos6.6 64位web操纵系统是:web1=192.168.10.10(LAMP) web2=192.168.10.11(LNMP),这里只是测试nginx实现负载均衡效果 ...
Feign + Hystrix 服务熔断和服务降级
本机IP为 192.168.1.102 1. 新建 Maven 项目 feign 2. pom.xml <project xmlns="http://maven.apa ...
HP刀片服务器安装系统步骤
原文链接 HP刀片服务器安装系统步骤: HP刀片使用一个叫OA(Onboard Administrator)的管理平台统一进行管理,具有很高的集成性,同时使用起来也很简单方便,通过IE浏览器输入IP地 ...

day 16 JS DOM 继续

day 16 JS DOM 继续的更多相关文章

随机推荐

热门专题