認識JQuery，JQuery的優勢、文法、多庫衝突、JS原生對象和JQuery對象之間相互轉換和DOM操作，常用的方法

標籤：toggle   基於   代碼   ddc   cti   刪除   事件   刪除元素   隱藏   

（一）認識JQuery　

　　　　 JQuery是一個JavaScript庫，它通過封裝原生的JavaScript函數得到一套定義好的方法

　　　　    JQuery的主旨：以更少的代碼，實現更多的功能

 

（二）JQuery的優勢

　　　　1）可以像CSS一樣訪問和操作DOM

　　　　2）修改CSS控制頁面外觀

　　　　3）簡化JS代碼操作

　　　　4）事件代理更加容易

　　　　5）動畫效果使用方便

　　　　6） Ajax技術更加完美

　　　　7）大量的基於Jquery的外掛程式

　　　　8）可以自訂擴充功能外掛程式

（三）JQuery的文法

　　　　格式：$(selector).action()
　　　　貨幣符號$本身是Jquery對象的縮寫
　　　　選擇符selector查詢和尋找HTML元素
　　　　Action執行對元素的操作
　　　　執行個體：$("p").hide():隱藏P元素

　　　　這裡提供一個JQuery的線上API:http://jquery.cuishifeng.cn/

（四）多庫衝突

　　　　  解決多庫衝突：jQuery.onConflict()方法放棄$符號,後面使用JQuery對象的時候就不能在使用$符號，而要使用JQuery

（五）原生JS對象和JQuery對象之間的轉換

　　　　JS對象--》JQuery對象：

　　　　　　　　var p=document.getElementById(‘p‘);

　　　　　　　　$(p);//轉換成JQuery對象了

　　　　JQuery對象--》JS對象：

　　　　　　　　$(p).get(0)或者$(p)[0]//這樣就得到JS原生對象了

（六）DOM操作

　　1）設定元素以及內容：
　　　　方法名 　　　　　　　　　　　　　　　　　　　　　　　　 描述
　　　　html()　　　　　　　　　　　　　　　　　　　　擷取元素中的HTML內容
　　　　html(value) 　　　　　　　　　　　　　　　　　設定元素中HTML內容
　　　　text()　　　　　　　　　　　　　　　　　　　　擷取元素中常值內容
　　　　text(value) 　　　　　　　　　　　　　　　　　 設定元素中常值內容
　　　　val()　　　　　　　　　　　　　　　　　　　　　擷取表單元素中的常值內容
　　　　val(value)　　　　　　　　　　　　　　　　　　擷取表單元素中的常值內容
　  2）操作元素屬性 //說明：這是對標籤元素屬性的操作，不是CSS樣式表中的屬性
　　　　attr(key) 　　　　　　　　　　　　　　　　　　 擷取元素key屬性的屬性值
　　　　attr(key,value) 　　　　　　　　　　　　　　　設定元素key屬性的屬性值
　　　　attr({key1:value1,key2:value2}) 　　　　　設定元素多個key屬性的屬性值，方法的參數就是一個Object對象
　　　　attr(key,function(index,value){})　　　　　設定元素key通過fn來設定

　 3）操作CSS樣式

 

　　　　方法名 　　　　　　　　　　　　　　　　　　　　　　描述
　　css({name1:value1,name2:value2}) 　　　　  設定元素多個CSS樣式
　　addClass(class)　　　　　　　　　　　　　　　   給每個元素添加一個CSS類
　　addClass(class1 class2 class3)　　　　　　　　給元素增加多個CSS類
　　remove(class)　　　　　　　　　　　　　　　　　刪除元素的一個CSS類
　　removeClass(class1 class2 class3)　　　　　　刪除元素的多個CSS類
　　toggleClass(class)　　　　　　　　　　　　　　來回切換預設樣式和指定樣式

 

認識JQuery，JQuery的優勢、文法、多庫衝突、JS原生對象和JQuery對象之間相互轉換和DOM操作，常用的方法