jquery学习笔记免费下载_H5之家 - 中国HTML5教程资源分享第一站

初始篇$(document).ready(function(){})==$(function(){});jQuery(callback)是$(document).ready(function(){});的简写$是jQuery对象的引用，用$代替jQuery让语法更为的简洁window.onload=function(){};//如果一个html当中只有多个window.onload的话，只会执行最后一个但对于$(function(){})如果有多个的话，会全部执行Dom对象与jQuery对象的转换vardomObj=document.getElementsByTagName(“h3”)[0];var$jQueryObj=$(domObj);domObj.innerHTML==$jQueryObj.html()jQuery对象转DOM对象源码<inputtype="checkbox"id="cr"/>var$cr=$(“#cr”);varcr=$cr.get(0);//将jquery对象转为dom对象cr.checked//dom方式判断一下复选框cr是否选中$(“#cr”).is(“:checked”)//jquery方式判断注意：Jquery包装集的某些遍历方法，比如each()中，可以传递遍历函数，在遍历函数中的this也是dom元素，比如$(“.testDiv”).each(function(){alert(this);});//这里的this就是dom对象将this转为jquery对象$(“.testDiv”).each(function(){$(this).html(“修改内容”);});jQuery对象增加css类hightlight$(“.hasChild”).addClass(“hightlight”);=>$(“.hasChild”)[‘addClass’](‘hightlinght’);jQuery对象移除css类hightlight$(“.hasChild”).removeClass(“hightlight”);jQuery对象下的子类$(“.hasChild”).children(“a”)jQuery对象的显示$(“.hasChild”).show()jQuery对象的隐藏$(“.hasChild”).hide();jQuery对象的兄弟对象$(“.hasChild”).siblings();jQuery和prototype的冲突解决jQuery.noConflict();//将$的控制权给prototype.jsjQuery(function(){jQuery(“p”).click(function(){alert(jQuery(this).text();});});选择过滤篇过滤的作的选择器是指定条件从前面匹配的内容中筛选，过滤选择器也可以单独使用，表示从全部*中筛选，比如$(“:[title]”)===$(“*:[title]”)而选择功能的选择器则不会有默认的范围，因为作用是选择而不是过滤DOM和jQuery为对象添加css方式document.getElementById(“tt”).style.color=”red”;$(“#tt”).css(“color”,”red”);基本选择器选择id为one的元素$(“#one”).css(“background”,”#bfa”);选择class为one的元素$(“.one”).css(“background”,”#bfa”);选择元素名是div的所有的元素$(“div”).css(“background”,”#bfa”);选择所有的元素$(“*”).css(“background”,”#bfa”);选择所有的span元素和id为one的div$(“span,div#one”).css(‘background’,’#bfa’);几个选择器用’,’分隔$(“#div1,.testDiv2…”);层次选择器选择body里的所有的div元素$(‘bodydiv’).css(‘background’,’#bfa’);//body里面所有的div元素在body里选择名为div的子元素$(‘body>div’).css(‘background’,’#bfa’);//body下的直接子元素div选择所有class为one的下一个div元素$(“.one+div”).css(“background”,”#bfa”);//one和div是同一级别的元素选择id为one的元素后面的所有的div兄弟$(“#one~div”).css(“background”,”#bfa”);基本过滤选择器选择第一个div元素$(“div:first”).css(“background”,”#bfa”);//:first匹配第一个元素选择最后一个div元素$(“div:last”).css(‘background’,’#bfa’);//:last匹配最后一个元素选择class不为one的所有div元素$(‘div:not(.one)”).css(‘background’,’#bfa’);//:not(selector)去除所有与给定选择器匹配的元素如查找所有的未选中的input元素$(“input:not(:checked)”);选择索引值为偶数的div元素$(‘div:even’).css(‘background’,’#bfa’);//:even匹配所有的索引值为偶数的元素，从0开始选择索引值为奇数的div元素$(‘div:odd’).css(‘background’,’#bfa’);//:odd匹配所有的索引值为奇数的元素，从0开始选择索引值为3的元素$(‘div:eq(3)”).css(‘background’,’#bfa’);===$(“div”).eq(3).css(‘background’,’#bfa’);//:eq(index)匹配一个给定索引值的元素，从0开始选择索引值大于3的元素$(‘div:gt(3)”).css(‘background’,’#bfa’);//:gt(index)匹配所有大于给定索引值的元素，从0开始选择索引值小于3的元素$(‘div:lt(3)”).css(‘background’,’#bfa’);:lt(index)匹配所有小于给定索引值的元素，从0开始选择所有的标题元素，比如h1,h2..$(“:header”).css(‘background’,’#bfa’);:header选择所有h1,h2,h3一类的header标签选择所有正在执行动画的所有的元素$(“:animated”).css(‘background’,’#bfa’);:animated匹配所有正在执行动画的效果$(“div:not(:animated)”)//没有执行动画的div元素内容过滤选择器选取含有文本”hello”的div元素$(‘div:contains(hello)’).css(‘background’,’#bfa’);:contains(text)匹配包含文本的元素选取不含子元素（或者文本元素）的div空元素$(‘div:empty’).css(‘background’,’#bfa’);:empty匹配所有不包含子元素或者文本的空元素选取含有class为mini元素的div元素$(“div:has(.mini)”).css(‘background’,’#bfa’);:has(selector)匹配含有选择器所匹配的元素的元素选取含有子元素(或者文本元素)的div元素$(‘div:parent’).css(‘background’,’#bfa’);:parent匹配含有子元素或者文本的元素可见性过滤选择器为id为mover的元素添加动画functionanimateMove(){$(“#mover”).slideToggle(‘slow’,animateMove);}animateMove();选取所有不可见的元素，包括<inputtype=’hide’/>不可见的元素有$(‘body:hidden’)//注意一下中间的空格不可见的div元素有$(‘div:hidden’):hidden匹配所有不可见的元素文本隐藏域有$(‘input:hidden’)所有可见的元素$(‘div:visible’):visible匹配所有可见的元素属性选择器选取含有属性title的div元素$(‘div[title]’).css(‘background’,’#bfa’);[attrible]匹配包含给定属性的元素$(‘div[id]’)查找包含id的div元素选取属性title值等于test的div元素$(‘div[title=test]’).css(‘background’,’#bfa’);【attribute=value】匹配给定的属性是某个特定值的元素选取属性title值不等于test的div元素$(‘div[title!=test]’).css(‘background’,’#bfa’);【attibute!=value】匹配给定的属性是不包含某个特定值的元素选取属性title值是te开始的元素$(‘div[title^=te]’).css(‘background’,’#bfa’);【attribute^=value】匹配给定的属性是以某些值开始的元素选取属性title值是以est结束的div元素$(‘div[title$=est]’).css(‘background’,’#bfa’);【attribute$=value】匹配给定的属性是以某些值开始的元素选取属性title值含有es的div元素$(‘div[title*=es]’).css(‘background’,’#bfa’);【attribute*=value】匹配给定的属性是以包含某些值的元素组合属性，先选取有属性id的div元素，然后在结果中选取有属性title值中含有es的元素$(“div[id][title*=es]”).css(‘background’,’#bfa’);【attriubte】【attribute2】【attriubte3】复合属性选择器，时满足多个元素子元素过滤选择器选取每个父元素下的第二个子元素$(‘div.one:nth-child(2)’).css(‘background’,’#bfa’);//注意一下中间的空格（可以把这些选择器当作我们css中的类，那么不加空格的选择器就表示选取与该元素相关的对象，而加了空格的选择器则表示选取与之相关的后代元素对象。）:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素:eq(index)只是匹配一个元素，而空上将为每个父元素匹配子元素:nth-child从1开始选取每个父元素下的第一个子元素$(‘div.one:first-child’).css(‘background’,’#bfa’);:first-child匹配第一个子元素而此选择符将为每个父元素匹配一个子元素选取每个父元素下的最后一个子元素$(‘div.one:last-child’).css(‘background’,’#bfa’);:last-child匹配最后一个子元素’:last’只匹配一个元素，而些选择符将为每个父元素匹配一个子元素如果父元素下仅仅只有一个子元素，那么选中这个子元素$(‘div.one:only-child’).css(‘background’,’#bfa’);:only-child如果某个元素是父元素中唯一的子元素，那将会被匹配，如果父元素中含有其他元素，那将不会被匹配$(“ulli:only-child”)在ul中查找是唯一子元素的li表单对象属性过滤选择器:input匹配所有input,textarea,select和button元素查找所有的input元素$(“:input”):text匹配所有文本框查找所有文本框$(“:text”):password匹配所有的密码框查找所有的密码框$(“:password”):radio匹配所有的单选按钮:checkbox匹配所有的复选框:submit匹配所有提交按钮:image匹配所有图像域:reset匹配所有的重置按钮:button匹配所有的button按钮:file匹配所有的文件域:enabled匹配所有可用元素查找所有可用的input元素$(“input:enabled”):disabled匹配所有不可用元素:checked匹配所有的被选中的元素(复选框，单选框等，不包括select中的option):selected匹配所有选中的option元素查找所有选中的选项元素:$(“selectoption:selected”)使用:selected选择器$(‘select’).change(function(){varstr=””;$(“select:selected”).each(function(){str+=$(this).val()+”,”;});}).trigger(‘change’);//trigger(‘change’)意思是select加载后，立刻执行onchange可以用.change()代替使用:checkbox选择$(“:checkbox”)重置按钮操作$(“:reset”)对表单内，可用input赋值操作$(“#form1input:enabled”).val(“这里变化”);//注意中间的空格对表单内，不可用的input操作$(“#form1input:disabled”).val(“这里变化了!”);//选择text元素$(“#form1:text”)选择password元素$(“#form1:password”);选择单选按钮/复选/下拉列表$(“#form1:radio”);/$(“#form1:checkbox”);/$(“#form1select”);提交按钮$(“#form1:submit”)图片$(“#form1:image”);重置按钮$(“#form1:reset”)按钮$(“#form1:button”)//包括<inputtype=button/>和<button></button>文件$(“#form1:file”)隐藏域$(“#form1:hidden”)//包括<inputtype=”hidden”/>和<divstyle=’display:none’>test</div>文本域$(“#form1textarea”)表单下所有input$(“#form1input”)所有的input$(“#form1:input”)//这里注意一下这两者的区别，这里不是太明白两都有啥区别//个人认为:input中包括了<button><select><textarea>而这些是不属于$(“input”)范围的//表单总结,对于含有type属性的，可以直接用$(“:属性名”),对于直接以名称开头的，如<select>、<textarea>可以直接用$(“select”),$(“textarea”)获取表格属性的修改对偶数的tr修改背景色$(“tbodytr:even”).css(‘background’,’#bfa’);选中复选框$(“input[name=’check’]:checked”)$(“:checkbox[name=’check’]:checked”)$(“input[type=’checkbox’][name=’check’]:checked”)判断一个复选框是否被选中<inputtype="checkbox"value="test"name="check1"id="check1"/>$(“#check1”).attr(“checked”)==true来进行判断判断一下是否是隐藏元素$(“#div”).is(“:visible”);元素过滤$(“#divli”).filter(“:contains(‘hello1’),:contains(‘hello2’),:contains(‘hello3’)”).addClass(“promoted”);//为包含hello1、hello2、hello3的元素li增加类promotedeq(index)获取第n个元素例获取第二个元素$(“p”).eq(1)filter(expr)行不行出与指定表达式匹配的元素集合例保留带有select类的元素$(‘P’).filter(‘.selected’)Filter(fn)行不行出与指定函数返回值匹配的元素集合，这个对函内部将对每个对象计算一次保留子元素中不含有ol的元素:$(“div”).filter(function(index){return$(“ol”,this).size()==0;});Is(expr)这个函数返回的不是jquery包装集而是Boolean值用一个表达式来检查当前选择的元素的集合，如果其中至少有一个元素符合这个给定的表达式就返回true检查父元素是否为form$(“input[type=’checkbox’]”).parent().is(“form”);Map(callback)将一组元素转换成其他的数组(不论是否是元素数组)将form中的每个input元素的值建立一个列表$(“p”).append($(“input”).map(function(){return$(this).val();}).get().join(“,”));Not(expr)删除与指定表达式匹配的元素从p元素中删除带有select的ID的元素$(“p”).not($(“#selected”)[0]);Slice(start,end)选取一个匹配的子集选取第一个p元素$(“p”).slice(0,1);查找FindingAdd(expr)把与表达式匹配的元素添加到jquery对象中，这个函数可以用于连接分别与两个表达式匹配的元素结果集如：动态生成一个元素并添加到匹配的元素中$(“p”).add(“Again”);Children([expr])取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合如：查找div的每个子元素$(“div”).children();Closest([expr])取得与表达式匹配的最新的父元素如：为事件源最近的父类li对象更新样式：$(document).bind(“click”,function(e){$(e.target).closest(“li”).toggleClass(“highlight”);});Contents()查找匹配元素内部所有的子节点(包括文本节点)，如果元素是一个iframe，则查找文档内容如：查找所有文本节点并加粗:$(“p”).contents().not(“[nodeType=1]”).wrap(“”);Find(expr)搜索所有与指定表达式匹配的元素。这个是找出正在处理的元素的后代元素的好方法如从所有的段落开始，进一步搜索下面的span元素，与$(“pspan”)相同$(“p”).find(“span”)Next([expr])取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素，只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素，返回所有的用nextAll()如：找出每个段落的后面紧邻的同辈元素$(“p”).next()nextAll([expr])查找当前元素之后所有的同辈元素，可以用表达式过滤如给第一个div之后的所有元素加个类$(“div:first”).nextAll().addClass(‘after’);offsetParent()返回第一个定位的父类（比如(relative或者absolute)）parent([expr])取得一个包含着所有匹配元素的唯一父元素的元素集合如查找每个段落的父元素$(“p”).parent();Parents([expr])取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)如：找出每个span元素的所有的祖先元素$(“span”).parents();Prev([expr])取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合，如：找每个段落紧邻的前一个同辈元素：$(“p”).prev();prevAll([expr])查找当前元素之前所有的同辈元素如给最后一个之前的所有div加上一个类$(“div:last”).prevAll().addClass(“before”);Siblings([expr])取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合如找到每个div的所有的同辈元素$(“div”).siblings();串联andSelf()加入先前所选的加入当前元素中，对于筛选或查找后的元素，要加入先前所选元素时将会很有用如：选取所有div以及内部的p，并加上before类$(“div”).find(“p”).andSelf().addClass(“before”);End()加到最近的一个“破坏性”操作之前，即将匹配的元素列表变为前一次的状态如选取所有的p元素，查找并选取span子元素，然后再回过来选取p元素$(“p”).find(“span”).end();操作DOM对象$(“img”).each(function(){});操作元素属性Attr(name)取得第一个匹配元素的属性值Attr(properties)将一个名/值形式的对象设置为所有匹配元素的属性如$(“img”).attr({src:’test.jpg’,alt:’alter’});Attr(key,value)为所有匹配的元素设置一个属性值$(“img”).attr(‘src’,’1.jpg’);Attr(key,fn)为所匹配的元素设置一个计算的属性值$(‘img’).attr(‘title’,function(){returnthis.src;});removeAttr(name)从一个匹配的元素中删除一个属性$(“img”).removeAttr(‘src’);修改css类addClass(classes)为每个匹配的元素添加指定的类名$(“p”).addClass(‘selected’);hasClass(class)判断包装集中是否至少有一个元素应用了指定的css类$(“p”).hasClass(‘selected’)removeClass([classes])从所有匹配的元素中删除全部或者指定的类$(“p”).removeClass(‘selected’);toggleClass(class)如果存在（不存在）就删除（添加）一个类$(“p”).toggleClass(‘selected’);toggleClass(class,switch)当switch是true是添加类，是false时删除类varcount=0;$(“p”).click(function(){$(this).toggleClass(“hightlight”,count++%3==0);});修改css类Css(name)访问第一个匹配元素的样式Css(properties)把一个”名，值”对象设置为所匹配元素的样式属性Css(name,value)在所有匹配的元素中，设置一个样式属性的值高宽相关Height()获取第一个元素当前计算的高度(px)Height(val)为每个匹配的元素设置css高度的值，若未指定单位，则为pxWidth()获取第一个元素当前计算的宽度Width(val)为每个匹配的元素设置css宽度的值，若未指定单位，则为pxinnerHeight()获取第一个匹配元素内部区域高度(包括补白、不包括边框),对隐藏的元素也有效innerWidth()获取第一个匹配元素内部区域宽度(包括补白、不包括边框),对隐藏的元素也有效outerHeight([margin])获取第一个匹配元素外部高度（包括补白和边框），对隐藏的元素也有效outerWidth([margin])获取第一个匹配元素外部宽度（包括补白和边框），对隐藏的元素也有效位置相关Offset()获取匹配元素在当前窗口的相对偏移，只对可见元素有效Position()获取匹配元素相对父元素的偏移。返回的对象包含两个整形属性：top和leftscrollTop()获取匹配元素相对滚动条顶部的偏移scrollTop(val)传递参数值时，设置垂直滚动条顶部偏移为该值，对隐藏元素也有效scrollLeft()获取匹配元素相对滚动条左侧偏移scrollLeft(val)传递参数值时，设置水平滚动条左侧偏移为该值注意一下offset与position区别Position()获取相对于它最近的具有相对位置(position:relative)的父级元素的距离，如果找不到这样的元素，则返回浏览器的距离Offset()始终返回相对于浏览器文档档的距离，它会忽略外层元素节点创建与移除获取元素节点的title属性值$(“#food”).attr(“title”);获取ul节点，并在后面追加两个元素创建元素var$li_1=$(“<lititle=’香蕉’>香蕉</li>”);var$li_2=$(“<lititle=’雪梨’>雪梨</li>”)获取原始的元素var$parent=$(“ul”);追加上去$parent.append($li_1).append($li_2);插入节点$(“ul”).append($(“<lititle=’苹果’>苹果</li>”);//将内容添加到ul最后面$(“ul”).prepend($(“<lititle=’香蕉’>香蕉</li>”);//将内容添加到ul的最前面$(“<lititle=’banana’>Banana</li>”).appendTo($(‘ul’));//将内容追加到ul里面最后$(“<lititle=’西瓜’>西瓜</li>”).insertAfter($(“ul”));放到$parent后面，放到ul之外了$(“ulli:eq(1)”).insertBefore($(“ulli:eq(2)”);移动节点删除节点获取第二个<li>元素节点后，将它从网页中删除$(“ulli:eq(1)”).remove();把<li>元素中属性title不等于"菠萝"的<li>元素删除$(“ulli”).remove(“li[title!=菠萝]”);找到第二个<li>元素节点后，清空此元素里的内容$(“ulli:eq(1)”).empty();复制节点复制当前节点，并追加到ul中$(“ulli”).click(function(){$(this).clone().appendTo(‘ul’);});$(“ulli”).click(function(){$(this).clone(true).appendTo(‘ul’);});//加了true后，复制出来的也有相同的功能节点的替换$(“p”).replaceWith(“最喜欢的水果”);$("你最不喜欢的水果是?").replaceAll("p");//这两句的作用一样节点的包裹用元素把元素包裹起来$(“li”).wrap(“”);注意一下与$(“li”).wrapAll(“”);和$(“li”).wrapInner(“”);<lititle='苹果'>苹果</li><lititle='苹果'>苹果</li><lititle='橘子'>橘子</li>wrap<lititle='橘子'>橘子</li><lititle='菠萝'>菠萝</li><lititle='菠萝'>菠萝</li>wrapAll<lititle='苹果'>苹果</li><lititle='橘子'>橘子</li><lititle='菠萝'>菠萝</li>wrapInner<lititle='苹果'>苹果</li><lititle='橘子'>橘子</li><lititle='菠萝'>菠萝</li>属性操作设置元素的属性'title'$(“p”).attr(‘title’,’题目’);获取元素的属性'title'$(“p”).attr(‘title’);删除元素的属性'title'$(‘p’).removeAttr(‘title’);Css操作获取样式$(“p”).attr(“class”);设置样式$(“p”).attr(“class”,’hightline’);追加样式$(“p”).addClass(“hightline”);删除全部样式$(“p”).removeClass();删除指定样式$(“p”).removeClass(‘hightline’);重复切换样式$(“p”).toggleClass(“hightline’);判断元素是否含有某样式$(“p”).hasClass(“hightline”)$(“p”).is(“.hightline”);这两个是等价的获取元素的color$(“p”).css(‘color’);设置元素的color$(“p”).css(“color”,”red”);设置元素的fontSize和backgroundColor$(‘p’).css({‘color’:’red’,’background’:’#bfa’});获取元素的高度$(“p”).height();设置元素的高度$(“p”).height(“100px”);获取元素的宽度$(“p”).width();设置元素的宽度$(“p”).width(“100px”);获取元素的的左边距和上边距varoffset=$(“p”).offset();varleft=offset.left;vartop=offset.top;设置获取html,text,val获取元素的HTML代码$(“p”).html();获取元素的文本$(“p”).text();设置元素的HTML代码$(“p”).html(“hello”);设置元素的文本$(“p”).text(“你好”);获取按钮的value值$(“input:eq(5)”).val();设置按钮的value值$(“input:eq(6)”).val(“修改”);地址框获得鼠标焦点$(“#address”).focus(function(){if($(this).val()==’输入关键字’)$(this).val(‘’);});$(“#address”).focus(function(){if($(this).val()==this.defaultValue)$(this).val(‘’);});地址框失去鼠标焦点$(“#address”).blur(function(){if($(this).val()==’’)$(this).val(‘输入关键字’);}$(“#address”).blur(function(){if($(this).val()==’’)$(this).val(this.defaultValue);)}设置单选下拉框选中$(“#single”).val(‘选择2号’);多选下拉框选中$(“#multip”).val([‘选择2号’,’选择3号’]);设置单选框和多选框选中$(“:checkbox”).val(["check2","check3"]);$(“:radio”).val(‘radio2’);设置单选下拉框选中移除属性selected$(“#singleoption”).removeAttr(“selected”);设置属性selected$(“#singleoption:eq(1)”).attr(‘selected’,true);设置多选下拉框选中移除属性selected$(“muloption”).removeAttr(“selected”);设置属性selected$(“muloption:eq(2)”).attr(“selected”,true);设置单选框和多选框选中移除属性checked$(“:checkbox”).removeAttr(“checked”);移除属性checked$(“:radio”).removeAttr(“checked”);设置属性checked$(“[value=check2]:checkbox”).attr(“checked”,true);$(“[value=check3]:checkbox”).attr(“checked”,true);设置radio属性checked$(“[value=radio2]:radio”).attr(“checked”,true);遍历树所有的节点$(“body”).children();紧邻元素后的同辈元素$(“p”).next();紧邻<ul>元素前的同辈元素$(“ul”).prev();紧邻元素的唯一同辈元素$(‘p’).siblings();通过事件获取相应的元素$(document).bind(“click”,function(e){$(e.target).closet(‘li’).css(‘color’,’red’);});鼠标事件$(“p”).mouseover(function(e){alert(e.pageX+e.pageY);alert(e.clientX+e.clientY);}).mouseout(function(e){alert(e.pageX+e.pageY);alert(e.clientX+e.clientY);});事件绑定绑定点击事件$(“#panel”).bind(“click”,function(){$(this).next().show();});判断是否可见$(“#panel”).is(“:visible”);绑定鼠标事件$(“#panel”).bind(“mouseover”,function(){$(this).next().show()}).bind(“mouseout”,function(){$(this).next().hide();});合成事件$(“#panel”).hover(function(){$(this).next().show();},function(){$(this).next().hide();});$(“#panel”).toggle(function(){$(this).next().show();},function(){$(this).next().hide();});$(“#panel”).toggle(function(){$(this).next().toggle();},function(){$(this).next().toggle();});冒泡事件$(‘span’).bind(‘click’,function(event){vartxt=”点击”;$(“#msg”).html(txt);event.stopPropagation();});阻止表单提交$(“#submit”).click(function(e){if($(“#username”).val()==””;e.preventDefault();)});//这里的e.preventDefault可以用returnfalse;代替，效果作用是一样事件对象属性$(“a”).click(function(e){alert(e.type);returnfalse;});//结果click，并阻止了默认事件的发生获取触发事件的<a>元素的href属性值$(“a[href=http://www.google.com]”).click(function(e){alert(e.target.href);});获取鼠标当前相对于页面的坐标e.pageX,e.pageY鼠标点击按键$(“a”).mousedown(function(e){alert(e.which);//1鼠标左键；2鼠标中键3鼠标右键returnfalse;});键盘按键$(“input”).keyup(function(e){alert(e.which);});移除事件$(“removeButton”).click(function(){$(“#btn”).unbind(‘click’);});移除某个事件$(“#btn”).bind(‘click’,myfun1=function(){alert(‘f1’);}).bind(‘click’,myfun2=function(){alert(‘f2’)});$(“#removeButton”).unbind(‘click’,myfun2);只执行一次$(“#btn”).one(‘click’,function(){alert(‘1111’);}).one(‘click’,function(){alert(‘2222’);});模拟操作$(“#btn”).bind(‘click’,function(){alert(‘2222’);});$(‘#btn”).trigger(‘click’);自定义事件$(“#btn”).bind(‘myclick’,function(){alert(‘hhh’);}).trigger(“myclick”);$(function(){$(“#btn”).bind(‘myclick’,function(event,m1,m2){alert(m1+m2);});$(“#btn”).click(function(){$(this).trigger(‘myclick’,[‘我的自定义’,’事件’]);});}).trigger(‘myclick’,[‘我的自定义’,’事件’]);绑定多个事件$(“div”).bind(“mouseovermouseout”,function(){$(this).toggleClass(‘over’);});动画效果显示$(“#panel”).show();隐藏$(“#panel”).hide();//可以在hide()和show()里面添加时间或是’fast’,’slow’淡出效果来隐藏$(“#panel”).fadeOut();淡出效果来显示$(“#panel”).fadeIn();淡出效果隐藏$(“#panel”).fadeTo(600,0.2);//600毫秒调整到alpha为0.2滑动方式隐藏$(“#panel”).slideUp();滑动方式显示$(“#panel”).slideDown();通过高度来切换相应的可见性$(“#panel”).slideToggle();Animate效果$(“#panel”).animate({left:’500px’},3000);多重效果$(“#panel”).animate({left:’500px’,top:’400px’},3000);综合效果$(“#panel”).animate({left:’400px’,top:’200px’,height:’200px’,width:’200px’,opacity:’1’},800).fadeOut(‘slow’);得到父类$(“#panel”).parents(‘div.v_show’);查找元素$(“#panel”).find(“.v_content’);$(“div”,$table)=$table.find(‘div’);判断元素是否是处于动画之中$(“#panel”).is(“:animated”);工具函数$.trim()去除空格函数$是window对象的属性，下面的几句话是等价的$.trim(“text“);Window.$.trim(“text“);Window.jQuery(“text“);jQuery.trim(“text“);jQuery.supportboxModel:如果这个页面和浏览器是以W3CCSS盒式模型来渲染的，则等于true,通常在IE6和IE7的怪癖模式中这个值是false,在document准备就绪前是nullcssFloat:如果用cssFloat来访问css的float的值，则返回true,目前在IE中会返回false,他用styleFloat代替hrefNormalized如果浏览器从getAttribute(‘href”)返回的是原原封不动的结果，则返回true,在IE中返回falsehtmlSerialize:如果浏览器通过innerHTML插入链接元素的时候会序列化这些链接，则返回true,目前IE中返回false;leadingWhitespace:如果在使用innerHTML的时候浏览器会保持前导空白字符，则返回true,在IE6-8中返回false;noCloneEvent:如果浏览器在克隆元素的时候不会连同事件处理函数一起复制，则返回true，目前在IE中返回false。objectAll:如果在某个元素对象上执行getElementsByTagName("*")会返回所有子孙元素，则为true，目前在IE7中为false。opacity:如果浏览器能适当解释透明度样式属性，则返回true，目前在IE中返回false，因为他用alpha滤镜代替。scriptEval:使用appendChild/createTextNode方法插入脚本代码时，浏览器是否执行脚本，目前在IE中返回false，IE使用.text方法插入脚本代码以执行。style:如果getAttribute("style")返回元素的行内样式，则为true。目前IE中为false，因为他用cssText代替。tbody:如果浏览器允许table元素不包含tbody元素，则返回true。目前在IE中会返回false，他会自动插入缺失的tbody。迭代jQuery.each(object,callback)//遍历方法，可用于遍历对象和数组对于jQuery包装集我们可以用each(callback)方法迭代包装集中的每个元素，callback是一个回调函数，接受一个参数表示当前访问对象的索引$(“img”).each(function(i){console.log(“i===”+i);});对于数组我们可以使用jQuery.each(object,callback)来遍历，这等价于用for循环注意一下:传入的第一个参数可以是数组或者对象，如果数组，则遍历数组中的每一个对象，第一个参数表示索引，第二参数表示值，this表示当前遍历的元素$.each([“a”,”b”,”c”],function(I,n){console.log(“item”+i+”:”+n);});如果传递的是对象，则遍历对象的每一个属性，即使返回false也依然会遍历完所有的属性，第二个参数表示属性key,第二个参数表示值，this表示当前属性的值$(“#div”).click(function(event){$.each({name:”wjx”,sex:”male”,status:”single”},function(I,n){Console.log(“item”+I+”,value=”+n);});});筛选jQuery.grep(array,callback,[invert]);返回Array说明使用过滤函数过滤数组元素此函数至少传递两个参数，待过滤数组和过滤函数，过滤函数必须返回true以保留函数或false删除函数这个函数里$.grep([0,1,2],function(n,i){returnn>2;});转换jQuery.map(array,callback);返回值Array说明将一个数组中的元素转换到另一个数组中作为参数的转换函数会为每个数组元素调用，而且会给这个转换函数传递一个表示被转换的元素作为参数。转换函数可以返回转换后的值、null或一个包含值的数组，并扩展至原始数组中。vararr=["a","b","c","d","e"];console.log("arr=="+arr.join(","));arr=$.map(arr,function(n,i){console.log("map="+n.toUpperCase()+",index="+i);return(n.toUpperCase()+i);});console.log("arr=="+arr.join(","));结果arr==a,b,c,d,eanimate.php:26map=A,index=0animate.php:26map=B,index=1map=C,index=2map=D,index=3map=E,index=4arr==A0,B1,C2,D3,E4合并jQuery.extend([deep],target,object1,[objectN]);varsettings={validate:false,limit:5,name:'foo'};varoptions={validate:true,name:'bar',age:27};$.extend(settings,options);$.each(settings,function(key,value){console.log("key="+key+",value="+value);});结果：key=validate,value=truekey=limit,value=5key=name,value=barkey=age,value=27jQuery.makeArray(obj)将类数组对象转换为数组对象，类数组对象有length属性，其成员索引为0至length-1vararr=$.makeArray(document.getElementsByTagName("div"));$.each(arr,function(key,value){console.log("key="+key+",value="+valu