jQuery动态移除和添加背景图片的方法详解


Posted in Javascript onMarch 07, 2017

本文实例讲述了jQuery动态移除和添加背景图片的方法。分享给大家供大家参考,具体如下:

利用jQuery移除和添加图片

1、样式

<style type="text/css">
  .changeImage{
     background:url(images/right.png) no-repeat center;
  }
</style>

2、JS

(1)在改变标签的样式,需要移除之前添加的样式

$("#tab tr").find("td").removeClass("changeImage");

(2)添加样式

$("#tab tr").find("td").addClass("changeImage");

附:完整示例demo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery移除和添加图片</title>
<script type="text/javascript" src="jquery-1.7.2.min.js" ></script>
<style type="text/css">
.changeImage{
 background:url(images/arrow1.gif) no-repeat center;
}
</style>
<script>
function removeimg(){
$("#tab tr").find("td").removeClass("changeImage");
}
function addimg(){
$("#tab tr").find("td").addClass("changeImage");
}
</script>
</head>
<body>
  <table border=1 id="tab">
  <tr><td>年</td><td>制造商</td><td>型号</td><td>说明</td><td>价值</td></tr>
  <tr><td>1997</td><td>Ford</td><td>E350</td><td>"ac</td><td> abs</td><td> moon"</td><td>3000.00</td></tr>
  <tr><td>1999</td><td>Chevy</td><td>"Venture ""Extended Edition"""</td><td>""</td><td>4900.00</td></tr>
  <tr><td>1999</td><td>Chevy</td><td>"Venture ""Extended Edition</td><td> Very Large"""</td><td>""</td><td>5000.00</td></tr>
  <tr><td>1996</td><td>Jeep</td><td>Grand Cherokee</td><td>"MUST SELL!</td></tr>
  <tr><td>air</td><td> moon roof</td><td> loaded"</td><td>4799.00</td></tr>
  </table>
  <input type="button" value="添加样式" onclick="addimg()"/>
  <input type="button" value="删除样式" onclick="removeimg()"/>
</body>
</html>

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

Javascript 相关文章推荐
Expandable &quot;Detail&quot; Table Rows
Aug 29 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
js实现局部页面打印预览原理及示例代码
Jul 03 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
vue中组件的过渡动画及实现代码
Nov 21 Javascript
JS 验证码功能的三种实现方式
Nov 26 Javascript
微信小程序 网络通信实现详解
Jul 23 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
vue.js中ref及$refs的使用方法解析
Oct 08 Javascript
jQuery中Chosen三级联动功能实例代码
Mar 07 #Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 #Javascript
js 获取图像缩放后的实际宽高,位置等信息
Mar 07 #Javascript
JavaScript和JQuery获取DIV值的方法示例
Mar 07 #Javascript
AngularJS监听路由变化的方法
Mar 07 #Javascript
微信小程序开发之入门实例教程篇
Mar 07 #Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 #Javascript
You might like
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
简短几句jquery代码的实现一个图片向上滚动切换
2011/09/02 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
javascript字母大小写转换的4个函数详解
2014/05/09 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
微信小程序实现手势图案锁屏功能
2018/01/30 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
对IPython交互模式下的退出方法详解
2019/02/16 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
利用python爬取有道词典的方法
2020/12/08 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
酒店人事专员岗位职责
2013/12/19 职场文书
社区党建工作方案
2014/06/10 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2014年教学工作总结
2014/11/13 职场文书
学校教学工作总结2015
2015/05/19 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Python基本数据类型之字符串str
2021/07/21 Python