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

随机推荐

HhashMap HashTable ConcurrentHashMap
hashMap hashTable concurrentHashMap hashMap的效率高于hashTable,hashMap是线程不安全的,并发时hashMap put方法容易引起死循环,导致c ...
为什么要使用Vuex?
为什么要使用Vuex? 1. 假如不使用 1.1 父子组件依赖同一个state 1.2 兄弟组件依赖同一个state 2. 用了Vuex之后 3. 方便记忆和理解
关于在C++中调用system函数
先看看下面的这一段程序: #include <iostream> #include <cstdlib> int main(int argc, char* argv[]) { s ...
ArcSDE空间数据库中SDE用户使用探讨 (转载)
ArcSDE作为空间数据库解决方案,应用非常广泛,本短文将尝试描述SDE的工作机制,简要说明空间数据库中SDE用户的使用方法.ArcSDE如何工作ArcSDE属于中间件技术,其本身并不能够存储空间数据 ...
C#添加删除防火墙例外（程序、端口）
一. 添加 COM 引用在引用里,选择 COM 页, 找到 NetFwTypeLib , 确定即可二. 添加允许通过防火墙的例外程序 using System; using System.Coll ...
aar、jar、so的引入和aar打包包含so、aar、jar文件
so依赖 1,先建本地仓库,指向so放置的目录
django ORM 简单示例简绍
简单 models 操作 class Host(models.Model): nid = models.AutoField(primary_key=True) #Nid为主键 hostname = m ...
Git 推送和删除标签
事实上Git 的推送和删除远程标签命令是相同的,删除操作实际上就是推送空的源标签refs:git push origin 标签名相当于git push origin refs/tags/源标签名:re ...
WPS去掉英语单词下面的红斜线
我们在使用WPS的时候,经常会用到英语但是,但是在编码的时候,有些单词是缩写形成的,WPS就会自动验证,产生红色波浪线,提示我们单词写错的问题,那看起来就显得很不美观别扭那么我们不想要这个红斜杠,怎 ...
IE的Trident引擎下实现C++和Javascript相互调用
我们知道实现C++和Javascript通讯有下表5种接口: 引擎编写语言 API接口 C.C++与JavaScript交互(变量.函数.类) vc2005编译静态库的大小示例EXE的大小执行. ...

day 16 JS DOM 继续

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

随机推荐

热门专题