0417前端筆記——孤嘆汝念之殤

一.時間函數(shù)

setTimsetTimeout(): 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。

通過返回的標識也可以clearTimeout(id)來清除指定函數(shù)的執(zhí)行。

eout(): 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達式。

通過返回的標識也可以clearTimeout(id)來清除指定函數(shù)的執(zhí)行。

2.方法：

重復執(zhí)行定時器

? ? ? ? ? ? setInterval

? ? ? ? ? ? 每隔多長時間執(zhí)行一次函數(shù),重復行

? ? ? ? ? ? setInterval(function(){

? ? ? ? ? ? ? },時間)

? ? ? ? ? 延遲執(zhí)行定時器

? ? ? ? ? setTimeout()

? ? ? ? ? 延遲多長時間以后執(zhí)行一次

? ? ? ? ? setTimeout(function(){

? ? ? ? ? ? ...要執(zhí)行的代碼..

? ? ? ? ? },時間)

? ? ? ? ? 時間:毫秒數(shù)

二.history對象

1.初步理解

history 對象是歷史對象。包含用戶（在瀏覽器窗口中）訪問過的 URL。history 對象是window 對象的一部分，可通過 window.history 屬性對其進行訪問。

history對象的屬性：length，返回瀏覽器歷史列表中的 URL 數(shù)量。

2.history對象的方法：

back()：加載history 列表中的前一個 URL。

forward()：加載歷史列表中的下一個 URL。當頁面第一次訪問時，還沒有下一個url。

go(number|URL): URL 參數(shù)使用的是要訪問的 URL。而 number 參數(shù)使用的是要訪問的 URL 在 History 的 URL 列表中的相對位置。go(-1)，到上一個頁面。

3.例子

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <title>history03</title>

</head>

<body>

? ? <button id="btn1">回到上一個界面</button>

? ? <button id="btn2">回到上上一個界面</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 對象

1.初步理解：

location 對象是window對象之一，提供了與當前窗口中加載的文檔有關(guān)的信息，還提供了一些導航功能。也可通過window.location 屬性來訪問。

location 對象的屬性href：設置或返回完整的 URL

2.location 對象的方法

reload()：重新加載當前文檔。

replace()：用新的文檔替換當前文檔。

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() {

? ? ? ? ? // 用新的文檔替換當前文檔

? ? ? ? ? alert(window.location.href); // 獲取完整的url

? ? ? ? ? window.location.;

? ? ? ? ? // 用新的文檔替換當前文檔

window.location.replace("http://www.baidu.com");

? ? ? }

? ? </script>

四.DOM

1.初步了解

DOM 文檔對象模型

? ? ? ? ? ? DOM賦予我們可以操作頁面的能力

? ? ? ? ? ? 可以創(chuàng)建,插入,修改,刪除元素等等

? ? ? ? ? Web 瀏覽器生成一個樹型結(jié)構(gòu)，用來表示頁面內(nèi)部結(jié)構(gòu)。DOM 將這種樹型結(jié)構(gòu)理解為由節(jié)點組成，組成一個節(jié)點樹。

? ? ? ? 2 節(jié)點:

節(jié)點類型HTML內(nèi)容例如

文檔節(jié)點文檔本身整個文檔 document

元素節(jié)點所有的HTML元素<a>、<div>、<p>

屬性節(jié)點HTML元素內(nèi)的屬性id、href、name、class

文本節(jié)點元素內(nèi)的文本 hello

注釋節(jié)點HTML中的注釋<!-- -->

? ? ? ? ? ? html頁面中的所有內(nèi)容的都是節(jié)點,而dom就是用來操作節(jié)點

? ? ? ? ? 3. 獲取節(jié)點:

? ? ? ? ? ? ? ? 1.document.getElementById("id值")

? ? ? ? ? ? ? ? ? ? 根據(jù)元素的id屬性值,獲取到唯一一個元素節(jié)點

? ? ? ? ? ? ? ? 2.主語.getElementsByTagName("元素名")

? ? ? ? ? ? ? ? ? ? 根據(jù)元素名字獲取一組元素

? ? ? ? ? ? ? ? ? ? 主語:document|父節(jié)點

? ? ? ? ? ? ? ? 3.主語.getEelementsByClassName("class屬性值")

? ? ? ? ? ? ? ? ? ? 根據(jù)與class屬性值獲取一組元素

? ? ? ? ? ? ? ? 4.getElementsByName()

? ? ? ? ? ? ? ? 根據(jù)name屬性值獲取dom對象數(shù)組，常用于多選獲取值

例子：

var div1=document.getElementById("div1");

? ? div1.style.background="red";

? ? 根據(jù)標簽名字獲取一組元素,注意要一個一個節(jié)點操作? 主語是document

? var divs=document.getElementsByTagName("p");

