Python之路day13 web 前端（JavaScript，DOM操做）

時間 2019-11-30

標籤 python 之路 day13 day web 前端 javascript dom 欄目 Python 简体版

原文原文鏈接

參考連接：http://www.cnblogs.com/wupeiqi/articles/5433893.htmlhtml

day13web

1. CSS示例
2. JavaScript
3. DOM操做

上節內容回顧：
1. HTML標籤
html/head/body/
input
div,span
a
p
br
span
table > tr行 th表頭列 td表頭列
h
form> action method enctype=;;;
select option
input系列：
text
password
email
button
submit
radio name屬性相同
checkbox
reset
textarea
2.CSS數組

a. 存在形式
- <div style='k1=v1;k2=v2;'>
- <style></style>
- <link ...>
b. 選擇器
<style>
.c1{

}
#i1{

}

div{

}

.c1,#i2{

}

.c1 .c2{

}

.c1 > .c2{

}

.c1:hover{

}
input[type='text']{

}
</style>

c. 樣式
**** 田海龍 ****
color:
background-color:
font-size:
background-img:
background-position:
position:
fixed - 永遠固定在瀏覽器窗口的某個位置
absolute - 固定在瀏覽器窗口的某個位置
relative - 單獨無用

relative

absolute

padding: 內邊距
margin: 外邊距
top ...:
border: 1px shixu yanse
height: 100%
width:
display:
none 隱藏
block 塊
inline 內聯
inlie-block 內聯+塊級
float:
left
right
<div style='background-color:red;'>
<div style='float:left;'>adf</div>
<div style='float:right;'>adf</div>
<div style='clear:both'></div>
</div>

text-align:
line-height:
cursor

z-index:
opacity:

今日內容瀏覽器

1、後臺管理示例

2、JavaScript
1. 存在形式

2. 位置
<body>

...;.
</body>
3.
a = 123;
var a = 123;
4. // /* */

5. 聲明函數
// 普通函數
function func(arg){
alert(123);
}
func("alex")

// 普通函數，自執行函數
(function(arg){
alert(123);
})("alex")

(function(arg){})("alex")

// 匿名函數,當作參數傳遞
function(){
alert(123);
}
// 匿名函數的應用
function func(arg){
arg()
}
func(function(){alert(123)})

6. 基本數據類型
undefined // 爲定義 var age;
function func(a1,a2){
alert(a1);
alert(a2);
}
func(1)
null // 空值

數字
var age = 123.123;
var v = typeof age; # number
alert(v);

isNaN
parseInt()
parseFloat(num)
字符串
obj.length 長度

obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n個字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根據索引獲取子序列
obj.slice(start, end) 切片
obj.toLowerCase() 大寫
obj.toUpperCase() 小寫
obj.split(delimiter, limit) 分割

數組

obj.length 數組的大小

obj.push(ele) 尾部追加元素
obj.pop() 尾部獲取一個元素
obj.unshift(ele) 頭部插入元素
obj.shift() 頭部移除元素
obj.splice(start, deleteCount, value, ...) 插入、刪除或替換數組的元素
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替換元素
obj.splice(n,1) 指定位置刪除元素
obj.slice( ) 切片
obj.reverse( ) 反轉
obj.join(sep) 將數組元素鏈接起來以構建一個字符串
obj.concat(val,..) 鏈接數組
obj.sort( ) 對數組元素進行排序

字典
info = {name: 'alex',age: 18};

7. 序列化
JSON.stringify
JSON.parse

8. 轉義

9. eval

10. 時間

var da = new Date();

11. 條件&循環&異常處理

12. 面向對象

// 面向對象
function Foo(name,age){
this.Name = name;
this.Age = age;
}

obj = new Foo('alex',18);
obj.Name

function Foo(name,age){
this.Name = name;
this.Age = age;
}

// 利用原型實現方法重用
Foo.prototype.show = function(){
alert(this.Name);
}

obj1 = new Foo('alex',18);
obj1.show()

obj2 = new Foo('alex',18);
obj2.show()

