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 的规定有:(只管定 ...

随机推荐

Bootstrap学习笔记（三）
三.组件 1.图标字体图标字体本质是文字,而不是图形!可以无限放大或修改颜色. 使用方式:<span class="glyphicon glyphicon-XXX"> ...
学习笔记：SVG和Canvas
SVG SVG 与 Flash 类似,都是用于二维矢量图形,二者的区别在于,SVG 是一个 W3C 标准,基于 XML,是开放的.因为是 W3C 标准,SVG 与其他的 W3C 标准,比如 CSS.D ...
学习笔记：MDN的CSS
HTML用于定义内容的结构和语义,CSS用于设计风格和布局. CSS规则由选择器和声明块组成:声明由属性(properties)和属性值组成. CSS介绍: 盒=框=box,边界=border,内边距 ...
为什么要使用Vuex?
为什么要使用Vuex? 1. 假如不使用 1.1 父子组件依赖同一个state 1.2 兄弟组件依赖同一个state 2. 用了Vuex之后 3. 方便记忆和理解
JNI教程
一.什么是JNI JNI(Java Native Interface ),它是Java SDK的一部分,主要用于实现Java对其他语言编写的代码和库的调用,比如C和C++.JNI提供的API也能让JV ...
xp_delete_files不起作用解决方法
xp_delete_file用来删除数据库的备份文件和维护计划文本报告.示例: ,N'D:\Backup\Diff',N'bak',N'2019-05-29T10:03:41' 第一个参数表示文件类型 ...
将ts文件合并为mp4命令
cmd: copy/b D:\*.ts D:\new.ts 参考:http://blog.sina.com.cn/s/blog_66b4f1180102uzxs.html
python读取文件指定行
import linecache file=open('3_2.txt','r') linecount=len(file.readlines()) linecache.getline('3_2.txt ...
mantis基本配置及邮件服务器配置
邮件服务器配置在c:\php-5.0.3\php.ini文件中查找smtp,将localhost改为你的发件服务器,如SMTP = smtp.163.com 在php.ini文件中查找sendm ...
解决MySQL安装到最后一步未响应的三种方法
这种情况一般是你以前安装过MySQL数据库服务项被占用了.解决方法: 方法一:安装MySQL的时候在这一步时它默认的服务名是“MySQL” 只需要把这个名字改了就可以了.可以把默认的服务器的名称手动改 ...

day 16 JS DOM 继续

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

随机推荐

热门专题