JQuery特效(一)

jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。

据统计，全世界排名前100万的⽹站，有46%使⽤jQuery，远远超过其他库。

微软公司甚⾄把jQuery作为他们的官⽅库。

对于⽹页开发者来说，学会jQuery是必要的。

因为它让你了解业界最通⽤的技术，为将来学习更⾼级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。

⼀、选择⽹页元素jQuery的基本设计和主要⽤法，就是"选择某个⽹页元素，然后对其进⾏某种操作"。

这是它区别于其他函数库的根本特点。

使⽤jQuery的第⼀步，往往就是将⼀个选择表达式，放进构造函数jQuery()(简写为$)，然后得到被选中的元素。

选择表达式可以是CSS选择器：1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式：1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素，除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素，jQuery提供过滤器，可以缩⼩结果集：1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动⽅法：1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后，就可以对它进⾏某种操作。

效果图：CSS：html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,d el,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,tabl e,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }:focus { outline:0; }a:active { outline:none; }body { line-height:1; color:black; background:white; }ol,ul { list-style:none; }table { border-collapse:separate; border-spacing:0; }caption,th,td { text-align:left; font-weight:normal; }blockquote:before,blockquote:after,q:before,q:after { content:""; }blockquote,q { quotes:""""; }body {font:normal62.5%/1.5Helvetica,Arial,sans-serif;letter-spacing:0;color:#434343;background:#efefef url(../img/background.png)repeat top center;padding:20px0;position:relative;text-shadow:01px0rgba(255,255,255,.8);-webkit-font-smoothing: subpixel-antialiased;}#container {width:580px;padding:10px;margin:0auto;position:relative;z-index:0;}#example {width:600px;height:350px;position:relative;}#ribbon {position:absolute;top:-3px;left:-15px;z-index:500;}#frame {position:absolute;z-index:0;width:739px;height:341px;top:-3px;left:-80px;}#slides {position:absolute;top:15px;left:4px;z-index:100;}.slides_container {width:570px;overflow:hidden;position:relative;display:none;}.slides_container div.slide { width:570px;height:270px;display:block;}#slides.next,#slides.prev {position:absolute;top:107px;left:-39px;width:24px;height:43px;display:block;z-index:101;}#slides.next {left:585px;}.pagination {margin:26px auto0;width:100px;}.pagination li {float:left;margin:01px;list-style:none;}.pagination li a {display:block;width:12px;height:0;padding-top:12px;background-image:url(../img/pagination.png);background-position:00;float:left;overflow:hidden;}.pagination li.current a {background-position:0-12px;}.caption {z-index:500;position:absolute;bottom:-35px;left:0;height:30px;padding:5px20px020px;background:#000;background:rgba(0,0,0,.5);width:540px;font-size:1.3em;line-height:1.33;color:#fff;border-top:1px solid#000;text-shadow:none;}#footer {text-align:center;width:580px;margin-top:9px;padding:4.5px018px;border-top:1px solid#dfdfdf;}#footer p {margin:4.5px0;font-size:1.0em;}a:link,a:visited {color:#599100;text-decoration:none;}a:hover,a:active {color:#599100;text-decoration:underline;}.img_css{width:570px;height:270px;}JS：(function(a){a.fn.slides=function(b){return b=a.extend({},a.fn.slides.option,b),this.each(function(){function w(g,h,i){if(!p&&o){p=!0,b.animationStart(n+1);switch(g){case"next":l=n,k=n+1,k=e===k?0:k,r=f*2,g=-f*2,n=k; break;case"prev":l=n,k=n-1,k=k===-1?e-1:k,r=0,g=0,n=k;break;case"pagination":k=parseInt(i,10),l=a("."+b.pagin ationClass+" li."+b.currentClass+" a",c).attr("href").match("[^#/]+$"),k>l?(r=f*2,g=-f*2):(r=0,g=0),n=k}h==="fade"?b.crossfade?d.children(":eq("+k +")",c).css({zIndex:10}).fadeIn(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(" :eq("+k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+l+")",c).css({display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+l+")",c).css( {display:"none",zIndex:0}),d.children(":eq("+k+")",c).css({zIndex:0}),b.animationComplete(k+1),p=!1)}):d.childr en(":eq("+l+")",c).fadeOut(b.fadeSpeed,b.fadeEasing,function(){b.autoHeight?d.animate({height:d.children(":eq(" +k+")",c).outerHeight()},b.autoHeightSpeed,function(){d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasin g)}):d.children(":eq("+k+")",c).fadeIn(b.fadeSpeed,b.fadeEasing,function(){a.browser.msie&&a(this).get(0).style. removeAttribute("filter")}),b.animationComplete(k+1),p=!1}):(d.children(":eq("+k+")").css({left:r,display:"block" }),b.autoHeight?d.animate({left:g,height:d.children(":eq("+k+")").outerHeight()},b.slideSpeed,b.slideEasing,functi on(){d.css({left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"no ne",zIndex:0}),b.animationComplete(k+1),p=!1}):d.animate({left:g},b.slideSpeed,b.slideEasing,function(){d.css({ left:-f}),d.children(":eq("+k+")").css({left:f,zIndex:5}),d.children(":eq("+l+")").css({left:f,display:"none",zIndex:0 }),b.animationComplete(k+1),p=!1})),b.pagination&&(a("."+b.paginationClass+"li."+b.currentClass,c).removeClass(b.currentClass),a("."+b.paginationClass+"li:eq("+k+")",c).addClass(b.currentClass))}}function x(){clearInterval(c.data("interval"))}function y(){b.pause?(clearTimeout(c.data("pause")),clearInterval(c.data("interval")),u=setTimeout(function(){clearTimeou t(c.data("pause")),v=setInterval(function(){w("next",i)},b.play),c.data("interval",v)},b.pause),c.data("pause",u)):x( )}a("."+b.container,a(this)).children().wrapAll('<div class="slides_control"/>');var c=a(this),d=a(".slides_control",c),e=d.children().size(),f=d.children().outerWidth(),g=d.children().outerHeight(),h= b.start-1,i=b.effect.indexOf(",")<0?b.effect:b.effect.replace("","").split(",")[0],j=b.effect.indexOf(",")<0?i:b.effect.replace("","").split(",")[1],k=0,l=0,m=0,n=0,o,p,q,r,s,t,u,v;if(e<2)returna("."+b.container,a(this)).fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()}),a("."+b.next+", ."+ b.prev).fadeOut(0),!1;if(e<2)return;h<0&&(h=0),h>e&&(h=e-1),b.start&&(n=h),b.randomize&&d.randomize(),a( "."+b.container,c).css({overflow:"hidden",position:"relative"}),d.children().css({position:"absolute",top:0,left:d.ch ildren().outerWidth(),zIndex:0,display:"none"}),d.css({position:"relative",width:f*3,height:g,left:-f}),a("."+b.conta iner,c).css({display:"block"}),b.autoHeight&&(d.children().css({height:"auto"}),d.animate({height:d.children(":eq ("+h+")").outerHeight()},b.autoHeightSpeed));if(b.preload&&d.find("img:eq("+h+")").length){a("."+b.container,c ).css({background:"url("+b.preloadImage+") no-repeat 50% 50%"});var z=d.find("img:eq("+h+")").attr("src")+"?"+(newDate).getTime();a("img",c).parent().attr("class")!="slides_control"?t=d.children(":eq(0)")[0].tagName.toLowerCas e():t=d.find("img:eq("+h+")"),d.find("img:eq("+h+")").attr("src",z).load(function(){d.find(t+":eq("+h+")").fadeIn( b.fadeSpeed,b.fadeEasing,function(){a(this).css({zIndex:5}),a("."+b.container,c).css({background:""}),o=!0,b.slid esLoaded()})})}elsed.children(":eq("+h+")").fadeIn(b.fadeSpeed,b.fadeEasing,function(){o=!0,b.slidesLoaded()});b.bigTarget&&(d.ch ildren().css({cursor:"pointer"}),d.children().click(function(){returnw("next",i),!1})),b.hoverPause&&b.play&&(d.bind("mouseover",function(){x()}),d.bind("mouseleave",function() {y()})),b.generateNextPrev&&(a("."+b.container,c).after('<a href="#" class="'+b.prev+'">Prev</a>'),a("."+b.prev,c).after('<a href="#" class="'+b.next+'">Next</a>')),a("."+b.next,c).click(function(a){a.preventDefault(),b.play&&y(),w("next",i)}),a(". "+b.prev,c).click(function(a){a.preventDefault(),b.play&&y(),w("prev",i)}),b.generatePagination?(b.prependPagin ation?c.prepend("<ul class="+b.paginationClass+"></ul>"):c.append("<ul class="+b.paginationClass+"></ul>"),d.children().each(function(){a("."+b.paginationClass,c).append('<li><ahref="#'+m+'">'+(m+1)+"</a></li>"),m++})):a("."+b.paginationClass+" li a",c).each(function(){a(this).attr("href","#"+m),m++}),a("."+b.paginationClass+"li:eq("+h+")",c).addClass(b.currentClass),a("."+b.paginationClass+" li a",c).click(function(){returnb.play&&y(),q=a(this).attr("href").match("[^#/]+$"),n!=q&&w("pagination",j,q),!1}),a("a.link",c).click(function() {returnb.play&&y(),q=a(this).attr("href").match("[^#/]+$")-1,n!=q&&w("pagination",j,q),!1}),b.play&&(v=setInterval(fu nction(){w("next",i)},b.play),c.data("interval",v))})},a.fn.slides.option={preload:!1,preloadImage:"/img/loading.gi f",container:"slides_container",generateNextPrev:!1,next:"next",prev:"prev",pagination:!0,generatePagination:!0,p rependPagination:!1,paginationClass:"pagination",currentClass:"current",fadeSpeed:350,fadeEasing:"",slideSpeed: 350,slideEasing:"",start:1,effect:"slide",crossfade:!1,randomize:!1,play:0,pause:0,hoverPause:!1,autoHeight:!1,aut oHeightSpeed:350,bigTarget:!1,animationStart:function(){},animationComplete:function(){},slidesLoaded:functio n(){}},a.fn.randomize=function(b){function c(){return Math.round(Math.random())-.5}return a(this).each(function(){var d=a(this),e=d.children(),f=e.length;if(f>1){e.hide();var g=[];for(i=0;i<f;i++)g[g.length]=i;g=g.sort(c),a.each(g,function(a,c){varf=e.eq(c),g=f.clone(!0);g.show().appendTo(d),b!==undefined&&b(f,g),f.remove()})}})}})(jQuery)$(function(){$('#slides').slides({preload: true,preloadImage: 'img/loading.gif',play: 5000,pause: 2500,hoverPause: true,animationStart: function(current){$('.caption').animate({bottom:-35},100);if (window.console && console.log) {// example return of current slide numberconsole.log('animationStart on slide: ', current);};},animationComplete: function(current){$('.caption').animate({bottom:0},200);if (window.console && console.log) {// example return of current slide numberconsole.log('animationComplete on slide: ', current);};},slidesLoaded: function() {$('.caption').animate({bottom:0},200);}});});HTML：<body><div id="container"><div id="example">&nbsp;<div id="slides"><div class="slides_container"><div class="slide"><a href=""target="_blank"><img src="img/1.jpg" class='img_css'></a><div class="caption"style="bottom:0"><p>农民工人1</p></div></div><div class="slide"><img src="img/2.jpg"class='img_css'><div class="caption"><p>农民工人2</p></div></div><div class="slide"><img src="img/3.jpg"class='img_css'><div class="caption"><p>黑洞</p></div></div><div class="slide"><img src="img/4.jpg"class='img_css'><div class="caption"><p>嘿嘿的</p></div></div></div><a href="#"class="prev"><img src="img/arrow-prev.png"width="24"height="43" alt="Arrow Prev"></a><a href="#"class="next"><img src="img/arrow-next.png"width="24"height="43" alt="Arrow Next"></a></div><img src="img/example-frame.png"width="739"height="341"alt="Example Frame" id="frame"></div></div></body>。

jquery动感漂浮导航菜单代码分享这是⼀款基于jquery实现动感漂浮导航菜单的特效代码，菜单可以上下浮动，动感⼗⾜，为⾃⼰的⽹站增加了活⼒，是⼀款⾮常实⽤的导航菜单特效源码。

运⾏效果图：点击：为⼤家分享的jquery动感漂浮导航菜单代码如下<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery Floating Menu</title><script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script>$(document).ready(function () {//get the default top valuevar top_val = $('#menu li a').css('top');//animate the selected menu item$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});$('#menu li').hover(function () {//animate the menu item with 0 top value$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});},function () {//set the position to default$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});//always keep the previously selected item in fixed position$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});});});</script><style>#menu {list-style:none;padding:0;margin:0 auto;;height:70px;width:600px;}#menu li {float:left;width:109px;height:inherit;position:relative;overflow:hidden;}#menu li a {position:absolute;top:20px;text-indent:-999em;background:url(menu.png) no-repeat 0 0;display:block;width:109px;height:inherit;/* fast png fix for ie6 */position:relative;behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));}</style></head><body><br/><br/><br/><ul id="menu"><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li></ul><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery Floating Menu</title><script type="text/javascript" src="js/jquery-1.3.1.min.js"></script><script type="text/javascript" src="js/jquery.easing.1.3.js"></script><script>$(document).ready(function () {//get the default top valuevar top_val = $('#menu li a').css('top');//animate the selected menu item$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});$('#menu li').hover(function () {//animate the menu item with 0 top value$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});},function () {//set the position to default$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});//always keep the previously selected item in fixed position$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});});});</script><style>#menu {list-style:none;padding:0;margin:0 auto;;height:70px;width:600px;}#menu li {float:left;width:109px;height:inherit;position:relative;overflow:hidden;}#menu li a {position:absolute;top:20px;text-indent:-999em;background:url(menu.png) no-repeat 0 0;display:block;width:109px;height:inherit;/* fast png fix for ie6 */position:relative;behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));}</style></head><body><br/><br/><br/><ul id="menu"><li><a href="#">Item 1</a></li><li><a href="#">Item 2</a></li><li><a href="#">Item 3</a></li><li><a href="#">Item 4</a></li><li><a href="#">Item 5</a></li></ul>如果⼤家还想深⼊学习，可以点击、进⾏学习。

jquery用法jQuery是一种广泛应用于网页开发的JavaScript库，它极大地简化了HTML 文档遍历、事件处理、动画设计等常见的客户端脚本操作。

下面是jQuery的一些常见用法:1.选择器: jQuery提供了许多选择器来获取HTML元素，如元素选择器、id选择器、class选择器、属性选择器、伪类选择器、层次选择器等。

以下是一些常见的选择器：•('#element')：选择具有特定ID的元素•('.class')：选择具有特定类的元素•('input[type=“text”]')：选择特定类型的表单元素•('div:first')：选择第一个div•('ul li').eq(2)：选择ul下的第二个li元素2.事件处理: jQuery使得添加和处理事件变得容易。

以下是一些常见的事件处理函数：•click()：单击元素时触发•dblclick()：双击元素时触发•mouseenter()：鼠标移入元素时触发•mouseleave()：鼠标移出元素时触发•keydown()：按下键盘上的键时触发3.属性: jQuery提供了完善的属性操作，可以改变和获取元素的属性，例如：•attr(): 获取或设置元素的属性值•removeAttr(): 删除元素的属性值•prop(): 获取或设置元素的属性值，与attr()不同之处在于property值不会随着属性值的改变而改变4.动画效果: jQuery内置了一些动画效果，可以使网页更加动态。

以下是一些常见的动画效果：•fadeIn()：淡入元素，即从不可见到可见•fadeOut()：淡出元素，即从可见到不可见•slideDown()：向下展开元素•slideUp()：向上收缩元素•animate()：通过改变元素的CSS属性来创建自定义的动画效果5. AJAX: jQuery内置了AJAX的方法，可以在不刷新网页的情况下从服务器获取数据。

Javascript特效代码大全(420个)Javascript 特效代码├Cookie脚本├随访问次数变提示├集成Cookies ├使窗口仅弹出一次├签名提示程序├记录上次登录时间├自由控制打开窗口├记录页面修改时间├检测IE去过站点├离开时显示信息├弹出窗口自动关闭├离开页面弹出窗口├进入时显示信息├离开启动收藏夹├链接确认按钮├点击加入收藏夹├记录页面更新时间├页面载入等待├打开硬盘驱动器├设置默认首页├输入框测试警告├链接弹出警告框├关闭窗口链接├显示器分辨率检测├按分辨率导航├定制打开的窗口├控制窗口打开日期├打开窗口居中├输入框控制├查看输入框内容├显示所有链接├限时载入页面├输入框神秘消失├检测访问来源├回退的页面数├危险的链接├倒计时载入页面├自由打开窗口├检测IE所装插件├检测点链接速度├检测健康程度？├页面中打开窗口├特殊的Bookmark ├窗口打开关闭程序├随机显示一些数字├页面自动打开├进入弹出收藏夹├自动显示是否更新├浏览器详细报告├页面背景类├背景向下移动├背景不停变换色彩├使页面产生百叶窗├颜色代码英文集├自已选择背景颜色├背景颜色安全测试├颜色选择器├背景图片居中├页面转换特效├礼花背景├链接驱动背景色├手动调节背景色├鼠标使链接变色├跟随鼠标旋转背景├背景调色板├RGB颜色转换├按钮驱动背景├颜色选择器├精彩的变色文字├颜色选择器├闪烁的霓虹灯├星星从背景中飞出├背景向下移动(二) ├动态选择背景色├下雨├按钮驱动背景变化├按钮使背景闪烁├背景随机显示├背景快速闪烁├自己选择背景图片├文本特效类├随机信息显示├随机文本链接├所有链接不停变色├鼠标经过文字变色├随日期变换文本├文字颜色渐变脚本├文本自动输出├文字特效├文字不停变色├字符连续消隐├公告栏├文字动态变化├字符飞舞├文字特殊显示├文字从旁边出现├文本从右向左输出├消息显示器├随机跳出信息窗口├随机产生乱码├输入框各种效果├文字从左到右出现├信息逐条出现├选择显示文字方式├文字来回反弹├文字逐个出现├电子管显示├文字循环出现├可调节速度的撞击├逐字出现的信息条├自由控制文字输入├一段彩色的文字├可调节的输出形式├文字同时输出├调节文字移动形式├文字飘动输出├各种形式文字输出├文字逐个闪烁├文字上下跳动├文字变色逐个出现├点击改变文字├文字段任意移动├文字连续闪烁├点击出现链接├状态栏条├链接在右面打开├文字胡乱跳动├文字段到处飞舞├按钮驱动文字渐变├文字向左移动├文字弯曲变形├双重输入文字├综合字符集├文字从小变大├导航菜单类├树形菜单(一) ├树形菜单(二) ├树形菜单(三) ├页面搜索类├站内搜索脚本(一) ├站内搜索脚本(二) ├站内搜索脚本(三) ├站内搜索脚本(四) ├站内搜索脚本(五) ├站内搜索脚本(六) ├内部搜索脚本├时间日期类├任意位置显示时钟├倒计时代码生成器├八种风格时间显示├显示登陆时间├日历生成器├退出显示访问时间├一款特酷的时钟├全中文日期显示├纯JavaScript时钟├距离某天时间├显示特殊节日脚本├时钟加在背景上├Form 中的时钟├带开关的Form时钟├距离某日时间├记录几天后的日期├Form栏特全时钟├全球时间表├随时间变化提示├特酷的倒影时钟├特酷的日期显示├2000年日历├时间日期转换├时间跳动器├自己创建日历├生日提醒器├计算任一天星期几├离开某一天日期├按钮上的时间├Form中时间显示├检测星期几并导航├最近的星期天├全日制时钟├用图片显示日期├详细计算你的年龄├时间按钮提醒├计算出生时间├页面完成时间├页面导航类├显示站点信息导航├任意显示导航信息├动态导航脚本├下拉式导航菜单├静止导航菜单├静止图片脚本├文本静止不动├信息框显示链接├友情链接导航框├目录式导航菜单├重要信息说明脚本├滚动链接导航├图片代替按钮脚本├打开窗口等待├静态导航菜单├层叠式导航菜单├隐现导航脚本├页面内部导航├图片代替按钮脚本├打开窗口等待├滚动的超级链接├先后点击链接├按钮选择导航├不停变化的导航├随机的导航├链接窗口说明├同时打开多个链接├打开链接显示信息├又一动态导航脚本├Form框中导航├屏幕翻滚导航├带说明的导航├任意多友情链接├链接自动说明脚本├开始选择导航├链接处出现图标├导航菜单选择├按钮特效类├跑马灯式链接说明├窗口打开关闭├浮动的链接说明├链接处变换色彩├变换链接色和底色├按顺序点击链接├查看源代码按钮├前进后退按钮├按钮定制打开窗口├按钮打开全屏窗口├自由打开各种窗口├按钮回到默认首页├各种用途的按钮├频道方式打开窗口├按钮特殊效果├浏览器全屏显示├死机程序├跳出说明窗口├关不掉的跳出框├循环的警告框├检测页面来源├屏幕抖动脚本├页面被冻结├代码生成类├动态按钮代码生成├浏览器检测生成器├BrowserCheck脚本├彩色文字生成器├分割Frame的代码├主页制作器├综合类├加密页面源代码├访问时间限制├给页面加&#8220;热键&#8221; ├浏览器毁灭者├文本中首字母大写├查看某网址源代码├文本中首字母大写├综合的搜索引擎├搜索引擎登记├下载记时器脚本├随机播放背景音乐├随日期播放音乐├E-mail表单递交├Jsp容错脚本├计算器(一) ├计算器(二) ├计算器(三) ├网页调用另外网页├FTP页面登录├根据浏览器用CSS ├输入框的新属性├数字排序├发信(一) ├发信(二) ├发信(三)├发信(四) ├发信(五) ├发信(六) ├E-mail递交├元素周期表├显示人口数量├计算平面两点距离├页面自动刷新├又一个容错脚本表├打开多个搜索引擎├可选择的页面信息├直接页面显示器├MIDI音乐选择├页面特效类├字符从空中掉下来├打字机式输出文字├滚动显示的LOGO ├文本自动滚屏├控制别人输入字数├文本上下弹跳├特酷消隐字体├文本框栏目介绍├旋转变换文字├特酷的文本输出├页面自动滚屏效果├炽热的文字特效├鼠标响应文字变色├隐藏显示字符脚本├鼠标响应图片变化├星星满天闪烁├打开页面颜色渐变├页面打开特效├英文名字变日文├页面上下滚动├页面缩小特效├页面左右分开├特殊的HTML字符├图片满天飞舞├页面掉下去├页面向右滚屏├综合页面特效├图形图象类├禁止图片下载├图片隐现效果├随机显示图片├图片变形扭曲├雪景├图片渐渐出现├相片选择器├图形循环渐显├图形左右晃动├图形选择脚本├图片翻滚导航├图片定期消失├自由控制图片下载├自由设定图片大小├图片响应鼠标变换├图片自由运动├图片大小变换├图片随意移动├自动显示图片属性├图片循环显现├图片变化效果├随机显示banner ├鼠标驱动图片变化├图片不停闪烁├鼠标事件类├图片跟随鼠标├鼠标响应新页面├禁用鼠标左右键├鼠标控制窗口开关├鼠标点击效果├禁用右键自动导航├鼠标激活警告框├鼠标跟踪器├右键自动链接页面├跟随鼠标的星星├右键打开收藏夹├字符围绕鼠标├各种形状的鼠标├跟随鼠标的字符├非图片鼠标跟踪器├显示链接特征├改变链接属性├显示鼠标坐标├随鼠标的彩色字符├状态栏特效├状态栏跑马灯脚本├文字从右弹出├文字从左依次弹出├文字从右到左移动├文字快速依次弹出├文字组合弹出├文字不停闪烁├状态栏显示链接├title显示日期├文字来回出现├状态栏固定信息├状态栏特殊显示├虚拟格式化硬盘├状态栏显示输入├title显示时间├病毒入侵演示├文字从前后出现├文字慢慢出现├状态栏特殊效果├文字从中间出现├文字分解出现├输入字符在状态栏├文字多处出现├Title特效├调节文字显示速度├状态栏标准时钟├密码类├控制他人进入页面├用来实现会员制度├密码保护相应页面├自己编制密码表├密码保护页面(一)├游戏类├一款流行游戏├双人小游戏├动脑小游戏├模拟跳舞游戏├测试点击速度├模拟太空飞行├一个输赢游戏├测试打字速度├测试心算能力├选择路线游戏├射击小游戏├字符在FORM中坠落├堆积游戏├21点游戏├猜数的大小├找相同的图片├在线测试类├在线考试脚本(一) ├在线考试脚本(二) ├在线考试脚本(三) ├在线考试脚本(四) ├在线考试脚本(五) ├在线考试脚本(六) ├测试警告├技巧类├两个脚本同时调用├加快图片显示├页面自动刷新├模拟跳舞游戏├光标选择输入框├更方便的单选框├输入框无法输入├HTML加入jsp ├自动跳出Frame ├禁止页面加入缓存├制作分析统计器├密码输入框的问题├屏蔽HTML(说明) ├输入框特殊效果。

1.导航类 (5)(1)Horizontal accordion: jQuery (5)(2)jQuery-Horizontal Accordion (5)(3)jQuery plugin: Accordion (5)(4)Accordion Menu script (6)(5)模仿ext的tab选项卡 (6)(6) (8)（7）De-Constructing Accordion and Hover Effects with jQuery (8)（8）导航到页内指定位置 (9)（10） Sexy Drop Down Menu w/ jQuery & CSS (9)（11） A Different Top Navigation (10)（12）Sliding Jquery Menu Tutorial (10)（13）Animated Drop Down Menu with jQuery (10)14. jQuery UI错误！未找到索引项。

Potato Menu (10)15. Make a Mega Drop-Down Menu with jQuery (11)（16）Superfish v1.4.8 – jQuery menu plugin by Joel Birch (11)（17）jQuery (mb)Menu 2.7 (11)（18） jQuery File Tree (12)19.jQuery & CSS Example – Dropdown Menu (12)20. Reinventing a Drop Down with CSS and jQuery (12)21. Simple jQuery Dropdowns (13)22. Styling Drop Down Boxes with jQuery (13)23. jQuery iPod-style Drilldown Menu (13)24. jQuery Menu: Dropdown, iPod Drilldown, and Flyout styles with ARIA Support and ThemeRoller Ready (14)25. mcDropdown jQuery Plug-in v1.2.07 (14)26. jQuery Drop Line Tabs (14)27. Cut & Paste jQuery Mega Menu (15)28. jdMenu Hierarchical Menu Plugin (15)2.消息提示类 (15)（1）Facebox (15)（2）SimpleModal (16)（3）jTip (16)（4）BetterTip (17)（5）clueTip (17)（6）jQuery lightBox plugin (17)（7）jQuery Impromptu (18)（8）jQuery.UI Messenger"Outlook like message notification Widget (18)（9）FancyBox (18)（10）Coda Popup Bubbles (19)（11）jGrowl (19)（12）jqWindowsEngine (20)（13）jQuery Alert Dialogs (20)（14）BeautyTips (21)（15）Facebook/Xiaonei 风格模态框 (21)3.图片展示类 (22)(1)imgAreaSelect (22)(3)Easy News (23)(4)jQZoom (24)(5)jCarousel Lite (24)(6)jCarousel (25)(7)Spacegallery-Jquery (25)(8)jQuery Slider Gallery (25)(9)jQuery Cycle Plugin (26)(10)Zoomimage (26)(11)prettyPhoto (27)(12)ThickBox (28)(13)Galleria (28)(14)jQuery Flash Plugin (29)(15)jQuery.SerialScroll (29)(16)InnerFade (30)(17)NyroModal (30)(18)CrossSlide (31)(19)Magnify (31)(20)Img Notes (32)(21)FancyZoom (32)(22)Jcrop (33)(23)Galleriffic (33)(24)Image Upload and Auto Crop (34)(25)prettyGallery (34)(26)jQuery.popeye (34)(27)s3Slider (35)(28)Pirobox (36)(29)Simple Controls Gallery (36)(30)Agile Carousel (36)(31)jQuery Plugin-Page Peel (37)(32)Easy Slider (37)(33)imgPreview (38)(34)Jquery Fade In.Fade Out (38)(35)Captify (38)(36)jParallax (39)(37)jQuery---运用图片预加载技术打造幻灯片 (40)(38)jQuery pageSlide (40)(39)Creating a Slick Auto-Playing Featured Content Slider (41)(40)Portfolio Layout Idea Using jQuery (41)(41)jQuery---图片先模糊后清楚 (42)(42)使用jQuery实现网页报纸 (42)(43)jQuery购物网站产品展示. (42)(44)Gallerific (43)(45)ZoomImage (44)(46)EasySlider (44)(47)The Slider from Barack Obama’s website (45)(48)CodaSlider (45)(50)Beautiful Slider 热点图书： (46)(51)LoopedSlider (46)(52)SpaceGallery (47)(53)jQuery Popeye (47)(54)Noobslide 热点图书： (48)(55)Accessible News Slider 热点图书： (48)(56)SmoothGallery 热点图书： (48)(57)jQuery Multimedia Portfolio (49)(58)s3Slider (49)(59)fxMarquee (49)(60)商品放大镜效果 (50)(61)PageSlide (51)64.不错的图片分类展示或者文字展示效果 (53)67.利用z-index做的图片展示效果 (54)4.自动填充类 (54)（1）AutoComplete-JQuery (54)（2）Facebook like Autocomplete (55)（3）jQuery Autocomplete Mod (55)（4）jqac (55)（5）jQuery Tag Suggestion (55)（6）Autocomplete-jQuery ajax (55)（7）jQuery.Suggest (56)（8）Autocomplete- jQuery plugin (56)（9）jQuery plugin: Autocomplete (56)（10）jSuggest (56)（11）jQuery Live Ajax Search Plug-in (57)（12）ddcombobox (57)5.分页类 (59)（1）jQuery Pagination (59)（2）pager jQuery plug-in (59)（3）JQuery Pager (60)6.编辑器类 (60)（1）jwysiwyg (60)（2）Damn Small Rich Text Editor (60)(3)xhEditor (61)7.表格类 (61)(1)Flexigrid (61)(2)Ingrid (61)(3)jQuery Grid (62)(4)tableHover (62)(5)JQuery.Resizer (63)(6)tablesorter (63)(7)csv2table (63)(8)tableFormSynch (64)8.色彩选择器类 (64)(1) Farbtastic (64)9.数据验证类 (66)1. jQuery plugin: Validation (66)2. Masked Input Plugin (66)3 jVal (67)10.报表类 (67)1 (67)2. Flot (67)3. jQchart (68)4 jquery.sparkline (68)5. jQuery Google Charts (演示地址) (69)6. jqPlot (演示地址) (69)11.上传类 (69)1. jqUploader (69)2. jQuery Multiple File Upload Plugin (69)3. jQuery: Ajax file upload (69)12.日期时间类 (70)1. jQuery UI Datepicker (70)2. Date Picker (70)3. Date Range Picker (70)13.圆角效果类 (71)1. jQuery Corner (71)2. JQuery Curvy Corners (71)3. jQuery Corner (72)4. jQuery Corners (72)14.评价类 (73)（1）Creating a Dynamic Poll with jQuery and PHP (73)（3） jQuery Ajax Rater Plugin (74)4. Star Rating widget (74)5. jQuery Star Rating Plugin (74)6. Ajax Poll (74)7.jQuery 投票调查组件 (75)15.虚拟键盘类 (76)1 (76)2.jQuery 虚拟键盘 (77)3.Virtual keyboard 虚拟键盘 (77)16.Form元件扩展 (77)（1）bobox (77)（2）jquery button:对按钮的扩展 (78)(3)ContextMenu (78)（4） (78)（5）在链接旁边加一个小图标效果 (79)6 jNice (79)7. jQuery calculate (79)8. jQuery select box (79)9. prettyCheckboxes (80)12. mcDropdown jQuery Plug-in (81)13. Create A Slider From A Select Box (81)14. TextArea Resizer (81)15. jQuery MultiSelect (82)16. Editable(jQuery Editable Plugin) (82)17. NicejForm (82)18. jScrollPane (83)19.利用jQuery制作类似skype的按钮效果. (83)20.jCheckbox: (83)（21）jQuery asmSelect 感谢博览群书友情提供 (84)17.游戏类 (84)1.连连看 (84)18.代码高亮类 (84)1. beautyOfCode (演示地址) (84)2. Chili (演示地址) (84)3. Highlight plugin (演示地址) (85)1.导航类(1)Horizontal accordion: jQuery基于jQuery开发，非常简单的水平方向折叠控件。

JQUERY教程JQUERY简介jquery库的新特性：jquery是一个javascript的函数库，它包含以下特性：html元素选取、html元素操作、css操作、html事件函数、javascript特效和动画、html dom遍历和修改、ajax、utilites 向页面中添加jquery库。

Jquery库位于一个javascript文件中，其中包含了所有的jquery 函数，可以通过以下标记把jquery添加到页面中：注意：<script>标签应该位于页面的<head>部分Jquery的实例：hide()函数，隐藏了html中所有的<p>标签效果：页面会出现三段字和一个按钮，当点击按钮时，<p>标签里边的字将自动隐藏库的代替：Google和Microsoft对jquery的支持都很好。

如果不从自己的计算机上加载jquery库，可以从Google和Microsoft加载CDNjquery的核心文件使用Google的CDN：使用Microsoft的CDN：Jquery语法通过jQuery，您可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。

Jquery语法实例$(this).hide(); 演示jquery hide（）函数，隐藏当前的html元素$(“#this”).hide(); 演示jquery hide（）函数，隐藏id为test的元素$(“p”).hide(); 演示jquery hide（）函数，隐藏所有p标签元素$(“.this”).hide(); 演示jquery hide（）函数，隐藏class为test的元素Jquery语法基础语法是$(selector).action();美元符号定义jquery，选择符（selector）查询和查找html元素，jquery的action（）执行对元素的操作例如：$(“p”),hide(); 隐藏所有段落$(“p.test”).hide(); 隐藏所有class为test的段落等提示：jQuery使用的语法是XPath与CSS 选择器语法的组合。

JQuery 常用技巧 ：jquery对象与dom对象的转换博客分类： javascriptjQueryIECSS浏览器HTML1、关于页面元素的引用通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换只有jquery对象才能使用jquery定义的方法。

注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。

普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。

由于jquery对象本身是一个集合。

所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。

以下几种写法都是正确的：$("#msg").html();$("#msg")[0].innerHTML;$("#msg").eq(0)[0].innerHTML;$("#msg").get(0).innerHTML;3、如何获取jQuery集合的某一项对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。

2z a阶段实验报告课程名称：使用JQuery快速高效制作网页交互特效章节名称：JavaScript基础授课教师：总第 2 次实验，本次第 2 阶段以下部分由授课教师填写：分配时间90 (分钟) √ 必须完成提高完成技能要点及思路提示任务一：键盘输入实现打印需求说明：1、根据键盘输入的次数，打印出效果截图：如果是5次显示，再次显示“共连续输出标题：5次”参考代码：将实验结果及代码写到任务一任务二：统计包含“a”的字符串的个数效果截图：参考代码：将实验结果及代码写到任务二任务三：无参函数的使用需求说明：1、创建无参函数，实现根据键盘输入输出内容2、通过按钮事件调用实现功能。

效果截图：参考代码：将实验结果及代码写到任务三任务四：有参函数的使用需求说明：1、创建有参函数，实现根据键盘输入输出内容2、通过按钮事件调用实现功能。

效果截图：将实验结果及代码写到任务四任务五：匿名函数的使用需求说明：1、创建匿名函数，实现根据键盘输入输出内容2、通过按钮事件调用实现功能。

效果截图：参考代码：将实验结果及代码写到任务五任务六：统计成绩需求说明：1、根据循环实现键盘的多次输入。

2、需要判断输入的内容必须是数字，不能是负数。

3、显示输入的成绩总和。

参考代码：以下部分由学生填写：姓名：学号：本阶段实验完成情况：能否在分配时间内完成：提早完成正常完成差一些不能完成(请在前面勾选√)实验结果及实验总结请对以下内容作简要描述：实验结果；实验完成情况；实验过程遇到的困难及解决方法；任务一：任务二：任务三：任务四：任务五：任务六：。

jQuery+CSS3⽂字跑马灯特效的简单实现jQuery+CSS3⽂字跑马灯特效是⼀款将跑马灯背景制作为3D⽴⽅体效果，⽂字在上⾯移动时，就像是⽂字投影到墙壁上，在转⾓出会改变运动⽅向。

效果图如下：完整HTML代码如下：<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery+CSS3⽂字跑马灯特效 - 何问起</title><base target="_blank" /><link rel="stylesheet" href="/texiao/jquery/83/css/style.css"></head><body><div id="hovertreemarquee"><div><span>I &#x2764; HoverTree 我&#x2764;何问起 </span></div><div aria-hidden="true"><span>I &#x2764; HoverTree 我&#x2764;何问起 </span></div></div><form onsubmit="setText(event)"><label for="textsource">使⽤你⾃⼰的⽂本</label><input type="text" id="textsource" value=" Is A Good Site!" autocapitalize="characters" pattern=".{5,60}" title="5-30个字符长度" placeholder="请输⼊⽂本："> <input type="submit" class="btn" value="使⽤"></form><div class="hovertreeinfo"><p>可以输⼊其他⽂本，然后点击“使⽤”按钮。

jQuery实现的购物车物品数量加减功能代码本⽂实例讲述了jQuery实现的购物车物品数量加减功能。

分享给⼤家供⼤家参考，具体如下：今天⽹友翠⼉在⽤Jquery实现购物车物品数量的加减特效的时候遇到问题来问我，我后来帮她解决了这个Jquery特效，现在把它整理出来分享给⼤家⽤，虽然功能⽐较简单，但是很实⽤。

主要包括了以下功能：1、数量增加操作功能2、数量减少操作功能3、总价计算功能4、⾃动判断数量到1的时候，减少操作按钮禁⽌点击，数量增加时⾃动恢复5、保留⼩数点位数toFixed()函数⾮常实⽤功能代码如下：$(function(){//获得⽂本框对象var t = $("#text_box");//数量增加操作$("#add").click(function(){t.val(parseInt(t.val())+1)if (parseInt(t.val())!=1){$('#min').attr('disabled',false);}setTotal();})//数量减少操作$("#min").click(function(){t.val(parseInt(t.val())-1);if (parseInt(t.val())==1){$('#min').attr('disabled',true);}setTotal();})//计算操作function setTotal(){$("#total").html((parseInt(t.val())*3.95).toFixed(2));//toFixed()是保留⼩数点的函数很实⽤哦}//初始化setTotal();})更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。

jquery的slide方法jQuery的slide方法是jQuery库中提供的一种动画效果方法，它可以用于实现元素的滑动效果。

在web开发中，通过使用slide方法可以使页面中的元素在水平或垂直方向上平滑滑动，给用户带来更好的交互体验。

使用slide方法的基本语法如下：$(selector).slide(speed, callback);其中，selector是要应用滑动效果的元素选择器，speed是动画的速度，可以取以下几个值："slow"，"fast"，或者毫秒数，callback是动画完成后要执行的回调函数。

具体来说，slide方法可以分为以下几种形式：1. slideDown：滑动下拉，通过向下展开元素来显示它。

基本用法如下：$(selector).slideDown(speed, callback);2. slideUp：滑动上拉，通过向上收缩元素来隐藏它。

基本用法如下：$(selector).slideUp(speed, callback);3. slideToggle：切换滑动，如果元素处于隐藏状态，则通过展开来显示它；如果元素处于显示状态，则通过收缩来隐藏它。

基本用法如下：$(selector).slideToggle(speed, callback);4. slideLeft：向左滑动，通过向左平滑滑动元素来显示它。

基本用法如下：$(selector).animate({marginLeft:'-200px'}, speed);5. slideRight：向右滑动，通过向右平滑滑动元素来显示它。

基本用法如下：$(selector).animate({marginLeft:'200px'}, speed);6. slideLeftToggle：切换向左滑动，如果元素处于隐藏状态，则通过向左滑动来显示它；如果元素处于显示状态，则通过向右滑动来隐藏它。

代码如下：<!DOCTYPE html><html><head><title>左右移动焦点图片</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="/jquery-1.7.1.min.js"></script> <style type="text/css">/*-----------左右控制焦点图-------------*/#focus_picture_control{position:relative;top:120px;border:1px #EAEAEA solid;height:135px;width:490px;}/*左右两边的控制按钮*/#focus_picture_control > span{position:absolute;background:url("files/pc_servers.png") no-repeat scroll 0px 0px transparent;height:135px;width:25px;cursor:pointer;}span#left_control{background-position:-235px 59px;left:0px;display:block;}span#right_control{background-position:-210px 59px; right:0px;display:block;}span#left_control:hover{ background-position:-235px -34px;}span#right_control:hover{ background-position:-210px -34px; }/*中间的焦点图*/#focus_pictures_control{ position:relative;width:440px;height:135px;overflow:hidden;}#focus_pictures_control ul{ position:relative;list-style:none;width:440px;height:135px;top:-16px;}#focus_pictures_control ul li{ position:relative;float:left;width:440px;left:-40px;height:135px;}#focus_pictures_control ul li img{border:0px;}#focus_pictures_control ul li span{float:left;}</style><script type="text/javascript">$(function(){var fwidth=$("#focus_pictures_control ul li").width(); //获取单个图片的宽度var lens=$("#focus_pictures_control ul li").length; //获取图片的个数var indexes=0;var picTimers;//为左右按钮添加鼠标按下事件，以显示相应的内容$("span#left_control").mousedown(function(){indexes++; //每次往左移则indexes值加1if(indexes==lens) //若当前为最后一张图，则将其切换到第一张图，否则往左移{showFirPic();indexes=0;}elseshowpics(indexes);});$("span#right_control").mousedown(function(){indexes--;if(indexes==-1) //若当前为第一张图，则将其切换到最后一张图，否则往右移{showLasPic();indexes=lens-1;}elseshowpics(indexes);});//为了实现左右滚动，需要将所有的LI元素放在同一排，所以要计算出ul的宽度$("#focus_pictures_control ul").css("width",fwidth*(lens+1)); //因为要实现循环的效果，所以要将ul的宽度再多一列//鼠标滑上焦点元素时停止自动播放，滑出时开始自动播放$("#focus_picture_control").hover(function(){clearInterval(picTimers); //清除动画},function(){ //平常为往左自动播放picTimers=setInterval(function(){indexes++;if(indexes==lens){showFirPic();indexes=0;}else{showpics(indexes);}},3000);});$("#focus_picture_control").trigger("mouseleave"); //默认触发鼠标离开事件，即自动播放//显示图片函数function showpics(i){var nowleft=-i*fwidth; //若为后退，则在引用前索引值就已经被减去1了$("#focus_pictures_control ul").stop(true,true).animate({"left":nowleft},500);}//最后一张图切换到第一张function showFirPic(){$("#focus_pictures_control ul").append($("#focus_pictures_control ul li:first").clone()); //将第一张图添加到最后去var nowLeft=-lens*fwidth; //通过li元素个数计算ul元素的left 值，也就是最后一个li元素的右边$("#focus_pictures_control ul").stop(true,true).animate({"left":nowLeft},500,function(){ $("#focus_pictures_control ul").css("left","0px");$("#focus_pictures_control ul li:last").remove();}); //往左移后再将整个元素恢复到最初样式}//第一张图切换到最后一张function showLasPic(){//先将整体往左移一列showpics(1); //*重点$("#focus_pictures_control ul").prepend($("#focus_pictures_control ul li:last").clone());//因为整体先往左移了，所以在最前添加一列时，往左移动的列又会回到原处。

jQuery基础教程jQuery是什么？jQuery是⼀个JavaScript常⽤的⼯具函数库。

jQuery是⼀个轻量级的"写的少，做的多"的JavaScript库。

jQuery当中包含有以下⼀些常⽤功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities下⾯的内容当中，我们会逐⼀的介绍jQuery的常⽤内容。

学习jQuery的⼼态以练为主，多看多练以js为基础，更好的理解jQueryjQuery只是js的⼀个函数库，不能忘记jsjQuery的版本问题⽬前jQuery有三个⼤版本，1.xx 、 2.xx 和 3.xx ，三个版本当中，1版本兼容性最⾼，可以有效的兼容ie浏览器，6，7，8，9都能得到⼀个很好的兼容，2版本则最低只能兼容到ie9，⽽3版本则彻底放弃了ie9以下的浏览器。

但是却新增加了很多的使⽤的⽅法，并且代码的安全性也增加很多，例如可以很好的防⽌xss攻击等。

jQuery的使⽤⾸先，我们可以根据需要下载⼀个指定版本的jquery⽂件，当然也可以选择使⽤cdn⽂件。

js 官⽅⽹址: /常⽤CDN:<script src="/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery<script src="/libs/jquery/jquery-2.0.2.min.js"> </script> 右拍云<script src="/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 新浪jQuery 中的核⼼语法在jQuery当中，jQuery是⼀个核⼼⽅法，⽤来查找元素从⽽⽅便对元素的操作，可以简写为$。

jQuery练习题一、基础知识篇A. $(document).ready(function(){}B. jQuery(document).ready(function(){}C. $().ready(function(){}D. $(function(){}2. 如何获取页面中id为"demo"的元素？选择所有div元素选择class为"active"的元素选择所有可见的p元素4. jQuery中的哪个方法用于绑定事件？5. 如何在jQuery中设置元素的样式？二、操作DOM篇添加元素删除元素替换元素复制元素2. 如何使用jQuery获取和设置元素的内容？3. 请实现一个简单的折叠菜单，菜单时，显示或隐藏菜单内容。

4. 如何使用jQuery实现元素的淡入和淡出效果？5. 请使用jQuery为表格添加隔行变色效果。

三、事件处理篇1. 请列举至少三种jQuery中的鼠标事件。

2. 如何在jQuery中为多个事件绑定同一个处理函数？3. 请实现一个简单的图片轮播效果。

4. 如何使用jQuery阻止事件冒泡？5. 请使用jQuery实现一个可拖拽的div元素。

四、动画与特效篇滑动显示/隐藏元素淡入/淡出元素自定义动画2. 如何使用jQuery实现元素的抖动效果？3. 请使用jQuery实现一个简单的折叠面板。

4. 如何使用jQuery为元素添加和移除类？5. 请实现一个使用jQuery的 tooltip 提示效果。

五、AJAX篇1. 请简述jQuery中$.ajax()方法的基本使用。

2. 如何使用jQuery发送GET请求？3. 请使用jQuery发送POST请求，并传递参数。

4. 如何使用jQuery处理AJAX请求的返回数据？5. 请实现一个简单的用户登录验证功能，使用jQuery发送AJAX 请求。

六、高级应用篇1. 请使用jQuery实现一个插件。

2. 如何使用jQuery扩展自定义方法？3. 请使用jQuery实现一个简单的模态框（对话框）。