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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
Express的路由详解
Dec 10 Javascript
javaScript事件机制兼容【详细整理】
Jul 23 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
js装饰设计模式学习心得
Feb 17 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
vue以组件或者插件的形式实现throttle或者debounce
May 22 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
ThinkPHP中关联查询实例
2014/12/02 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
Yii框架getter与setter方法功能与用法分析
2019/10/22 PHP
Js中sort()方法的用法
2006/11/04 Javascript
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
Chrome中模态对话框showModalDialog返回值问题的解决方法
2010/05/25 Javascript
JavaScript继承方式实例
2010/10/29 Javascript
jQuery点击弹出下拉菜单的小例子
2013/08/01 Javascript
解析JavaScript中delete操作符不能删除的对象
2013/12/03 Javascript
JS动态修改iframe高度和宽度的方法
2015/04/01 Javascript
理解JavaScript中worker事件api
2015/12/25 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
2020/10/09 Javascript
python字符串替换示例
2014/04/24 Python
Python是编译运行的验证方法
2015/01/30 Python
配置 Pycharm 默认 Test runner 的图文教程
2018/11/30 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
python能开发游戏吗
2020/06/11 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
学生喝酒检讨书
2014/02/06 职场文书
社区交通安全实施方案
2014/03/22 职场文书
申报材料格式
2014/12/30 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python
Pandas-DataFrame知识点汇总
2022/03/16 Python
vue使用wavesurfer.js解决音频可视化播放问题
2022/04/04 Vue.js