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 修改了它的样式的值。
Jquery 改变样式的更多相关文章
- javascript和jquery 移除事件 和 改变样式
javascript移除事件: document.getElementById("word").onmouseover = null; javascript改变样式: docume ...
- jquery 改变标签样式
jQuery改变标签的样式一般有3种 预置好class,然后通过jQuery改变元素的class名,使用的是addClass.removeClass 直接改变元素的css属性值,这种是通过添加styl ...
- web appbuilder 改变样式和添加自定义widget
一.改变样式 要实现的效果是添加cyan样式 1.将FoldableTheme/style下的cyan copy到TabTheme下的同一目录下: 2.打开TabTheme下的manifest,cop ...
- 标签(改变样式style)
id可以换为class,class对应的名字可以多个一样 <div class="box">box1</div> <div class="b ...
- ng-repeat动态改变样式
当我们使用AngularJs的ng-repeat时候动态绑定数据时,遇到遍历出来的标签样式都一样,这时候希望根据数组的下标分别对应不同的样式 解决:使用$index获取数组下标根据下标改变样式 < ...
- selenium用jquery改变元素属性
一.jQuery 语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作. 1.基础语法: $(selector).action() 选择符(selector)即," ...
- 自己定义RatingBar,能依据设置改变样式
项目在我的GITHUB上 mirsfang的GitHub 一个简单的自己定义View ,为了一个 比較奇葩的需求而搞出来的.他的功能就是能让你自己设置图片和图片的大小以及星星的数量,是一个组合型的 ...
- 微信小程序,动态改变样式
小程序目前没有修改样式api,但是可以利用数据绑定实现动态改变样式,可以用view标签模拟page然后改变view标签的样式,以下案例演示了如果改变page背景颜色: <view class=& ...
- jQuery改变label/input的值,改变class,改变img的src
jQuery改变label/input的值.改变class,改变img的src jQuery改变label的值: $('#aID').text("New Value"); jQue ...
随机推荐
- 利用Angular实现多团队模块化SPA开发框架
0.前言 当一个公司有多个开发团队时,我们可能会遇到这样一些问题: 技术选项杂乱,大家各玩各 业务重复度高,各种通用api,登录注销,权限管理都需要重复实现(甚至一个团队都需要重复实现) 业务壁垒,业 ...
- Vim常用操作-合并行。
刚接触 Vim 会觉得它的学习曲线非常陡峭,要记住很多命令.所以这个系列的分享,不会教你怎么配置它,而是教你怎么快速的使用它. 在开发时为了代码美观,经常会把属性用换行的方式显示. <el-di ...
- AIO5打印样式函数说明
函数名称 描述 _RM_Column 返回当前栏目数. _RM_Line 返回数据行数(从分组的起始位置开始) _RM_LineThough 返回数据行数(从报表的起始位置开始) _RM_Page 返 ...
- JS的数据类型及转换(还是基础的东西)
朋友说我这是再自娱自乐,我只想说,你说的对
- iphone6 plus导入联系人或者通讯录
iphone6 plus快速导入联系人或者通讯录(使用QQ同步助手,真的很简单) 最近换了部手机,由于之前的手机保存联系人都是保存在手机,没有备份在sim卡,由于sim卡被我剪小了,不能插回原来的手机 ...
- mysql故障解决笔记
错误提示如图 一开始我查询了 [root@web01 mysql]# ls -al /lib/libc* -rwxr-xr-x 1 root root 1909464 Mar 22 01:49 /li ...
- php常用面试题
1. 有一列数的规则如下 1.1.2.3.5.8.13.21.34... 求第30位数是多少.写出相关函数和算法名称 //$pxx = array(1,1);//for($i=2;$i<=29; ...
- mysql 有哪些索引
Mysql支持哪几种索引 从数据结构角度 1.B+树索引(O(log(n))):关于B+树索引,可以参考 MySQL索引背后的数据结构及算法原理 2.hash索引:a 仅仅能满足"=&quo ...
- 32位linux(centos)下mongoDB的安装
下载mongoDB wget http://downloads.mongodb.org/linux/mongodb-linux-i686-2.4.9.tgz 如果上面地址不对可以去官网自己下载http ...
- 浏览器出现Cannot set property 'onclick' of null的问题
Part1: 当js文件放在head里面时,如果绑定了onclick事件,就会出现这样的错误, 是因为W3School的写法是浏览器先加载完按钮节点才执行的js,所以当浏览器自顶向下解析时,找不到on ...