js+dom开发第十六天
一、css常用标签及页面布局
1、常用标签
position(定位) z-index（定位多层顺序） background（背景）
text-align（针对字符自动左右居中） margin（外边距） padding（内边距）
font-size（字体大小） over-flow（修剪hidden，srcoll，auto）
:hover（设置对象在鼠标悬停时的样式） opacity（页面透明度）
float（让标签浮动起来） clear：both（让浮动标签沉下来） line-height(上下居中)
border（边框） color（字体颜色） display（设置或检索对象是否及如何显示）
2、两种页面布局
（1）主站
<div class='pg-header'>
<div style='width:980px;margin:0 auto;'>
内容自动居中
</div> </div>
<div class='pg-content'></div>
<div class='pg-footer'></div>
（2）后台管理布局
position：
fiexd --永远固定在窗口的某个位置
relative --单独无意义
absolute --第一次定位，可以在指定的位置；滚轮滚动时，就变了
a、左侧菜单跟随滚动条
b、左侧及以上不动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<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: #204982;
text-align: center;
}
.pg-header .icons{
padding: 0 20px;
}
.pg-header .icons:hover{
background-color: #204982;
}
.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: 0;
background-color: white;
color: black;
width: 160px;
display: none;
font-size: 14px;
line-height: 30px; }
.pg-header .user .b a{
padding: 5px;
color: black;
text-decoration: none;
}
.pg-header .user .b a:hover{
background-color: #dddddd;
}
.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 href="#">我的资料</a>
<a href="#">注销</a>
</div>
</div> <div class="icons right">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span>5 </span>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i>
</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>
二、js回顾及补充
1、for循环的两种写法
for(var item in [11,22,33]){
console.log(item);
continue;
}
item
var arra = [11,22,32,3]
for(var i=0;i<arra.lenght;i=i+1){
break;
} while(条件){ }
for i
2、条件语句的写法
if(){
}else if(){
}else{
}
name='3';
switch(name){
case '1':
age = 123;
break;
case '2':
age = 456;
break;
default :
age = 777;
}
3、函数
（1）普通函数
function func(){
}
（2）匿名函数
function func(arg){
return arg+1
}
setInterval("func()", 5000);
setInterval(function(){
console.log(123);
},5000)
（3）自执行函数（创建函数并且自动执行）
function func(arg){
console.log(arg);
}
// func(1)
(function(arg){
console.log(arg);
})(1)
4、序列化
JSON.stringify() 将对象转换为字符串
JSON.parse() 将字符串转换为对象类型
5、转义
客户端（cookie） =》 服务器
将数据经过转义后，保存在cookie
6、eval
python的eval：
val = eval（表达式）
val = exec（执行代码）
JavaScript：
eval包含上面的两种功能
7、时间
Date类
var d = new Date（）
d.getXXX 获取时间
d.setXXX 设置时间
8、作用域******
（1）函数作为作用域
a、其他语言：以代码块作为作用域
public void Func(){
if(1==1){
string name = 'Java';
}
console.writeline(name);
}
Func()
// 报错 这里以{}为代码块，name在另一个{}，里外面的console.writeline(name)调用不了
b、Python：以函数作为作用域
情况一：
def func():
if 1==1:
name = 'alex'
print(name) #这个name是在func函数里的
func()
// 成功
情况二：
def func():
if 1==1:
name = 'alex'
func()
print(name) #这里的name是拿不到函数func里的name的
// 报错
c、JavaScript：默认是以函数作为作用域的
function func(){
if(1==1){
var name = 'alex';
}
console.log(name);
}
func()
(2)函数的作用域在函数未被调用之前已经创建
function func(){
if(1==1){
var name = 'alex';
}
console.log(name);
}
(3)函数的作用域存在作用域链（函数嵌套关系），并且也是在未被调用前创建
示例一：
xo = "alex";
function func(){
// var xo = 'eric';
function inner(){
// var xo = 'tony';
console.log(xo);
}
inner()
}
func()
示例二：
xo = "alex";
function func(){
var xo = 'eric';
function inner(){
console.log(xo);
}
return inner;
}
var ret = func()
ret()
示例三：
xo = "alex";
function func(){
var xo = 'eric';
function inner(){
console.log(xo);
}
var xo = 'tony';
return inner;
}
var ret = func()
ret()
(4)函数内局部变量 声明提前
function func(){
console.log(xxoo);
}
func();
// 程序直接报错
function func(){
console.log(xxoo);
var xxoo = 'alex';
}
解释过程中：var xxoo;
func();
// undefined
9、JavaScript面向对象
function foo(){
var xo = 'alex';
}
foo()
function Foo(n){
this.name = n;
this.sayName = function(){
console.log(this.name);
}
}
var obj1 = new Foo('we');
obj1.name
obj1.sayName()
var obj2 = new Foo('wee');
obj2.name
obj2.sayName()
==============》
a. this代指对象(python self)
b. 创建对象时, new 函数()
原型：
function Foo(n){
this.name = n;
}
# Foo的原型
Foo.prototype = {
'sayName': function(){
console.log(this.name)
}
}
obj1 = new Foo('we');
obj1.sayName()
obj2 = new Foo('wee');
三、DOM
1、查找
（1）直接查找
var obj = document.getElementById('i1')
（2）间接查找
文件内容操作：
A：innerText 获取的仅文本（忽略标签）
如下图：
B：innerHTML 全内容（内部所用的东西）
如下图：
C：value
input标签 value获取当前标签中的值
select标签 获取选中的value值（selectIndex）
textarea标签 value获取当前标签中的值
2、操作：
（1）样式操作：
className
classList
classList.add classList.remove
(2)属性操作:
attributes getAttibute removeAttribute
js+dom开发第十六天的更多相关文章
- python自动化开发-[第十六天]-bootstrap和django
今日概要: 1.bootstrap使用 2.栅格系统 3.orm简介 4.路由系统 5.mvc和mtv模式 6.django框架 1.bootstrap的引用方式 1.Bootstrap 专门构建了免 ...
- arcgis api for js入门开发系列十叠加SHP图层
上一篇实现了demo的热力图,本篇新增叠加SHP图层,截图如下: 叠加SHP图层效果实现的思路如下:利用封装的js文件,直接读取shp图层,然后转换geojson,最后通过arcgis api来解析转 ...
- arcgis api for js入门开发系列十六迁徙流动图
最近公司有个arcgis api for js的项目,需要用到百度echarts迁徙图效果,而百度那个效果实现是结合百度地图的,怎么才能跟arcgis api结合呢,网上搜索,终于在github找到了 ...
- arcgis api for js入门开发系列十五台风轨迹
上一篇实现了demo的地图最近设施点路径分析,本篇新增台风轨迹,截图如下: 下面简单介绍相关知识点: 警戒线 警戒线坐标集合: var lineArr24=[[127,34],[127,21],[11 ...
- arcgis api for js入门开发系列十九图层在线编辑
本篇主要讲述的是利用arcgis api实现图层在线编辑功能模块,效果图如下: 实现思路: 1.arcgis server发布的FeatureServer服务提供的图层在线编辑能力: 2.实现的在线编 ...
- arcgis api 3.x for js 入门开发系列十八风向流动图（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十六迁徙流动图
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十五台风轨迹
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十四最近设施点路径分析（附源码下载）
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- 【转】VS2013编译libjpeg库
原文地址:http://blog.csdn.net/weixinhum/article/details/42718959 现在,很多图像处理工具和开源库都给出了图像解码的函数接口,然而有时这些接口并不 ...
- flexpaper 背景色变化
1.mxml文件头部:添加 backgroundAlpha="0" <s:Application xmlns:fx="http://ns.adobe.com/mxm ...
- mysql inner join,full outer join,left join,right jion
https://sites.google.com/site/349624yu/courses/mysql/mysqldbgjzcx inner join,full outer join,left jo ...
- Flash Stage3D 在2D UI 界面上显示3D模型问题完美解决
一直以来很多Stage3D开发者都在为3D模型在2DUI上显示的问题头疼.Stage3D一直是在 Stage2D下面.为了做到3D模型在2DUI上显示通常大家有几种实现方式,下面来说说这几种实现方式吧 ...
- C# 该行已经属于还有一个表 的解决方法
产生错误的代码: DataTable dtContract_src = Oper.GetDataTable("select * from T_Contract where ProjectID ...
- wdlinux 编译pdo_mysql
由于项目需要用到pdo 链接数据库 wdlinux在centos6.4下 没有pdomysql模块 ,所以重新编译 有的系统无法使用pdo_mysql 1 重新编译mysql http://www.w ...
- MS SQL 性能优化
http://blog.csdn.net/dba_huangzj/article/details/50455543
- hdu2660 Accepted Necklace (DFS)
Problem Description I have N precious stones, and plan to use K of them to make a necklace for my mo ...
- Eclipse打开当前所属文件所在windows中的文件夹
1.Eclipse设置 依次展开如下菜单: Run ---- External Tools ---- External Tools Configurations 在 program 下面新 ...
- JAVA正则忽略大小写
java正则表达式: (?i)abc 表示abc都忽略大小写 a(?i)bc 表示bc忽略大小写 a((?i)b)c 表示只有b忽略大小写 也可以用Pattern.compile(re ...