? ? ? divs[0].style.color="blue";

? ? ? 根據(jù)標簽名字獲取節(jié)點? 主語:父節(jié)點

? ? ? 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é)點和插入節(jié)點


1）創(chuàng)建節(jié)點:createElement()

? ? ? ? ? 參數(shù):元素標簽名

? ? ? ? 主語:document

? ? ? ? ? 返回值:新節(jié)點

? ? ? ? 插入節(jié)點 appendChild()

? ? ? ? ? 追加元素,在父節(jié)點中的最后位置追加

? ? ? ? ? 參數(shù):要插入的節(jié)點

? ? ? ? ? 主語:父節(jié)點

? ? ? ? 返回值:追加的節(jié)點

? ? ? ? 插入節(jié)點insertBefore(childNode1,ChildNode2)

? ? ? ? 參數(shù):

? ? ? ? ? ? childNode1 要插入的節(jié)點

? ? ? ? ? ? ? ChildNode2 父節(jié)點中的指定子節(jié)點

? ? ? ? ? 主語:父節(jié)點

? ? ? ? ? 返回值:返回第一個參數(shù),要插入的節(jié)點

? ? ? ? ? 注意:ChildNode2參數(shù)的值為null,undefined,實現(xiàn)的是追加的效果

2）插入節(jié)點：

wite（） 將任意的字符串插入到文檔中

appendChild() 向元素中添加新的子節(jié)點，作為最后一個子節(jié)點

insertBefore()向指定的已有的節(jié)點之前插入新的節(jié)點

newItem：要插入的節(jié)點

exsitingItem：參考節(jié)點?

需要參考父節(jié)點

例子：

創(chuàng)建節(jié)點

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");

? ? ? ? ? ? 設置屬性第一種方式

? ? ? ? ? ? 設置img元素的src屬性

? ? ? ? ? ? img.src =

"http://www.baidu.com/img/bd_logo1.png";


? ? ? ? ? ? 設置屬性第二種方式

? ? ? ? ? ? setAttribute() 方法添加指定的屬性，并為其賦指定的值。

? ? ? ? ? ? 設置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é)點追加到div元素中

? ? ? ? ? ? container.appendChild(img);

? ? ? ? }

? ? </script>

5.間接查找節(jié)點

方法|屬性? ? ? ? ? ? ? 描述

childNodes? ? ? ? 返回元素的一個子節(jié)點的數(shù)組

firstChild? ? ? ? ? ? 返回元素的第一個子節(jié)點

lastChild? ? ? ? ? ? ? 返回元素的最后一個子節(jié)點

nextSibling? ? ? ? 返回元素的下一個兄弟節(jié)點

parentNode? ? ? ? 返回元素的父節(jié)點

previousSibling? 返回元素的上一個兄弟節(jié)點

例子：

<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 返回元素的一個子節(jié)點的數(shù)組? 包括文本節(jié)點

? ? ? ? console.log(div2.childNodes); //所有子節(jié)點

? ? ? ? console.log(div2.children);? //元素節(jié)點

? ? ? ? firstChild 返回元素的第一個子節(jié)點

? ? ? ? console.log(div2.firstChild);? //文本節(jié)點

? ? ? ? lastChild 返回元素的最后一個子節(jié)點

? ? ? ? console.log(div2.lastChild);? //文本節(jié)點

? ? ? ? 地一個和最后一個元素子節(jié)點

? ? ? ? console.log(div2.firstElementChild);? //p1

? ? ? ? console.log(div2.lastElementChild);? //p3

? ? ? ? nextSibling 返回元素的下一個兄弟節(jié)點

? ? ? ? console.log(div2.nextSibling);

? ? ? ? previousSibling 返回元素的上一個兄弟節(jié)點

? ? ? ? console.log(div2.previousSibling);

? ? ? ? 上一個|下一個元素兄弟節(jié)點

? ? ? ? console.log(div2.nextElementSibling);

? ? ? ? console.log(div2.previousElementSibling);

? ? ? ? parentNode 返回元素的父節(jié)點

? ? ? ? console.log(div2.parentNode);

? ? </script>

6.替換節(jié)點

方法：replaceChild(newNode, oldNode) 描述：用新的節(jié)點替換舊的節(jié)點

第一種：獲取父節(jié)點，然后用新的節(jié)點替換舊節(jié)點

? ? ? 父節(jié)點.replaceChild(newNode, oldNode);

第二種：通過舊節(jié)點定位到父節(jié)點，然后用新的節(jié)點替換舊節(jié)點

oldNode.parentNode.replaceChild(newNode, oldNode);

例子：

<div id="dv">

<button type="button"id="btn">我是一個按鈕</button><br/>

<button type="button"onclick="replace_child();">替換</button>

<script type="text/javascript">

? ? ? ? functionreplace_child()

