1. 程式人生 > >javascript介紹及如何在html中使用js與jQuery

javascript介紹及如何在html中使用js與jQuery

js是世界上最流行的程式語言,這一點毋庸置疑;它是一種弱型別,動態指令碼程式語言,被廣泛用於HTML,web技術中。

囉嗦:一直在學後端技術,現在發現js基本上不會用,因為現在不使用jsp做前端頁面,所以到處都是js對靜態頁面的封裝,然後實現前後端互動。現在發現js功能真強大啊,可以對頁面各種修改,真是前端一個js技術就夠了。

其實當我看到一大堆js的頁面時,腦子是懵的,完全不知道它該怎麼執行,但是他跟其他程式語言也是類似的,有函式,變數等等。好了不廢話了。

一、js在HTML中的使用:

1、js可以定義在html的head和body內部,在通過<script>標籤來引入,通過script標籤可以引入js檔案,也可以直接在標籤內部寫js程式碼

2、js是按頁面定義的位置從上到下識別的。識別的含義並不是執行,而是對定義的函式進行編譯。那麼它要如何執行呢?

2.1、最簡單的方式就是直接寫到HTML的標籤中:

<html> <body onload="func1();func2();func3();"></body> </html>

2.2、在通過window物件呼叫:

    <script>
        function func1(){
            alert("this window.onload");

        window.onload = func1;//不要括號 多個呼叫的方式為 window.onload = function(){func1();func2()}
    </script>

2.3 立即執行函式:

    方式一
    (function(){alert(1);}());
    方式二
    (function(){alert(1);})();
    方式三 在前面加運算子,最常見的是!與void
    !function(){alert(1);}();
    void function(){alert(2);}();

2.4 由於js的window.load方法需要等到DOM全部載入完成以後才執行,它是一種最嚴謹的頁面載入完在執行方法的方法,jQuery是對js的封裝和修改,在jQuery中可以通過這方式執行:

//這種方法僅需要加在所有的DOM結構就執行此方法

    $(document).ready(function(){
     alert(1);

});

//它的簡寫形式是

$(function(){

 alert(1);

});    

3、js中的函式執行順序和回撥函式

這個我看到網上說的還是很亂,親自實驗了一下如下:

首先函式定義大體上分了一下兩種,一種是定義式函式,一種是賦值式函式

    //“定義式”函式定義
    function Fn1(){
    alert("Hello World!");
    }
    //“賦值式”函式定義
    var Fn2 = function(){
    alert("Hello wild!");
    }

頁面在載入過程中,會對頁面上或載入的js檔案進行掃描,如果遇到定義式函式,則進行預處理,處理完成後再開始由上之下執行;遇到賦值函式,則只是將函式賦值給一個變數,不進行預處理,待到呼叫的時候進行處理。如下程式碼

    //“定義式”函式定義
    Fn1();
    function Fn1(){
    alert("Hello World!");
    } //不會出錯
    //“賦值式”函式定義
    Fn2();
    var Fn2 = function(){
    alert("Hello wild!");
    } //會報找不到這個函式的錯誤

第二就是內部函式的執行順序(內部順序執行)要早於onload的呼叫

    <!DOCTYPE html>
    <html>
    <body onload="func1();">
    <p >
    在onload之前顯示
    </p>
    <script>
    function func1(){
       alert("this window.onload1");
    }
    function func2(){
       alert("this window.onload2");
    }
    func2();
    </script>
    </body>
    </html>    

最後一個問題就是自執行函式:

特殊情況1、當自執行函式前有賦值式函式,且前面沒有函式執行,那麼會先執行自執行函式,然後執行前面定義的最後一個賦值式函式,且其它賦值函式都無法呼叫。

4、js中的物件和屬性

js中的物件,全域性變數,和方法都會自動變為window的物件,這個大家參考w3c上的學習一下,內容太多,不會就查。http://www.w3school.com.cn/jsref/index.asp

二、jQuery的使用:

我們都知道js功能強大但是實現起來複雜,程式設計師都是比較懶的,我們都想拿過來直接用的方法,因此便有了封裝了js的一些框架,jQuery便是比較流行的用java都用jQuery。(當然在jQuery中所有js方法都可以使用)

1、我們通過在HTML前面引入一個jquery.min.js的檔案就可以在下面的js中寫jquery程式碼了;

2、jQuery封裝的方法如選擇器的使用,等等操作請參考http://www.jb51.net/shouce/jquery1.82/

3、js中如何建立自定物件在這說一下吧,做個結尾

首先說一下區域性變數和全域性變數:

    var 不一定是用來定義區域性變數的
    jscript的全域性變數和區域性變數的分界是這樣的:

過程體(包括方法function,物件Object o ={})外的所有變數不管你有沒有加var保留字,他都是全域性變數          

而在過程體內(包括方法function(){},物件Object o={})內的物件加var保留字則為區域性變數,而不加var保留字即為全域性變數

這解釋很清晰吧。

我們可以通過下面三種方式建立物件:

    自變數宣告:
    var obj = {
      k1:value1,//屬性;
      k2:value,
      func: function(){};//方法
     }
    物件中的鍵,可以使任何資料型別,但一般用作普通變數名(不需要"")即可。
    物件中的值,可以使任何資料型別,但,字串的話必須用""包裹
    多組建值對之間用英文逗號分隔,鍵值對的鍵與值之間用英文冒號分隔;

new關鍵字

    var list = new Object();
    lisi.name = "李四";
    lisi.say = function(){
    console.log("我是"+this.name);
     }

    function person(firstname,lastname,age,eyecolor)
    {
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    }

直接通過函式構造,也算是new的一種

var student = new person("張三","小明","18","block");

最後我們如何讀取物件中屬性和方法呢?

1、運算子:如果在物件內部: this.屬性名。this.方法名();

               在物件外部: 物件名.屬性名。 物件名.方法名();

2、通過  ["key"] 呼叫,物件名["屬性名"]     物件名["方法名"]();

提示:如果key中包含特殊字元,則無法使用第一種方式,必須使用第二種;

  物件內部寫變數名預設為全域性變數,所以要呼叫自身物件的屬性必須用this關鍵字

最後、刪除物件中的屬性或方法:

delete 物件名.屬性名; delete 物件名.方法名();
---------------------
作者:CJNusun
來源:CSDN
原文:https://blog.csdn.net/loverycjj/article/details/78301517
版權宣告:本文為博主原創文章,轉載請附上博文連結!