我學習jquery的經(jīng)驗

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