jquery实例.docx
- 文档编号:7561600
- 上传时间:2023-01-25
- 格式:DOCX
- 页数:21
- 大小:21.21KB
jquery实例.docx
《jquery实例.docx》由会员分享,可在线阅读,更多相关《jquery实例.docx(21页珍藏版)》请在冰豆网上搜索。
jquery实例
想做个jquery实际例子的集锦。
后台采用php。
但其实用其它后台语言也都是一样的。
1、ajax应用----post提交表单
(1)前台页面
action=1"method="post"> $("#form1").submit ( function() ...{ login(); returnfalse; } ); functionlogin() ...{ varcomid=$("#comid").val(); varjobid=$("#jobid").val(); varuserid=$("#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("信息已发送,请不要重复提交! "); } } }); } (2)后台页面ajax.php header("Cache-Control: no-cache"); require_once("function.php"); switch($_POST["action"]){ case1: $comid=verify_id($_POST["comid"]); $jobid=verify_id($_POST["jobid"]); $userid=verify_id($_POST["userid"]); $appdate=time(); $hasapp=getValue("select*fromcsj_appjobwherejobid=$jobidanduserid=$useridandcomid=$comid","id"); if($hasapp==""){ $sql="insertintocsj_appjob(comid,jobid,userid,appdate)values($comid,$jobid,$userid,$appdate)"; query($sql); echo"success"; }else{ echo"wrong"; } break; default: break; } ? > 2、动态表格、动态表单
$("#addjobline").css("cursor","pointer");
$("#rmjobline").css("cursor","pointer");
$("#addjobline").click(function()...{
jobline+=1;
$("#jobline").val(jobline);
varstr="";
str+='
str+='
str+='
str+='
str+='
str+='';
$("#job").append(str);
});
$("#rmjobline").click(function()...{
$("#jobline"+jobline).remove();
jobline-=1;
$("#jobline").val(jobline);
});
3、输入框"获得焦点/点击/划过"时全选
//获得焦点,这个效果最好,点或者按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();})
4、ajax应用----二级联动
数据库表设计csj_trade
idint(11)auto_increment
tnamevarchar(100)
tradeTypeint(11)
其中,id为主键自动索引,tname为行业名称,tradeType为一个标识,为0时,表示这条数据是大类;不为0,而是某个数字的时候,则这个数字表示其父级的id。
(1)主页面
$res1=result("select*fromcsj_tradewheretradeType=0");
while($rs1=mysql_fetch_array($res1)){
?
>
=$rs1["id"]? >">—— =$rs1["tname"]? >—— }? > $("#bTrade").change(function()...{ $("#quote").load("../include/getstrade.php? id="+$("#bTrade").val()); }); (2)getstrade.php require_once("function.php"); header("Cache-Control: no-cache"); $id=verify_id($_GET["id"]); $res=result("select*fromcsj_tradewheretradeType=".$id); $rt=' while($rs=mysql_fetch_array($res)){ $rt.=' } $rt.=''; echo$rt; ? >5、CSS样式表动态选择 主页面 DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //www.w3.org/1999/xhtml"xml: lang="utf-8">
jQuery是一个新型的JavaScript库.
jQuery是一个简洁快速的JavaScript库,它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。
jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不用的应用程序。
jQuery是一个轻量级的脚本,其代码非常小巧,JavaScript包只有15K左右。
jQuery支持CSS1-CSS3,以及基本的xPath
jQuery是跨浏览器的,它支持的浏览器包括IE6.0+,FF1.5+,Safari2.0+,Opera9.0+
--
$('.styleswitch').css("cursor","pointer");
$('.styleswitch').click(function()
...{
switchStylestyle(this.getAttribute("rel"));
returnfalse;
});
varc=readCookie('style');
if(c)switchStylestyle(c);
functionswitchStylestyle(styleName)
...{
$('link[@rel*=style][@title]').each(function(i)
...{
this.disabled=true;
if(this.getAttribute('title')==styleName)this.disabled=false;
});
createCookie('style',styleName,365);
}
functioncreateCookie(name,value,days)
...{
if(days)
...{
vardate=newDate();
date.setTime(date.getTime()+(days*24*60*60*1000));
varexpires=";expires="+date.toGMTString();
}
elsevarexpires="";
document.cookie=name+"="+value+expires+";path=/";
}
functionreadCookie(name)
...{
varnameEQ=name+"=";
varca=document.cookie.split(';');
for(vari=0;i ...{ varc=ca[i]; while(c.charAt(0)=='')c=c.substring(1,c.length); if(c.indexOf(nameEQ)==0)returnc.substring(nameEQ.length,c.length); } returnnull; } functioneraseCookie(name) ...{ createCookie(name,"",-1); } //--> 三个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的选择器之变态演示。 。 。 可直接运行 DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> //www.w3.org/1999/xhtml">
//www.China-Staff-
3、
4、
- 444
5、
6、
7、
这个有点变态
换个写法
8、试试这个
9、再来,你受的了吗?
10、最后一个
- aaaaaaaaaaaaaaaaaaaaaaaaa
aaaaaaaaaaaaaaaaaaaaaaaaa - 我是最后一个li
//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");
$("ulli.u1").click(
function()...{
alert("点了第一个111");
}
);
$("ulli[@name=u2]").click(
function()...{
alert("点了第二个222");
}
);
$("ul#u3").click(
function()...{
alert("点了第三个333");
}
);
$("ullispan").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()...{
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 实例
![提示](https://static.bdocx.com/images/bang_tan.gif)