css JavaScript 筆記
阿新 • • 發佈：2018-11-21
1、css重用
<style>
如果整個頁面的寬度 > 900px時：
{
.c{
共有
}
.c1{
獨有
}
}
.c2{
獨有
}
</style>
<div class='c c1'></div>
<div class='c c2'></div>
2、自適應 和 改變大小變形
左右滾動條的出現
寬度，百分比
頁面最外層：畫素的寬度 => 最外層設定絕對寬度
自適應：media
3、預設img標籤，有一個1px的邊框
img{
border: 0;
}
4、作業中的數量輸入框
上節內容回顧
1、塊級和行內
2、form標籤
<form action='http://sssss' methed='GET' enctype='multi'>
<div>asdfasdf</div>
<input type='text' name='q' />
<input type='text' name='b' />
# 上傳檔案
<input type='file' name='f' />
<input type='submit' />
</form>
GET: http://sssss?q=使用者輸入的值
http://sssss?q=使用者輸入的值&b=使用者輸入的內容
POST：
請求頭
請求內容
3、display: block;inline;inline-block
4、float：
<div>
<div style='float:left;'>f</div>
<div style='clear:both;'></div>
</div>
5、margin: 0 auto;
6、padding, ---> 自身發生變化
CSS補充
position:
a. fiexd => 固定在頁面的某個位置
b. relative + absolute
<div style='position:relative;'>
<div style='position:absolute;top:0;left:0;'></div>
</div>
opcity: 0.5 透明度
z-index: 層級順序
overflow: hidden,auto
hover
background-image:url('image/4.gif'); # 預設，div大，圖片重複訪
background-repeat: repeat-y;
background-position-x:
background-position-y:
示例：輸入框
JavaScript
獨立的語言，瀏覽器具有js直譯器
JavaScript程式碼存在形式：
- Head中
<script>
//javascript程式碼
alert(123);
</script>
<script type="text/javascript">
//javascript程式碼
alert(123);
</script>
- 檔案
<script src='js檔案路徑'> </script>
PS: JS程式碼需要放置在 <body>標籤內部的最下方
註釋
當行註釋 //
多行註釋 /* */
變數：
python：
name = 'alex'
JavaScript:
name = 'alex' # 全域性變數
var name = 'eric' # 區域性變數
寫Js程式碼：
- html檔案中編寫
- 臨時，瀏覽器的終端 console
基本資料型別
數字
a = 18;
字串
a = "alex"
a.chartAt(索引位置)
a.substring(起始位置，結束位置)
a.lenght 獲取當前字串長度
...
列表(陣列)
a = [11,22,33]
字典
a = {'k1':'v1','k2':'v2'}
布林型別
小寫
for迴圈
1. 迴圈時，迴圈的元素是索引
a = [11,22,33,44]
for(var item in a){
console.log(item);
}
a = {'k1':'v1','k2':'v2'}
for(var item in a){
console.log(item);
}
2.
for(var i=0;i<10;i=i+1){
}
a = [11,22,33,44]
for(var i=0;i<a.length;i=i+1){
}
不支援字典的迴圈
條件語句
if(條件){
}else if(條件){
}else if(條件){
}else{
}
== 值相等
=== 值和型別都相等
&& and
|| or
函式：
function 函式名(a,b,c){
}
函式名(1,2,3)
Dom
1、找到標籤
獲取單個元素 document.getElementById('i1')
獲取多個元素（列表）document.getElementsByTagName('div')
獲取多個元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根據ID獲取一個標籤
document.getElementsByName 根據name屬性獲取標籤集合
document.getElementsByClassName 根據class屬性獲取標籤集合
document.getElementsByTagName 根據標籤名獲取標籤集合
b. 間接
tag = document.getElementById('i1')
parentElement // 父節點標籤元素
children // 所有子標籤
firstElementChild // 第一個子標籤元素
lastElementChild // 最後一個子標籤元素
nextElementtSibling // 下一個兄弟標籤元素
previousElementSibling // 上一個兄弟標籤元素
2、操作標籤
a. innerText
獲取標籤中的文字內容
標籤.innerText
對標籤內部文字進行重新複製
標籤.innerText = ""
b. className
tag.className =》 直接整體做操作
tag.classList.add('樣式名') 新增指定樣式
tag.classList.remove('樣式名') 刪除指定樣式
PS：
<div onclick='func();'>點我</div>
<script>
function func(){
}
</script>
c. checkbox
獲取值
checkbox物件.checked
設定值
checkbox物件.checked = true