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代碼了!