一.時(shí)間函數(shù)
setTimsetTimeout(): 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式。
通過(guò)返回的標(biāo)識(shí)也可以clearTimeout(id)來(lái)清除指定函數(shù)的執(zhí)行际度。
eout(): 在指定的毫秒數(shù)后調(diào)用函數(shù)或計(jì)算表達(dá)式葵袭。
通過(guò)返回的標(biāo)識(shí)也可以clearTimeout(id)來(lái)清除指定函數(shù)的執(zhí)行。
2.方法:
重復(fù)執(zhí)行定時(shí)器
? ? ? ? ? ? setInterval
? ? ? ? ? ? 每隔多長(zhǎng)時(shí)間執(zhí)行一次函數(shù),重復(fù)行
? ? ? ? ? ? setInterval(function(){
? ? ? ? ? ? ? },時(shí)間)
? ? ? ? ? 延遲執(zhí)行定時(shí)器
? ? ? ? ? setTimeout()
? ? ? ? ? 延遲多長(zhǎng)時(shí)間以后執(zhí)行一次
? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ...要執(zhí)行的代碼..
? ? ? ? ? },時(shí)間)
? ? ? ? ? 時(shí)間:毫秒數(shù)
二.history對(duì)象
1.初步理解
history 對(duì)象是歷史對(duì)象甲脏。包含用戶(在瀏覽器窗口中)訪問(wèn)過(guò)的 URL眶熬。history 對(duì)象是window 對(duì)象的一部分妹笆,可通過(guò) window.history 屬性對(duì)其進(jìn)行訪問(wèn)块请。
history對(duì)象的屬性:length娜氏,返回瀏覽器歷史列表中的 URL 數(shù)量。
2.history對(duì)象的方法:
back():加載history 列表中的前一個(gè) URL墩新。
forward():加載歷史列表中的下一個(gè) URL贸弥。當(dāng)頁(yè)面第一次訪問(wèn)時(shí),還沒(méi)有下一個(gè)url海渊。
go(number|URL): URL 參數(shù)使用的是要訪問(wèn)的 URL绵疲。而 number 參數(shù)使用的是要訪問(wèn)的 URL 在 History 的 URL 列表中的相對(duì)位置。go(-1)臣疑,到上一個(gè)頁(yè)面盔憨。
3.例子
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>history03</title>
</head>
<body>
? ? <button id="btn1">回到上一個(gè)界面</button>
? ? <button id="btn2">回到上上一個(gè)界面</button>
? ? <script>
? ? ? ? var btn1=document.getElementById("btn1");
? ? ? ? var btn2=document.getElementById("btn2");
? ? ? ? btn1.onclick=function(){
? ? ? ? ? ? window.history.go(-1);
? ? ? ? };
? ? ? ? btn2.onclick=function(){
? ? ? ? ? ? window.history.go(-2);
? ? ? ? };
? ? </script>
</body>
</html>
三.location 對(duì)象
1.初步理解:
location 對(duì)象是window對(duì)象之一,提供了與當(dāng)前窗口中加載的文檔有關(guān)的信息讯沈,還提供了一些導(dǎo)航功能郁岩。也可通過(guò)window.location 屬性來(lái)訪問(wèn)。
location 對(duì)象的屬性href:設(shè)置或返回完整的 URL
2.location 對(duì)象的方法
reload():重新加載當(dāng)前文檔缺狠。
replace():用新的文檔替換當(dāng)前文檔问慎。
3.例子
<input type="button" value="刷新" onclick="window.location.reload();" />
<input type="button" name="" id="" value="shsxt官網(wǎng)" onclick="open_sxt();" />
<script type="text/javascript">
? ? ? function open_sxt() {
? ? ? ? ? // 用新的文檔替換當(dāng)前文檔
? ? ? ? ? alert(window.location.href); // 獲取完整的url
? ? ? ? ? window.location.;
? ? ? ? ? // 用新的文檔替換當(dāng)前文檔
window.location.replace("http://www.baidu.com");
? ? ? }
? ? </script>
四.DOM
1.初步了解
DOM 文檔對(duì)象模型
? ? ? ? ? ? DOM賦予我們可以操作頁(yè)面的能力
? ? ? ? ? ? 可以創(chuàng)建,插入,修改,刪除元素等等
? ? ? ? ? Web 瀏覽器生成一個(gè)樹(shù)型結(jié)構(gòu),用來(lái)表示頁(yè)面內(nèi)部結(jié)構(gòu)挤茄。DOM 將這種樹(shù)型結(jié)構(gòu)理解為由節(jié)點(diǎn)組成如叼,組成一個(gè)節(jié)點(diǎn)樹(shù)。
? ? ? ? 2 節(jié)點(diǎn):
節(jié)點(diǎn)類型HTML內(nèi)容例如
文檔節(jié)點(diǎn)文檔本身整個(gè)文檔 document
元素節(jié)點(diǎn)所有的HTML元素<a>穷劈、<div>笼恰、<p>
屬性節(jié)點(diǎn)HTML元素內(nèi)的屬性id、href歇终、name社证、class
文本節(jié)點(diǎn)元素內(nèi)的文本 hello
注釋節(jié)點(diǎn)HTML中的注釋<!-- -->
? ? ? ? ? ? html頁(yè)面中的所有內(nèi)容的都是節(jié)點(diǎn),而dom就是用來(lái)操作節(jié)點(diǎn)
? ? ? ? ? 3. 獲取節(jié)點(diǎn):
? ? ? ? ? ? ? ? 1.document.getElementById("id值")
? ? ? ? ? ? ? ? ? ? 根據(jù)元素的id屬性值,獲取到唯一一個(gè)元素節(jié)點(diǎn)
? ? ? ? ? ? ? ? 2.主語(yǔ).getElementsByTagName("元素名")
? ? ? ? ? ? ? ? ? ? 根據(jù)元素名字獲取一組元素
? ? ? ? ? ? ? ? ? ? 主語(yǔ):document|父節(jié)點(diǎn)
? ? ? ? ? ? ? ? 3.主語(yǔ).getEelementsByClassName("class屬性值")
? ? ? ? ? ? ? ? ? ? 根據(jù)與class屬性值獲取一組元素
? ? ? ? ? ? ? ? 4.getElementsByName()
? ? ? ? ? ? ? ? 根據(jù)name屬性值獲取dom對(duì)象數(shù)組,常用于多選獲取值
例子:
var div1=document.getElementById("div1");
? ? div1.style.background="red";
? ? 根據(jù)標(biāo)簽名字獲取一組元素,注意要一個(gè)一個(gè)節(jié)點(diǎn)操作? 主語(yǔ)是document
? var divs=document.getElementsByTagName("p");
? ? ? divs[0].style.color="blue";
? ? ? 根據(jù)標(biāo)簽名字獲取節(jié)點(diǎn)? 主語(yǔ):父節(jié)點(diǎn)
? ? ? var div2=div1.getElementsByTagName("div");
? ? ? div2[0].style.border="1px solid red";
? ? ? 根據(jù)class屬性獲取一組元素
? ? ? ? var eles=document.getElementsByClassName("yellow");
? ? ? ? var eles2=div1.getElementsByClassName("yellow");
? ? ? for(var e in eles){
? ? ? ? ? eles[e].style.background="yellow";
? ? ? }
? ? ? eles2[0].style.background="pink";
4.創(chuàng)建節(jié)點(diǎn)和插入節(jié)點(diǎn)
1)創(chuàng)建節(jié)點(diǎn):createElement()
? ? ? ? ? 參數(shù):元素標(biāo)簽名
? ? ? ? 主語(yǔ):document
? ? ? ? ? 返回值:新節(jié)點(diǎn)
? ? ? ? 插入節(jié)點(diǎn) appendChild()
? ? ? ? ? 追加元素,在父節(jié)點(diǎn)中的最后位置追加
? ? ? ? ? 參數(shù):要插入的節(jié)點(diǎn)
? ? ? ? ? 主語(yǔ):父節(jié)點(diǎn)
? ? ? ? 返回值:追加的節(jié)點(diǎn)
? ? ? ? 插入節(jié)點(diǎn)insertBefore(childNode1,ChildNode2)
? ? ? ? 參數(shù):
? ? ? ? ? ? childNode1 要插入的節(jié)點(diǎn)
? ? ? ? ? ? ? ChildNode2 父節(jié)點(diǎn)中的指定子節(jié)點(diǎn)
? ? ? ? ? 主語(yǔ):父節(jié)點(diǎn)
? ? ? ? ? 返回值:返回第一個(gè)參數(shù),要插入的節(jié)點(diǎn)
? ? ? ? ? 注意:ChildNode2參數(shù)的值為null,undefined,實(shí)現(xiàn)的是追加的效果
2)插入節(jié)點(diǎn):
wite() 將任意的字符串插入到文檔中
appendChild() 向元素中添加新的子節(jié)點(diǎn)练湿,作為最后一個(gè)子節(jié)點(diǎn)
insertBefore()向指定的已有的節(jié)點(diǎn)之前插入新的節(jié)點(diǎn)
newItem:要插入的節(jié)點(diǎn)
exsitingItem:參考節(jié)點(diǎn)?
需要參考父節(jié)點(diǎn)
例子:
創(chuàng)建節(jié)點(diǎn)
var div=document.createElement("div");
? ? ? ? console.log(div);
添加圖簽
<button onclick="addImg();">添加圖片</button>
<div id="container"></div>
<script type="text/javascript">
? ? ? ? 添加圖片
? ? ? ? functionaddImg()
{
? ? ? ? ? ? 創(chuàng)建img元素
? ? ? ? ? ? var img = document.createElement("img");
? ? ? ? ? ? 設(shè)置屬性第一種方式
? ? ? ? ? ? 設(shè)置img元素的src屬性
? ? ? ? ? ? img.src =
"http://www.baidu.com/img/bd_logo1.png";
? ? ? ? ? ? 設(shè)置屬性第二種方式
? ? ? ? ? ? setAttribute() 方法添加指定的屬性猴仑,并為其賦指定的值。
? ? ? ? ? ? 設(shè)置img元素的src屬性
? ? ? ? ? ? img.setAttribute('src', 'http://www.baidu.com/img/bd_logo1.png');
? ? ? ? ? ? img.style.width= '540px';
? ? ? ? ? ? img.style.height= '258px';
? ? ? ? ? ? 獲取div元素
? ? ? ? ? ? var container= document.getElementById("container");
? ? ? ? ? ? 將img元素節(jié)點(diǎn)追加到div元素中
? ? ? ? ? ? container.appendChild(img);
? ? ? ? }
? ? </script>
5.間接查找節(jié)點(diǎn)
方法|屬性? ? ? ? ? ? ? 描述
childNodes? ? ? ? 返回元素的一個(gè)子節(jié)點(diǎn)的數(shù)組
firstChild? ? ? ? ? ? 返回元素的第一個(gè)子節(jié)點(diǎn)
lastChild? ? ? ? ? ? ? 返回元素的最后一個(gè)子節(jié)點(diǎn)
nextSibling? ? ? ? 返回元素的下一個(gè)兄弟節(jié)點(diǎn)
parentNode? ? ? ? 返回元素的父節(jié)點(diǎn)
previousSibling? 返回元素的上一個(gè)兄弟節(jié)點(diǎn)
例子:
<body>
? ? <div id="box">
? ? ? ? <div>我是大哥</div>
? ? ? ? <div class="er">我是二哥
? ? ? ? ? ? <p>我是p1</p>
? ? ? ? ? ? <p>我是p2</p>
? ? ? ? ? ? <p>我是p3</p>
? ? ? ? </div>
? ? ? ? <div>我是三哥</div>
? ? </div>
? ? <script>
? ? ? ? var div2=document.getElementsByClassName("er")[0];
? ? ? ? childNodes 返回元素的一個(gè)子節(jié)點(diǎn)的數(shù)組? 包括文本節(jié)點(diǎn)
? ? ? ? console.log(div2.childNodes); //所有子節(jié)點(diǎn)
? ? ? ? console.log(div2.children);? //元素節(jié)點(diǎn)
? ? ? ? firstChild 返回元素的第一個(gè)子節(jié)點(diǎn)
? ? ? ? console.log(div2.firstChild);? //文本節(jié)點(diǎn)
? ? ? ? lastChild 返回元素的最后一個(gè)子節(jié)點(diǎn)
? ? ? ? console.log(div2.lastChild);? //文本節(jié)點(diǎn)
? ? ? ? 地一個(gè)和最后一個(gè)元素子節(jié)點(diǎn)
? ? ? ? console.log(div2.firstElementChild);? //p1
? ? ? ? console.log(div2.lastElementChild);? //p3
? ? ? ? nextSibling 返回元素的下一個(gè)兄弟節(jié)點(diǎn)
? ? ? ? console.log(div2.nextSibling);
? ? ? ? previousSibling 返回元素的上一個(gè)兄弟節(jié)點(diǎn)
? ? ? ? console.log(div2.previousSibling);
? ? ? ? 上一個(gè)|下一個(gè)元素兄弟節(jié)點(diǎn)
? ? ? ? console.log(div2.nextElementSibling);
? ? ? ? console.log(div2.previousElementSibling);
? ? ? ? parentNode 返回元素的父節(jié)點(diǎn)
? ? ? ? console.log(div2.parentNode);
? ? </script>
6.替換節(jié)點(diǎn)
方法:replaceChild(newNode, oldNode) 描述:用新的節(jié)點(diǎn)替換舊的節(jié)點(diǎn)
第一種:獲取父節(jié)點(diǎn)肥哎,然后用新的節(jié)點(diǎn)替換舊節(jié)點(diǎn)
? ? ? 父節(jié)點(diǎn).replaceChild(newNode, oldNode);
第二種:通過(guò)舊節(jié)點(diǎn)定位到父節(jié)點(diǎn)辽俗,然后用新的節(jié)點(diǎn)替換舊節(jié)點(diǎn)
oldNode.parentNode.replaceChild(newNode, oldNode);
例子:
<div id="dv">
<button type="button"id="btn">我是一個(gè)按鈕</button><br/>
<button type="button"onclick="replace_child();">替換</button>
<script type="text/javascript">
? ? ? ? functionreplace_child()
{
? ? ? ? ? ? 第一種方式:獲取父節(jié)點(diǎn),然后用新的節(jié)點(diǎn)替換舊節(jié)點(diǎn)
? ? ? ? ? ? 獲取button元素
? ? ? ? ? ? var btn = document.getElementById('btn');
? ? ? ? ? ? 創(chuàng)建p元素
? ? ? ? ? ? var p = document.createElement('p');
? ? ? ? ? ? p.innerText= '我是一個(gè)段落';
? ? ? ? ? ? 獲取到父元素div用p元素替換button元素
? ? ? ? ? ? var dv = document.getElementById('dv');
? ? ? ? ? ? dv.replaceChild(p,btn);
? ? ? ? ? ? 第二種方式:通過(guò)舊節(jié)點(diǎn)定位到父節(jié)點(diǎn)篡诽,然后用新的節(jié)點(diǎn)替換舊節(jié)點(diǎn)
? ? ? ? ? ? 用p元素替換button元素
? ? ? ? ? ? btn.parentNode.replaceChild(p, btn);
? ? ? ? }
? ? </script>
7.克隆節(jié)點(diǎn)
var 復(fù)制好的節(jié)點(diǎn) = 被復(fù)制的節(jié)點(diǎn).cloneNode([true/false]);
true:深度克隆崖飘,可以克隆結(jié)構(gòu)和內(nèi)容
false(默認(rèn)值):只克隆結(jié)構(gòu)
方法:cloneNode() 描述:復(fù)制節(jié)點(diǎn)
例子:
<ul id="src_ul">
? ? ? ? <li>red</li>
? ? ? ? <li>yellow</li>
? ? ? ? <li>blue</li>
</ul>
? ? <button onclick="copy();">復(fù)制</button>
<hr />
<div id="copy_div"></div>
<script type="text/javascript">
? ? ? ? functioncopy() {
? ? ? ? ? ? 獲取要復(fù)制的元素
? ? ? ? ? ? var src_ul = document.getElementById("src_ul");
? ? ? ? ? ? 復(fù)制true深度克隆,可以克隆結(jié)構(gòu)和內(nèi)容
? ? ? ? ? ? var copy_ul = src_ul.cloneNode(true);
? ? ? ? ? ? 將復(fù)制好的內(nèi)容添加到div中
? ? ? ? ? ? document.getElementById("copy_div").appendChild(copy_ul);
? ? ? ? }
? ? </script>
8.刪除節(jié)點(diǎn)
方法:removeChild()? 描述:從元素中移除子節(jié)點(diǎn)
第一種:獲取父節(jié)點(diǎn)杈女,然后刪除子節(jié)點(diǎn)
? ? ? 父節(jié)點(diǎn).removeChild(childNode);
第二種:通過(guò)舊節(jié)點(diǎn)定位到父節(jié)點(diǎn)朱浴,然后刪除子節(jié)點(diǎn)
childNode.parentNode.removeChild(childNode);
9.屬性操作
方法|屬性? ? ? ? ? ? ? ? ? ? ? ? 描述
getAttribute()? ? ? ? ? ? 返回指定元素的屬性值
getAttributeNode? ? ? ? ()返回指定屬性節(jié)點(diǎn)
element.id? ? ? ? ? ? ? ? ? ? 設(shè)置或者返回元素的 id
setAttribute()? ? ? ? ? ? 設(shè)置或者改變指定屬性并指定值
setAttributeNode()? ? ? ? 設(shè)置或者改變指定屬性節(jié)點(diǎn)
element.style? ? ? ? ? ? ? ? 設(shè)置或返回元素的樣式屬性
element.className? ? ? ? ? ? 設(shè)置或返回元素的class屬性
element.classList? ? ? ? ? ? ? ? ? 返回元素的類名
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
? ? <style>
? ? ? ? ul{
? ? ? ? ? ? width:500px;
? ? ? ? ? ? height:500px;
? ? ? ? ? ? border:1px dashed deeppink;
? ? ? ? }
? ? ? ? input{
? ? ? ? ? ? border:1px solid deeppink;
? ? ? ? ? ? height:20px;
? ? ? ? ? ? vertical-align:top; /*同行的行內(nèi)元素的上下的對(duì)其方式*/
? ? ? ? }
? ? ? ? input:nth-child(2){
? ? ? ? ? ? background: deeppink;
? ? ? ? ? ? color: #fff;
? ? ? ? ? ? height:24px;
? ? ? ? ? ? vertical-align:top;
? ? ? ? }
? ? </style>
</head>
<body>
? ? <input type="text" name="text" id="text">
? ? <input type="button" id="btn" value="提交"> <span id="span"></span>
? ? <ul id="ul"></ul>
? ? ? ? var btn=document.getElementById("btn");
? ? ? ? var text=document.getElementById("text");
? ? ? ? var ul=document.getElementById("ul");
? ? ? ? var span=document.getElementById("span");
? ? ? ? function fn(){
? ? ? ? ? ? var str=text.value;
? ? ? ? ? ? 判斷值是否為空,如果為空提示不允許為空,如果不為空,把input置為空
? ? ? ? ? ? if(str==""){
? ? ? ? ? ? ? ? span.innerHTML="不能為空";
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? text.innerHTML=""; 表單元素要使用value
? ? ? ? ? ? ? ? text.value="";
? ? ? ? ? ? }
? ? ? ? ? ? //1.創(chuàng)建一個(gè)li節(jié)點(diǎn)
? ? ? ? ? ? var li=document.createElement("li");
? ? ? ? ? ? 2.把值放入li節(jié)點(diǎn)中
? ? ? ? ? ? li.innerHTML=str;
? ? ? ? ? ? 3.把li節(jié)點(diǎn)插入到ul中
? ? ? ? ? ? ul.insertBefore(li,ul.firstElementChild);
? ? ? ? }
? ? ? ? btn.onclick=fn;
? ? ? ? text.onfocus=function(){
? ? ? ? ? ? span.innerHTML="";
? ? ? ? };
? ? </script>
</body>
</html>