{

? ? ? ? ? ? 第一種方式：獲取父節(jié)點，然后用新的節(jié)點替換舊節(jié)點

? ? ? ? ? ? 獲取button元素

? ? ? ? ? ? var btn = document.getElementById('btn');

? ? ? ? ? ? 創(chuàng)建p元素

? ? ? ? ? ? var p = document.createElement('p');

? ? ? ? ? ? p.innerText= '我是一個段落';

? ? ? ? ? ? 獲取到父元素div用p元素替換button元素

? ? ? ? ? ? var dv = document.getElementById('dv');

? ? ? ? ? ? dv.replaceChild(p,btn);


? ? ? ? ? ? 第二種方式：通過舊節(jié)點定位到父節(jié)點，然后用新的節(jié)點替換舊節(jié)點

? ? ? ? ? ? 用p元素替換button元素

? ? ? ? ? ? btn.parentNode.replaceChild(p, btn);

? ? ? ? }

? ? </script>

7.克隆節(jié)點

var 復制好的節(jié)點 = 被復制的節(jié)點.cloneNode([true/false]);

true：深度克隆，可以克隆結(jié)構(gòu)和內(nèi)容

false(默認值)：只克隆結(jié)構(gòu)

方法：cloneNode() 描述：復制節(jié)點

例子：

<ul id="src_ul">

? ? ? ? <li>red</li>

? ? ? ? <li>yellow</li>

? ? ? ? <li>blue</li>

</ul>

? ? <button onclick="copy();">復制</button>

<hr />

<div id="copy_div"></div>

<script type="text/javascript">

? ? ? ? functioncopy() {

? ? ? ? ? ? 獲取要復制的元素

? ? ? ? ? ? var src_ul = document.getElementById("src_ul");

? ? ? ? ? ? 復制true深度克隆，可以克隆結(jié)構(gòu)和內(nèi)容

? ? ? ? ? ? var copy_ul = src_ul.cloneNode(true);

? ? ? ? ? ? 將復制好的內(nèi)容添加到div中

? ? ? ? ? ? document.getElementById("copy_div").appendChild(copy_ul);

? ? ? ? }

? ? </script>

8.刪除節(jié)點

方法：removeChild()? 描述：從元素中移除子節(jié)點

第一種：獲取父節(jié)點，然后刪除子節(jié)點

? ? ? 父節(jié)點.removeChild(childNode);

第二種：通過舊節(jié)點定位到父節(jié)點，然后刪除子節(jié)點

childNode.parentNode.removeChild(childNode);

9.屬性操作

方法|屬性? ? ? ? ? ? ? ? ? ? ? ? 描述

getAttribute()? ? ? ? ? ? 返回指定元素的屬性值

getAttributeNode? ? ? ? ()返回指定屬性節(jié)點

element.id? ? ? ? ? ? ? ? ? ? 設置或者返回元素的 id

setAttribute()? ? ? ? ? ? 設置或者改變指定屬性并指定值

setAttributeNode()? ? ? ? 設置或者改變指定屬性節(jié)點

element.style? ? ? ? ? ? ? ? 設置或返回元素的樣式屬性

element.className? ? ? ? ? ? 設置或返回元素的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)元素的上下的對其方式*/

? ? ? ? }

? ? ? ? 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)建一個li節(jié)點

? ? ? ? ? ? var li=document.createElement("li");

? ? ? ? ? ? 2.把值放入li節(jié)點中

? ? ? ? ? ? li.innerHTML=str;

? ? ? ? ? ? 3.把li節(jié)點插入到ul中

? ? ? ? ? ? ul.insertBefore(li,ul.firstElementChild);

? ? ? ? }

? ? ? ? btn.onclick=fn;

? ? ? ? text.onfocus=function(){

? ? ? ? ? ? span.innerHTML="";

? ? ? ? };

? ? </script>

</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標準。 注意：講述HT...
    kismetajun閱讀 28,804評論 1贊 45
  • 一、JS前言 （1）認識JS 也許你已經(jīng)了解HTML標記(也稱為結(jié)構(gòu))，知道了CSS樣式(也稱為表示)，會使用HT...
    凜0_0閱讀 2,916評論 0贊 8
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品，去做同樣的事情，實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,120評論 2贊 17
  • 第1章 認識JS JavaScript能做什么？1.增強頁面動態(tài)效果(如:下拉菜單、圖片輪播、信息滾動等)2.實現(xiàn)...
    mo默22閱讀 1,503評論 0贊 5
  • 時間一天天的過去，我也在糾結(jié)中已逐漸的趨于平靜，活在當下是我此時最美好的狀態(tài)。 項目既然接了，接下來有需多的事情還...
    Serene湯先允閱讀 181評論 0贊 0

友情鏈接更多精彩內(nèi)容