热门文章 | 热门软件| 热门源码 | 热门电影 | 知识库 | 联系我们
软件 源码 教程 影视 健康 招聘
  HTML | JavaScript | ASP | PHP | JSP | NET | VB | VC | VF | Windows | Linux | Mysql | Mssql | Oracle | Struts 
当前位置: 创世纪计算机资源网 -> 文章频道 ->html 
站内搜索:
jQuery示例集锦(1)
作者:小李 来源:blog 整理日期:2008-4-24

想做个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)      

[1]  [2]  [3]  [4]  
相关文章