3、利用HTML文檔+JavaScript+DOM實現操做HTML數據

1. 查找

document.getElementById 根據ID獲取一個標籤
document.getElementsByName 根據name屬性獲取標籤集合
document.getElementsByClassName 根據class屬性獲取標籤集合
document.getElementsByTagName 根據標籤名獲取標籤集合
2. 間接查找

parentNode // 父節點
childNodes // 全部子節點
firstChild // 第一個子節點
lastChild // 最後一個子節點
nextSibling // 下一個兄弟節點
previousSibling // 上一個兄弟節點

parentElement // 父節點標籤元素
children // 全部子標籤
firstElementChild // 第一個子標籤元素
lastElementChild // 最後一個子標籤元素
nextElementtSibling // 下一個兄弟標籤元素
previousElementSibling // 上一個兄弟標籤元素

3. HTML標籤樣式操做

var tag = document.getElementById('i1');
tag.classList.add('c1') //給標籤添加樣式
tag.classList.remove('c1') //給標籤移除樣式

<div class='c1 c2'></div>
tag.className "c1 c2"
tag.classList ['c1','c2']

4. 文本操做

innerText 只獲取文本
innerHTML 獲取文本以及標籤

innerText = "文本"
innerHTML = "HTML格式解析"

input:
document.getElementById('username').value
document.getElementById('username').value = "asdf"

PS:
<input type="text" id="key" value="請輸入關鍵字" onfocus="keyFocus();" onblur="keyBlur();" />

onfocus: 獲取焦點
onblur：失去焦點

5. 屬性操做

<div id='i1'></div>

<input id='ck' type="checkbox" />

自定義屬性
attributes // 獲取全部標籤屬性
setAttribute(key,value) // 設置標籤屬性
getAttribute(key) // 獲取指定標籤屬性

內置屬性：
obj.id

checkbox
- obj.checked true或false

6. 建立標籤
對象方式 ***

7. js提交表單

document.getElementById('f1').submit();
8. 經常使用操做

console.log(..)
alert(..)
confirm(...)
var v = confirm('是否要刪除？');
console.log(v);

location.href 獲取當前URL
location.href = "http://www.oldboyedu.com" 重定向

location.reload() 刷新

setInterval
clearInterval

setTimeout
clearTimeout

var obj1= setInterval(function () {
console.log('1');
clearInterval(obj1);
},1000);
var obj2= setInterval(function () {
console.log('2');
clearInterval(obj2);
},1000)

9. 事件函數

1. 綁定事件
<div id='i1' onkeydown='func(this,event,123);'> 點我 </div>
function func(a,b,c){
// a -> 當前被點擊的標籤對象 document.getElementById('i1')
// b -> 當前事件相關的信息
// c = 123
}

2. 綁定事件 ***************
<div id='i1'> 點我 </div>

<script>
document.getElementById('i1).onclick = function(event){
// event -> 當前事件相關的信息
// this -> 當前被點擊的標籤對象
}
document.getElementById('i1).onclick = function(event){
// event -> 當前事件相關的信息
// this -> 當前被點擊的標籤對象
}
</script>
一個事件只能被綁定一次

3. 綁定事件

document.getElementById('i1').addEventListener('click',function(){
console.log(111);
},true)
document.getElementById('i1').addEventListener('click',function(){
console.log(222);
},true)

PS: addEventListener第三個參數
默認：
事件冒泡
捕獲式

欠：
1. 點贊 +1 動畫

2. JavaScript高級知識 - 詞法分析

做業：
後臺管理+全部示例
1. 後臺管理佈局
2. 左側菜單
3. 莫泰對話框
4. 表格全選反選取消
5. 添加標籤
6. 歡迎今天李磊上課
7. 5s以後刪除內容移除
8. 時間流逝
9. 搜索框
<form action='https://www.sogou.com/web'>
<input type='text' name='query' />
<div>提交</div>
</form>

參考博客：
http://www.cnblogs.com/wupeiqi/articles/5643298.html
http://www.cnblogs.com/wupeiqi/articles/5602773.html
佈局