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

随机推荐

jQuery知识重构
jQuery知识重构目录: 一.入口函数 1 $(document).ready(function(){}); 2 $(function(){}); jQuery ...
Cocos2d-x v3.1 坐标系统（五）
Cocos2d-x v3.1 坐标系统(五) 为了能够更好的布局以及了解对象所在的位置,我们必须对Cocos2d-x中的坐标有详细的了解,本篇文章主要就是了解Cocos中用到的坐标系统.学过数学的人都 ...
卸载gitlab
一.停止gitlab sudo gitlab-ctl stop 二.卸载gitlab sudo rpm -e gitlab-ce三.查看gitlab进程杀掉第一个守护进程 kill -9 4473 ...
Dll注入：x86/X64 SetThreadContext 注入
在<Windows核心编程>第七章说到了线程优先级等知识,其中谈到了ThreadContext线程上下背景文. 其中介绍了GetThreadContext函数来查看线程内核对象的内部,并获 ...
JQuery笔录
1.jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 <p> 元素.<script type="text/javascript">$(d ...
[转]Cannot deserialize the current JSON array (e.g. [1,2,3]) into type
string content =[{"id": 3636, "is_default": true, "name": "Unit&q ...
忽略mysql库的同步
忽略mysql库的同步,请使用: stop slave sql_thread; change replication filter replicate_ignore_db=(mysql);
iOS 制作表格（数据源控制行，列数）
记得去年面试的过程中,有一个面试官问我怎么制作表格.由于之前也没有做过,当时有点懵逼,今天想起来了,就用tableview制作了一个,望不要有人像我一样掉坑了, 直接上代码: // // ViewCo ...
【转】iOS开发4：关闭键盘
在 iOS 程序中当想要在文本框中输入数据,轻触文本框会打开键盘.对于 iPad 程序,其键盘有一个按钮可以用来关闭键盘,但是 iPhone 程序中的键盘却没有这样的按钮,不过我们可以采取一些方法关闭 ...
php 单例模式笔记
<?php /** * 单例模式1. 它们必须拥有一个构造函数,并且必须被标记为private2. 它们拥有一个保存类的实例的静态成员变量3. 它们拥有一个访问这个实例的公共的静态方法单例类不能 ...

day 16 JS DOM 继续

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

随机推荐

热门专题