前端重要知識點總結
目錄
一、引入js檔案和css檔案：在<head>裡新增以下語句，js程式碼和css程式碼寫在js檔案裡、
css檔案裡，js檔案和css檔案不用在包含<style>和<script>
<script type="text/javascript" src="js檔案路徑"></script> <link rel="stylesheet" href="css檔案路徑" />
二、設定UTF-8編碼
<!--設定UTF編碼-->
<meta charset="UTF-8">三、常見的css屬性及其功能
width/height：設定元素寬度，高度
color：字型顏色
text-align:字型位置，居中為center
font-size：字型大小
font-family：字型種類，可為“華文楷體”等等
margin-top、bottom、left、right：設定離外包含元素距離
padding-top、bottom、left、right：設定離內包含元素距離，可設定內部字型形狀等
background-color：設定背景顏色
position：可設定為relative或absolute，緊接著在下面設定top、bottom、left、right移動元素
text-decoration: none; 去除下劃線
border-radius:100%; overflow:hidden; 設定圓角圖片
四、常見CSS功能和JS功能
CSS功能：
（1）圖片懸停放大效果
#p3:hover{
transform: scale(1.18); /*設定圖片懸停放大倍數*/
}
#p3{
margin-left: 10%;
transition: all 0.6s; /*設定圖片懸停放大時間*/
}
（2）實現選單項的懸停下拉
.dropdown:hover .dropdown-menu { /*實現懸停下拉效果，hover為懸停後css樣式*/
display: block; /*block為顯示，none不顯示*/
background: #90EE90;
}
（3）點選按鈕回到頂部，設定錨點
<!--頭部,同時定義錨點id為header-->
<div id="header" class="container-fluid bg-primary ">
…..
</div >
#goTop{ /*回到頂部css*/
position: fixed; /*fix格式：固定在瀏覽器視窗上*/
bottom: 100px;
left: 96%;
}
（4）小說頁裡的分頁效果，懸停顯示手指，同時字型變紅
.page a,span{
text-decoration: none;
border:1px solid #f9d52b;
padding: 5px 7px;
color: #767675;
cursor: pointer; /*滑鼠放在元素上變為手指*/
}
.page a:hover,.page span:hover{ /*滑鼠放在元素上的效果*/
color: red;
}
（5）背景影象問題，鋪滿整個螢幕
body{
margin: 0 auto;
background-repeat:no-repeat ; /*背景影象鋪滿螢幕*/
background-size:100% 100%;
background-attachment: fixed;
}
（6）span標籤無法設定長寬效果
#already span{
display: inline-block; /*span標籤必須設定display:inline-block才能設定長度和寬度*/
width: 8%;
height: 5%;
border-top: 1px solid ;
border-left: 1px solid ;
border-right: 1px solid;
text-align: center;
font-size: 16px;
padding-top: 12px;
margin-top: 10px;
background-color: gainsboro;
}
JS功能：
（1）隨機改變網頁背景：點選按鈕觸發事件，獲取隨機數來改變網頁背景顏色的js程式碼
//獲取n位隨機數
var char=["#DC143C","#D8BFD8","#6A5ACD","#4169E1","#1E90FF","#40E0D0","#90EE90","#FFDEAD",
"#FF0000","#A9A9A9","black"];
function generateMixed() {
var res = "";
var id = Math.floor(Math.random() * 10);
res += char[id];
return res;
}
function changeColor(){
var background=document.getElementById("main");
//獲取n位隨機數,隨機來源chars
var color = generateMixed();
background.style.backgroundColor=color;
}
（2）時鐘顯示器：在網頁上顯示時間，通過jq操作css屬性來顯示不同的圖片實現時鐘效果
function add(i) { //設定函式，如果獲取到的時間<10,就在它前面加上字元“0”，比如獲取到的小時為5，那麼輸出就是“05”
if(i<10)
return '0'+i;
else
return ''+i;
}
window.onload=function () {
setInterval(function(){
var time = new Date();
var hour = time.getHours(), //獲取當前小時數字
min = time.getMinutes(), //獲取當前分鐘數字
sec = time.getSeconds(); //獲取當前秒數數字
hour=add(hour); //應用轉化函式
min=add(min); //應用轉化函式
sec=add(sec); //應用轉化函式
var Img=document.getElementsByClassName('clockI') //獲取圖片，此時獲取到是陣列
var array=hour+min+sec; //將當前時間連線在一起
for(var i=0;i<Img.length;i++){
Img[i].src='images/num'+array.charAt(i)+'.png'; //charAt(i)獲取某字串的第i個字元
}
},1000) //設定定時器，每隔一秒重新整理頁面
}
（3）刪除元素：點選刪除按鈕隱藏元素
window.onload=function(){
$(document).ready(function(){
$("#btn1").click(function(){
$("#btn1").parent().hide();
})
$("#btn2").click(function(){
$("#btn2").parent().hide();
})
$("#btn3").click(function(){
$("#btn3").parent().hide();
})
});
}
（4）二級選單：懸停一級選單時顯示二級選單，移出一級選單範圍時隱藏二級選單。二級選單可點選
/*二級選單效果*/
$("#e1").hide();
$("#e2").hide();
$("#e3").hide();
var judge1=1; //判斷從組移出時是移至外部還是移至標籤（0代表一直標籤，1代表移至外部）
var judge2=1;
var judge3=1;
$("#p1").mouseover(function(){
$("#p1").css('backgroundColor','yellowgreen');
$("#e1").show();
})
$("#p1").mouseout(function(){
$("#p1").css('backgroundColor','green');
if(judge1==1)$("#e1").hide();
})
$("#e1").mouseover(function(){
$("#e1").show();
judge1=0;
})
$("#e1").mouseout(function(){
$("#e1").hide();
judge1=1;
})
$("#p2").mouseover(function(){
$("#p2").css('backgroundColor','yellowgreen');
$("#e2").show();
})
$("#p2").mouseout(function(){
$("#p2").css('backgroundColor','green');
if(judge2==1)$("#e2").hide();
})
$("#e2").mouseover(function(){
$("#e2").show();
judge2=0;
})
$("#e2").mouseout(function(){
$("#e2").hide();
judge2=1;
})
$("#p3").mouseover(function(){
$("#p3").css('backgroundColor','yellowgreen');
$("#e3").show();
})
$("#p3").mouseout(function(){
$("#p3").css('backgroundColor','green');
if(judge3==1)$("#e3").hide();
})
$("#e3").mouseover(function(){
$("#e3").show();
judge3=0;
})
$("#e3").mouseout(function(){
$("#e3").hide();
judge3=1;
})
（5）使用iframe巢狀頁面：使用jq操縱iframe標籤的src屬性達到頁面區域性切換效果。
$("#deleteGG").click(function(){
$("#ifr").attr('src','deleteGG.html');
})
$("#manageGG").click(function(){
$("#ifr").attr('src','manageGG.html');
})
$("#deleteNovel").click(function(){
$("#ifr").attr('src','deleteNovel.html');
})
五、iframe標籤：實現頁面區域性重新整理
/*
iframe:
第一種:讓選單項每個超連結都與iframe繫結
<a href="指向跳轉連結" target="iframe標籤的name屬性">
<iframe name="">
第二種：通過jq或js設定iframe的src屬性（該屬性設定iframe的顯示頁）來切換不同的選單項
$("#manageGG").click(function(){
$("#ifr").attr('src','manageGG.html');
})
*/