jQuery 示例集锦

点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" />

先推荐一个jQuery的学习论坛：http://bbs.jquery.org.cn/frame.p ... /bbs.jquery.org.cn/

想做个jquery 实际例子的集锦。
后台采用php。但其实用其它后台语言也都是一样的。
1、ajax应用 ---- post 提交表单
(1)前台页面

< script type = " text/javascript "  src = " /include/jquery/jquery-1.1.3.1.pack.js " > script >
< form name = " form1 "  id = " form1 "  action = " ajax.php?action=1 "  method = " post " >
       < input type = " hidden "  id = " comid "  name = " comid "  value = " 111 " >
       < input type = " hidden "  id = " jobid "  name = " jobid "  value = " 222 " >
       < input type = " hidden "  id = " userid "  name = " userid "  value = " 333 " >
       < input type = " submit "   /> form >
< script language = " javascript " >
$( " #form1 " ).submit
    (
        function ()
         ... {
        login();
        return false;
        }
    );
function  login()
... {
var comid = $("#comid").val();
var jobid = $("#jobid").val();
var userid = $("#userid").val();
$.ajax(...{
    type: "POST",
    url: "../include/ajax.php",
    data: "action=1" + "&comid=" + comid + "&jobid=" + jobid + "&userid=" + userid,
    beforeSend: function()...{
    },
    success: function(msg)...{
  if(msg=="success")...{
        alert("求职信息，已经提交!请等候通知！")
   }else ...{
       alert("信息已发送，请不要重复提交！");
    }
    }
});
}
script >

(2)后台页面 ajax.php

header ( " Cache-Control: no-cache " ); 
require_once ( " function.php " );
switch  ( $_POST [ " action " ]){
     case   1 :
         $comid = verify_id( $_POST [ " comid " ]);
         $jobid = verify_id( $_POST [ " jobid " ]);
         $userid = verify_id( $_POST [ " userid " ]);
         $appdate = time ();
         $hasapp = getValue( " select * from csj_appjob where jobid=$jobid and userid=$userid and comid=$comid " , " id " );
         if ( $hasapp == "" ){
         $sql = " insert into csj_appjob(comid,jobid,userid,appdate) values($comid,$jobid,$userid,$appdate) " ;
        query( $sql );
         echo   " success " ;
        } else {
         echo   " wrong " ;
        }
         break ;
     default :
         break ;
    
}
?>

  2、动态表格 、动态表单

< script > var  jobline = 1 ; script >
< input type = " hidden "  name = " jobline "  id = " jobline "  value = " 1 " >
  < table width = " 462 "  border = " 0 "  cellspacing = " 3 "  cellpadding = " 0 " >
         < tr >
           < td width = " 88 "  class = " td1 " > 开始日期 td >
           < td width = " 88 "  class = " td1 " > 结束日期 td >
           < td width = " 117 "  class = " td1 " > 单位名称 td >
           < td width = " 115 "  class = " td1 " > 岗位名称 td >
         tr >
        < tbody id = " job " >
         < tr id = " jobline1 " >
           < td >< input type = " hidden "  name = " jid1 " >< input type = " text "  name = " brq1 "   > td >
           < td >< input type = " text "  name = " erq1 " > td >
           < td >< input type = " text "  name = " school1 " > td >
           < td >< input type = " text "  name = " spe1 " > td >
         tr >
        tbody >
table >
< img src = " /images/member/03.jpg "  id = " addjobline "  width = " 12 "  height = " 17 "   />   < img src = " /images/member/04.jpg "  id = " rmjobline "  width = " 12 "  height = " 17 "   />
< script type = " text/javascript "  src = " /include/jquery/jquery-1.1.3.1.pack.js " > script >
< script language = " javascript " >
$( " #addjobline " ).css( " cursor " , " pointer " );
$( " #rmjobline " ).css( " cursor " , " pointer " );
    $( " #addjobline " ).click(  function ()  ... {
    jobline+=1;
    $("#jobline").val(jobline);
    var str="";
    str+=''+jobline+'">'
    str+=''+jobline+'">'
    str+=''+jobline+'">'
    str+=''+jobline+'">'
    str+=''+jobline+'">'
    str+='';
    $("#job").append(str);
}  );
$( " #rmjobline " ).click(  function ()  ... {
    $("#jobline"+jobline).remove();
    jobline-=1;
    $("#jobline").val(jobline);
}  );
script >

