Jquery简单的操作

  Jquery 是一个非常好用JS库,有很多的特殊的操作,为了方便,我们都可以引入Jquery。

<script src="dist/js/vendor/jquery.min.js "></script> 

      

修改样式

      在写 web 项目是,往往我们的图标,都是一些<span></span>标签,我们是通过样式来修改显示的图标。

      正如一个音乐播放器的暂停和修改:

<span class="fui-pause"></span>
<span class="fui-play"></span>

  

    我们要通过改变<span></span> 中的 Class 样式来改变显示的图标。

    具体的代码如下

网页部分:

<div class="list-group-item" id="Table_Open"><a >我的音乐<span class="fui-play"></span></a></div>

JS部分:  

<script type="text/jscript">
$(document).ready(function() {
$("#Table_Open").click(function(){
var text=$(this).find("a span").attr("class");
if(text=='fui-play'){
$(this).find("a span").attr("class","fui-pause");
}else{
$(this).find("a span").attr("class","fui-play");
}
});
});
</script>

  

  其中代码中,用到了 attr 函数:

      attr(属性名):获取属性的值。

      attr(属性名,属性值):是为了属性的值。

  正如上面的实例所提及的,我们获取 span 标签下的 class  修改了它的样式的值。

Jquery 改变样式的更多相关文章

  1. javascript和jquery 移除事件 和 改变样式

    javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...

  2. jquery 改变标签样式

    jQuery改变标签的样式一般有3种 预置好class,然后通过jQuery改变元素的class名,使用的是addClass.removeClass 直接改变元素的css属性值,这种是通过添加styl ...

  3. web appbuilder 改变样式和添加自定义widget

    一.改变样式 要实现的效果是添加cyan样式 1.将FoldableTheme/style下的cyan copy到TabTheme下的同一目录下: 2.打开TabTheme下的manifest,cop ...

  4. 标签(改变样式style)

    id可以换为class,class对应的名字可以多个一样 <div class="box">box1</div> <div class="b ...

  5. ng-repeat动态改变样式

    当我们使用AngularJs的ng-repeat时候动态绑定数据时,遇到遍历出来的标签样式都一样,这时候希望根据数组的下标分别对应不同的样式 解决:使用$index获取数组下标根据下标改变样式 < ...

  6. selenium用jquery改变元素属性

    一.jQuery 语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 1.基础语法: $(selector).action() 选择符(selector)即," ...

  7. 自己定义RatingBar,能依据设置改变样式

    项目在我的GITHUB上  mirsfang的GitHub 一个简单的自己定义View  ,为了一个 比較奇葩的需求而搞出来的.他的功能就是能让你自己设置图片和图片的大小以及星星的数量,是一个组合型的 ...

  8. 微信小程序,动态改变样式

    小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...

  9. jQuery改变label/input的值,改变class,改变img的src

    jQuery改变label/input的值.改变class,改变img的src jQuery改变label的值: $('#aID').text("New Value"); jQue ...

随机推荐

  1. [转载] 快速理解Kafka分布式消息队列框架

    转载自http://blog.csdn.net/xiaolang85/article/details/18048631 ==是什么 == 简单的说,Kafka是由Linkedin开发的一个分布式的消息 ...

  2. 【Java】单词倒序输出

    如何将一段单词倒序输出?把"Hello Java Hello China"变成"China Hello Java Hello"? 看起来好像很简单,只需要把字符 ...

  3. MATLAB 大数据剔除坏值

    在用MATLAB进行数据分析的时候,坏点对正确结果的影响比较大, 因此,我么需要剔除野点,对于坏值的剔除,我们 利用  3σ准则 剔除无效数据: 3σ准则又称为拉依达准则,它是先假设一组检测数据只含有 ...

  4. 超级有用的Vim命令

    你是否曾经烦恼,每次编辑vim文件,想要跳到一行结尾,需要按多次右键,每次想找到某个字符的位置,都得用肉眼去观察,每次想跳到文件结尾,都要按多次向下键.现在,你不必担心这些繁杂的过程,因为我们完全可以 ...

  5. spring cloud feign不支持@RequestBody+ RequestMethod.GET,报错

    1.问题梳理: 异常:org.springframework.web.HttpRequestMethodNotSupportedException: Request method 'POST' not ...

  6. 在使用ajax实现三级联动调用数据库数据并通过调出的数据进行二级表单查询

    在使用ajax实现三级联动查询数据库数据后再使用ajax无刷新方式使用三级联动调出的数据进行二级查询 但是现在遇到问题,在二级查询的时候期望是将数据以表格的形式展示在三级联动的下方,但是现在在查询后会 ...

  7. CentOS 7.2 配置mysql5.7

    准备篇:一.配置防火墙,开启80端口.3306端口CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙.1.关闭firewall:systemctl stop f ...

  8. Rsync同步、Rsync+Lsync实时同步

    Rsync同步.Rsync+Lsync实时同步 原创博文http://www.cnblogs.com/elvi/p/7658049.html #!/bin/sh #Myde by Elven @ #c ...

  9. Tosska SQL Tuning Expert 工具优化SQL语句

    对于SQL开发人员和DBA来说,根据业务需求写出一条正确的SQL很容易.但是SQL的执行性能怎么样呢?能优化一下跑得更快吗?如果不是资深的DBA,估计很多人都没有信心. 幸运的是,自动化优化工具可以帮 ...

  10. HDU2546--饭卡(01背包)

    饭卡 Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...