資源描述:
《jquery快速入門資料》由會員上傳分享,免費在線閱讀,更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。
1、jQuery常用函數(shù)(jQuery是腳本庫不是腳本框架)1.頁面元素引用通過jquery的$()引用元素包括通過id、class、元素名以及元素的層級關(guān)系及dom或者xpath條件等方法,且返回的對象為jquery對象(集合對象),不能直接調(diào)用dom定義的方法.例如:下拉列表清空:$("#id").empty();而不是$("#id").options.length=0;2.dom對象與jquery對象互轉(zhuǎn)(注意:dom對象只能用dom方法,jquery對象只能用jquery方法)dom對象>>jquery對象dom:document.getElementById("id")jque
2、ry:$(document.getElementById("id"))或$("#id")jquery對象>>dom對象(因jquery對象是一個集合對象,所以一般通過索引取出轉(zhuǎn)為dom對象,從而用dom方法)jquery:$("#id")dom:$("#id").get(0)或$("#id")[0]例如:jquery:$("#id").html()或$("#id").eq(0).html();dom:$("#id").get(0).innerHTML或$("#id")[0].innerHTML或$("#id").eq(0)[0].innerHTML3.如何獲取jQuery集合的某一項
3、對于獲取的元素集合,獲取其中的某一項(通過索引指定)可以使用eq或get(n)方法或者索引號獲取,要注意,eq返回的是jquery對象,而get(n)和索引返回的是dom元素對象。對于jquery對象只能使用jquery的方法,而dom對象只能使用dom的方法,如要獲取第三個
元素的內(nèi)容。有如下兩種方法:$("div").eq(2).html();//調(diào)用jquery對象的方法$("div").get(2).innerHTML;//調(diào)用dom的方法屬性$("div")[2].innerHTML;//調(diào)用dom的方法屬性4.同一函數(shù)實現(xiàn)set和getJquery中的很多方法都是
4、如此,主要包括如下幾個:$("#msg").html();//返回id為msg的元素節(jié)點的html內(nèi)容。$("#msg").html("newcontent");//將“newcontent”作為html串寫入id為msg的元素節(jié)點內(nèi)容中,頁面顯示粗體的newcontent$("#msg").text();//返回id為msg的元素節(jié)點的文本內(nèi)容。$("#msg").text("newcontent");//將“newcontent”作為普通文本串寫入id為msg的元素節(jié)點內(nèi)容中,頁面顯示newcontent$("
5、#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();//觸發(fā)id為msg的元素的單擊事件$("#msg").click(fn);//為id為msg
6、的元素單擊事件添加函數(shù)同樣blur,focus,select,submit事件都可以有著兩種調(diào)用方法5.集合處理功能對于jquery返回的集合內(nèi)容無需我們自己循環(huán)遍歷并對每個對象分別做處理,jquery已經(jīng)為我們提供的很方便的方法進行集合的處理。包括兩種形式:$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})//為索引分別為0,1,2的p元素分別設(shè)定不同的字體顏色。$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][
7、i%2]})//實現(xiàn)表格的隔行換色效果$("p").click(function(){alert($(this).html())})//為每個p元素增加了click事件,單擊某個p元素則彈出其內(nèi)容6.jQuery方法調(diào)用$.方法名例如:$.getJSON7.擴展我們需要的功能$.extend({min:function(a,b){returnab?a:b;}});//為jquery擴展了
當前文檔最多預(yù)覽五頁,下載文檔查看全文