Javascript基礎入門
阿新 • • 發佈：2018-12-30
注：這是JavaScript的複習筆記。
學習地址：學習地址
下一章：Javascript基礎應用
Javascript是什麼
網頁特效原理
淘寶、新浪、百度
JavaScript就是修改樣式
編寫JS的流程
佈局：HTML+CSS
屬性：確定要修改哪些屬性
事件：確定使用者做哪些操作（產品設計）
編寫JS：在事件中，用JS來修改頁面元素的樣式
第一個JS特效——滑鼠提示框
分析效果實現原理
樣式：Div的display
事件：onmouseover、onmouseout
動手編寫此效果
特效基礎
事件驅動：onmouseover
元素屬性操作：obj.style.[……]
特效實現原理概括：響應使用者操作，對頁面元素（標籤）進行某種修改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
/*
* #代表id選擇器
* .代表class選擇器
*/
#div1{
width: 200px;
height: 200px;
background 初識函式
製作更復雜的效果（DIV的顏色、大小都變化）直接在事件內寫程式碼會很亂
引入fucntion()、函式的基本形式
把JS從標籤裡放入到函式裡，類似css裡的class
變數的使用——別名
定義和呼叫
函式定義：只是告訴系統有這個函式，不會實際執行
函式呼叫：真正執行函式裡的程式碼
關係和區別
getElementById
第一個JS相容性問題
在FF下直接使用ID存在問題
引入document.getElementById()
document.getElementById在任何瀏覽器下均可使用
網頁換膚
土豆網“開燈、關燈”效果
任何標籤都可以加ID，包括link
任何標籤的任何屬性，也都可以修改
HTML裡怎麼寫，JS裡就怎麼寫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#div1{
width: 100px; height: 200px; background:red;
display: none;
}
</style>
<script>
function show(){
var getId = document.getElementById('div1');
if(getId.style.display == 'block'){
getId.style.display='none';
}else{
getId.style.display='block';
}
}
</script>
<body>
<input type="button" value="顯示/隱藏" onclick="show()" />
<div id="div1">
</div>
<div>
asdf
</div>
</body>
</html>if判斷
點選按鈕顯示/隱藏Div （彈出選單）
特效實現過程及原理分析
if的基本形式
擴充套件
為a連結新增JS
<a href=“javascript:;”></a>
className的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
作者：[email protected]
時間：2017-11-25
描述：
link:定義文件與外部資源的關係
rel:規定當前文件與被連結文件之間的關係.
href:規定被連結文件的位置
-->
<link id="js002_1" rel="stylesheet" href="css/JS_002_1.css" />
<script>
function setLink01(){
document.getElementById('js002_1').href='css/JS_002_1.css';
}
function setLink02(){
document.getElementById('js002_1').href='css/JS_002_2.css';
}
</script>
<body>
<!--
作者：[email protected]
時間：2017-11-25
描述：
title:滑鼠移到元素上時顯示一段提示文字
-->
<input type="button" value="面板1" onclick="setLink01()" title="面板1" />
<input type="button" value="面板2" onclick="setLink02()" title="面板2" />
</body>
</html>
函式傳參
改變背景顏色
函式傳參：引數就是佔位符
什麼時候用傳參——函式裡定不下來的東西
改變Div的任意樣式
操縱屬性的第二種方式
什麼時候用：要修改的屬性不固定
字串和變數——區別和關係
將屬性名作為引數傳遞
style與className
元素.style.屬性=xxx 是修改行間樣式
之後再修改className不會有效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
}
</style>
<script>
function show(name, value){
var Gdiv1 = document.getElementById('div1');
/*
* 第一種操作屬性的方法
* Gdiv1.style.name = value;
* 第二種操作屬性的方法 name是字串，所以可以傳入變數
* Gdiv1.style['name'] = value;
*/
Gdiv1.style[name] = value;
}
</script>
<body>
<input type="button" value="變寬" onclick="show('width','400px')" />
<input type="button" value="變高" onclick="show('height','400px')" />
<input type="button" value="變綠" onclick="show('background','green')" />
<div id="div1">
</div>
</body>
</html>
提取行間事件
提取事件
為元素新增事件
事件和其他屬性一樣，可以用JS新增
window.onload的意義
行為、樣式、結構三者分離
獲取一組元素
getElementsByTagName
陣列的使用
裡面的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
border: 1px solid #000000;
width: 200px;
height: 200px;
float: left;
margin-right: 20px;
}
</style>
<script>
/*
* window.onload:在頁面載入完才載入程式碼
*/
window.onload=function(){
var obtn = document.getElementById('btn1');
/*
* 匿名函式
*/
obtn.onclick=function (){
alert('zl');
};
/*
* getElementsByTagName() 方法會使用指定的標籤名返回所有的元素（作為一個節點列表），這些元素是您在使用此方法時所處的元素的後代。
*/
var adiv = document.getElementsByTagName('div');
alert(adiv.length);
for (var i=0; i<adiv.length; i++){
adiv[i].style.background='red';
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="提交" />
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
<div class="div1"></div>
</body>
</html>
迴圈
用while引入迴圈的概念
while迴圈語法
自增的意義
迴圈的構成：初始化、條件、語句、自增
for迴圈
用for代替while迴圈
用for迴圈為一組元素新增事件
什麼時候用迴圈——一組元素
例子
全選——checked屬性
反選——for迴圈配合if判斷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全選</title>
<script>
window.onload=function(){
var oBtn1 = document.getElementById('btn1');
var oBtn2 = document.getElementById('btn2');
var oBtn3 = document.getElementById('btn3');
var oCheckbox = document.getElementById('div1').getElementsByTagName('input');
oBtn1.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
oCheckbox[i].checked=true;
}
}
oBtn2.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
oCheckbox[i].checked=false;
}
}
oBtn3.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
if(oCheckbox[i].checked == true){
oCheckbox[i].checked=false;
}else{
oCheckbox[i].checked=true;
}
}
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="全選" />
<input id="btn2" type="button" value="全不選" />
<input id="btn3" type="button" value="反選" />
<br />
<div id="div1">
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
</div>
</body>
</html>
全選的優化
----------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全選</title>
<script>
window.onload=function(){
var oBtn1 = document.getElementById('btn1');
var oBtn3 = document.getElementById('btn3');
var oCheckbox = document.getElementById('div1').getElementsByTagName('input');
oBtn1.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
if(oBtn1.checked == true){
oCheckbox[i].checked=true;
}else{
oCheckbox[i].checked=false;
}
}
}
oBtn3.onclick = function(){
for(var i=0; i<oCheckbox.length; i++){
if(oCheckbox[i].checked == true){
oCheckbox[i].checked=false;
}else{
oCheckbox[i].checked=true;
}
}
}
}
</script>
</head>
<body>
全選<input id="btn1" type="checkbox" />
<input id="btn3" type="button" value="反選" />
<br />
<div id="div1">
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
<input type="checkbox"><br />
</div>
</body>
</html>
選項卡
按鈕的實現
新增事件
this的使用
先清空所有按鈕，再選中當前按鈕
內容的實現(div)
先隱藏所有Div，再顯示”當前”Div
索引值的使用
什麼時候用索引值——需要知道“第幾個”的時候
html新增index——會被FF過濾
js新增index
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選項卡</title>
<style>
.cdiv1 {
width: 200px;
height: 200px;
background: #ccc;
border: 1px solid #000;
display: none;
}
#div1 .active {
background: yellow;
}
</style>
<script>
window.onload=function(){
var odiv1 = document.getElementById('div1');
var inputs = odiv1.getElementsByTagName('input');
var divs = odiv1.getElementsByTagName('div');
for(var i=0; i<inputs.length; i++){
/*
* 通過自定義的index來裝i的值。
*/
inputs[i].index=i;
var j = new Array();
inputs[i].onclick=function(){
/*
* this:當前發生事件的元素
* alert(this.value);
*/
/*
* 用來清空active的顏色和div的顯示/隱藏
*/
for(var i=0; i<inputs.length; i++){
inputs[i].className='';
divs[i].style.display='none';
}
this.className='active';
divs[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="11">
<input type="button" value="22">
<input type="button" value="33">
<input type="button" value="44">
<div class="cdiv1" style="display: block;">1</div>
<div class="cdiv1">2</div>
<div class="cdiv1">3</div>
<div class="cdiv1">4</div>
</div>
</body>
</html>JS簡易日曆
程式實現思路
類似選項卡，只是下面只有一個div
innerHTML的使用
陣列的使用
定義：arr=[1,2,3]
使用：arr[0]
字串連線
作用：連線兩個字串
問題：連線中的優先順序
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript簡易日曆</title>
<link href="css/zns_style.css" rel="stylesheet" type="text/css" />
<script>
window.onload=function(){
var sum = ['快過年了，大家可以商量著去哪玩吧～',
'精通JavaScript開發課程 - 結課標準 - 有十條標準可讓大家修練成JS高手……',
'HTML5開發課程，讓你熟練掌握移動應用開發技術',
'精通各種DOM類應用，熟練掌握面向物件程式設計思想（OOP）、熟悉JS面向物件開發方式',
'熟練掌握AJAX技術及相關應用（例如：新浪微博級應用）',
'可以獨立寫出類似jQuery的小型庫（支援各類選擇符、事件類、DOM、自定義動畫animate、AJAX……）',
'精通JS運動特效技術，能完整實現各類網站所有動畫特效，如 智慧課堂 官網',
'掌握JS除錯及優化技術、能相容所有瀏覽器',
'精通JS事件物件及事件的工作機制，並能完成各類跨平臺應用模組的開發',
'能獨立開發表現和效能都很優秀的RIA應用',
'瞭解後臺程式設計的相關知識，能夠和後臺工程師配合完成大型互動應用',
'熟悉正則表示式的編寫、應用及高階表單驗證技術'];
var oTab = document.getElementById('tab');
var oLis = oTab.getElementsByTagName('li');
var oDiv = oTab.getElementsByTagName('div')[0];
for(var i=0; i<oLis.length; i++){
oLis[i].index = i;
oLis[i].onmousemove=function(){
for(var i=0; i<oLis.length; i++){
oLis[i].className='';
}
this.className='active';
/*
* innerHTML:獲取物件的內容 或 向物件插入內容
* oDiv.innerHTML : 獲取物件的內容
* oDiv.innerHTML = ‘’: 向物件插入內容
*/
oDiv.innerHTML = '<h2>'+(this.index+1)+'月活動</h2><p>'+sum[this.index]+'</p>';
}
}
}
</script>
</head>
<body>
<div id="tab" class="calendar">
<ul>
<li class="active"><h2>1</h2><p>JAN</p></li>
<li><h2>2</h2><p>FER</p></li>
<li><h2>3</h2><p>MAR</p></li>
<li><h2>4</h2><p>APR</p></li>
<li><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text">
<h2>1月活動</h2>
<p>快過年了，大家可以商量著去哪玩吧～</p>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; }
.calendar { width: 210px; margin: 50px auto 0; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { fo