天天看點

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

這樣是把網站分為了上中下三部分,最上面是頭部,中間是主要内容,下面是底部的資訊

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

當滑動右邊滾動條的時候其他區域保持不變隻有aaa占的部分會發生滾動

實作代碼:

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

這種情況是當滑動滾輪的時候,左邊菜單不會跟着走,即:

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

因為滑動,左邊已經沒有菜單,實作代碼如下:

其實這裡如果想要和布局一有相同的效果隻需要更改一個地方就可以實作:(這種設定用的也是最多的)

這裡需要記住一個位址:

http://fontawesome.io/

這個位址中存放了我們需要的各種圖示

如下所示

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

将檔案下載下傳下來

通過在頭部導入:

<link rel="stylesheet" href="font-awesome/css/font-awesome.css" />

做出的效果如下:

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM
CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

當把滑鼠放在頭像的時候顯示資料和登出資訊,圖檔中的圖示就是從下載下傳的圖示中直接引用的

實作代碼如下:

通常情況下我寫函數是如下所示:

如果寫成匿名函數如下所示:

上面的為普通函數,下面的為自執行函數

JSON.stringify(obj)  序列化即将對象轉換為字元串

JSON.parse(str)      反序列化即将字元串轉換為對象類型

decodeURI()           URI中未轉義的字元

decodeURIComponent()  URI元件中的未轉義字元

encodeURI()           URI中的轉義字元

encodeURIComponent()  轉義URI元件中的字元

escape()              對字元串轉義

unescape()            給轉義字元串解碼

URIError              由URI的編碼和解碼方法抛出

示範例子如下:

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

是以轉義的一個應用就是:将資料轉義後儲存在cookie

python:

   val=eval(表達式)

      =exec(執行代碼)

JavaScript

   eval是python中eval和exec的集合

Date類

var d = new Date()

d.getXXX 表示擷取

d.setXXX 表示設定

其他語言大部分是以代碼塊為作用域

 public void Func(){

        if(1==1){

            string name = "C#"

        }

        console.writeline(name)

    }

    如果按照上面的執行Func()調用函數就會報錯,因為這裡是以代碼塊為作用域

    即if後面的{}為作用域,name是在if的代碼塊裡定義的是以當出了這個代碼塊就無法

    找到定義的name

    是以代碼需要改為如下:

        public void Func(){

            console.writeline(name)

def func():

        if 1==1:

            name = "python"

        print(name)

    func()

    python的作用域和C#中就不相同了,python的這種調用方式就不會報錯

    因為在python中是以函數作為作用域

作用域也是以函數作為作用域

    function func(){

            var name = "js"

        console.log(name)

關于js的作用域的一個總結:

以函數作為作用域

函數的作用域在函數未被調用之前,已經建立

函數的作用域存在作用域鍊,并且也是在被調用之前建立

函數内部變量提前聲明

function Foo(n){

    this.name=n;

}

var obj = new Foo('ww');

this代指對象(類似python 中的self)

建立對象時,new函數()

#Foo的原型

Foo.prototype={

    "sayName":function(){

        console.log(this.name)

調用

obj1 = new Foo('we')

obj1.sayName()

obj2=new Foo('ss')

obj2.sayName()

直接查找:

var obj = document.getElementById(‘i1’)

間接查找:

文本内容操作:

innerText   僅文本

innerHTM    全部内容

value

   input  value擷取目前标簽中的值

   select value擷取選中的value值(selectedIndex)

   textarea value擷取目前變遷中的值

下面可以通過上述的内容實作一個小功能

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

當輸入框獲得焦點的時候輸入框中内容清空,離開恢複

在最新的浏覽器上可以通過如下實作:

<input type="text" placeholder="請輸入關鍵字" >

obj.attributes    擷取所有的屬性

obj.getAttribute  設定屬性

obj.removeAttribute 删除屬性

代碼例子:

第一種方式:以字元串形式建立

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

這樣就實作了點選添加,依次添加一個輸入框

document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)

這裡有三個參數:beforeBegin、afterBegin、beforeEnd、afterEnd

分别表示在不同的位置插入

第二種方式:(以對象方式建立)

和方式一實作相同的效果

console.log  輸出框

alert        彈出框

confirm     确認框

//url重新整理

location.href       擷取url

location.href       重定向,跳轉

locatioin.reload    重新加載,重新整理

//定時器

setInterval         多次定時器

clearInterval       清除多次定時器

setTimeout          單次定時器

clearTimeout        清除單次定時器

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

我們之前寫html代碼都是最普通的Dom0的寫法,這種不建議工作中這樣寫,工作中要實作行為,樣式,結構相分離的頁面,即js、css、html相分離

代碼例子如下:

這樣就實作了三部分的分離,而不用和之前之前,将js的調用還放在html語言中

再寫一個例子:

實作的效果就是如下:

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

滑鼠放在那一行,機會有紅色的背景色

離開的時候紅色機會消失

小結:

這裡可以看出綁定事件兩種方式:

直接綁定:onclick=“xx()”

先擷取dom對象,然後在綁定

document.getElementById(‘xx’).onclick

this 目前觸發事件的标簽

第一種綁定方式:

<input id="i1" type="button" onclick="ClickOn(this)">

function ClickOn(self){

    //self 目前點選的标簽

第二種綁定方式

<input id="i1" type="button">

document.getElementById("i1").onclick=function(){

    //this 代指目前點選的标簽

第三種綁定方式(dom2)

下面先通過一個例子了解:

這樣就實作了點選同時執行兩個事件

最後的一個參數需要注意:

false:冒泡模型

true:捕捉模型

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

通過下面例子了解冒泡和捕捉模型

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

當點選粉色區域的時候先出的是content後出現main

因為參數設定的是flase,是以采用的是冒泡

如果參數設定為true

CSS補充之--頁面布局、js補充,dom補充CSS補充之--頁面布局JavaScript補充DOM

當點選粉色區域的時候先出的是main後出現content

所有的努力都值得期許,每一份夢想都應該灌溉!