css樣式與JavaScript
阿新 • • 發佈：2018-03-26
eat 改變 ret 全局 長度 如果 wid 小數點 alert 
css樣式
避免頁面大小不同導到樣式被改變
頁面最外層：像素的寬度 ===> 最外層設置絕對寬度
<body>
<div class="pg-header"></div>
<div style="width: 980px;">
頭部數據
</div>
<div class="pg-body">
<div style="width: 980px;">
中間內容
</div>
</div>
<div class="pg-footer">
<div style="width: 980px;">
底部菜單
</div>
</div>
</body>
默認img標簽有1px的邊框（去掉邊框的方法）
1 <style> 2 img{ 3 border: 0; 4 } 5 </style>
form標簽
1 <form action="http://baidu.com"method="GET" enctype="multipart/form-data"></form> 2 3 - action="http://baidu.com" # 後臺數據提交到什麽地方 4 - method="GET" # 請求方法5 - enctype="multipart/form-data" # 上傳文件到後臺，不設置上傳的文件無法到後臺
postition：可以使模塊分層
1 fixed: 固定在頁面的某個位置 2 - top 3 - buttom 4 - left 5 - right 6 7 <div style="width:70px; height:30px; 8 background-color: black; color: red; 9 position: fixed;10 bottom: 20px; 11 right: 20px; 12 ">返回頂部</div> 13 14 /* 菜單一直在頁面上方 */ 15 .pg-header{ 16 background-color: black; 17 position: fixed; 18 color: #DDDDDD; 19 top: 0; 20 left: 0; 21 right: 0; 22 } 23 24 relative + absolute: 組合使用，做一個相對定位，定位在父親框中 25 <div style=‘postition: relative;‘> 26 <div style=‘position: absolute; top:0; left:0;‘></div> 27 </div> 28 29 <div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto;"> 30 <div style="position: absolute; left: 0;bottom: 0;width: 50px;height: 50px; background-color: black"></div> 31 </div> 32 33 34 opcity： 透明度（0-1，1為完全看不見） 35 z-index: 層級順序，誰的值大誰在上面 36 37 <body> 38 <div style="z-index: 10; position: fixed; 39 top: 50%; 40 left: 50%; 41 background-color: #FFFFFF; 42 width: 500px; 43 height: 400px; 44 margin-left: -250px; 45 margin-top: -200px; 46 "></div> 47 48 <div style="z-index: 9; position: fixed; background-color: black; 49 top: 0; 50 bottom: 0; 51 right: 0; 52 left: 0; 53 opacity: 0.2; 54 "></div> 55 56 <div style="height: 5000px; background-color: green">文本內容。。。</div> 57 </body>
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 5 <style> 6 img{ 7 border: 0; 8 } 9 10 .pg-header{ 11 background-color: black; 12 position: fixed; 13 color: #DDDDDD; 14 top: 0; 15 left: 0; 16 right: 0; 17 } 18 </style> 19 20 </head> 21 <body> 22 23 <div class="pg-header">頭部</div> 24 25 <div style="width:70px; height:30px; 26 background-color: black; color: red; 27 position: fixed; 28 bottom: 20px; 29 right: 20px; 30 ">返回頂部</div> 31 32 <div style="height: 500px; background-color: #DDDDDD; margin-top: 30px">內容</div> 33 34 35 <div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto;"> 36 <div style="position: absolute; left: 0;bottom: 0;width: 50px;height: 50px; background-color: black"></div> 37 </div> 38 <div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto"> 39 <div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px; background-color: black;"></div> 40 </div> 41 <div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto"> 42 <div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px; background-color: black;"></div> 43 </div> 44 45 </body>position實例
overflow： 防止內容過大，撐開外層定義的大小
- auto 是出現下拉框 - hidden 出現隱藏超過的內容 <div style="width: 200px;height: 150px; overflow: auto"> <img src="vivo.jpg"> </div>
hover: 當鼠標點到當前位置時樣式才應用
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 5 <style> 6 .pg-header{ 7 position: fixed; 8 right: 0; 9 left: 0; 10 top: 0; 11 height: 48px; 12 background-color: #2459a2; 13 line-height: 48px; 14 } 15 16 .pg-body{ 17 margin-top: 50px; 18 } 19 20 .w{ 21 width: 980px; 22 margin: 0 auto; 23 } 24 25 .pg-header .memu{ 26 display: inline-block; 27 padding: 0 10px; 28 color: white; 29 } 30 /*當鼠標移動到當前標簽上時,以下css屬性才生效*/ 31 .pg-header .memu:hover{ 32 background-color: blue; 33 } 34 35 </style> 36 </head> 37 <body> 38 39 <div class="pg-header"> 40 <div class="w"> 41 <a class="logo">LOGO</a> 42 <a class="memu">笑話</a> 43 <a class="memu">技術文檔</a> 44 <a class="memu">視頻</a> 45 <a class="memu">小說</a> 46 </div> 47 </div> 48 49 <div class="pg-body"> 50 <div class="w">ffff</div> 51 </div> 52 </body>hover實例
backgroup參數
background-image: url(‘image/4.gif; height: 40px‘) # 默認div多大，圖片重復多大
background-repeat: repeat-y; (repeat-y: y軸重復，no-repeat不重復，repeat-x：x軸重復)
background-postition-x: x軸方向移動
background-position-y: y軸方向移動
background-position: 10px 10px (x軸方向移動10px,y軸方向移動10px)
background: 後面接不參數也可以實現同樣效果
<div style=‘background-image: url("vivo.jpg");height: 600px;
background-repeat: repeat-y;background-position-x: 200px;
background-position-y: 80px;‘></div>
登錄框後面嵌圖片：
<div style="height: 35px; width: 400px; position: relative">
<input type="text" style="height: 35px; width: 360px; padding-right: 40px;" />
<span style="position: absolute;top: 5px;right: 6px; background-image: url(logo.jpg); width: 30px; height: 30px; display: inline-block;"></span>
</div>
JavaScript：獨立的語言，瀏覽器具有js解釋器功能
JavaScript代碼存在形式： - head中 <script type="text/javascript"> // type="text/javascript"默認值，可以不寫 alert(123); //javascript代碼 </script> - 文件 <script src="js文件路徑"></script // js可以是本地文件，也可以是遠程文件 PS: JS代碼需要放置在<body>標簽內部的最下方，即使js耗時嚴重，也不影響用戶看到頁面效果，只是js實現特效慢而已 註釋 當行註釋 // 多行註釋 /* */ 變量： python: name = ‘alex‘ JavaScript: name = ‘alex‘ # 默認全局變量 var name = ‘eric‘ # 局部變量 寫Js代碼： - html文件中編寫 - 臨時， 瀏覽器的終端 console
數據類型
- 數字
JavaScript中不區分整數值和浮點數值，JavaScript中所有數字均用浮點數值表示。
轉換：
parseInt(..) 將某值轉換成數字，不成功則NaN
parseFloat(..) 將某值轉換成浮點數，不成功則NaN
特殊值：
NaN，非數字。可使用 isNaN(num) 來判斷。
Infinity，無窮大。可使用 isFinite(num) 來判斷。
1 常量 2 Math.E # 常量e，自然對數的底數。 3 Math.LN10 # 10的自然對數。 4 Math.LN2 # 2的自然對數。 5 Math.LOG10E # 以10為底的e的對數。 6 Math.LOG2E # 以2為底的e的對數。 7 Math.PI # 常量figs/U03C0.gif。 8 Math.SQRT1_2 # 2的平方根除以1。 9 Math.SQRT2 # 2的平方根。 10 11 靜態函數 12 Math.abs( ) # 計算絕對值。 13 Math.acos( ) # 計算反余弦值。 14 Math.asin( ) # 計算反正弦值。 15 Math.atan( ) # 計算反正切值。 16 Math.atan2( ) # 計算從X軸到一個點的角度。 17 Math.ceil( ) # 小數點數值全部往上升一個。 18 Math.cos( ) # 計算余弦值。 19 Math.exp( ) # 計算e的指數。 20 Math.floor( ) # 舍棄小數點後的數。 21 Math.log( ) # 計算自然對數。 22 Math.max( ) # 返回兩個數中較大的一個。 23 Math.min( ) # 返回兩個數中較小的一個。 24 Math.pow( ) # 計算xy。 25 Math.random( ) # 計算一個隨機數。 26 Math.round( ) # 舍入為最接近的整數。 27 Math.sin( ) # 計算正弦值。 28 Math.sqrt( ) # 計算平方根。 29 Math.tan( ) # 計算正切值。View Code
- 字符串
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) 根據索引獲取子序列,包含from，不包含to
obj.slice(start, end) 切片
obj.toLowerCase() 大寫
obj.toUpperCase() 小寫
obj.split(delimiter, limit) 分割
obj.search(regexp) 從頭開始匹配，返回匹配成功的第一個位置(g無效)
obj.match(regexp) 全局搜索，如果正則中有g表示找到全部，否則只找到第一個。
obj.replace(regexp, replacement) 替換，正則中有g則替換所有，否則只替換第一個匹配項，
$數字：匹配的第n個組內容；
$&：當前匹配的內容；
$`：位於匹配子串左側的文本；
$‘：位於匹配子串右側的文本
$$：直接量$符號
- 布爾值
布爾類型僅包含真假，與Python不同的是其首字母小寫。
== 比較值相等
!= 不等於
=== 比較值和類型相等
!=== 不等於
|| 或
&& 且
- 數組（列表）
obj.length 數組的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部獲取一個元素，獲取的元素從列表中刪除
obj.unshift(ele) 頭部插入元素
obj.shift() 頭部移除元素
obj.splice(start, deleteCount, value, ...) 插入、刪除或替換數組的元素
- start 索引的位置
- deleteCount 要刪除的元素個數
- value 要插入或者替換的元素值
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替換元素
obj.splice(n,1) 指定位置刪除元素
obj.slice( ) 切片
obj.reverse( ) 反轉
obj.join(sep) 將數組元素用"sep字符"連接起來以構建一個字符串
obj.concat(val,..) 連接數組合並成一個列表
obj.sort( ) 對數組元素進行排序
- 字典
a = {"k1":"u1","k2":"u2"}
str = JSON.stringify(a) 序列化
JSON.parse(str) 反序列化
PS： 數字、布爾值、null、undefined、字符串是不可變
null：JavaScript語言的關鍵字，它表示一個特殊值，常用來描述“空值”
undefined：是一個特殊值，表示變量未定義。
條件語句：
if(條件){
}else if(條件){
}else{
}
for 循環：
1. 循環時，循環的是元素索引(支持列表、字典)
a = [11,22,33,44]
for(var item in a){
console.log(item)
}
2. 不支持字典
a = [11,22,33,44]
for(var i=0;i<a.length;i++){
console.log(item)
}
1 <div id="il">歡迎老男孩蒞臨指導</div> 2 <script> 3 function func() { 4 //根據ID獲取指定標簽的內容,定於局部變量接受 5 var tag = document.getElementById(‘il‘); 6 //獲取標簽內部數據 7 var content = tag.innerText; 8 9 var f = content.charAt(0); 10 var l = content.substring(1,content.length); 11 12 var new_content = l + f; 13 14 tag.innerText = new_content; 15 } 16 setInterval(‘func()‘, 500); 17 </script>跑馬燈字符轉動
定時器： setInterval(‘執行的代碼‘, 間隔時間) 輸出內容到控制臺： console.log(123)
基本函數
JavaScript中函數基本上可以分為一下三類：
// 普通函數
function func(arg){
return true;
}
// 匿名函數
var func = function(arg){
return "tony";
}
// 自執行函數
(function(arg){
console.log(arg);
})(‘123‘)
css樣式與JavaScript