<!DOCTYPEhtml><html><head><title>jQuery全局昼夜效果切换</title><scriptsrc="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><styletype="text/css">body{background-color:#fff;/*默认白天背景*/color:#333;/*默认黑色字体*/transition:allease0.5s;/*过渡效果*/}.night-mode{background-color:#333;/*夜间模式背景色*/color:#fff;/*夜间模式字体颜色*/}</style></head><body><h1>这是一个标题</h1><p>这是一段正文。</p><ahref="#">这是一个链接</a><buttonid="night-mode-toggle">切换昼夜模式</button><scripttype="text/javascript">$(function(){$("#night-mode-toggle").click(function(){$("body").toggleClass("night-mode");//切换昼夜模式类名});});</script></body></html>在这个示例中,页面上有一个用于切换昼夜模式的按钮,当用户点击按钮时,通过jQuery切换body元素的类名来实现昼夜模式的切换。同时,CSS样式中定义了两种不同的颜色方案,根据body元素的类名来切换显示不同的颜色方案。这种方法简单易懂,适用于大部分网站的昼夜模式效果。
HTML代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>评论</title><scriptsrc="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script></head><body><divid="comment-list"><!--评论列表--></div><formid="comment-form"><textareaname="content"placeholder="请输入您的评论"></textarea><buttontype="submit">提交</button></form><script>//加载评论列表$(function(){$.get('comment.php',function(result){if(result.error){alert(result.error);}else{$('#comment-list').html(result.html);}});});//提交评论$('#comment-form').submit(function(event){event.preventDefault();vardata=$(this).serialize();$.post('comment.php',data,function(result){if(result.error){alert(result.error);}else{alert(result.msg);$('#comment-list').prepend(result.html);}});});</script></body></html>PHP代码(comment.php):<?php//模拟数据库存储评论$comments=[['id'=>1,'content'=>'这是一条评论'],['id'=>2,'content'=>'这是另一条评论'],];if($_SERVER['REQUEST_METHOD']=='GET'){//获取评论列表$html='';foreach($commentsas$comment){$html.='<div>'.htmlspecialchars($comment['content']).'</div>';}echojson_encode(['error'=>null,'html'=>$html]);}else{//新增评论$content=$_POST['content'];if(empty($content)){echojson_encode(['error'=>'评论内容不能为空']);}else{$id=count($comments)+1;$comments[]=['id'=>$id,'content'=>$content];$html='<div>'.htmlspecialchars($content).'</div>';echojson_encode(['error'=>null,'msg'=>'评论成功','html'=>$html]);}}这个示例实现了一个简单的评论功能,包括获取评论列表和新增评论两个操作。用户可以在页面中填写评论内容并提交,提交后会通过AJAX发送数据到后台的comment.php文件进行处理。注意事项:代码中使用了jQuery库来简化AJAX操作和DOM操作。为了简化示例代码,评论数据存储在一个PHP数组中,并没有真正存储到数据库中。为了防止XSS攻击,获取评论列表和新增评论时都对评论内容进行了htmlspecialchars()转义处理。为了方便调试,代码中使用了JSON格式输出结果。在实际应用中可以根据需要进行修改。
1、获取选中单选按钮的值$('input:radio:checked').val();$("input[type='radio']:checked").val();$("input[name='rd']:checked").val();$(':radio[name=rd]:checked').val();2、获取下拉框当前选中的文本$("#selectgame").find("option:selected").text();3、获取Select选择的ValuevarcheckValue=$("#select_id").val();//也可:varcheckValue=("#SiteManageIDoption:selected").val();4、获取Select选择的索引值varcheckIndex=$("#select_id").get(0).selectedIndex;5、获取Select最大的索引值varmaxIndex=$("#select_idoption:last").attr("index");6、为Select追加一个Option(下拉项)$("#select_id").append("<optionvalue='Value'>Text</option>");7、为Select插入一个Option(第一个位置)$("#select_id").prepend("<optionvalue='0'>请选择</option>");8、删除Select中索引值最大Option(最后一个)$("#select_idoption:last").remove();9、删除Select中索引值为0的Option(第一个)$("#select_idoption[index='0']").remove();10、删除Select中Value='3'的Option$("#select_idoption[value='3']").remove();11、删除Select中Text='4'的Option$("#select_idoption[text='4']").remove();12、清空$("#charCity").empty();13、判断一个单选(复选)框是否选中<inputid="checkbox1"type="checkbox"checked><inputid="checkbox2"type="checkbox>$("#checkbox1").is(":checked")//true$("#checkbox2").is(":checked")//false14、选取页面上所有name=song选中的复选框varobj=$(':checkbox[name="song"][checked=checked]');15、下拉框不可用按钮不可见$("#saveAuthority").css("display","none");复选框不可用$("input[type='checkbox']").attr("disabled","disabled");或$("input[type='checkbox']").attr("disabled",true);复选框可用:$("input[type='checkbox']").attr("disabled",false);16、下拉框某个option不可用17、根据数据库的值自动选中下拉框中对应的数据$("#state").find("option[value="+state+"]").attr("selected","true");18、弹出下拉框选中值的value
提前准备引入Jquery<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>引入lazyload<scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>HTML<divclass="picture_cont">无数个图片<imgclass="lazy"data-original="{{img.url}}"width="100%"height="100%"alt=""/></div>JavaScript$("img.lazy").lazyload({threshold:300,//滚动到距离图片300px时,开始加载图片effect:"fadeIn",//显示特效可选值fadeIn/show/sildeshowcontainer:$(".picture_cont"),//懒加载区域容器(有坑)failure_limit:10,//页面布局图片的顺序和html图片代码的顺序不一致;它会导致本该加载的没有加载,用它,尽量设置的高些kip_invisible:true,//为了提升性能,插件默认忽略隐藏的图片;如果想要加载隐藏图片.设置skip_invisible为false;event:"click",//图片点击后,才开始加载placeholder:'assets/img/grey.gif',//这个是加载前的显示图片});坑点lazyload 滚蛋懒加载默认监听的是window的滚动事件,如果是在某一个区域内进行懒加载处理,需要使用适用 lazyload的配置属性 containercontainer必须有属性scroll(就是开启溢出滚动)才能开启懒加载否则无懒加载效果,注意避坑!
Lazyload长页面图片的延迟加载:一,jquery.lazyload.js 注意事项:jquery.js务必先引进,然后才加载lazyload;img长宽一定要有,每幅长宽可以不一致;在js段,可以不用$(window).ready来加载事件;1.将图片路径写入data-original属性2.给lazyload的图片增加一个名为lazy的class3.选择所有要lazyload的图片(img.lazy),执行lazyload();下面举例说明://注意js引入的先后顺序<scriptsrc="jquery.js"></script><scriptsrc="jquery.lazyload.js"></script><imgclass="lazy"data-original="img/example.jpg"width="1330"height="900"><imgclass="lazy"data-original="img/example.jpg"width="400"height="200">//可以尺寸不一致...//无数张你想要加载的照片<script>//开始全局加载$(function(){$("img.lazy").lazyload();})</script>比较常用的方法提前加载——Thresholdlazyload默认是当滚动到该图片位置时,加载该图片。但是可以通过设置Threshold参数来实现滚到距离其xxpx时就加载。12345//自行就加载了<br data-filtered="filtered">$(function(){ $("img.lazy").lazyload({ threshold:20 }); }) 或12345$(window).ready(function(){ $("img.lazy").lazyload({ threshold:20 }); })事件触发(可以是jquery事件,也可以是自定义事件)——Event当触发定义的事件时,图片才开始加载12345//使图片点击后,才开始加载<br data-filtered="filtered">$(function(){ $("img.lazy").lazyload({ event:"click" }); })同时也可以123456789101112//自定义延迟多长时间再触发加载图片。这个类似EasyLazyload.js插件,下面会介绍到$(function(){ $("img.lazy").lazyload({ event:"sporty" });});$(window).bind("load",function(){ vartimeout=setTimeout(function(){ $("img.lazy").trigger("sporty") },5000);});设定效果——Effects1234//插件默认的加载效果是show(),你可以使用任何你想要的效果。比如fadeIn()淡入效果$("img.lazy").lazyload({ effect:"fadeIn"});滚动容器内的图片——container1234567891011<!--滚动容器内的图片。下面的div拥有scrollerbar,内容的内容进行滚动,滚到图片位置时,图片开始加载--><br data-filtered="filtered"><div style="height:600px;overflow:scroll"id="container"> <img class="lazy"data-original="img/example.jpg" alt=""style="margin-top:1000px"height="200"> <img class="lazy".../></div><script> $(function(){ $("img.lazy").lazyload({<br data-filtered="filtered"> effect:"fadeIn",//顺便添加个效果 container:$("#container") }); })</script>二,EasyLazyload.js比较全能的延迟加载,不会对样式有影响,最主要可以不用特意去设定图片的width和height(毕竟图片不一致的宽高大有人需要,难不成还真的一个一个去设定?)而且scroll到照片时,有缓冲视觉效果12345678910111213141516171819202122232425262728293031<!--先引入Easylazyload.js--><script src="jquery.min.js"></script><script src="EasyLazyload.min.js"><div id="container"style="overflow:scroll;background-color:black;"><!--把你想要的图片来源src换成data-lazy-src--><img data-lazy-src="img/1.png"><img data-lazy-src="img/2.png"><img data-lazy-src="img/3.png"><img data-lazy-src="img/4.png"><img data-lazy-src="img/5.png"></div><script>//调用全局方法lazyLoadInit()lazyLoadInit({ coverColor:"white",//图片即将显示时覆盖层的颜色; coverDiv:"<h1>test</h1>",//覆盖层可显示的土自定义组件 offsetBottom:0,//图片距离屏幕底部出现时间点的距离差值(注解:延迟加载图片会在图片顶部接触屏幕底部时出现,如果想要让图片顶部距离屏幕底部有一定距离时出现,请设置此值) offsetTopm:0,//图片距离屏幕底部出现时间点的距离差值(注解:同上,距离顶部) showTime:1100, onLoadBackEnd:function(i,e){ console.log("onLoadBackEnd:"+i); }//图片已经完全出现时的回调函数,参数为(index,event)加载的图片下标,以及dom对象(dom对象为jquerydom或zeptodom对象) ,onLoadBackStart:function(i,e){ console.log("onLoadBackStart:"+i); }//图片已经下载完成,即将开始显示时的回调函数(参数同上) });</script>关于Easylazyload.js的几个问题如果是从服务器上请求一系列图片,lazyLoadInit()应该放在哪里触发?在ajax调用成功后img的src替换完成后调用 lazyLoadInit lazyLoadInit()方法,ajax给img赋值data-lazy-src属性,然后在ajaxsuccess中调用Init方法,不然初始化的时候img的src属性还是空的;用瀑布流ajax动态加载的图片没有效果,在ajax里的complete方法中调用lazyLoadInit()试试
jqueryanimate动画详解(超简单易懂)animate()方法是jquery里的动画效果,通过修改css相关属性,在规定时间内,值是不断变化的从而形成了一种动画的效果。(selector).animate({styles},speed,easing,callback)styles必需。规定产生动画效果的一个或多个CSS属性/值。逗号分隔speed可选。规定动画的速度。可能的值毫秒"slow" "fast"easing可选。规定在动画的不同点中元素的速度。默认值是"swing"。可能的值:"swing"-在开头/结尾移动慢,在中间移动快"linear"-匀速移动提示:扩展插件中提供更多可用的easing函数。callback可选。animate函数执行完之后,要执行的函数。$(document).ready(function(){$("#btn1").click(function(){$("#box").animate({height:"300px"});});});单击按钮盒子变高到300px(达到300px不是在原基础上加300px),speed没写,默认是normal,easing默认swing,可以安装插件在插件中选择更多的移速效果,callback执行函数。注:css属性名必须要采用驼峰命名法,其次个别属性进行操作的时候,要符合要求,比如lefttop设置时要给相关元素进行定位,在进行颜色设置时,要加入颜色插件才能修改颜色。多属性$(document).ready(function(){$("#btn1").click(function(){$("#box").animate({height:"300px",width:"300px"});//多属性写在一起同时触发});动画队列 $(document).ready(function(){$("#btn1").click(function(){$("#box").animate({height:"300px",width:"300px"});//动画队列会按顺寻执行$("#box").animate({height:"100px",width:"100px"});});}); 属性相对值$(document).ready(function(){$("#btn1").click(function(){$("#box").animate({height:"+=100px",width:"+=300px"});//相对值书写在原有基础上增加100px});}); 回调函数$(document).ready(function(){$("#btn1").click(function(){$("#box").animate({height:"+=100px",width:"+=300px"},2000,function(){//回调函数$("#box").animate({height:"+=100px",width:"+=300px"},2000)});});});stop()停止动画队列。
在jquery中,eq()方法用于返回带有被选元素的指定索引号的元素,语法“$(selector).eq(index)”;而“:eq()”选择器用于选取带有指定索引值的元素,语法“$(":eq(index)")”。在jquery中,eq()分两种情况:eq()方法:eq()选择器jqueryeq()方法eq()方法返回带有被选元素的指定索引号的元素。索引号从0开头,所以第一个元素的索引号是0(不是1)。语法:$(selector).eq(index)index:必需。规定元素的索引,可以是整数或负数。如果使用负数将从被选元素的结尾开始计算索引。注:索引号(index)从0开头,所以第一个元素的索引号是0(不是1)。示例1:选取第二个<p>元素(索引号为1)<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="js/jquery-1.10.2.min.js"></script><script>$(document).ready(function(){$("p").eq(1).css("background-color","yellow");});</script></head><body><h1>欢迎来到站三界导航www.zhansanjie.com</h1><p>我的名字叫Donald(下标0).</p><p>DonaldDuck(index1).</p><p>我住在Duckburg(index2).</p><p>我最好的朋友是Mickey(index3).</p></body></html>示例2:使用负数从被选元素的结尾返回第二个<p>元素。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="js/jquery-1.10.2.min.js"></script><script>$(document).ready(function(){$("p").eq(-2).css("background-color","yellow");});</script></head><body><h1>站三界导航www.zhansanjie.com</h1><p>我的名字叫Donald。</p><p>DonaldDuck。</p><p>我住在Duckburg(将被选中,因为它是倒数第二个元素)。</p><p>我最好的朋友是Mickey。</p></body></html>jquery:eq()选择器:eq()选择器选取带有指定index值的元素。index值从0开始,所以第一个元素的index值是0(不是1)。最常见的用法:与其他选择器一起使用,选取指定组合中指定索引的元素。语法:$(":eq(index)")index:必需。规定元素的索引。示例:选取第二个<p>元素:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="js/jquery-1.10.2.min.js"></script><script>$(document).ready(function(){$("p:eq(1)").css("background-color","yellow");});</script></head><body><h1>站三界导航www.zhansanjie.com</h1><p>我的名字叫Donald。</p><p>DonaldDuck。</p><p>我住在Duckburg。</p><p>我最好的朋友是Mickey。</p></body></html>
jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。1.导航菜单背景切换效果在项目的前端页面里,相对于其它的导航菜单,激活的导航菜单需要设置不同的背景。这种效果实现的方式有很多种,下面是使用JQuery实现的一种方式:<ulid='nav'><li>导航一</li><li>导航二</li><li>导航三</li></ul>$('#nav').click(function(e){//要知道siblings的使用-站三界导航www.zhansanjie.com$(e.target).addClass('tclass').siblings('.tclass').removeClass('tclass');;});2.反序访问JQuery对象里的元素在某些场景下,我们可能需要反序访问通过JQuery选择器获取到的页面元素对象,这个怎么实现呢?看下面代码://要掌握JQuery对象的get方法以及数组的reverse方法即可vararr=$('#nav').find('li').get().reverse();$.each(arr,function(index,ele){.......});3.访问IFrame里的元素在大多数情况下,IFrame并不是好的解决方案,但由于各种原因,项目中确实用到了IFrame,所以你需要知道怎么去访问IFrame里的元素variFrameDOM=$("iframe#someID").contents();//然后,就可以通过find方法来遍历获取iFrame中的元素了iFrameDOM.find(".message").slideUp();4.管理搜索框的值现在各大网站都有搜索框,而搜索框通常都有默认值,当输入框获取焦点时,默认值消失。而一旦输入框失去焦点,而输入框里又没有输入新的值,输入框里的值又会恢复成默认值,如果往输入框里输入了新值,则输入框的值为新输入的值。这种特效用JQuery很容易实现:$("#searchbox").focus(function(){$(this).val('')}).blur(function(){var$this=$(this);//'请搜索...'为搜索框默认值-站三界导航www.zhansanjie.com($this.val()==='')?$this.val('请搜索...'):null;});5.部分页面加载更新为了提高web性能,有更新时我们通常不会加载整个页面,而只是仅仅更新部分页面内容,如图片的延迟加载等。页面部分刷新的特效在JQuery中也很容易实现:setInterval(function(){//每隔5秒钟刷新页面内容//获取的内容将增加到id为content的元素后$("#content").load(url);},5000);6.采用data方法来缓存数据在项目中,为了避免多次重复的向服务器请求数据,通常会将获取的数据缓存起来以便后续使用。通过JQuery可以很优雅的实现该功能:varcache={};$.data(cache,'key','value');//缓存数据//获取数据$.data(cache,'key');7.采配置JQuery与其它库的兼容性如果在项目中使用JQuery,$是最常用的变量名,但JQuery并不是唯一一个使用$作为变量名的库,为了避免命名冲突,你可以按照下面方式来组织你的代码://方法一:为JQuery重新命名为$jvar$j=jQuery.noConflict();$j('#id')....//方法二:推荐使用的方式(function($){$(document).ready(function(){//这儿,你可以正常的使用JQuery语法});})(jQuery);8.克隆tableheader到表格的最下面为了让table具有更好的可读性,我们可以将表格的header信息克隆一份到表格的底部,这种特效通过JQuery就很容易实现:var$tfoot=$('');$($('thead').clone(true,true).children().get().reverse()).each(function(){$tfoot.append($(this));});$tfoot.insertAfter('tablethead');9.根据视窗(viewport)创建一个全屏宽度和高度(width/height)的div下面代码完全可以让你根据viewport创建一个全屏的div。这对在不同窗口大小下展示modal或对话框时非常有效:$('#content').css({'width':$(window).width(),'height':$(window).height(),});//makesuredivstaysfullwidth/heightonresize$(window).resize(function(){var$w=$(window);$('#content').css({'width':$w.width(),'height':$w.height(),});});10测试密码的强度在某些网站注册时常常会要求设置密码,网站也会根据输入密码的字符特点给出相应的提示,如密码过短、强度差、强度中等、强度强等。这又是怎么实现的呢?看下面代码://下面的正则表达式建议各位收藏哦,项目上有可能会用得着$('#pass').keyup(function(e){//密码为八位及以上并且字母数字特殊字符三项都包括varstrongRegex=newRegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$","g");//密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等varmediumRegex=newRegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$","g");varenoughRegex=newRegExp("(?=.{6,}).*","g");if(false==enoughRegex.test($(this).val())){$('#passstrength').html('MoreCharacters');}elseif(strongRegex.test($(this).val())){$('#passstrength').className='ok';$('#passstrength').html('Strong!');}elseif(mediumRegex.test($(this).val())){$('#passstrength').className='alert';$('#passstrength').html('Medium!');}else{$('#passstrength').className='error';$('#passstrength').html('Weak!');}returntrue;});11.使用JQuery重绘图片的大小关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。$(window).bind("load",function(){//IMAGERESIZE$('#product_cat_listimg').each(function(){varmaxWidth=120;varmaxHeight=120;varratio=0;varwidth=$(this).width();varheight=$(this).height();if(width>maxWidth){ratio=maxWidth/width;$(this).css("width",maxWidth);$(this).css("height",height*ratio);height=height*ratio;}varwidth=$(this).width();varheight=$(this).height();if(height>maxHeight){ratio=maxHeight/height;$(this).css("height",maxHeight);$(this).css("width",width*ratio);width=width*ratio;}});//$("#contentpageimg").show();//IMAGERESIZE});12.滚动时动态加载页面内容有些网站的网页内容不是一次性加载完毕的,而是在鼠标向下滚动时动态加载的,这是怎么做到的呢?看下面代码:varloading=false;$(window).scroll(function(){if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){if(loading==false){loading=true;$('#loadingbar').css("display","block");$.get("load.php?start="+$('#loaded_max').val(),function(loaded){$('body').append(loaded);$('#loaded_max').val(parseInt($('#loaded_max').val())+50);$('#loadingbar').css("display","none");loading=false;});}}});$(document).ready(function(){$('#loaded_max').val(50);});
jQuery代码开发技巧收集,jquery常用的开发代码今天分享一个jquery常用的开发代码,大部分是网友总结的,总共60条。后期我也会陆续完善!把我在开发中常用的写在这里,希望持续关注~~1.使用siblings()来处理同类元素//Ratherthandoingthis$('#navli').click(function(){$('#navli').removeClass('active');$(this).addClass('active');});//Dothisinstead$('#navli').click(function(){$(this).addClass('active').siblings().removeClass('active');});2.选择或者不选页面上全部复选框vartog=false;//ortrueiftheyarecheckedonload$('a').click(function(){$("input[type=checkbox]").attr("checked",!tog);tog=!tog;});3.基于输入文字过滤页面元素//Ifthevalueoftheelementmatchesthatoftheenteredtext//itwillbereturned$('.gbin1Class').filter(function(){return$(this).attr('value')==$('input#gbin1Id').val();})4.取得鼠标的X和Y坐标$(document).mousemove(function(e){$(document).ready(function(){$().mousemove(function(e){$('#XY').html("Gbin1XAxis:"+e.pageX+"|Gbin1YAxis"+e.pageY);});});5.使得整个列表元素(LI)可点击$("ulli").click(function(){window.location=$(this).find("a").attr("href");returnfalse;});<UL><LI><Ahref="#">GBin1Link1</A></LI><LI><Ahref="#">GBin1Link2</A></LI><LI><Ahref="#">GBin1Link3</A></LI><LI><Ahref="#">GBin1Link4</A></LI></UL>6.使用jQuery来解析XMLfunctionparseXml(xml){//findeveryTutorialandprinttheauthor$(xml).find("Tutorial").each(function(){$("#output").append($(this).attr("author")+"");});}7.判断一个图片是否加载完全$('#theGBin1Image').attr('src','image.jpg').load(function(){alert('ThisImageHasBeenLoaded');});8.使用jQuery命名事件//Eventscanbenamespacedlikethis$('input').bind('blur.validation',function(e){//...});//Thedatamethodalsoacceptnamespaces$('input').data('validation.isValid',true);9.判断cookie是否激活或者关闭vardt=newDate();dt.setSeconds(dt.getSeconds()+60);document.cookie="cookietest=1;expires="+dt.toGMTString();varcookiesEnabled=document.cookie.indexOf("cookietest=")!=-1;if(!cookiesEnabled){//cookieshavenotbeenenabled}10.强制过期cookievardate=newDate();date.setTime(date.getTime()+(x*60*1000));$.cookie('example','foo',{expires:date});11.使用一个可点击的链接替换页面中所有URL$.fn.replaceUrl=function(){varregexp=/((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi;this.each(function(){$(this).html($(this).html().replace(regexp,'<Ahref="$1">$1</A>'));});return$(this);}//usage$('#GBin1div').replaceUrl();12.在表单中禁用“回车键”大家可能在表单的操作中需要防止用户意外的提交表单,那么下面这段代码肯定非常有帮助:$("#form").keypress(function(e){if(e.which==13){returnfalse;}});13.清除所有的表单数据可能针对不同的表单形式,你需要调用不同类型的清楚方法,不过使用下面这个现成方法,绝对能让你省不少功夫。functionclearForm(form){//iterateoveralloftheinputsfortheform//elementthatwaspassedin$(':input',form).each(function(){vartype=this.type;vartag=this.tagName.toLowerCase();//normalizecase//it'soktoresetthevalueattroftextinputs,//passwordinputs,andtextareasif(type=='text'||type=='password'||tag=='textarea')this.value="";//checkboxesandradiosneedtohavetheircheckedstatecleared//butshould*not*havetheir'value'changedelseif(type=='checkbox'||type=='radio')this.checked=false;//selectelementsneedtohavetheir'selectedIndex'propertysetto-1//(thisworksforbothsingleandmultipleselectelements)elseif(tag=='select')this.selectedIndex=-1;});};14.将表单中的按钮禁用下面的代码对于ajax操作非常有用,你可以有效的避免用户多次提交数据,个人也经常使用:禁用按钮:$("#somebutton").attr("disabled",true);启动按钮:$("#submit-button").removeAttr("disabled");可能大家往往会使用.attr(‘disabled’,false);,不过这是不正确的调用。15.输入内容后启用递交按钮这个代码和上面类似,都属于帮助用户控制表单递交按钮。使用这段代码后,递交按钮只有在用户输入指定内容后才可以启动。$('#username').keyup(function(){$('#submit').attr('disabled',!$('#username').val());});16.禁止多次递交表单多次递交表单对于web应用来说是个比较头疼的问题,下面的代码能够很好的帮助你解决这个问题:$(document).ready(function(){$('form').submit(function(){if(typeofjQuery.data(this,"disabledOnSubmit")=='undefined'){jQuery.data(this,"disabledOnSubmit",{submited:true});$('input[type=submit],input[type=button]',this).each(function(){$(this).attr("disabled","disabled");});returntrue;}else{returnfalse;}});});17.高亮显示目前聚焦的输入框标示有时候你需要提示用户目前操作的输入框,你可以使用下面代码高亮显示标示:$("form:input").focus(function(){$("label[for='"+this.id+"']").addClass("labelfocus");}).blur(function(){$("label").removeClass("labelfocus");});18.动态方式添加表单元素这个方法可以帮助你动态的添加表单中的元素,比如,input等://changeeventonpassword1fieldtopromptnewinput$('#password1').change(function(){//dynamicallycreatenewinputandinsertafterpassword1$("#password1").append("<inputtype='text'name='password2'id='password2'/>");});19.自动将数据导入selectbox中下面代码能够使用ajax数据自动生成选择框的内容$(function(){$("select#ctlJob").change(function(){$.getJSON("/select.php",{id:$(this).val(),ajax:'true'},function(j){varoptions='';for(vari=0;i<j.length;i++){options+='<optionvalue="'+j[i].optionValue+'">'+j[i].optionDisplay+'</option>';}$("select#ctlPerson").html(options);})})})20.判断一个复选框是否被选中代码很简单,如下:$('#checkBox').attr('checked');21.使用代码来递交表单代码很简单,如下:$("#myform").submit();22.创建一个嵌套的过滤器.filter(":not(:has(.selected))")//去掉所有不包含class为.selected的元素23.重用你的元素查询varallItems=$("div.item");varkeepList=$("div#container1div.item");<div>classnames:$(formToLookAt+"input:checked").each(function(){keepListkeepList=keepList.filter("."+$(this).attr("name"));});</div>24.使用has()来判断一个元素是否包含特定的class或者元素//jQuery1.4.*includessupportforthehasmethod.Thismethodwillfind//ifaanelementcontainsacertainotherelementclassorwhateveritis//youarelookingforanddoanythingyouwanttothem.$("input").has(".email").addClass("email_icon");25.使用jQuery切换样式//Lookforthemedia-typeyouwishtoswitchthensetthehreftoyournewstylesheet$('link[media='screen']').attr('href','Alternative.css');26.限制选择的区域//Wherepossible,pre-fixyourclassnameswithatagname//sothatjQuerydoesn'thavetospendmoretimesearching//fortheelementyou'reafter.Alsorememberthatanything//youcandotobemorespecificaboutwheretheelementis//onyourpagewillcutdownonexecution/searchtimesvarin_stock=$('#shopping_cart_itemsinput.is_in_stock');<ulid="shopping_cart_items"><li><inputvalue="Item-X"name="item"class="is_in_stock"type="radio">ItemX</li><li><inputvalue="Item-Y"name="item"class="3-5_days"type="radio">ItemY</li><li><inputvalue="Item-Z"name="item"class="unknown"type="radio">ItemZ</li></ul>27.如何正确使用ToggleClass//Toggleclassallowsyoutoaddorremoveaclass//fromanelementdependingonthepresenceofthat//class.Wheresomedeveloperswoulduse:a.hasClass('blueButton')?a.removeClass('blueButton'):a.addClass('blueButton');//toggleClassallowsyoutoeasilydothisusinga.toggleClass('blueButton');28.设置IE指定的功能if($.browser.msie){//InternetExplorerisasadist.}29.使用jQuery来替换一个元素$('#thatdiv').replaceWith('fnuh');30.验证一个元素是否为空if($('#keks').html()){//Nothingfound;}31.在无序的set中查找一个元素的索引$("ul>li").click(function(){varindex=$(this).prevAll().length;});32.绑定一个函数到一个事件$('#foo').bind('click',function(){alert('Userclickedon"foo."');});33.添加HTML到一个元素$('#lal').append('sometext');34.创建元素时使用对象来定义属性vare=$("",{href:"#",class:"a-classanother-class",title:"..."});35.使用过滤器过滤多属性//Thisprecision-basedapproachedcanbeusefulwhenyouuse//lotsofsimilarinputelementswhichhavedifferenttypesvarelements=$('#someidinput[type=sometype][value=somevalue]').get();36.使用jQuery预加载图片jQuery.preloadImages=function(){for(vari=0;i').attr('src',arguments[i]);}};//Usage$.preloadImages('image1.gif','/path/to/image2.png','some/image3.jpg');37.设置任何匹配一个选择器的事件处理程序$('button.someClass').live('click',someFunction);//NotethatinjQuery1.4.2,thedelegateandundelegateoptionshavebeen//introducedtoreplaceliveastheyofferbettersupportforcontext//Forexample,intermsofatablewherebeforeyouwoulduse..//.live()$("table").each(function(){$("td",this).live("hover",function(){$(this).toggleClass("hover");});});//Nowuse..$("table").delegate("td","hover",function(){$(this).toggleClass("hover");});38.找到被选择到的选项(option)元素$('#someElement').find('option:selected');39.隐藏包含特定值的元素$("p.value:contains('thetextvalue')").hide();40.自动的滚动到页面特定区域jQuery.fn.autoscroll=function(selector){$('html,body').animate({scrollTop:$(selector).offset().top},500);}//Thentoscrolltotheclass/areayouwishtogettolikethis:$('.area_name').autoscroll();42.检测各种浏览器DetectSafari(if($.browser.safari)),DetectIE6andover(if($.browser.msie&&$.browser.version>6)),DetectIE6andbelow(if($.browser.msie&&$.browser.version<=6)),DetectFireFox2andabove(if($.browser.mozilla&&$.browser.version>='1.8'))42.替换字符串中的单词varel=$('#id');el.html(el.html().replace(/word/ig,''));43.关闭右键的菜单$(document).bind('contextmenu',function(e){returnfalse;});44.定义一个定制的选择器$.expr[':'].mycustomselector=function(element,index,meta,stack){//element-isaDOMelement//index-thecurrentloopindexinstack//meta-metadataaboutyourselector//stack-stackofallelementstoloop//Returntruetoincludecurrentelement//Returnfalsetoexpludecurrentelement};//CustomSelectorusage:$('.someClasses:test').doSomething();45.判断一个元素是否存在if($('#someDiv').length){//hooray!!!itexists...}46.使用jQuery判断鼠标的左右键点击$("#someelement").live('click',function(e){if((!$.browser.msie&&e.button==0)||($.browser.msie&&e.button==1)){alert("LeftMouseButtonClicked");}elseif(e.button==2)alert("RightMouseButtonClicked");});47.显示或者删除输入框的缺省值//Thissnippetwillshowyouhowtokeepadefaultvalue//inatextinputfieldforwhenauserhasn'tenteredin//avaluetoreplaceitswap_val=[];$(".swap").each(function(i){swap_val[i]=$(this).val();$(this).focusin(function(){if($(this).val()==swap_val[i]){$(this).val("");}}).focusout(function(){if($.trim($(this).val())==""){$(this).val(swap_val[i]);}});});<INPUTclass=swapvalue="EnterUsernamehere.."type=text>48.指定时间后自动隐藏或者关闭元素(1.4支持)//Here'showweusedtodoitin1.3.2usingsetTimeoutsetTimeout(function(){$('.mydiv').hide('blind',{},500)},5000);//Andhere'showyoucandoitwith1.4usingthedelay()feature(thisisalotlikesleep)$(".mydiv").delay(5000).hide('blind',{},500);49.动态创建元素到DOMvarnewgbin1Div=$('');newgbin1Div.attr('id','gbin1.com').appendTo('body');50.限制textarea的字符数量jQuery.fn.maxLength=function(max){this.each(function(){vartype=this.tagName.toLowerCase();varinputType=this.type?this.type.toLowerCase():null;if(type=="input"&&inputType=="text"||inputType=="password"){//ApplythestandardmaxLengththis.maxLength=max;}elseif(type=="textarea"){this.onkeypress=function(e){varob=e||event;varkeyCode=ob.keyCode;varhasSelection=document.selection?document.selection.createRange().text.length>0:this.selectionStart!=this.selectionEnd;return!(this.value.length>=max&&(keyCode>50||keyCode==32||keyCode==0||keyCode==13)&&!ob.ctrlKey&&!ob.altKey&&!hasSelection);};this.onkeyup=function(){if(this.value.length>max){this.value=this.value.substring(0,max);}};}});};//Usage:$('#gbin1textarea').maxLength(500);51.为函数创建一个基本测试用例//Separatetestsintomodules.module("ModuleB");test("someothergbin1.comtest",function(){//Specifyhowmanyassertionsareexpectedtorunwithinatest.expect(2);//Acomparisonassertion,equivalenttoJUnit'sassertEquals.equals(true,false,"failingtest");equals(true,true,"passingtest");});52.使用jQuery克隆元素varcloned=$('#gbin1div').clone();53.测试一个元素在jQuery中是否可见if($(element).is(':visible')=='true'){//TheelementisVisible}54.元素屏幕居中jQuery.fn.center=function(){this.css('position','absolute');this.css('top',($(window).height()-this.height())/+$(window).scrollTop()+'px');this.css('left',($(window).width()-this.width())/2+$(window).scrollLeft()+'px');returnthis;}//Usetheabovefunctionas:$('#gbin1div').center();55.使用特定名字的元素对应的值生成一个数组vararrInputValues=newArray();$("input[name='table[]']").each(function(){arrInputValues.push($(this).val());});56.剔除元素中的HTML(function($){$.fn.stripHtml=function(){varregexp=/<("[^"]*"|'[^']*'|[^'">])*>/gi;this.each(function(){$(this).html($(this).html().replace(regexp,""));});return$(this);}})(jQuery);//usage:$('p').stripHtml();57.使用closest来得到父元素$('#searchBox').closest('div');58.使用firebug来记录jQuery事件//Allowschainablelogging//Usage:$('#someDiv').hide().log('divhidden').addClass('someClass');jQuery.log=jQuery.fn.log=function(msg){if(console){console.log("%s:%o",msg,this);}returnthis;};59.点击链接强制弹出新窗口jQuery('a.popup').live('click',function(){newwindow=window.open($(this).attr('href'),'','height=200,width=150');if(window.focus){newwindow.focus()}returnfalse;});60.点击链接强制打开新标签页jQuery('a.newTab').live('click',function(){newwindow=window.open($(this).href);jQuery(this).target="_blank";returnfalse;});61.简单的tab标签切换jQuery('#meeting_tabsulli').click(function(){jQuery(this).addClass('tabulous_active').siblings().removeClass('tabulous_active');jQuery('#tabs_container>.pane:eq('+jQuery(this).index()+')').show().siblings().hide();})<divid="meeting_tabs"><ul><liclass="tabulous_active"><ahref="#"title="">进行中</a></li><li><ahref="#"title="">未开始</a></li><li><ahref="#"title="">已结束</a></li><li><ahref="#"title="">全部</a></li></ul><divid="tabs_container"><divclass="pane">1</div><divclass="pane">2</div><divclass="pane">3</div><divclass="pane">4</div></div></div>是不是很简洁呢?62、js和jquery解决placeholder兼容IE8等低版本浏览器<scripttype="text/javascript">if(!('placeholder'indocument.createElement('input'))){$('input[placeholder],textarea[placeholder]').each(function(){varthat=$(this),text=that.attr('placeholder');if(that.val()===""){that.val(text).addClass('placeholder');}that.focus(function(){if(that.val()===text){that.val("").removeClass('placeholder');}}).blur(function(){if(that.val()===""){that.val(text).addClass('placeholder');}}).closest('form').submit(function(){if(that.val()===text){that.val('');}});});}</script>
1、JQuery的核心的一些方法each(callback)‘就像循环$("Element").length;‘元素的个数,是个属性$("Element").size();’也是元素的个数,不过带括号是个方法$("Element").get();‘某个元素在页面中的集合,以数组的形式存储$("Element").get(index);’功能和上面的相同,index表示第几个元素,数组的下标$("Element").get().reverse();‘把得到的数组方向$("Element1").index($("Element2"));’元素2在元素1中的索引值是。。。2、基本对象获取(注意这里获取的都是Jquery对象而不是Dom对象哦,但是他俩是可以转换滴)$("*")‘表示获取所有对象但是我至今没这样用过$("#XXX")’获得id=XXX的元素对象(id可以是标签的id或CSS样式id)常用$("input[name='username']")获得input标签中name='userName'的元素对象常用$(".abc")'获得样式class的名字是.abc的元素对象常用$("div")'标签选择器选择所有的div元素常用$("#a,.b,span")'表示获得ID是a的元素和使用了类样式b的元素以及所有的span元素$("#a.bp")'ID号是a的并且使用了b样式的所有的p元素3、层级元素获取$("Element1Element2Element3....")'前面父级后面是子集$("div>p")'获取div下面的所有的p元素$("div+p")'div元素后面的第一个p元素$("div~p")'div后面的所有的p元素4、简单对象获取$("Element:first")'HTML页面中某类元素的第一个元素$("Element:last")'HTML页面中某类元素的最后一个元素$("Element:not(selector)")'去除所有与给定选择器匹配的元素,如:$("input:not(:checked)")表示选择所有没有选中的复选框$("Element:even")'获得偶数行$("Element:odd“)'获得奇数行$("Element:eq(index)")'取得一个给定的索引值$("Element:gt(index)")'取得给定索引值的元素之后的所有元素$("Element:lt(index)")'取得给定索引值的元素之前的所有元素5、内容对象的获取和对象可见性$("Element:contains(text)")'元素中是否包含text文本内容$('Element:empty")'获得元素不包含子元素或文本的$("Element:parent")'获得元素包含子元素或文本的$("Element:has(selector)")‘是否包含某个元素,如:$("p:has(span)")表示所有包含span元素的p元素$("Element:hidden")'选择所有可见元素$("Element:visible")'选择所有不可见元素6、其他对象获取方法$("Element[id]")'所有带有ID属性的元素$("Element[attribute=youlika]"'获得所有某个属性为youlika的元素$("Element[attribute!=youlika]"'获得所有某个属性为不是youlika的元素$("Element[attribute^=youlika]"'获得所有某个属性为不是youlika的开头的元素$("Element[attribute$=youlika]"'获得所有某个属性为不是youlika的结尾的元素$("Element[attribute*=youlika]"'获得所有某个属性包含youlika的开头的元素$("Element[selector1][selector2][....]")’符合属性选择器,比如$("input[id][name][value=youlika]")表示获得带有ID、Name以及value是youlika的input元素。7、子元素的获取$("Element:nth-child(index)")'选择父级下面的第n个元素$("Element:nth-child(even)")'选择父级下面的偶数$("Element:nth-child(odd)")'选择父级下面的奇数$("Element:nth-child(3n+1)")'表达式$("Element:first-child")'选择父级下面的第一个子元素$("Element:last-child")'选择父级下面的最后一个子元素$("Element:only-child")'匹配父级下的唯一的一个子级元素,例如dt在dl列表中唯一,那么将选择dt8、表单对象获取$(:input)//查找所有的Input元素,当然也包括下拉列表,文本域,单选框,复选框等。$(:text)//匹配所有的单行文本框$(:password)//匹配所有的密码框$(:radio)//匹配所有的单选按钮$(:checkbox)//匹配所有的复选框$(:submit)//匹配所有的提交按钮$(:image)//匹配所有的图像域,例如$(:reset)//匹配所有的重置按钮$(:button)//匹配所有的按钮$(:file)//匹配所有的文件上传域$(:hidden)//匹配所有的不可见元素或者type为hidden的元素$(:enabled)//匹配所有可用的input元素,比如radio:enabled表示匹配所有可用的单选按钮$(:disabled)//匹配所有的不可用input元素,作用与上相反$(:checked)//匹配所有选中的复选框元素$(:selected)//匹配所有的下拉列表9、元素属性的设置与移除$("Element").attr(name)'取得第一个匹配的属性值,比如$("img").attr("src")$("Element".attr(key,value)")'某一个元素设置属性$("Element".attr({key:value,key1:value,....}))‘为某个元素一次性设置多个属性$("Element").attr(key,function)'为所有匹配的元素设置一个计算的属性值。$("Element").removeAttr(name)//移除某一个属性