當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js+dom开发第十六天

發布時間：2025/3/15 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 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">5 </div><div class="icons right"></div></div><div class="pg-content"><div class="menu left">a</div><div class="content left"><div style="background-color: purple">asdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdfasdf</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 i

2、條件語句的寫法

if(){}else if(){}else{} View Code name='3';switch(name){case '1':age = 123;break;case '2':age = 456;break;default :age = 777;} View Code

3、函數

（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 Code

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);} 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 Code

9、JavaScript面向對象

原型：

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

编程问答

js+dom开发第十六天

一、css常用標簽及頁面布局

1、常用標簽

2、兩種頁面布局

（1）主站

（2）后臺管理布局

二、js回顧及補充

1、for循環的兩種寫法

2、條件語句的寫法

3、函數

（1）普通函數

（2）匿名函數

（3）自執行函數（創建函數并且自動執行）

4、序列化

5、轉義

6、eval

7、時間

8、作用域******

（1）函數作為作用域

?? a、其他語言：以代碼塊作為作用域

b、Python：以函數作為作用域

c、JavaScript：默認是以函數作為作用域的

(2)函數的作用域在函數未被調用之前已經創建

(3)函數的作用域存在作用域鏈（函數嵌套關系），并且也是在未被調用前創建

(4)函數內局部變量 聲明提前

9、JavaScript面向對象

三、DOM

1、查找

（1）直接查找

（2）間接查找

2、操作：

（1）樣式操作：

(2)屬性操作:

總結

　　（1）函數作為作用域

??　　a、其他語言：以代碼塊作為作用域　　　　　　　　

　　　b、Python：以函數作為作用域

　　　　　c、JavaScript：默認是以函數作為作用域的　　　　　　　

　　(2)函數的作用域在函數未被調用之前已經創建

　　(3)函數的作用域存在作用域鏈（函數嵌套關系），并且也是在未被調用前創建

　　(4)函數內局部變量聲明提前

　　（1）直接查找

　　（2）間接查找

　（1）樣式操作：

　(2)屬性操作: