想做個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: "actinotallow=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 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" > ...
<!--
$("#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()...{
同志們，都準備好了嗎，我要發號施令啦。
本文章為轉載內容，我們尊重原作者對文章享有的著作權。如有內容錯誤或侵權問題，歡迎原作者聯繫我們進行內容更正或刪除文章。