前端基礎(3):Javascript
阿新 • • 發佈:2018-12-10
Javascript
(一)Javascript
(1)基本概念
- Javascript
- 解釋性指令碼語言
- 弱型別
- 作用:完成表單的驗證
- ECMA:Javascript的一個國際標準
- BOM:Browser Object Model 瀏覽器物件模型
- DOM:Document Object Model 文件物件模型
- Javascript和HTML的整合
- 單獨.js檔案匯入
- < script > < /script >
(2)基本型別
(1)變數
- 變數宣告
- var 變數名=初始化值;(最好有分號)
- 註釋使用//
- 原始型別(使用typeof可以判定)
- undefined
- boolean
- number
- string
- object :變數是引用型別(typeof運算子對null會返回object)
- 引用型別
- Array
- String
- Boolean
- Number
- Date
- Math
- RegExp
(2)陣列
- 宣告陣列(JS中陣列的長度是可變的,類似於ArrayList)
new Array();
new Array(size);
new Array(element0, element0, ..., elementn);
- join()方法:列印時陣列插入分隔符
- shift()方法:刪除並返回陣列的第一個元素
(3)函式
- 因為Javascript是弱型別的
- 所以函式宣告不需要返回值型別,引數也不需要型別
//1th way to state a function
function 函式名(引數){
函式體;
}
//2th way to state a function
var 函式名=function(引數){
函式體
}
(4)事件
- 常見事件
- onclick 滑鼠單擊(例如在input button 中將onclick和事件繫結,編寫函式)
- onsubmit 表單提交
- onload 頁面載入(例如放在body標籤內,當載入頁面時呼叫函式)
- onchange事件(select表單選擇時觸發)
- 將事件和函式繫結
- 通過標籤的屬性
- 給元素派發事件
<xxx onclick="函式名(引數)" ></xxx>
<form ... onsubmit="return checkForm()">
- 焦點
- onfocus 得到焦點
- onblur 失去焦點
(5)表單校驗
- 利用Document物件可以對錶單提交的元素進行校驗(比如在註冊時檢查輸入是否為空)
- JS從頁面中獲取元素(利用document):
var obj = document.getElementById("id值");
var value = obj.value; //獲取value屬性值
- this作為引數傳入函式時指的是當前dom物件
(6)DOM
(1)DOM節點
- 節點分類
- document 整個文件
- element 比如head節點
- attribute 比如href屬性
- text 具體的文字
(2)Document物件
- 獲取物件
- document.getElementById(“id”) //通過id獲取元素
- document.getElementsByTagName(“tag”) //通過標籤獲取元素,返回的是陣列型別
- document.getElementsByClassName(“class”)
- document.getElementsByName(“name”)
- 修改屬性
- dom物件.value = ; //修改值
- dom物件.innerHTML = ; //設定標籤體
- dom物件.style.屬性 = ; //設定dom物件的屬性
var usernameObj = document.getElementById("username"); //根據元素ID獲取物件
document.getElementById("span_1").innerHTML=usernameObj.value; //呼叫innerHTML方法給span標籤賦值
(7)BOM
(1)Browser五大物件
- Browser物件
- Window
- History
- Location 定位
- Navigator
- Screen
(2)Window物件
- 通過Window物件可以獲取其他四個物件的只讀引用
- window.location
- 常用方法
- alert() 警告框
- confirm() 確認提醒,返回值為ture | false
- prompt() 獲取使用者的輸入
- open(url) 開啟新頁面(廣告彈窗中常用)
- close() 關閉當前頁面
- 使用BOM-Window構造定時器(window.setInterval可以簡寫為setInterval)
- setInterval(function,ms):週期執行函式
- setTimeOut(function,ms) :延遲ms之後,只執行一次
- clear
//JS操縱HTML物件步驟:
//獲取物件
var Obj = document.getElementById("id");
//操縱物件屬性
obj.style.backgroundColor="#ff0";
(3)Location物件
- location
- 獲取當前頁面URL
- 設定當前頁面URL(完成網頁跳轉)
var url = window.location.href; //獲取位址列URL
window.location.href = "http://www.baidu.com"; //設定跳轉URL
(4)History物件
- go(int)方法
function goBack(){ //後退一個網頁
history.go(-1);
}
(8)Demo練習
- 實現表單的隔行換色
(1)表單隔行換色
<script>
//當前頁面載入成功
onload=function(){
//1.獲取所有的tr
var arr = document.getElementsByTagName("tr");
//alert(arr);
//alert(arr.length);
//2.判斷奇偶數
for(var i = 1; i < arr.length; i++){
if(i%2 == 0){
arr[i].style.backgroundColor = "aqua";
}else{
arr[i].style.backgroundColor = "coral";
}
}
}
</script>
(2)複選框全選
- 由一個單選框決定其他所有複選框的狀態(比如購物車中常見的全選按鈕)
<script>
function checkAll(obj){
//獲取當前框的狀態
var flag = obj.checked;
//獲取所有複選框
var arr = document.getElementsByClassName("itemSelect");
//改變所有複選框的狀態
for(var i=0; i < arr.length; i++){
arr[i].checked = flag;
}
}
</script>
(3)省市聯動
- 在複選框中選中省之後後面的選項中是對應的市區集合選擇(比如註冊或者購買火車票的時候)
<script>
function selCity(index){
var cities = arr[index];
var cityChoices = document.getElementsByName("city")[0]; //ByName返回的是陣列型別,獲取市的下拉選項:因為只有一個元素,所以取[0],
cityChoices.innerHTML = ("<option >-請選擇-</option> ");
for(var i=0; i < cities.length; i++){
cityChoices.innerHTML += ("<option>" + cities[i] + "</option>");
}
}
</script>