jQuery 使用手册(三)


Posted in Javascript onSeptember 23, 2009

CSS操作

      传统javascript对css的操作相当繁琐,比如<div id="a" style="background:blue">css</div>取它的background语法是 document.getElementById("a").style.background,而jQuery对css更方便的操作,$("#a").background(),$("#a").background(“red”)
$("#a")得到jQuery对象[ <div id="a" … /div> ]
$("#a").background()将取出该对象的background样式。
$("#a").background(“red”)将该对象的background样式设为red
jQuery提供了以下方法,来操作css
background ()   background (val)     color()    color(val)     css(name)    css(prop)   
css(key, value)      float()   float(val)   height()   height(val)  width()  width(val) 
left()   left(val)       overflow()   overflow(val)   position()   position(val)  top()   top(val)


这里需要讲解一下css(name)  css(prop)  css(key, value),其他的看名字都知道什么作用了!

<div id="a" style="background:blue; color:red">css</div><id="b">test</P>

css(name)  获取样式名为name的样式
$("#a").css("color") 将得到样式中color值red,("#a").css("background ")将得到blue

css(prop)  prop是一个hash对象,用于设置大量的css样式
$("#b").css({ color: "red", background: "blue" });
最终效果是<p id="b" style="background:blue; color:red">test</p>,{ color: "red", background: "blue" },hash对象,color为key,"red"为value,

css(key, value)  用于设置一个单独得css样式
$("#b").css("color","red");最终效果是<p id="b" style="color:red">test</p>

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
大家未必知道的Js技巧收藏
Apr 07 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
Apr 10 Javascript
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
vue动画之点击按钮往上渐渐显示出来的实例
Sep 29 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
javascript+css实现进度条效果
Mar 25 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
jQuery 使用手册(二)
Sep 23 #Javascript
jQuery 使用手册(一)
Sep 23 #Javascript
JavaScript 变量命名规则
Sep 23 #Javascript
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 #Javascript
jquery ajax 登录验证实现代码
Sep 23 #Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 #Javascript
javascript 必知必会之closure
Sep 21 #Javascript
You might like
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP dirname(__FILE__)原理及用法解析
2020/10/28 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
js操作时间(年-月-日 时-分-秒 星期几)
2010/06/20 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
JavaScript表单即时验证 验证不成功不能提交
2017/08/31 Javascript
vue项目中实现的微信分享功能示例
2019/01/21 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
vue中的.$mount('#app')手动挂载操作
2020/09/02 Javascript
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
解读Python中degrees()方法的使用
2015/05/18 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
pyqt5 tablewidget 利用线程动态刷新数据的方法
2019/06/17 Python
Python 支持向量机分类器的实现
2020/01/15 Python
python3实现raspberry pi(树莓派)4驱小车控制程序
2020/02/12 Python
python如何实现读取并显示图片(不需要图形界面)
2020/07/08 Python
css3实现垂直下拉动画菜单示例
2014/04/22 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
简历的自荐信
2013/12/19 职场文书
班级管理经验交流材料
2015/11/02 职场文书