jQuery 示例集锦

最新推荐文章于 2020-06-23 17:29:06 发布

系统信息

最新推荐文章于 2020-06-23 17:29:06 发布

阅读量7.2k

点赞数

分类专栏： Java体系文章标签： jquery function javascript stylesheet styles input

本文链接：https://blog.csdn.net/softwave/article/details/2084344

版权

Java体系专栏收录该内容

380 篇文章 2 订阅

订阅专栏

点击这里使用RSS订阅本Blog： rel="alternate" href="http://feed.feedsky.com/softwave" type="application/rss+xml" title="RSS 2.0" /> <script language="javascript"> </script> <script language="javascript" src="http://www.feedsky.com/jsout/publishlist_v2.js?burl=softwave&out_html=true"></script>

先推荐一个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 ()

{

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 >

< 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" >

<!--

$('.styleswitch').css("cursor","pointer");

$('.styleswitch').click(function()

{

switchStylestyle(this.getAttribute("rel"));

return false;

});

var c = readCookie('style');

if (c) switchStylestyle(c);

function switchStylestyle(styleName)

{

$('link[@rel*=style][@title]').each(function(i)

{

this.disabled = true;

if (this.getAttribute('title') == styleName) this.disabled = false;

});

createCookie('style', styleName, 365);

}

function createCookie(name,value,days)

{

if (days)

{

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = "; expires="+date.toGMTString();

}

else var expires = "";

document.cookie = name+"="+value+expires+"; path=/";

}

function readCookie(name)

{

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for(var i=0;i < ca.length;i++)

{

var c = ca[i];

while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

}

return null;

}

function eraseCookie(name)

{

createCookie(name,"",-1);

}

//-->

</ 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 type ="button" value ="点我" >

< input type ="button" value ="全消失" >

</ form >

< br />

7、 < h1 > 这个有点变态 </ h1 >< br />

< h1 > 换个写法 </ h1 >

< br />

8、试试这个 < br />

< span x ="1" > aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </ span >

< br />

9、再来，你受的了吗？

< br />

< ul y ="1" >

< 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" >

<!--

$("#select1").change(function(){

$("#t2").val($("#select1").val());

$("#t3").text(($("#select1").children("option[@value="+$("#select1").val()+"]").text()));

});

//-->

</ 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】

系统信息

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录