前端框架jQ使用之入門知識

                                       jQuery——前端框架(jquery.js、node.js、argus.js)

它是一個快速的js庫,對js進行了封裝,用來更方便的處理HTML、event、dom以及動畫效果。

一、首先需要知道兩個概念:jQ對象&DOM對象

第一個——jQ對象:通過jQ包裝DOM對象後產生的對象,jQ對象無法使用DOM對象的任何方法,他有自己的方法。

第二個——DOM對象:(document object model)每個DOM都可以表示成一棵樹。

js:var 變量 = dom對象

jq:var $變量名 = jq對象

記住:只有jq對象才能調用jq中的方法。

二、然後,需要知道jQ的代碼風格

第一個:鏈式操作風格

1、對於同一個對象的較多操作,每一行寫一個操作。

2、對於同一個對象的少於三個操作,可以寫到一行。

3、對於多個對象的少量操作,可以每個對象寫一行,有子元素的,縮進寫上。

第二個:爲代碼添加註釋

 

三、接下來,要知道jQ對象和DOM對象的互轉

1、jQ對象轉成DOM對象

        jQ對象類似一個數組對象,可以通過[index]得到相應的DOM對象。

        var $jq = $("div");

        var dom = $jq[0];

         也可以通過get(index)方法得到相應的DOM對象。

         var $jq = $("div");

         var dom = $jq.get(0);

2、DOM對象轉成jQ對象

         只需要包DOM對象包裝起來。

         var dom = document.getElementById("div");

          var $jq = $(dom);

四、額外知識,如何解決jQ和其它庫的衝突?

第一個:可以在其它庫導入之後導入jQ庫。

jQuery.noConflict();//將變量$的控制權移交給其它js

第二個:在其它庫之前導入jQ庫。

   直接使用$()作爲其它庫的快捷方式

五、jq核心語法結構

              $(“選擇器”).方法名();——對象.方法名()      方法名中調用一個方法或者事件

這是jq的工廠函數,將dom對象變爲一個jq對象

選擇器:可以選擇到HTML中的任意元素(標籤)

掌握了以上基礎知識,就可以開始書寫舒服的jQ代碼了!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章