脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery动态移除和添加背景图片

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

 更新时间：2017年03月07日 12:02:05   作者：翱翔天地  
这篇文章主要介绍了jQuery动态移除和添加背景图片的方法,结合实例形式分析了jQuery针对页面元素样式及事件响应的动态操作技巧,需要的朋友可以参考下

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

您可能感兴趣的文章:

相关文章

  • 巧用jquery解决下拉菜单被Div遮挡的相关问题

    巧用jquery解决下拉菜单被Div遮挡的相关问题

    本篇文章主要是对巧用jquery解决下拉菜单被Div遮挡的相关问题进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02
  • jQuery实现左右滑动的toggle方法

    jQuery实现左右滑动的toggle方法

    下面小编就为大家分享一篇jQuery实现左右滑动的toggle方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • jquery实现漂亮的二级下拉菜单代码

    jquery实现漂亮的二级下拉菜单代码

    这篇文章主要介绍了jquery实现漂亮的二级下拉菜单代码,涉及jquery鼠标click事件控制页面class属性动态变换效果的切换技巧,非常美观实用,需要的朋友可以参考下
    2015-08-08
  • jQuery中图片展示插件highslide.js的简单dom

    jQuery中图片展示插件highslide.js的简单dom

    Highslide是一个非常美观的图片灯箱插件，下面这篇文章主要给大家介绍了关于jQuery中图片展示插件highslide.js的简单dom，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • jQuery Easyui快速入门教程

    jQuery Easyui快速入门教程

    jQuery EasyUI是一组基于JQuery的UI插件集合，而JQueryEasyUI的目标就是帮助开发者更轻松的打造出功能丰富并且美观的UI界面，下面小编带领大家一起学习jquery easyui入门知识，一起看看吧
    2016-08-08
  • 基于jQuery的JavaScript模版引擎JsRender使用指南

    基于jQuery的JavaScript模版引擎JsRender使用指南

    这篇文章主要介绍了基于jQuery的JavaScript模版引擎JsRender使用指南,需要的朋友可以参考下
    2014-12-12
  • jQuery学习笔记之jQuery构建函数的7种方法

    jQuery学习笔记之jQuery构建函数的7种方法

    jQuery把所有的操作都包装在一个jQuery()函数中，形成了统一(也是惟一)的操作入口，这为jQuery操作降低了门槛。那我们来看下具体构造函数的“七种武器”吧。
    2014-06-06
  • 简单的jQuery入门指引

    简单的jQuery入门指引

    这篇文章主要介绍了简单的jQuery入门指引,jQuery是当今最为流行的JavaScript库,需要的朋友可以参考下
    2015-07-07
  • 浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    浅谈jQuery页面的滚动位置scrollTop、scrollLeft

    官方文档的解释有点含糊，其实换个角度就很容易理解了，scrollTop获取的是内部元素超出外部容器的高度。 例如：$('window').scrollTop()获取的就是当前这个页面超出窗口最上端的高度，scrollLeft与此同理
    2015-05-05
  • 20款非常优秀的 jQuery 工具提示插件 推荐

    20款非常优秀的 jQuery 工具提示插件 推荐

    工具提示（Tooltip）在网站中的一个小功能，但却有很重要的作用，常用于显示一些温馨的提示信息。如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象
    2012-07-07

最新评论