JavaScript
- 01-JS 的使用方式
- 04-代碼/02-JS 中常見的資料型別.html
- 03-JS 中的函式.html
- 04-區域變數和全域變數.html
- 05-JS 裝的判斷陳述句.html
- 06-JS 陣列.html
- 07-JS 回圈.html
- 08-JS 獲取頁面標簽.html
- 09-JS 操作頁面標簽的屬性.html
- 10-定時器.html
- 11-jQuery 的使用.html
- 12-jQuery 選擇器.html
- 13-選擇集轉移.html
01-JS 的使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 2. 內嵌式, 在 head 標簽中,定義 script 標簽, 在標簽中書寫 JS 代碼 -->
<script>
// ctrl / js 的注釋, JS html 都是解釋型語言,代碼從上到下執行
alert('我是內嵌式 JS, 我執行了');
</script>
<!-- 3. 外鏈式, 在外部定義單獨的 js 檔案,書寫 JS 代碼,使用 script 標簽的 src 屬性引入 -->
<script src="./js/main.js"></script>
</head>
<body>
<!-- 1. 行內式, 給標簽添加屬性, 主要用于事件 事件="函式呼叫(引數)"
alert 是系統中自帶的函式,作用是 彈窗
-->
<input type="button" value="點我呀,點我呀" onclick="alert('點我干嘛')">
</body>
</html>
04-代碼/02-JS 中常見的資料型別.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 變數的定義, var 變數名 = 資料值;
// 變數名, 由 字母 數字 下劃線和 $ 組成,不能以數字開頭, 匈牙利命名風格
// 1. 數字型別 number
// 1.1 整數
var iAge = 10;
// alert(iAge); // 列印資料值
// alert(typeof(iAge)); // 查看變數的資料型別
console.log(iAge, typeof(iAge));
// 1.2 小數
var fHeight = 170.3;
console.log(fHeight, typeof(fHeight));
// 2. 字串型別 string
var sName = 'isaac';
console.log(sName, typeof(sName));
// 3. boolean 值(true, false)
var bIsTrue = true;
console.log(bIsTrue, typeof(bIsTrue));
// 4. undefined 未定義的,
var oA; // 宣告變數,沒有給資料值
console.log(oA, typeof(oA));
// 5. null 空物件
var oObject = null;
console.log(oObject, typeof(oObject));
</script>
</head>
<body>
</body>
</html>
03-JS 中的函式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 定義一個函式,實作列印 hello world
function fnHello(){
console.log('hello world!')
}
// 函式呼叫
fnHello()
// 定義一個函式, 可以接收兩個數字,對數字進行求和,并將求和的結果進行回傳
function fnSum(iNum1, iNum2){
var iNum = iNum1 + iNum2;
return iNum;
}
// 函式呼叫,由于函式有引數和回傳值,所以需要呼叫的時候傳參和接識訓傳值
var result = fnSum(10, 20);
console.log(result);
</script>
</head>
<body>
</body>
</html>
04-區域變數和全域變數.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 區域變數: 在函式內部定義的變數,稱為區域變數,
// 全域變數: 在函式外部定義的變數,稱為全域變數
// 1. 在函式內部能否直接讀取全域變數的值, ====> 可以直接讀取
// 1.1 定義全域變數
var iNum = 100;
// 1.2 定義函式
function fnFunc(){
// 1.3 直接列印全域變數的值
console.log('函式內部訪問全域變數的值:', iNum);
// 2. 在函式內部能否直接修改全域變數的值 ====> 可以直接修改全域變數的值
// 2.1 直接在函式內部修改全域變數值
iNum = 200;
// 3.1 定義區域變數
var iAge = 10;
// 注意點, 在函式內部,定義變數,如果不加 var 關鍵字, 定義的變數是全域變數
sName = 'isaac';
}
fnFunc()
// 2.2 在函式呼叫之后,查看全域變數的值,有沒有被修改
console.log('函式外部訪問修改后的全域變數的值:', iNum);
// 3. 函式外部能否使用區域變數 ====> 不能訪問區域變數的值
console.log('sName的值:', sName);
// 3.2 函式外部訪問區域變數的值
console.log('函式外部訪問區域變數的值', iAge);
</script>
</head>
<body>
</body>
</html>
05-JS 裝的判斷陳述句.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var iAge = 17;
if (iAge >= 18){
console.log('可以進入網吧為所欲為,瀏覽各種網站');
}
if (iAge >= 18){
console.log('可以進入網吧為所欲為,瀏覽各種網站');
} else {
console.log('不滿 18 歲,回去學習吧');
}
var fScore = 80;
if (fScore >= 90){
console.log("A");
} else if (fScore >= 80){
console.log("B");
} else if (fScore >= 60) {
console.log('C');
} else{
console.log("D")
}
</script>
</head>
<body>
</body>
</html>
06-JS 陣列.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1. 陣列的定義
// 1.1 使用 Array 類創建
var aArray = new Array(1, 2, 'hello');
console.log(aArray, typeof(aArray));
// 1.2 使用字面量的方式創建
var aList = [1, 2, 3.14, 'isaac', [3, 6, 9]];
console.log(aList, typeof(aList));
// 2. 求陣列中元素的個數,陣列的長度 陣列.length 屬性
console.log('元素個數為:', aList.length);
// 3. 陣列支持下標操作,但是沒有負數下標
// 訪問不存在的下標, 得到的值是 undefined
console.log(aList[0], aList[3], aList[100]);
// 可以通過下標修改陣列中的資料
aList[3] = 'isaac NL';
console.log(aList);
// 直接修改不存在的下標值,在指定的下標位置添加資料,其余位置為空
aList[10] = 10;
console.log(aList, aList.length);
// 4. 根據資料值,找到元素在陣列中的第一個下標 indexOf
// 找到了,回傳的下標, 沒有找到回傳的是 -1
console.log(aList.indexOf(3.14), aList.indexOf(1000));
// 5. 尾部添加和洗掉
aList.push('last');
console.log(aList);
aList.pop()
console.log(aList);
// 6. 根據下標,洗掉添加資料
// splice(下標, 洗掉的元素個數, 添加的元素,...)
aList.splice(2, 2); // 只洗掉,不添加
console.log(aList);
aList.splice(2, 0, 3, 4, 5); // 只添加,不洗掉
console.log(aList);
aList.splice(2, 2, 'hello', 'world');
console.log(aList);
</script>
</head>
<body>
</body>
</html>
07-JS 回圈.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 1. while 回圈
var i = 0;
while (i < 5){
console.log('寫代碼中....', i);
i++;
}
// 2. for 回圈, 遍歷陣列
aList = ['郭德綱', '于謙', '小岳岳', '孫越']
for (var i=0; i < aList.length; i++) {
console.log(aList[i]);
}
/* 1. 執行運算式 1
2. 執行運算式 2, 進行判斷
3. 根據第二步的判斷結果,如果為 false, 回圈不執行
4. 根據第二步的判斷結果,如果是 true, 進入回圈中,執行回圈中的代碼
5. 回圈中的代碼執行結束之后,執行運算式 3,
6. 執行運算式 2, 重復 2 3 4 5 的步驟,直到條件 為 false
*/
// 3. do while
do{
console.log('我至少執行一次');
} while(1 > 3);
</script>
</head>
<body>
</body>
</html>
08-JS 獲取頁面標簽.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script>
// getElementById 通過 id 找到對應的標簽,找到了就是標簽物件,沒有找到,回傳 null
var oDiv = document.getElementById('box');
alert(oDiv + " ---- " + typeof(oDiv));
</script> -->
<script>
// 解決方案二: 想一種方法, 讓標簽全部定義完成之后,在執行 JS 代碼
// 便簽全部定義完成之后, 會觸發一個事件, window.onload 事件,
// 當頁面標簽全部加載完成,執行函式中的代碼 , JS 的入口函式
window.onload = function(){
var oDiv = document.getElementById('box');
alert(oDiv + " ---- " + typeof(oDiv));
}
</script>
</head>
<body>
<div id="box">
這是一個 div
</div>
<!-- 解決方案一, 不建議 -->
<!-- <script>
// getElementById 通過 id 找到對應的標簽,找到了就是標簽物件,沒有找到,回傳 null
var oDiv = document.getElementById('box');
alert(oDiv + " ---- " + typeof(oDiv));
</script> -->
</body>
</html>
09-JS 操作頁面標簽的屬性.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
// 獲取頁面標簽, 在入口函式中定義
window.onload = function (){
// 1. 獲取 input 標簽
var oInput = document.getElementById('name');
// 獲取 name 屬性
console.log('name屬性:', oInput.name);
console.log('class屬性:', oInput.className);
console.log('value 屬性:', oInput.value);
// 只能獲取行內式的 css 屬性
console.log('style屬性中的字體大小:', oInput.style.fontSize);
// 設定 value 屬性
oInput.value = 100;
// 獲取 div標簽
var oDiv = document.getElementById('div1');
console.log(oDiv.innerHTML);
console.log(oDiv.innerText);
oDiv.innerHTML = '好好學習';
}
</script>
</head>
<body>
<input type="text" name="name" class="box" id="name" value="10"
style="font-size: 26px;">
<div id="div1">
<p>
這是一個 div
</p>
</div>
</body>
</html>
10-定時器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var oT = null;
function fnClick(){
oT = setInterval(alert, 2000, '好好學習')
}
function fnCalc(){
clearInterval(oT);
}
</script>
</head>
<body>
<div>
<p>點擊單次定時器按鈕, 3s后彈出 hello</p>
<!-- setTimeout(執行的函式名, 時間間隔, 第一個引數的引數) -->
<input type="button" value="單次定時器" onclick="setTimeout(alert, 3000, 'hello')">
</div>
<div>
<p>點擊多次定時器按鈕,間隔 2 秒, 彈出好好學習,點擊 停止, 不再彈出</p>
<input type="button" value="多次定時器" onclick="fnClick()">
<input type="button" value="停止" onclick="fnCalc()">
</div>
</body>
</html>
11-jQuery 的使用.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 注意點: 引入外部 JS 的 script 和自己書寫的 js 代碼的標簽,不能是同一個,需要單獨定義 -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 不能使用上述 script 標簽書寫 JS 代碼, 需要重新定義 -->
<script>
// 使用 JS 獲取 div 標簽
window.onload = function() {
var oDiv = document.getElementById('box');
// alert(oDiv);
console.log('原生的 js:', oDiv);
}
// 使用 jQuery 獲取. 入口函式
// $ 是 jQuery 中一個函式
// document 是 JS 物件, $(document) jQuery 物件
$(document).ready(function (){
// jQuery 選擇器 $() ID 選擇器
var $Div = $('#box');
console.log('jquery:', $Div);
});
// jQuery 入口函式的簡寫
$(function(){
var $Div = $('#box');
console.log('jquery 簡寫:', $Div);
});
</script>
</head>
<body>
<div id="box">
這是一個 div.
</div>
</body>
</html>
12-jQuery 選擇器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 jQuery -->
<script src="js/jquery-1.12.4.min.js"></script>
<!-- 書寫自己的 js 代碼 -->
<script>
// jquery 的入口函式
$(function(){
// 標簽選擇器 $('標簽')
var result = $('div');
console.log(result.length); //2
// id 選擇器 $('#id')
console.log($('#box').length); // 1
// 類選擇器 $('.類名')
console.log($('.box').length); // 1
// 層級選擇器 $('選擇器1 選擇器2')
console.log($('div p').length); //2
// 屬性選擇器 $('選擇器[屬性=值]')
console.log($('div[class="box"]').length);
});
</script>
</head>
<body>
<div id="box" class="box">
這是第一個 div
<p>
好好學習
</p>
</div>
<div>
這是第二個 div
<p>
good good study
</p>
</div>
</body>
</html>
13-選擇集轉移.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
$('div').css({'background': 'red'});
// 選擇集過濾 has('選擇器')
$('div').has('p').css({'font-size': '28px'});
// eq(下標), 下標是從 0 開始
$('div').eq(1).css({'color': 'blue'});
});
</script>
</head>
<body>
<div>
這是第一個 div
<p>
好好學習
</p>
</div>
<div>
這是第二個 div <br><br>
good good study
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/395141.html
標籤：其他