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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
jQuery Html控件基本操作(日常收集整理)
Mar 11 Javascript
AngularJS 视图详解及示例代码
Aug 17 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
Sep 15 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 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中对xml读取的相关函数的介绍一
2008/06/05 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
php实现socket推送技术的示例
2017/12/20 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
2015/04/17 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
利用React-router+Webpack快速构建react程序
2016/10/27 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
JS 插件dropload下拉刷新、上拉加载使用小结
2017/04/13 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
[58:15]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 NB vs Liquid
2018/04/02 DOTA
Python使用htpasswd实现基本认证授权的例子
2014/06/10 Python
python中list列表的高级函数
2016/05/17 Python
微信跳一跳游戏python脚本
2020/04/01 Python
Python设计模式之门面模式简单示例
2018/01/09 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
计算机大学生的自我评价
2013/10/15 职场文书
培训班主持词
2014/03/28 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
先进党支部事迹材料
2014/12/24 职场文书
python数字转对应中文的方法总结
2021/08/02 Python