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 相关文章推荐
JavaScript的Function详细
Nov 14 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
JavaScript实现的双向跨域插件分享
Jan 31 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
package.json文件配置详解
Jun 15 Javascript
vue iView 上传组件之手动上传功能
Mar 16 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
Vue使用NPM方式搭建项目
Oct 25 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
Jan 30 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
JavaScript定时器常见用法实例分析
Nov 15 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
博士208HAF收音机实习报告
2021/03/02 无线电
用cookies来跟踪识别用户
2006/10/09 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
javascript 拖动表格行实现代码
2011/05/05 Javascript
用js实现输入提示(自动完成)的实例代码
2013/06/14 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
深入解析JavaScript编程中的this关键字使用
2015/11/09 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Python入门之三角函数tan()函数实例详解
2017/11/08 Python
基于Python数据结构之递归与回溯搜索
2020/02/26 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
浅谈Python中的字符串
2020/06/10 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
python基于socket模拟实现ssh远程执行命令
2020/12/05 Python
html特殊符号示例 html特殊字符编码对照表
2014/01/14 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
如何判断计算机可能已经中马
2013/03/22 面试题
大三在校生电子商务求职信
2013/10/29 职场文书
建筑工程技术应届生求职信
2013/11/17 职场文书
公司开业庆典主持词
2014/03/21 职场文书
安全协议书范本
2014/04/21 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
单位考核鉴定意见
2015/06/05 职场文书
幼儿园大班教师评语
2019/06/21 职场文书