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 相关文章推荐
JS代码放在head和body中的区别分析
Dec 01 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
详解JavaScript的另类写法
Apr 11 Javascript
使用jQuery UI库开发Web界面的简单入门指引
Apr 22 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 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
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php date()日期时间函数详解
2010/05/16 PHP
提高PHP编程效率的方法
2013/11/07 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
js获取变量
2006/08/24 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JS控制弹出悬浮窗口(一览画面)的实例代码
2016/05/30 Javascript
省市区三级联动jquery实现代码
2020/04/15 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
2016/10/10 Javascript
jQuery ajax的功能实现方法详解
2017/01/06 Javascript
Angular4表单验证代码详解
2017/09/03 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
详解webpack4之splitchunksPlugin代码包分拆
2018/12/04 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
如何使用原生Js实现随机点名详解
2021/01/06 Javascript
python的常见命令注入威胁
2013/02/18 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
python给list排序的简单方法
2020/12/10 Python
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
公司同意接收函
2014/01/13 职场文书
教师校本培训方案
2014/02/26 职场文书
大课间体育活动方案
2014/03/12 职场文书
迎新晚会策划方案
2014/06/13 职场文书
四风对照检查材料思想汇报
2014/09/20 职场文书
中学生检讨书1000字
2014/10/28 职场文书
2014年采购工作总结
2014/11/20 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书