day25-Javascript-2

一、js基礎(chǔ)語法2

1.函數(shù)

• 1)函數(shù)的聲明：function 函數(shù)名(形參列表){函數(shù)體}
• 2)函數(shù)的調(diào)用：和python一樣
• 3)函數(shù)的參數(shù)：位置參數(shù)、參數(shù)默認(rèn)值有效；關(guān)鍵字參數(shù)無效；
  • 不定長參數(shù)：聲明的時(shí)候不需要形參，然后在函數(shù)體中通過arguments獲取所有實(shí)參
• 4)匿名函數(shù)：function(形參列表){函數(shù)體}
• 5)自調(diào)用函數(shù)：(function(形參列表){函數(shù)體})()

2.對(duì)象

• 對(duì)象中主要包含對(duì)象屬性和對(duì)象方法
• 1)創(chuàng)建對(duì)象：
  • a.通過聲明對(duì)象字面量來創(chuàng)建對(duì)象：
    • 變量 = 對(duì)象字面量
    • 通過對(duì)象調(diào)用對(duì)象方法時(shí)，方法中的this指向當(dāng)前對(duì)象，和python中self功能一樣
  • b.通過不同的構(gòu)造方法來創(chuàng)建不同的對(duì)象：
    • 變量 = new 構(gòu)造函數(shù)()

3.prototype

• 類.prototype.屬性名 = 值：給指定類型的所有對(duì)象添加屬性

二、DOM操作

1.DOM(Document Object Model，文檔對(duì)象模型)

• js中有一個(gè)系統(tǒng)提供的對(duì)象叫document，指向整個(gè)網(wǎng)頁的內(nèi)容部分
• HTML中的每一個(gè)標(biāo)簽，在js中都是document下面的節(jié)點(diǎn)，類型是object

2.DOM操作

• 2.1-獲取節(jié)點(diǎn)：指的是在js中獲取html中的標(biāo)簽
  • 1)根據(jù)id獲取標(biāo)簽對(duì)應(yīng)的節(jié)點(diǎn)
    • document.getElementById(id值)：返回一個(gè)標(biāo)簽對(duì)象
  • 2)根據(jù)class值獲取節(jié)點(diǎn)
    • document.getElementsByClassName(class屬性值)：返回一個(gè)數(shù)組
  • 3)根據(jù)標(biāo)簽名獲取節(jié)點(diǎn)
    • document.getElementsByTagName(標(biāo)簽名)：返回一個(gè)數(shù)組
  • 4)獲取父節(jié)點(diǎn)
    • 子節(jié)點(diǎn).parentElement()：返回一個(gè)節(jié)點(diǎn)
  • 5)獲取子節(jié)點(diǎn)
    • 父節(jié)點(diǎn).firstElementChild；獲取第一個(gè)子節(jié)點(diǎn)
    • 父節(jié)點(diǎn).lastElementChild；獲取最后一個(gè)子節(jié)點(diǎn)
• 2.2-創(chuàng)建節(jié)點(diǎn)對(duì)象
  • document.createElement(標(biāo)簽名)；創(chuàng)建指定標(biāo)簽對(duì)應(yīng)的節(jié)點(diǎn)
• 2.3-添加節(jié)點(diǎn)
  • 父標(biāo)簽.appendChild(新標(biāo)簽)；在指定的標(biāo)簽最后添加一個(gè)新的子標(biāo)簽
  • 父標(biāo)簽.insertBefore(新標(biāo)簽,標(biāo)簽2)；在父標(biāo)簽中標(biāo)簽2的前面插入新的標(biāo)簽
• 2.4-刪除節(jié)點(diǎn)
  • 父節(jié)點(diǎn).removeChild(子節(jié)點(diǎn))；刪除父節(jié)點(diǎn)中指定的子節(jié)點(diǎn)
  • 節(jié)點(diǎn).remove()：刪除指定節(jié)點(diǎn)
• 2.5-拷貝節(jié)點(diǎn)
  • 節(jié)點(diǎn).cloneNode()；拷貝指定節(jié)點(diǎn)產(chǎn)生一個(gè)新的節(jié)點(diǎn)(新節(jié)點(diǎn)和原節(jié)點(diǎn)一樣)，淺拷貝，不會(huì)復(fù)制子標(biāo)簽
  • 節(jié)點(diǎn).cloneNode(true)；深拷貝(會(huì)復(fù)制子標(biāo)簽)
• 2.6-替換節(jié)點(diǎn)
  • innerText；雙標(biāo)簽中的文本內(nèi)容
  • innerHTML；雙標(biāo)簽中的標(biāo)簽內(nèi)容

三、BOM操作

1.BOM(Browser Object Model，瀏覽器對(duì)象模型)

• js中有一個(gè)默認(rèn)的內(nèi)置對(duì)象叫window用來表示瀏覽器
• 在js中聲明的所有的全局變量都是綁定在window上的屬性
• 1.1-window基本操作
  • 1)window.open(url)；返回一個(gè)新的窗口對(duì)象
  • 2)window.open(url,'_self')；在當(dāng)前頁面中刷新出新的窗口，默認(rèn)值_blank
  • 3)window.open(url,'','width=,height=')
  • 4)窗口對(duì)象.close()；關(guān)閉指定的窗口
  • 5)窗口對(duì)象.moveTo(x坐標(biāo),y坐標(biāo))；移動(dòng)窗口
  • 6)獲取窗口的寬度和高度：
    • innerWidth/innerHeight；取瀏覽器內(nèi)容可見部分的寬度和高度
    • outerWidth/outerHeight；取整個(gè)瀏覽器的寬度和高度

2.彈框

• window.alert(提示信息)；提示信息+確定按鈕
• window.confirm(問題信息)；問題信息+確定按鈕+取消按鈕；返回值是true(確定)或false(取消)
• window.prompt(提示信息,輸入框默認(rèn)值)；提示信息+輸入框+確定按鈕+取消按鈕；如果取消返回值是null，如果點(diǎn)確定，返回值是輸入框輸入的內(nèi)容

3.定時(shí)操作

• window.setInterval(函數(shù),時(shí)間)；每隔指定時(shí)間(毫秒)就調(diào)用一次指定的函數(shù)，返回一個(gè)定時(shí)器對(duì)象
• window.clearInterval(定時(shí)對(duì)象)；清除指定定時(shí)對(duì)象對(duì)應(yīng)的定時(shí)任務(wù)
• window.setTimeout(函數(shù),時(shí)間)；指定時(shí)間后就調(diào)用一次函數(shù)，返回一個(gè)定時(shí)對(duì)象
• window.clearTimeout(定時(shí)對(duì)象)；清除定時(shí)任務(wù)