3、输入框"获得焦点 / 点击 / 划过" 时全选

< script type = " text/javascript "  src = " /include/jquery/jquery-1.1.3.1.pack.js " > script >
< input type = " text "  value = " ID "  id = " uid "  name = " uid "   />
< input type = " password "  name = " upwd "  value = " Password "  id = " upwd "   />
< script language = " javascript " >
// 获得焦点,这个效果最好,点或者按tab,都可以全选
$( " #upwd " ).focus( function () ... {this.select();} )
$( " #uid " ).focus( function () ... {this.select();} )
// 点击
$( " #upwd " ).click( function () ... {this.select();} )
$( " #uid " ).click( function () ... {this.select();} )
// 划过全选
$( " #upwd " ).mouseover( function () ... {this.select();} )
$( " #uid " ).mouseover( function () ... {this.select();} )
script >

4、ajax应用 ---- 二级联动
数据库表设计 csj_trade
id                 int(11)   auto_increment         
tname                varchar(100)
tradeType                int(11)       

其中,id为主键自动索引，tname为行业名称，tradeType为一个标识，为0时，表示这条数据是大类；不为0，而是某个数字的时候，则这个数字表示其父级的id。
（1）主页面

< script  type ="text/javascript"  src ="/include/jquery/jquery-1.1.3.1.pack.js" > script >
< select  name ="bTrade"  id ="bTrade" >
     < option  value ="-1" > ——所属行业大类—— option >
    
    $res1=result("select * from csj_trade where tradeType=0");
    while($rs1=mysql_fetch_array($res1)){
     ?>
     < option  value =" id"]? > ">—— =$rs1["tname"] ?> —— option >
     } ?>
select >
< span  id ="quote" >
     < select  name ="sTrade" >
         < option  value ="-2" > ——行业小类—— option >
     select >
span >
< script  language ="javascript" > ...
$("#bTrade").change(function()...{ 
 $("#quote").load("../include/getstrade.php?id="+$("#bTrade").val()); 
});
script >

（2）getstrade.php

require_once ( " function.php " );
header ( " Cache-Control: no-cache " ); 
$id = verify_id( $_GET [ " id " ]);
$res = result( " select * from csj_trade where tradeType= " . $id );
$rt = ' ' ;
while ( $rs = mysql_fetch_array ( $res )){
$rt .= ' ' . $rs [ " id " ] . ' "> ' . $rs [ " tname " ] . ' ' ;
}
$rt .= ' ' ;
echo   $rt ;
?>

5、CSS 样式表动态选择
主页面

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   xml:lang ="utf-8" >
< HTML >
  < HEAD >
   < TITLE > css 选择 TITLE >
   < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
   < script  type ="text/javascript"  src ="/include/jquery/jquery-1.1.3.1.pack.js" > script >
   < link  href ="1.css"  rel ="stylesheet"  title ="style1"  type ="text/css"   />
   < link  href ="2.css"  rel ="stylesheet"  title ="style2"  type ="text/css"   />
   < link  href ="3.css"  rel ="stylesheet"  title ="style3"  type ="text/css"   />
  HEAD >
  < BODY >
   < h1 > jQuery 是一个新型的JavaScript库.  h1 >
   < p > jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。
jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。
jQuery支持CSS1-CSS3,以及基本的xPath
jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+
p >
< ul >
     < li  rel ="style1"  class ="styleswitch" > styles1 li >
     < li  rel ="style2"  class ="styleswitch" > styles2 li >
     < li  rel ="style3"  class ="styleswitch" > styles3 li >
ul >
< SCRIPT  LANGUAGE ="JavaScript" > ...

SCRIPT >
  BODY >
