我学习jquery的经验

第页共页我学习jquery的经历我学习jquery的经历原来Jquery就是一个javascript写的一个库，它给我们提供了很多常用的方法，使用这些方法可以兼容多种阅读器，使用它可以到达很好的动画效果，下面就来看看那些年的学习笔记吧一、$符号1、选择器可以选择标签，也可选择ID,Class等如下：复制代码代码如下:$(function{$(“table.datalisttr:nth-child(odd)”).addClass(“one”);//odd:匹配奇数，even：偶数，nth-child:匹配其父元素下的第N个子或奇偶元素，从1开场varobj=$(“h2a”);//得到h２下面的a,返回的是一个数组for(vari=0;i<obj.length;i++){obj[i].inner=i.toString;}varobj1=$(“#demo”);varobj2=$(“.Class”);//得到的是一个数组alert(obj2);$(“divulli:has(a)”).addClass(“Two”);//得到里中有a的标符添加一个Class=“Two”$(“li: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方法上传一个时间参数，从而得到淡入淡出的效果复制代码代码如下:$(function{$(“#Button1”).click(function{$(“#imgs”).show(10000);});$(“#Button2”).click(function{$(“#imgs”).hide(5000);});})复制代码代码如下:二、淡入淡出的实现方法1、fadeIn与fadeOut：使用方法与show、hide一样，效果更好如下：复制代码代码如下:$(“#Button3”).click(function{$(“#imgs”).fadeIn(10000);});$(“#Button4”).click(function{$(“#imgs”).fadeOut(5000);});2、幻灯片效果-由slideUp与slideDown方法实现复制代码代码如下:$(“#Button1”).click(function{$(“#imgs”).slideUp(10000);});$(“#Button2”).click(function{$(“#imgs”).slideDown(5000);});三、Jquery功能函数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)//对数组的每个对象用function函数处理如下：复制代码代码如下: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;}