jQuery有很多的效果可以实现，比如说淡入淡出的效果：<html>
<head> <style> #box{width:200px;height:200px;background:red;opacity:1;} </style> </head> <body> <div> </div> <input type="button" value="隐藏/显示"id="bt1"><br/><br/> <input type="button" value="淡入"id="bt2"><br/><br/> <input type="button" value="淡出"id="bt3"><br/><br/> <input type="button" value="滑入"id="bt4"><br/><br/> <input type="button" value="滑出"id="bt5"><br/><br/> <input type="button" value="半透明"id="bt6"><br/><br/> <input type="button" value="滑入/滑出"id="bt7"><br/><br/> <input type="button" value="淡入入/淡出"id="bt7"><br/><br/> </body> <script src="https://www.jb51.net/jquery-1.6.js"></script> <script> $(function(){ $("#bt1").click(function(){ $("#box").toggle(1000) }), $("#bt2").click(function(){ $("#box").slideDown(1500) }), $("#bt3").click(function(){ $("#box").slideUp(1500) }), $("#bt4").click(function(){ $("#box").fadeIn(1000) }), $("#bt5").click(function(){ $("#box").fadeOut(1000) }), $("#bt6").click(function(){ $("#box").fadeTo(1500,0.4) }), $("#bt7").click(function(){ $("#box").fadeToggle(1000) }), $("#bt8").click(function(){ $("box").slideToggle(1500) }) }) </script> </html>
jQuery也可以来实现一个滚动字幕的效果，比如说下边这个例子：<html>
<head> <style> #box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;} </style> </head> <body> <div></div> </body> <script src="https://www.jb51.net/jquery-1.7.1.min.js"></script> <script> $(function(){ str="我是中国人" $("#box").html(str) setInterval(go,300) function go(){ str=str.substr(1)+str.substr(0,1) $("#box").html(str) } }) </script> </html>
jQuery可以用来实现一个删除功能的实现,比如：<html>
<head> <style> #box{ width:400px; height:200px; border:1px solid black; } </style> </head> <body> <div> <p>第一a</p> <p>第二</p> <p>第三a</p> <p>第四</p> </div> <button>删除</button> <button>清空</button> </body> <script src="https://www.jb51.net/jquery-1.6.js"></script> <script> $(function(){ $("#del").click( function(){ $("p").remove("#a") }); $("#cle").click( function(){ $("#box").empty() }); }) </script> </html>
jQuery还会做出一选课功能的实现,比如:<html>
<head> <title></title> <style> li{ list-style:none; } #you{ position:absolute; left:300px; top:10px; } ul{ position:absolute; left:150px; top:10px; } </style> <script src="https://www.jb51.net/jquery-1.6.js"></script> <script> $(function(){ $("button:first").click(function(){ $("#zuo>option:selected").prependTo($("#you")); //$("#you").append($("#zuo>option:selected"); }) $("button:eq(1)").click(function(){ $("#you>option:selected").appendTo($("#zuo")); //$("#you").append($("#zuo>option:selected"); }) $("button:eq(2)").click(function(){ $("#zuo>option").appendTo($("#you")); }) $("button:eq(3)").click(function(){ $("#you>option").appendTo($("#zuo")); }) $("button:eq(4)").click(function(){ //$("#zuo>option:first").before($("#zuo>option:selected")) $("#zuo>option:selected").prependTo($("#zuo")); }) $("button:eq(5)").click(function(){ // $("#zuo>option:last").after($("#zuo>option:selected")) $("#zuo>option:selected").appendTo($("#zuo")); }) $("button:eq(6)").click(function(){ $("#zuo>option:selected").prev().before($("#zuo>option:selected")) ; }) $("button:eq(7)").click(function(){ $("#zuo>option:selected").next().after($("#zuo>option:selected")) ; }) }) </script> </head> <body> <select size="10"> <option>职业英语</option> <option>高等数学</option> <option>大学语文</option> <option>大学物理</option> <option>计算机基础</option> <option>基本网页设计</option> <option>c语言程序设计</option> <option>数据结构</option> <option>UI设计</option> <option>产品脚本设计</option> <option>产品脚本提高</option> <option>产品脚本实战</option> </select> <ul> <li><button>选择</button></li> <li><button>退选</button></li> <li><button>全选</button></li> <li><button>全退</button></li> <li><button>置顶</button></li> <li><button>置底</button></li> <li><button>上移</button></li> <li><button>下移</button></li> </ul> <select size="10"> </select> </body> </html>
jQuery还能够实现下滑框功能:<!DOCTYPE html>