1.Window.onload 的JQuery方法 $(document).ready(function(){ //The Code! }) 可以简写为: $(function(){ //The Code! }) 2.添加和去除Css类 $(function(){ $(“a.alink”).mouseover(function(){ this.addClass(“over”); //添加样式 }).mouseout(function(){ this.removeClass(“over”); //去除样式 }) }) 3.动态切换样式 $funciotn(){ $(a.alink).click(function(){ This.toggleClass(“highline”); //动态切换,当有时去除,当没有时添加 }) } 4.给表格的偶数行添加样式 $(".mytable tr:even").addClass("tr1"); 5.在选中元素上添加内容 如:$("p ").wrap(“<div class=’aa’></div >”); 原代码:<p>测试</p> 运行后效果: <div class=’aa’><p>测试</p></div > 6.直接获取、编辑内容 var sString = $(“p:frist”).text(); //获取第一个P标签的文本值 $(“p:last”).html(sString); //把值赋给最后一个P标签,以Html形式赋给,也就是说可以包含Html标签 7.页面元素有克隆 $(“img.eq(1)”).clone().appendTo($(“p”)); //将第一个图片克隆到所有的P标签中 8.事件的监听 $(“img”) .bind (“click”,fnMyfun1=function(){ //添加事件1 $(“#show”).append(“事件1”); //在id为show的标签中添加文本 }) .bind (“click”,fnMyfun2=function(){//添加事件2 $(“#show”).append(“事件2”); }) .bind (“click”,fnMyfun3=function(){//添加事件3 $(“#show”).append(“事件3”); }) //可以同时添加多个事件 9.移除监听的事件 $(“input(type=button)”).click(function(){ $(“img”).unbind(“click”,” fnMyfun1”); //移除事件监听fnMyfun1 }) 10.JQuery制作动画与特效――元素的显示与隐藏效果 $(“img”).hide(); $(“img”).hide(3000); //设置渐隐的时间,单位毫秒 $(“img”).show (); $(“img”).show (3000); 还有更多特效如:fadeIn() fadeout() slideUp() slideDown() 11.JQuery的功能虑数 ·浏览器的检测 用$.browser方法 $.browser.verson //获取浏览器版本号 function detect(){ if($.browser.msie) return “IE”; if($.browser.mozilla) return “Mozilla”; if($.browser.safari) return “Safari”; if($.browser.opera) return “Opera”; } 12.盒子模型类型 $.boxModel 如果是True,则是标准W3C,False则是其他。 13. $.each遍历 var aArray = [“sdf”,”dasd”,”dsa”]; //数组 $.each(aArray,function(iNum,value){ document.write(“序号:”+iNum+” 值:”+value); }); var oObj = {one:1,two:2,three:3}; $.each(aArray,function(property,value){ document.write(“属性:”+ property +” 值:”+value); }); 14.数据过虑 var aArray = [1,3,5,6,7,8,6,8]; var aResulr = $.grep(aArray,function(){ return value > 4; //返回大于4的值,过虑了小于等于4的值 }); 15.数组的转换 var aArray = [“a”,”b”,”c”,”d”]; aArray = $.map(aArray,function(value,index){ return (value.toUpperCase()+index); }); 16.JQuery中使用Ajax $(“#display”).load(“aaa.aspx”); //display为接收数据的容器 $.get(url,[data],[callback]) //get方式 $.post(url,[data],[callback],[type]) //post方式 例: function createQuerystring() { var username = encodeURI($(“#userName”).val); //userName为文本框的id var password = encodeURI($(“#passWord”).val); var queryString = {username:username, password:passWord}; return queryString; } $.get(“aa.aspx”, createQuerystring(), function(data){ $(“#serverResponse”).html(decodeURI(data)); }); Ajax 细节设置 $.ajax({ type : ”GET”, url : “aa.aspx”, data : createQuerystring(), success : function(data){ $(“#serverResponse”).html(decodeURI(data)); } }) Ajax全局设置 $.ajaxSetup({ url : “aa.aspx”, data : createQuerystring(), success : function(data){ $(“#serverResponse”).html(decodeURI(data)); } }) //这个设置后,就成为了Ajax的默认设置