jQuery 示例集锦

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

                点击这里使用RSS订阅本Blog：

先推荐一个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+='<tr id="jobline'+jobline+'">'
    str+='<td><input type="text" name="brq'+jobline+'"></td>'
    str+='<td><input type="text" name="erq'+jobline+'"></td>'
    str+='<td><input type="text" name="school'+jobline+'"></td>'
    str+='<td><input type="text" name="spe'+jobline+'"></td>'
    str+='</tr>';
    $("#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 ="<?=$rs1[" 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 = ' <select name="sTrade" id="s_trade"> ' ;
while ( $rs = mysql_fetch_array ( $res )){
$rt .= ' <option value=" ' . $rs [ " id " ] . ' "> ' . $rs [ " tname " ] . ' </option> ' ;
}
$rt .= ' </select> ' ;
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 >