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 各个类 ...
随机推荐
- 417. Pacific Atlantic Water Flow
正常做的,用了645MS..感觉DFS的时候剪枝有问题.. 为了剪枝可能需要标记一个点的4种情况: 1:滨临大西洋,所有太平洋来的点可以通过: 2:濒临太平洋,所有大西洋来的点可以通过: 3:都不濒临 ...
- 定制Centos系统（基于6.x）
1.条件准备: 按照需求,最小化安装Centos原生系统 在安装后的系统中找到/root/install.log与/root/anaconda-ks.cfg文件 ...
- Linux开启相关端口及查看已开启端口
防火墙层面: /sbin/iptables -I INPUT -p tcp --dport 8011 -j ACCEPT #开启8011端口 /etc/rc.d/init.d/iptables ...
- UVa1151 Buy or Build
填坑(p.358) 以前天真的以为用prim把n-1条边求出来就可以 现在看来是我想多了 #include<cstdio> #include<cstring> #include ...
- nodejs端口被占用。
I had the same issue. I ran: $ ps aux | grep node to get the process id, then: $ sudo kill -9 follow ...
- GWT中实现跳转及不同entrypoint怎么互相访问
怎么跳转? 跳转这个概念这里指的是从一个web页面跳转到另一个web页面,如果我们使用gwt来开发web,很自然的我们会想到怎么从一个gwt做的页面跳转到另一个gwt做的页面. 但从网上的gwt例子来 ...
- 解决IE6,IE7不能隐藏绝对定位溢出的内容
令人蛋疼的IE,IE6/IE7下父元素有相对/绝对定位时,子元素在IE6和IE7下overflow:hidden;失效. 情况一:(在parent上增加position:relative) <s ...
- 在32位Windows 8或Windows 7上安装Windows Phone 8 SDK
这需要一点技巧的,其实WPSDK8是支持32位系统的,可因为微软脑残的限制,安装方法如下: 这里必需要有一个工具,OllyDbg 2.0,去官网下载即可. 启动OD,在菜单打开选项窗口,在Events ...
- JAVA获取随机数
在Java中我们能够使用java.util.Random类来产生一个随机数发生器.它有两种形式的构造函数,各自是Random()和Random(long seed).Random()使用当前时间即Sy ...
- Qt解析XML文件（QXmlStreamReader）
(2013-08-03 10:53:53) 转载▼ 如何使用QXmlStreamReader来解析格式良好的XML,Qt的文档中指出,它是一种更快.更方便的Qt自己的SAX解析器(QXml ...