HTML >

三个css样式表
1.css
body{background:#000;color:#fff}
h1{font-size:14px;color:#fff;font-weight:bold;}
p{font-size:12px;color:#fff;}
2.css
body{background:#f00;color:#fff}
h1{font-size:15px;color:#fff;font-weight:bold;}
p{font-size:13px;color:#fff;}
3.css
body{background:#fee;color:#000}
h1{font-size:16px;color:#000;font-weight:bold;}
p{font-size:14px;color:#000;}
6、jquery的选择器之变态演示。。。可直接运行

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 无标题文档 title >
< script  type ="text/javascript"  src ="http://www.China-Staff-job.com/include/jquery/jquery-1.1.3.1.pack.js" > script >
head >
< body >
< a > 1、aaa a >  
< br  />
< h1  class ="a" > 2、aaa h1 >
< br  />
3、 < span  name ="aa" > aaa span >
< br  />< br  />
4、 < ul >
< li  class ="u1" > 111 li >
< li  name ="u2" > 222 li >
< li  id ="u3" > 333 li >
< li >< span > 444 span > li >
ul >
< br  />
5、 < span  suibian ="a" > 5555555 span >
< br  />< br  />
6、 < form  mingzi ="form1" >
< input  value ="我们在一个form里" >
< input  value ="我们在一个form里" >
< input  type ="button"  value ="点我" >
< input  type ="button"  value ="全消失" >
form >
< br  />
< br  />
7、 < h1 > 这个有点变态 h1 >< br  />
< h1 > 换个写法 h1 >
< br  />
< br  />
< br  />
8、试试这个  < br  />
< span  x ="1" > aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa span >
< br  />
< br  />
9、再来，你受的了吗？
< br  />
< ul  y ="1" >
< li > aaaaaaaaaaaaaaaaaaaaaaaaa li >
< li > aaaaaaaaaaaaaaaaaaaaaaaaa li >
< li > aaaaaaaaaaaaaaaaaaaaaaaaa li >
< li > aaaaaaaaaaaaaaaaaaaaaaaaa li >
< li > aaaaaaaaaaaaaaaaaaaaaaaaa li >
< li > aaaaaaaaaaaaaaaaaaaaaaaaa li >
< li > aaaaaaaaaaaaaaaaaaaaaaaaa li >
ul >
10、最后一个
< ul >
< li >< font > aaaaaaaaaaaaaaaaaaaaaaaaa font > li >
< li >< kkk > aaaaaaaaaaaaaaaaaaaaaaaaa kkk > li >
< li > 我是最后一个li li >
ul >
< script  language ="javascript" > ...
//1
$("a").click(
    function()...{
        alert("1");
    }
);
//2
$(".a").click(
    function()...{
        alert("2");
    }
);
//3
$("span[@name=aa]").click(
    function()...{
        alert("3");
    }
);
//4
$("li").css("cursor","pointer");
$("ul li.u1").click(
    function()...{
        alert("点了第一个111");
    }
);
$("ul li[@name=u2]").click(
    function()...{
        alert("点了第二个222");
    }
);
$("ul #u3").click(
    function()...{
        alert("点了第三个333");
    }
);
$("ul li span").click(
    function()...{
        alert("点了第四个444");
    }
);
//5
$("span[@suibian=a]").click(
    function()...{
        alert("随便设置个属性也行");
    }
);
//6
$("input[@value=点我]").click(
    function()...{
        alert("中文也行啊？");
    }
);
$("input[@value=全消失]").click(
    function()...{
        $("form[@mingzi=form1]").children().hide();
    }
);
//7
$("h1").contains("这个有点变态").click(
    function()...{
        alert("太变态了");
    }
);
$("h1:contains('换个写法')").click(
    function()...{
        alert("这么写也行");
    }
);
//8
$("span[@x]").css("background","red");
//9
$("ul[@y=1] li:odd").css("background","red");
$("ul[@y=1] li:even").css("background","#ff0");
//10
$("ul:last li[font]").click(
    function()...{
        alert("我有font");
    }
);
$("ul:last li[kkk]").click(
    function()...{
        alert("我有kkk? 靠,kkk也算。。。");
    }
);
$("li:last").click(
    function()...{
        alert("是的，本页最后一个li，就是我！");
    }
);
script >
body >
html >

7、让连接打开新窗口,一个简单的小效果
相关连接:http://bbs.blueidea.com/thread-2780298-1-1.html

< script  type ="text/javascript"  src ="http://www.China-Staff-job.com/include/jquery/jquery-1.1.3.1.pack.js" > script >
< img  src ="1.jpg" >   < br >< br >< br >
< img  src ="2.jpg" >   < br >< br >< br >
< img  src ="3.jpg" >   < br >< br >< br >
< img  src ="4.jpg" >   < br >< br >< br >
< img  src ="5.jpg" >   < br >< br >< br >
< a  href ="1.jpg" > 1.jpg a >   < br >< br >< br >
< a  href ="2.jpg" > 2.jpg a >   < br >< br >< br >
< a  href ="3.jpg" > 3.jpg a >   < br >< br >< br >
< a  href ="4.jpg" > 4.jpg a >   < br >< br >< br >
< a  href ="5.jpg" > 5.jpg a >   < br >< br >< br >
< script  language ="javascript" > ...
$("img").click(function()...{
    window.open(this.src);
});
$("a").css("cursor","pointer");
$("a").click(function()...{
    window.open(this.href);return false;
});
script >

8、键盘控制----选择表格并编辑
相关连接:http://bbs.blueidea.com/thread-2780258-1-1.html

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< title > 无标题文档 title >
< script  type ="text/javascript"  src ="http://www.China-Staff-job.com/include/jquery/jquery-1.1.3.1.pack.js" > script >
< style > ...
#tb1 td{...}{background:#ccc;padding:3px;border:1px solid #999;}
style >
head >
< body >
< table  id ="tb1"  width ="100%"  border ="0"  cellspacing ="0"  cellpadding ="0" >
   < tr >
     < td  width ="200" > a1 td >
     < td  width ="200" > a2 td >
     < td  width ="200" > a3 td >
   tr >
   < tr >
     < td > b1 td >
     < td > b2 td >
     < td > b3 td >
   tr >
   < tr >
     < td > c1 td >
     < td > c2 td >
     < td > c3 td >
   tr >
   < tr >
     < td > d1 td >
     < td > d2 td >
     < td > d3 td >
   tr >
   < tr >
     < td > e1 td >
     < td > e2 td >
     < td > e3 td >
   tr >
   < tr >
     < td > f1 td >
     < td > f2 td >
     < td > f3 td >
   tr >
table >
< span  id ="t1" > 编辑内容： span >< input  id ="tmptext"  type ="text"  value ="" >< input  id ="saveit"  type ="button"  value ="保存" >
< script  language ="javascript" > ...
$(document).children().not("#tmptext").keydown(keyCtrl);
var obj=$("#tb1").children().children();
var h=0,l=0;
var maxh=obj.size()-1
var maxl=obj.children().size()/(maxh+1)-1;
select();
function select()...{
    $("#tmptext").val(obj.eq(h).children().eq(l).text());
    obj.eq(h).children().eq(l).css("background","#0ff");
}
function recover()...{
    obj.eq(h).children().eq(l).css("background","#ccc");
}
function keyCtrl(e)...{
    var e=window.event?window.event:e;
    if (e.keyCode ==37) left();
    if (e.keyCode ==39) right();
    if (e.keyCode ==38) up();
    if (e.keyCode ==40) down();    
    if (e.keyCode ==13) edit();
}
function left()...{
    if(l>0)...{
        recover();
        l-=1;
        select();
    }
}
function right()...{
    if(l<maxl)...{
        recover();
        l+=1;
        select();
    }
}
function up()...{
    if(h>0)...{
    recover();
    h-=1;
    select();
    }
}
function down()...{
    if(h<maxh)...{
        recover();
        h+=1;
        select();
    }
}
function save(e)...{
var e=window.event?window.event:e;
if (e.keyCode ==13)...{
    obj.eq(h).children().eq(l).text($("#tmptext").val());
}
}
function edit()...{
    $("#tmptext").val(obj.eq(h).children().eq(l).text());
    $("#tmptext").select();
}
$("#tmptext").keydown(save);
$("#saveit").click(function()...{
    obj.eq(h).children().eq(l).text($("#tmptext").val());
})
script >
body >
html >

9、选择器小试牛刀----下拉框的值同时给文本框和文本域
相关连接：http://bbs.blueidea.com/thread-2780650-1-1.html

< script  type ="text/javascript"  src ="http://www.China-Staff-job.com/include/jquery/jquery-1.1.3.1.pack.js" > script >
  < input   type ="text"  id ="t2" >
   < textarea   id ="t3" > textarea >
         < select  id ="select1" >
           < option  value ="" > 请选择 option >
           < option  value ="我是aaa" > aaa option >
           < option  value ="我是bbb" > bbb option >
         select >
< SCRIPT  LANGUAGE ="JavaScript" > ...

SCRIPT >

下面是lzyy同学的写法，更简单了。。。。选择器真是灵活啊，看来我要用到家，还有段路要走：）

$("textarea").html($("#select1 option:selected").text());

一个菜单伸缩效果，js代码加一起，包括$(document).ready一共6句话。

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"  xml:lang ="en-us" >
< head >
     < title > DL Demo title >
     < script  src ="http://code.jquery.com/jquery-1.1.3.1.pack.js" > script >
     < script > ...
    $(document).ready(function()...{
        $("dd:not(:first)").hide();
        $("dt a").click(function()...{
            $("dd:visible").slideUp("slow");
            $(this).parent().next().slideDown("slow");
            return false;
        });
    });
     script >
     < style > ...
    body {...}{ font-family: Arial; font-size: 16px; }
    dl {...}{ width: 300px; }
    dl,dd {...}{ margin: 0; }
    dt {...}{ background: #F39; font-size: 18px; padding: 5px; margin: 2px; }
    dt a {...}{ color: #FFF; }
    dd a {...}{ color: #000; }
    ul {...}{ list-style: none; padding: 5px; }
     style >
head >
< body >
< dl >
     < dt >< a  href ="/" > jQuery a > dt >
     < dd >
     < ul >
         < li >< a  href ="/src/" > Download a > li >
         < li >< a  href ="/docs/" > Documentation a > li >
         < li >< a  href ="/blog/" > Blog a > li >
     ul >
     dd >
     < dt >< a  href ="/discuss/" > Community a > dt >
     < dd >
     < ul >
         < li >< a  href ="/discuss/" > Mailing List a > li >
         < li >< a  href ="/tutorials/" > Tutorials a > li >
         < li >< a  href ="/demos/" > Demos a > li >
         < li >< a  href ="/plugins/" > Plugins a > li >
     ul >
     dd >
     < dt >< a  href ="/dev/" > Development a > dt >
     < dd >
     < ul >
         < li >< a  href ="/src/" > Source Code a > li >
         < li >< a  href ="/dev/bugs/" > Bug Tracking a > li >
         < li >< a  href ="/dev/recent/" > Recent Changes a > li >
     ul >
     dd >
dl >
body >
html >

第一句：

$( " dd:not(:first) " ).hide();

标签为dd的不是第一个的都给我藏好了

第二句：

$( " dt a " ).click( function () ... {

标签为dt，带链接的，还被点了的，给我听好了

第三句：

$("dd:visible").slideUp("slow");

标签为dd的，能看见的，给我慢慢的向上跑

第四句：

$(this).parent().next().slideDown("slow");

我的父母的左邻给我慢慢的向下滑

第五句：

return false;

你点了我，我也不给你转到指定的链接

哦，差点忘了最开头那句：

$(document).ready(function()...{

同志们，都准备好了吗，我要发号施令啦。

摘编自【http://bbs.blueidea.com/thread-2778641-1-1.html】