Jquery实现动态切换图片的方法


Posted in Javascript onMay 18, 2015

本文实例讲述了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=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 () {
    //说明:
    //$("img", $(this))表示当前td下的img元素
    //$("img", $(this).siblings("td")) 表示当前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>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
一组JS创建和操作表格的函数集合
May 07 Javascript
用JavaScript隐藏控件的方法
Sep 21 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
简介JavaScript中substring()方法的使用
Jun 06 Javascript
jQuery焦点图插件SaySlide
Dec 21 Javascript
Swiper实现轮播图效果
Jul 03 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
Nov 24 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
Electron 调用命令行(cmd)
Sep 23 Javascript
Vue项目中使用flow做类型检测的方法
Mar 18 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 #Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 #Javascript
JQuery中属性过滤选择器用法实例分析
May 18 #Javascript
jquery表单对象属性过滤选择器实例分析
May 18 #Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 #Javascript
JavaScript的9种继承实现方式归纳
May 18 #Javascript
JQuery中上下文选择器实现方法
May 18 #Javascript
You might like
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
ES6新特性四:变量的解构赋值实例
2017/04/21 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
React+TypeScript+webpack4多入口配置详解
2019/08/08 Javascript
通过实例了解JS执行上下文运行原理
2020/06/17 Javascript
微信小程序的引导页实现代码
2020/06/24 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
基于JavaScript实现随机点名器
2021/02/25 Javascript
python实现udp数据报传输的方法
2014/09/26 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
python字典按照value排序方法
2020/12/28 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
DELPHI面试题研发笔试试卷
2015/11/08 面试题
涉外文秘个人求职的自我评价
2013/10/07 职场文书
技校生自我鉴定
2013/12/08 职场文书
优秀医生事迹材料
2014/02/12 职场文书
商务助理求职信范文
2014/04/20 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
2016年敬老月活动总结
2016/04/05 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
导游词之介休绵山
2019/12/31 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电