JavaScript基礎及函數，BOM，DOM的節點及DOM節點操作
阿新 • • 發佈：2018-05-02
需要 兩個 進行 history des s系列 onclick 系統信息 回車 使用js的三種方式
1.直接在HTML標簽中，使用事件屬性，調用js代碼:
<button onclick="alert(‘點我呀‘)">點我啊！<tton>
2.在頁面的任意位置，使用script標簽
<script type="text/javascript"> alert(‘哈哈哈‘) </script>
3.外部：使用script標簽 src屬性選擇外部地址， type屬性選擇"text/javascript" charset="utf-8"
<script src="js/01-js.js" type="text/javascript" charset="utf-8"> </script>
註意事項:
1.js代碼可以放在頁面的任意位置使用，但是放置的位置不同將影響執行的順序。 2.引入的外部script標簽，不能再包含任何的js代碼。 js中的變量 1.變量的聲明: var num1=1; //使用var聲明的變量，是局部變量，在函數內可用 num2="哈哈哈哈"; //直接聲明的是全局變量。全局可用。 var a=1,b,c=2; //使用一行代碼，聲明多個語句，其中b為undefined； js中聲明變量的註意事項 1.js中聲明變量的關鍵字 var，類型取決於賦值類型，默認值 undefined； 2.js中同一個變量可以在多次賦值中被修改數據類型。 3.變量可以使用var聲明，也可以直接賦值聲明;var聲明的為局部變量;直接聲明的為全局變量。 4.js中 變量可以重名，相當於後邊的覆蓋前邊的。 5.變量名區分大小寫。大小寫不同不是同一變量。 js中的(6種)數據類型:function函數名(參數1,參數2...){ //函數體代碼 return 返回值; }
1.函數調用 ①直接調用 函數名(參數1,參數2...); ②通過事件調用 在HTML標簽中,通過事件屬性進行調用
<button onclick="focus(‘123‘,‘345‘)">點</button>
2.函數的聲明與調用的註意事項 ①函數中有沒有返回值,只取決於函數中有沒有return 無需刻意聲明 在JS中,有返回值可以不接收 沒有返回值也可以接收,結果為Undefined ②JS中函數的形參列表與實參列表 沒有任何關聯 也就是說 有參數可以不賦值(未賦值Undefined),沒有參數也可以賦值. 函數的實際參數個數取決於實參列表 ③JS中 函數是變量的唯一作用域 那麽,函數的形參就是屬於函數的局部變量 ④函數的聲明與調用語句沒有先後之分,即,可以先寫調用語句,再聲明函數 func(); function func() {} 匿名函數的聲明與使用 1.匿名函數表達式 var func=function(){} 調用函數 func(); 註意,函數的調用語句,必須放在聲明語句之後 2.直接將匿名函數,賦值給一個事件 window.onload=function () { } //文檔就緒函數,確保函數中的代碼,在HTML文檔加載完成之後執行 document.getElementById("btn2").onclick=function () { } 3.自執行函數 ①!function(){ }(); 開頭用!表明這是自執行函數 ②(function(){}()); 用()將匿名函數聲明與調用包裹在一起 ③(function(){})(); 用()將匿名函數聲明語句進行包裹; JS代碼的執行順序 JS代碼的執行分為兩個階段 檢查編譯階段 代碼執行階段 檢查編譯階段 主要檢查語法的錯誤 變量的聲明 函數的聲明 等聲明操作 執行的操作 var num; function func1() {} var func2; 代碼執行階段 變量的賦值,函數的調用等執行語句 屬於代碼執行階段 執行的操作 console.log(num); num=1; func1(); func2(); func2=function () {};
console.log(num); var num=1; func1(); function func1() {} func2(); var func2=function () {}
arguments對象 1.作用用於保存函數的所有實參 >>>但函數存在實參時,可以使用數組下標訪問函數的所有實參 >>>alert(arguments[4]) 2.arguments中元素的個數,取決於實參列表,與形參個數無關 3.一旦函數調用時,傳入了實參,那麽對應位數的形參,將與arguments對應的元素進行綁定 修改形參,arguments中對應的元素將被改掉,反之也成立 但是,如果莫一位置沒有傳入實參,那麽該位置的形參和arguments將不進行關聯 4.arguments.callee();執行當前函數的引用,用於在函數中使用遞歸調用自身 BOM screen對象
console.log(window.screen); console.log(screen); console.log(screen.width); console.log(screen.height); console.log(screen.availWidth);//可用寬度 console.log(screen.availHeight);//可用高度=screen.height-底部任務欄高度
location對象
console.log(location); console.log(location.href); //完整的URL路徑 console.log(location.protocol); //協議名 console.log(location.hostname); //主機名 console.log(location.port); //端口號 console.log(location.host); //主機名+端口號 console.log(location.pathname); //文件路徑 console.log(location.search); //從?開始的參數部分 console.log(location.hash); //從#開始的錨點位置
使用location進行頁面跳轉
function gotobaidu(){ ① location="http://www.baidu.com"; ② window.location.href="http://www.baidu.com"; }
跳轉頁面,加載新界面之後可以點擊回退按鈕返回
function gotobaiduByAssign(){ location.assign("http://www.baidu.com"); }
跳轉頁面,加載新界面之後沒有回退按鈕,無法返回
function gotobaiduByReplace(){ location.replace("http://www.baidu.com"); }
刷新當前頁面
location.reload(); 刷新頁面 如果本地有緩存,將從緩存中讀取 相當於按F5 location.reload(true);強制刷新 ,無論是否有緩存,都將請求後臺加載最新數據,相當於Ctrl+F5
history 對象
console.log(history); console.log(history.length);//用於記錄當前頁面跳轉的歷史頁面個數
點擊去前一頁 相當於瀏覽器的前進按鈕
function forward(){ history.forward(); }
點擊去後一頁相當於瀏覽器的後退按鈕
function back(){ history.back(); }
表示跳轉到瀏覽歷史的任意一個界面 +1 表示前面一頁 -1 表示後面一頁 0 表示當前頁 因此history.go(0);相當於刷新頁面
function go(){ history.go(); }
navigator 對象 返回關於瀏覽器的各種系統信息 console.log(navigator); 輸出瀏覽器的所有插件
for (var i=0;i<navigator.plugins.length;i++) { console.log(navigator.plugins[i].name); }
window對象的常用方法 ①prompt()彈窗輸入 ②alert() 彈窗輸出 ③confirm() 待確定刪除的提示框 分別返回true false ④close() 關閉當前瀏覽器窗口 ⑤open() 打開一個新窗口 參數一 新窗口的地址 參數二 新窗口的名字 沒啥用 參數三 新窗口的各種配置屬性 scrollbars=yes表示是否顯示滾動條 只在IE有用 window.open("http://www.baidu.com","百度","width=600px, height=600px,top=100px,left=100px,scrollbars=yes"); ⑥setTimeout 延時器,表示延時多少ms執行一個函數 參數一 可以傳入匿名函數,也可以傳入函數名 參數二 延時的毫秒數 參數三到參數n 傳給回調函數的參數 setTimeout(function(num1,num2){},2000,"哈哈哈",123,456,47) ⑦setInterval 定時器 表示每隔多少ms執行一遍函數 其他用法與setTimeout完全相同 ⑧clearInterval 清除定時器 ⑨clearTimeout 清除延時器 聲明定時器時可以接受返回的id 並將id返回給clearInterval即可清除 DOM數的節點 DOM節點分為三大類 元素節點(標簽節點) 屬性節點 文本節點 屬性節點 文本節點都屬於元素節點的子節點,因此操作時,需先選中元素節點,再修改屬性和文本 查看元素節點 1.使用getElement系列方法
var li=document.getElementById("first") var list1=document.getElementsByClassName("cls") var list2=document.getElementsByName("name") var list3=document.getElementsByTagName("li")
註意事項 ①id不能重名 如果id重復,只能取到第一個 ②獲取元素節點時,必須等到DOM樹加載完成後才能獲取 兩種方式 將js寫在文檔最後 將代碼寫入window.onload函數中 ③通過getElements系列取到的為數組格式,操作時必須取到其中的每一個元素,才能進行操作,而不能直接對數組進行操作 document.getElementsByClassName("cls").click()=function(){}; 錯誤 document.getElementsByClassName("cls")[0].click()=function(){}; 正確 ④這一系列方法,也可以先選中一個DOM節點,從選中的DOM節點中,選擇需要的節點 document.getElementById("first").getElementsByTagName("li"); 2. 通過querySelector系列方法 ①傳入一個選擇器名稱,返回第一個找到的元素,通常用於查找id var dq1=document.querySelector("#id") ②傳入一個選擇器名稱,返回所有找到的元素無論找到幾個,都返回數組格式 var dqs1= document.querySelectorAll("#div1 li") 查看修改屬性節點 查看屬性節點 .getAttribute("屬性名") 設置屬性節點 .setAttribute("屬性名","屬性值") 註意事項 .setAttribute()在老版本IE中存在兼容問題,可以使用.符號代替
document.getElementById("first").classname="haha";
JS修改css的多種方式 1.使用setAttribute設置class和style
document.getElementById("first").setAttribute("class","class1")
document.getElementById("first").setAttribute("style","color:red")
2.使用.className添加一個class選擇器
document.getElementById("first").className="class1"
3.使用.style.樣式名 直接修改單個樣式,註意樣式名必須使用駝峰命名法
document.getElementById("first").style.color="red";
document.getElementById("first").style.fontSize="18px";
4.使用.style或者.style.cssText添加一串行級樣式
document.getElementById("first").style="color:red"; //IE不兼容
document.getElementById("first").style.cssText="color:red";
查看設置文本節點 .innerHTML取到或設置一個節點中的HTML代碼
document.getElementById("first").innerHTML
document.getElementById("first").innerHTML="<a href=‘‘>hah</a>"
.innerText取到或設置一個節點中的文本,不能設置HTML代碼
document.getElementById("first").innerText
層次節點操作 1. .childNodes獲取當前節點的所有子節點 包括元素節點和文本節點 .children獲取當前節點的所有元素子節點 不包括文本節點 2. .parentNode獲取當前節點的父節點 3. .firstChild獲取第一個子節點包括回車等文本節點 .firstElementChild 獲取第一個元素節點 不含文本節點 .lastChild .lastElementChild 獲取最後一個 4. .previousSibling獲取當前節點的前一個兄弟節點 包括文本節點 .previousElementSibling獲取當前節點的前一個元素兄弟節點 .nextSibling .nextElementSibling 獲取後一個 5. .attributes獲取當前節點的所有屬性節點 返回數組格式 創建並新增節點 1. .document.createElement("標簽名") 創建一個新節點,並將創建的新節點返回 需要配合.setAttribute為新節點設置屬性 2.父節點.insertBefore(新節點,目標節點) 在父節點中將新節點插入到目標節點之前 父節點.appendChild(新節點)在父節點的內部最後,插入一個新節點 3.源節點.cloneNode() 克隆一個節點 傳入true表示克隆源節點以及源節點的所有子節點 傳入false或者不傳,表示只克隆當前節點,而不克隆子節點 刪除替換節點 1.父節點.removeChild(子節點) 從父節點中,刪除指定子節點 2.父節點.replaceChild(新節點,老節點) 在父節點中用新節點替換老節點
JavaScript基礎及函數，BOM，DOM的節點及DOM節點操作