Jquery實(shí)現(xiàn)動(dòng)態(tài)切換圖片的方法
本文實(shí)例講述了Jquery實(shí)現(xiàn)動(dòng)態(tài)切換圖片的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!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=utf-8" />
<title></title>
<style type="text/css">
#tbl{border-collapse:collapse;border-top:1px solid red;border-left:1px solid red;margin:auto;}
#tbl td{border-collapse:collapse;border-bottom:1px solid red;border-right:1px solid red;}
#main{margin:0px auto;border:1px solid yellow;}
</style>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var $imgs;
var $tds;
$(function () {
$tds = $("#tbl td");
$tds.click(function () {
//說(shuō)明:
//$("img", $(this))表示當(dāng)前td下的img元素
//$("img", $(this).siblings("td")) 表示當(dāng)前td的所有兄弟元素(并且要求是td)下的img元素
$("img", $(this)).attr("src", "../images/select.JPG");
$("img", $(this).siblings("td")).attr("src", "../images/noselect.JPG");
});
}
);
</script>
</head>
<body>
<div id="main">
<table id="tbl">
<tbody>
<tr>
<td><img src="../images/noselect.JPG" /></td>
<td><img src="../images/noselect.JPG" /></td>
<td><img src="../images/noselect.JPG" /></td>
<td><img src="../images/noselect.JPG" /></td>
<td><img src="../images/noselect.JPG" /></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周?chē)蓟疑荒懿僮?
下面小編就為大家?guī)?lái)一篇Jquery實(shí)現(xiàn)遮罩層的簡(jiǎn)單實(shí)例(就是彈出DIV周?chē)蓟疑荒懿僮?。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07
jQuery實(shí)現(xiàn)彩帶延伸效果的網(wǎng)頁(yè)加載條loading動(dòng)畫(huà)
這篇文章主要介紹了jQuery實(shí)現(xiàn)彩帶延伸效果的網(wǎng)頁(yè)加載條loading動(dòng)畫(huà),涉及jQuery動(dòng)畫(huà)效果的實(shí)現(xiàn)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-10-10
12款經(jīng)典的白富美型—jquery圖片輪播插件—前端開(kāi)發(fā)必備
圖片輪播是網(wǎng)站中的常用功能,用于在有限的網(wǎng)頁(yè)空間內(nèi)展示一組產(chǎn)品圖片或者照片,同時(shí)還有非常吸引人的動(dòng)畫(huà)效果,本文向大家推薦12款實(shí)用的 jQuery 圖片輪播效果插件感興趣的朋友可以了解下哦2013-01-01
jquery操作checkbox的常用方法總結(jié)【附測(cè)試源碼下載】
這篇文章主要介紹了jquery操作checkbox的常用方法,結(jié)合完整實(shí)例形式總結(jié)分析了jQuery使用checkbox全選、取消、反選等常見(jiàn)操作技巧,并附帶測(cè)試源碼供讀者下載參考,需要的朋友可以參考下2019-06-06
基于jquery animate操作css樣式屬性小結(jié)
昨天突然有網(wǎng)友問(wèn)我animate()方法可以來(lái)操作所有css屬性嗎?是的,我告訴他可以的。不過(guò),在此有需要注意點(diǎn)需要大家搞清楚。接下來(lái)通過(guò)本篇文章給大家介紹基于jquery animate操作css樣式屬性小結(jié),對(duì)jquery animate css相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2015-11-11
jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04

