我學(xué)習(xí)jquery的經(jīng)驗(yàn)

第頁共頁我學(xué)習(xí)jquery的經(jīng)歷我學(xué)習(xí)jquery的經(jīng)歷原來Jquery就是一個(gè)javascript寫的一個(gè)庫，它給我們提供了很多常用的方法，使用這些方法可以兼容多種閱讀器，使用它可以到達(dá)很好的動(dòng)畫效果，下面就來看看那些年的學(xué)習(xí)筆記吧一、$符號(hào)1、選擇器可以選擇標(biāo)簽，也可選擇ID,Class等如下：復(fù)制代碼代碼如下:$(function{$(“table.datalisttr:nth-child(odd)”).addClass(“one”);//odd:匹配奇數(shù)，even：偶數(shù)，nth-child:匹配其父元素下的第N個(gè)子或奇偶元素，從1開場varobj=$(“h2a”);//得到h２下面的a,返回的是一個(gè)數(shù)組for(vari=0;i<obj.length;i++){obj[i].inner=i.toString;}varobj1=$(“#demo”);varobj2=$(“.Class”);//得到的是一個(gè)數(shù)組alert(obj2);$(“divulli:has(a)”).addClass(“Two”);//得到里中有a的標(biāo)符添加一個(gè)Class=“Two”$(“l(fā)i:lt(2)”).addClass(“one”);//得到前三個(gè)li，添加一個(gè)Class＝“one”，下標(biāo)是從０開場的$(“p》span”).addClass(“Two”);//得到p下的span,parent》child})2、得到標(biāo)記中的屬性復(fù)制代碼代碼如下:varsTitle=$(“p》span”).attr(“Title”);//得到標(biāo)記中的屬性值$(“p》a”).text(sTitle);//設(shè)置值，假設(shè)是用text得到值，那么是得到的文本，不包含3、設(shè)置屬性復(fù)制代碼代碼如下:$(“button:gt(0)”).attr(“disabled”,“disabled”);//得到第一個(gè)button后的button,然后設(shè)置它們的disable屬性為不可用，沒有這個(gè)屬性就返回undefined$(“img”).attr({src:“test.jpg”,alt:“TestImage”});3.1、刪出屬性$(“img”).removeAttr(“src”);4、修改Class，假如存在〔不存在〕就刪除〔添加〕一個(gè)類。復(fù)制代碼代碼如下:$(function{$(“div》p”).mouseover(function{$(this).toggleClass(“HightLight”);//修改款式class});}4.1、移出Class$(“p”).removeClass(“selected”);4.2、添加Class$(“p”).addClass(“selected”);5、圖片的復(fù)制6、事件綁定，可以綁定多個(gè)一樣的事件復(fù)制代碼代碼如下:$(function{$(“img”).bind(“click”,function{//綁定事件alert(“你點(diǎn)?。。薄?;});$(“img”).bind(“click”,function{//綁定事件alert(“你點(diǎn)啊?。病?;});})7、移出事件復(fù)制代碼代碼如下:$(function{$(“input[type=button]”).click(function{$(“img”).unbind(“click”,eventImg);//unbind來移出方法alert(“移出事件！”);});})8、元素的顯示和隱藏復(fù)制代碼代碼如下:$(function{$(“#demobtnF”).click(function{$(“#p_btn”).show;//顯示});$(“#demobtn”).click(function{$(“span:first”).hide;//隱藏});})漸入漸出的效果：在show,與hide方法上傳一個(gè)時(shí)間參數(shù)，從而得到淡入淡出的效果復(fù)制代碼代碼如下:$(function{$(“#Button1”).click(function{$(“#imgs”).show(10000);});$(“#Button2”).click(function{$(“#imgs”).hide(5000);});})復(fù)制代碼代碼如下:二、淡入淡出的實(shí)現(xiàn)方法1、fadeIn與fadeOut：使用方法與show、hide一樣，效果更好如下：復(fù)制代碼代碼如下:$(“#Button3”).click(function{$(“#imgs”).fadeIn(10000);});$(“#Button4”).click(function{$(“#imgs”).fadeOut(5000);});2、幻燈片效果-由slideUp與slideDown方法實(shí)現(xiàn)復(fù)制代碼代碼如下:$(“#Button1”).click(function{$(“#imgs”).slideUp(10000);});$(“#Button2”).click(function{$(“#imgs”).slideDown(5000);});三、Jquery功能函數(shù)1、閱讀器的檢測$.browser,如下：復(fù)制代碼代碼如下:if($.browser.msie)returnalert(“IE”);if($.browser.safari)returnalert(“safari”);if($.browser.mozilla)returnalert(“mozilla”);if($.browser.opera)returnalert(“opera”);2、盒子模型$.boxModel如下：alert($.boxModel?“standard”:“IE”);3、處理javascript對象$.each(arr,function)//對數(shù)組的每個(gè)對象用function函數(shù)處理如下：復(fù)制代碼代碼如下:varaArr=[“one”,“two”,“three”];$.each(aArr,function(iNum,value){alert(iNum+“,”+value);});$.grep(Arr,funtion(value)):過濾例如：復(fù)制代碼代碼如下:varaArray=[1,2,3,4,5,6,7,8,9];varDemoArr=$.grep(aArray,function(value){returnvalue》4;}