一.JS引入的三種方式
- 行內(nèi)時:
<div style="屬性1,屬性2" 事件=""></div> - 內(nèi)嵌式:
可寫在head里和body里,但最好寫在body結(jié)束標簽前,緊挨body結(jié)束標簽,
如果寫在head里需要寫上
window.onload = function(){ }:
當頁面加載完成時再執(zhí)行該函數(shù),一個界面只能寫一個,寫多個會覆蓋 - 外聯(lián)式:
<script src="路徑"></script>
要寫內(nèi)嵌式的前面
獲取文檔中所有的指定標簽時,返回值是一個偽數(shù)組
var 參數(shù) = document.getElementsByTagName("標簽名");但這樣會獲取整個頁面的指定標簽所以一般要先獲取指定id名再獲取標簽名
var 參數(shù) = document.getElementsById("id名").getElementsByTagName("標簽名");
排他思想
在設(shè)置事件或者效果時,先遍歷清空掉所有的事件和效果,再單獨設(shè)置選中的事件和效果
var list = document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onmouseover = function () {
for (var i = 0; i < list.length; i++) {
list[i].className = "";
}
this.className = "curr";
}
}
首先遍歷所有的li標簽,當鼠標經(jīng)過時觸發(fā)事件:將所有的li標簽的類名清空,再將鼠標選中的li標簽的類名設(shè)置為選中狀態(tài).
因為i變量在最后一次for循環(huán)中會加一超出數(shù)組的長度(數(shù)組越界),所以不能寫為list[i].className = "curr";,必須使用this.this表示事件的觸發(fā)者
自定義屬性:任何標簽都可以添加屬性
二.九宮格算法
tab標簽的切換
標簽的屬性可以自定義,在需要時設(shè)置
.index:索引
三.數(shù)組常用對象方法
arrayObject.length:設(shè)置或返回數(shù)組中元素的數(shù)目
arrayObject.concat(arrayX,arrayX,......,arrayX):連接兩個或更多的數(shù)組并返回結(jié)果,必須寫一個arrayX,可以是值也可以是數(shù)組
arrayObject.pop():刪除并返回數(shù)組的最后一個元素
arrayObject.push(newelement1,newelement2,....,newelementX):向數(shù)組的末尾添加一個或更多元素并返回新的長度,中間用逗號隔開
arrayObject.reverse():顛倒數(shù)組中元素的順序
arrayObject.shift( ):刪除并返回數(shù)組中的第一個元素
arrayObject.unshift(newelement1,newelement2,....,newelementX):向數(shù)組的開頭添加一個或更多元素,并返回新的長度,中間用逗號隔開
arrayObject.join(separator):把數(shù)組的所有元素放入一個字符串.元素通過指定的分隔符進行分隔,默認為逗號
arrayObject.slice(start,end):從某個已有的數(shù)組返回選定的元素,從start開始截取(包括這個角標,必須值),到end為止(不包括這個角標,end的值一定要比start大,end可以不填,不填寫的話會顯示以后的所有元素),原數(shù)組不會改變,返回值是一個新的數(shù)組
arrayObject.splice(index,howmany,item1,.....,itemX):刪除元素并向數(shù)組添加新元素,返回已被刪除并添加新元素的原數(shù)組
index必需,整數(shù),規(guī)定刪除項目的位置,使用負數(shù)可從數(shù)組結(jié)尾處規(guī)定位置
howmany必需,要刪除的項目數(shù)量,如果設(shè)置為0,則不會刪除項目
item1, ..., itemX可選,向數(shù)組添加的新項目
arrayObject.sort(fn):對數(shù)組的元素進行排序,排序需要調(diào)用函數(shù),fn為函數(shù)名
function fn(a,b){
return a>b;}
a>b時為升序
a<b時為降序
四.字符串常用對象方法
stringObject.length:返回字符串中的字符數(shù)目
stringObject.charAt(index):返回在指定位置的字符,index必需,表示字符在字符串中的下標
stringObject.charCodeAt(index):返回在指定位置的字符的Unicode編碼,index必需,表示字符在字符串中的下標
獲得字符串實際長度
stringObject.concat(stringX,stringX,...,stringX):連接兩個或多個字符串,用加號連接更容易
stringObject.indexOf(searchvalue,fromindex):從前面開始檢索字符串,如果找到就終止查找,返回某個指定的字符串值在字符串中首次出現(xiàn)的位置,如果沒有則返回-1
stringObject.lastIndexOf(searchvalue,fromindex):從后面開始檢索字符串,如果找到就終止查找,返回一個指定的字符串值最后出現(xiàn)的位置,如果沒有則返回-1
stringObject.slice(start,end):提取字符串的某個部分,返回一個新的字符串,包括字符串stringObject從start開始（包括start）到end結(jié)束（不包括end）為止的所有字符,end可以不填,不填寫的話會顯示以后的所有元素
stringObject.split(separator,howmany):把字符串切割為字符串數(shù)組separator必須,從該參數(shù)指定的地方分割,howmany可不填,到最后
stringObject.substr(start,length):抽取從start下標開始的指定數(shù)目的字符,start必需,length可不填,默認到最后一個元素
stringObject.toLocaleLowerCase():把字符串轉(zhuǎn)換為小寫
stringObject.toLocaleUpperCase():把字符串轉(zhuǎn)換為大寫
應(yīng)用:判斷上傳文件的格式
var btn = document.getElementById("input1");
btn.onchange = function () {
var num = btn.value.lastIndexOf(".");
var newStr = btn.value.slice(num + 1).toLowerCase();
if (newStr == "png" || newStr == "jpg") {
alert("格式正確");
}
else {
alert("請輸入png或jpg后綴");
btn.value = "";
}
}
首先獲取文件名中后綴名的起始位置,即小數(shù)點的角標位置+1,然后獲取后綴名再把其轉(zhuǎn)換為小寫
五.定時器
一次定時器:只執(zhí)行一次:setTimeout(fn,1000);
多次定時器:多次執(zhí)行:setInterval(fn,1000);
第一個參數(shù):要執(zhí)行的代碼塊,一般用函數(shù)或者函數(shù)名傳遞
第二個參數(shù):延時多長時間執(zhí)行,單位ms毫秒
清空定時器:clearInterval( );
注意:定時器不用的時候一定要清空,否則會造成未知錯誤
var timer = null;
timer = setInterval(function fn(){
},1000);
clearInterval(timer);
