資源描述:
《使用jquery特效說(shuō)明》由會(huì)員上傳分享,免費(fèi)在線閱讀,更多相關(guān)內(nèi)容在應(yīng)用文檔-天天文庫(kù)。
1、使用jquery特效說(shuō)明1、關(guān)于頁(yè)面元素的引用通過(guò)jquery的$()引用元素包括通過(guò)id、class、元素名以及元素的層級(jí)關(guān)系及dom或者xpath條件等方法,且返回的對(duì)象為jquery對(duì)象(集合對(duì)象),不能直接調(diào)用dom定義的方法。2、jQuery對(duì)象與dom對(duì)象的轉(zhuǎn)換只有jquery對(duì)象才能使用jquery定義的方法。注意dom對(duì)象和jquery對(duì)象是有區(qū)別的,調(diào)用方法時(shí)要注意操作的是dom對(duì)象還是jquery對(duì)象。普通的dom對(duì)象一般可以通過(guò)$()轉(zhuǎn)換成jquery對(duì)象。如:$(document.getElementById("msg"))則為jq
2、uery對(duì)象,可以使用jquery的方法。由于jquery對(duì)象本身是一個(gè)集合。所以如果jquery對(duì)象要轉(zhuǎn)換為dom對(duì)象則必須取出其中的某一項(xiàng),一般可通過(guò)索引取出。如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]這些都是dom對(duì)象,可以使用dom中的方法,但不能再使用Jquery的方法。以下幾種寫法都是正確的:$("#msg").html();$("#msg")[0].innerHTML;$("#msg").eq(0)[0].innerHTML;$("#msg").get(0).in
3、nerHTML;3、如何獲取jQuery集合的某一項(xiàng)對(duì)于獲取的元素集合,獲取其中的某一項(xiàng)(通過(guò)索引指定)可以使用eq或get(n)方法或者索引號(hào)獲取,要注意,eq返回的是jquery對(duì)象,而get(n)和索引返回的是dom元素對(duì)象。對(duì)于jquery對(duì)象只能使用jquery的方法,而dom對(duì)象只能使用dom的方法,如要獲取第三個(gè)
元素的內(nèi)容。有如下兩種方法:$("div").eq(2).html();??//調(diào)用jquery對(duì)象的方法$("div").get(2).innerHTML;//調(diào)用dom的方法屬性4、同一函數(shù)實(shí)現(xiàn)set和getJquery
4、中的很多方法都是如此,主要包括如下幾個(gè):$("#msg").html();??//返回id為msg的元素節(jié)點(diǎn)的html內(nèi)容。$("#msg").html("newcontent");//將“newcontent”作為html串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容中,頁(yè)面顯示粗體的newcontent$("#msg").text();??//返回id為msg的元素節(jié)點(diǎn)的文本內(nèi)容。$("#msg").text("newcontent");//將“newcontent”作為普通文本串寫入id為msg的元素節(jié)點(diǎn)內(nèi)容
5、中,頁(yè)面顯示newcontent$("#msg").height();??//返回id為msg的元素的高度$("#msg").height("300");//將id為msg的元素的高度設(shè)為300$("#msg").width();??//返回id為msg的元素的寬度$("#msg").width("300");//將id為msg的元素的寬度設(shè)為300$("input").val(");//返回表單輸入框的value值$("input").val("test");//將表單輸入框的value值設(shè)為test$("#msg").click();//
6、觸發(fā)id為msg的元素的單擊事件$("#msg").click(fn);//為id為msg的元素單擊事件添加函數(shù)同樣blur,focus,select,submit事件都可以有著兩種調(diào)用方法5、集合處理功能對(duì)于jquery返回的集合內(nèi)容無(wú)需我們自己循環(huán)遍歷并對(duì)每個(gè)對(duì)象分別做處理,jquery已經(jīng)為我們提供的很方便的方法進(jìn)行集合的處理。包括兩種形式:$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})//為索引分別為0,1,2的p元素分別設(shè)定不同的字體顏色。$("tr").e
7、ach(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})//實(shí)現(xiàn)表格的隔行換色效果$("p").click(function(){alert($(this).html())})??//為每個(gè)p元素增加了click事件,單擊某個(gè)p元素則彈出其內(nèi)容6、擴(kuò)展我們需要的功能$.extend({min:function(a,b){returnab?a:b;}});//為jquery擴(kuò)展了min,max兩個(gè)方法使用擴(kuò)展的方法(
8、通過(guò)“$.方法名”調(diào)用):alert("a=10,b=20,max
當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文
當(dāng)前文檔最多預(yù)覽五頁(yè),下載文檔查看全文