Jquery 改变样式

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  修改了它的样式的值。