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操作二级联动实现代码
Jul 27 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
Dec 19 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
webpack4简单入门实例
Sep 06 Javascript
vue3.0 CLI - 2.6 - 组件的复用入门教程
Sep 14 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
jQuery 动画与停止动画效果实例详解
May 19 jQuery
详细聊聊vue中组件的props属性
Nov 02 Vue.js
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 三维饼图的实现代码
2008/09/28 PHP
php 获取本机外网/公网IP的代码
2010/05/09 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
JS 控制小数位数的实现代码
2011/08/02 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
js浮点数精确计算(加、减、乘、除)
2013/12/26 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
JS获取CSS样式(style/getComputedStyle/currentStyle)
2016/01/19 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
[55:02]2014 DOTA2国际邀请赛中国区预选赛 HGT VS Orenda
2014/05/21 DOTA
Python开发编码规范
2006/09/08 Python
python记录程序运行时间的三种方法
2017/07/14 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
乡镇四风对照检查材料
2014/08/31 职场文书
计划生育个人总结
2015/03/02 职场文书
MySQL 自定义变量的概念及特点
2021/05/13 MySQL
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android