Jquery 技術小結

前記：

       如今項目中常常要用到JS去操做一些事，對整個團隊開發來講，JS的書寫規範和正確對開發具備較大的幫助。在一個團隊中經常會發生JS書寫的不統一性和遊覽器不兼容性等狀況發生。我覺的最好的方法就是有一個統一的書寫規範和一個具備良好的兼容性和擴展性的JS庫做爲咱們開發的基層，以提升咱們團隊的開發速度和各項性能。

       對於我本人來講，從一開始的直接寫Javascript方法到使用ExtJS 還有 Jquery類庫，感觸到如下幾點：

一、  必需要有良好的JS基礎，多多寫基礎的Javascript方法；

二、  具有良好的JS基礎後，能夠嘗試使用Jquery、ExtJS等大師們寫的類庫，由於他們都是以JS爲基礎寫的，並且都經歷了兼容性、穩定性、規範性等等的測試，並且具備良好的集成和擴展性，爲咱們提供了一個能夠規範使用，而且讓咱們省時省力；

三、  有了新的挑戰不要怕，先分析難點，而後利用JS方法一步步解決；

我首先推薦Jquery類庫，它讓咱們開發變的輕鬆容易。

優勢：（網上找的）

一、              咱們能夠實現靈活性很是強的清晰頁面代碼。jQuery讓JavaScript代碼從HTML頁面代碼中分離出來，就像數年前CSS讓樣式代碼與頁面代碼分離開同樣。

二、              最少的代碼作最多的事情，這是jQuery的口號，並且名副其實。使用它的高級selector，開發者只需編寫幾行代碼就能實現使人驚奇的效果。開發者無需過於擔心瀏覽器差別，它除了還徹底支持Ajax，並且擁有許多提升開發者編程效率的其它抽象概念。jQuery把JavaScript帶到了一個更高的層次。

三、              在大型JavaScript框架中，jQuery對性能的理解最好。儘管不一樣版本擁有衆多新功能，其最精簡版本只有18KB大小，這個數字已經很難再減小。jQuery的每個版本都有重大性能提升。若是將其與新一代具備更快JavaScript引擎的瀏覽器(如火狐3和谷歌Chrome)配合使用，開發者在建立富體驗Web應用時將擁有全新速度優點。

四、              JS」」」」 標準」,之因此使用引號，是覺得jQuery並不是一個官方標準。可是業內對jQuery的支持已經很是普遍。谷歌不但本身使用它，還提供給用戶使用。另外戴爾、新聞聚合網站Digg、WordPress、Mozilla和許多其它廠商也在使用它。微軟甚至將它整合到Visual Studio中。如此多的重量級廠商支持該框架，用戶大能夠對其將來放心，大膽的對其投入時間。

五、              基於jQuery開發的插件目前已經有大約數千個。開發者可以使用插件來進行表單確認、圖表種類、字段提示、動畫、進度條等任務。jQuery社區已經成長爲一個生態系統。這一點進一步證實了上一條理由，它是一個安全的選擇。並且，jQuery正在主動與「競爭對手」合做，例如Prototype。它們彷佛在推動JavaScript的總體發展，而不只僅是在圖謀一己之私。

六、              要想真正學習jQuery，開發者仍是須要投入一點時間，尤爲是若是你要編寫大量代碼或自主插件的話，更是如此。可是，開發者能夠採起「各個擊破」的方式，並且jQuery提供了大量示例代碼，入門是一件很是容易的事情。我建議開發者在本身編寫某類代碼前，首先看一下是否有相似插件，而後看一下實際的插件代碼，瞭解一下其工做原理。簡而言之，學習jQuery不須要開發者投入太多，就可以迅速開始開發工做，而後逐漸提升技巧

七、              我發現使用jQuery是一件充滿樂趣的事情。它簡潔而強大，開發者可以迅速獲得本身想要的結果。它解決了許多JavaScript問題和難題。我過去曾討厭JavaScript編程，但如今卻很是喜歡它。經過一些基礎性的改進，開發者能夠真正去思考開發下一代Web應用，再也不由於語言或工具的差勁而煩惱。我相信它的「最少的代碼作最多的事情」口號

爲了節約開發和查找使用Jquery方法時間，如下將常常用到的一些Jquery 方法和注意點記錄，以備你們查詢和本身的查詢。

1、查找對象（）

JS:document.getElementById(「divID」)

JQ:$(「#divID」)

JS: document.getElementsByTagName(「input」)

JQ:$(「input」)

JS:暫無取className

JQ: $(「.className」)

當取得對象後，能夠操做他們的屬性；當存在多個對象時能夠利用.eq(i)的方法取得各個對象。取各項值爲：.text() 取innerText值 .html() 取innerHTML內容 .val()取值

2、判斷對象是否爲空

JS:if(document.getElementById(‘ID’)==null)

Jq: if($(「#ID」). length==0)

3、Jquery Ajax 使用方法

JQuery提供了一系列的全局方法對XMLHttpRequest對象進行了封裝，在進行Ajax開發過程當中不再用擔憂瀏覽器客戶端的不致性問題了。

1、$.ajax(options)
它是最根本的JQuery Ajax方法，它只有一個參數options，該options參數中包含了請求信息和回調函數的信息。參數內容都是key:value對形式出現，而且都是可選的。
語法：
$.ajax({options});
url：(string)發送請求的地址，能夠是服務器頁面也能夠是WebService動做。
type：(string)請求方式，POST或GET
data：(object)向服務器發送請求時帶去的數據。是key:value對形式，如：{name:"grayworm",sex:"male"}，若是是數組{works:["work1","work2"]}
dataType：(string)預期返回的數據類型。xml,html,json,text等
beforeSend：（Function）發送ajax請求前被觸發，若是返回false則取消本次請求。若是異步請求須要顯示gif動畫，那應當在這裏設置相應<img>的可見。
function(XMLHttpRequest){ }

complete：(Function)請求調用完成後的回調函數（請求成功或失敗時均調用），若是異步請求顯示gif動畫，那應當在這裏設置相應的<img>不可見。
function(XMLHttpRequest,textStatus){ 
   //textStatus是描述返回狀態的字符串
} 

success：(Function)請求執行成功時的回調函數
function(data,textStatus){ 
   //data是服務端返回的數據能夠是xml、json、text等格式
   //textStatus是描述返回狀態的字符串
}

error：(Function)請求執行失敗時的回調函數 
function(XMLHttpRequest,textStatus,errorThrown){ 
   //data是服務端返回的數據能夠是xml、json、text等格式
   //textStatus,errorThrown是描述返回狀態的信息
}

 

4、Jquery 設置對象屬性

Jq:$(「#ID」).attr(「html」,」<b>我要加粗</b>」) 用attr 這個屬性來處理。

$(「#ID」).show(); $(「#ID」).hide()  對應 style=」display:none/block」;

5、  window.onload=function (){}çè$(function()｛….｝) onload 執行

6、事件處理，onclick hover 等事件，比較實用

click(fn)    dblclick(fn)    mousedown(fn)   mousemove(fn)
mouseout(fn)  mouseover(fn)     mouseup(fn)  hover(fn) 

7、之後有新的知識點，慢慢上傳完善

 

PS:但願咱們JS開發規範化，之後的JS代碼統一放到JS文件中，而後做JS混淆處理，這一點我也常常偷懶，不然的話會出現安全漏洞，【暴露參數，暴露url地址】。