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-07jQuery實(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-1012款經(jīng)典的白富美型—jquery圖片輪播插件—前端開(kāi)發(fā)必備
圖片輪播是網(wǎng)站中的常用功能,用于在有限的網(wǎng)頁(yè)空間內(nèi)展示一組產(chǎn)品圖片或者照片,同時(shí)還有非常吸引人的動(dòng)畫(huà)效果,本文向大家推薦12款實(shí)用的 jQuery 圖片輪播效果插件感興趣的朋友可以了解下哦2013-01-01jquery操作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-11jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery獲取table下某一行某一列的值實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-04-04