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> View Code（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> View Code?
二、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 i2、條件語句的寫法
if(){}else if(){}else{} View Code name='3';switch(name){case '1':age = 123;break;case '2':age = 456;break;default :age = 777;} View Code3、函數
（1）普通函數
function func(){} View Code（2）匿名函數
function func(arg){return arg+1}setInterval("func()", 5000);setInterval(function(){console.log(123);},5000) View Code（3）自執行函數（創建函數并且自動執行）
function func(arg){console.log(arg);}// func(1) (function(arg){console.log(arg);})(1) View Code4、序列化
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);} View Code(3)函數的作用域存在作用域鏈（函數嵌套關系），并且也是在未被調用前創建
?示例一：
xo = "alex";function func(){// var xo = 'eric';function inner(){// var xo = 'tony'; console.log(xo);}inner()}func() View Code示例二：
xo = "alex";function func(){var xo = 'eric';function inner(){console.log(xo);}return inner;}var ret = func()ret() View Code示例三：
xo = "alex";function func(){var xo = 'eric';function inner(){console.log(xo);}var xo = 'tony';return inner;}var ret = func()ret() View Code(4)函數內局部變量 聲明提前
function func(){console.log(xxoo);}func();// 程序直接報錯function func(){console.log(xxoo);var xxoo = 'alex';}解釋過程中：var xxoo;func();// undefined View Code9、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.nameobj1.sayName()var obj2 = new Foo('wee');obj2.nameobj2.sayName()==============》a. this代指對象(python self)b. 創建對象時, new 函數() View Code原型：
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'); View Code?
三、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
?
轉載于:https://www.cnblogs.com/willpower-chen/p/6098419.html
總結
以上是生活随笔為你收集整理的js+dom开发第十六天的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Android——4.2.2 文件系统文
- 下一篇： Magento事件机制 - Magent