JQuery知识快览之四—样式
前面我们获取了对象集,本文介绍怎么控制对象集的样式
基本概念
在一个html页面中,我们有两种方式来控制一个对象的样式,用HTML attribute控制,或者用CSS类来控制,这两种方法虽然都能控制对象的样式,但是通过CSS来控制对象的样式,将内容和呈现分离开来是更为推荐的一种方法。JQuery提供了丰富的控制CSS样式的方法。
修改CSS类
我们可以通过attr和prop来直接修改对象的CSS类,但是一个对象可以有多个CSS类,我们有时只是想增加或者去掉一个CSS类,这时,用attr和prop就不是那么方便了,JQuery提供了如下便利的方法来修改CSS类
1.增加CSS类
addClass(classname|function(index, currentClass))
可用空格隔开需要增加的多个CSS类
2.除去CSS类
removeClass([classname]|function(index, currentClass))
可用空格隔开需要除去的多个CSS类,如果不指定CSS类,则除去所有CSS类。
3.判断是否有CSS类
hasClass(classname)
4.交互增删CSS类
toggleClass([classname][,switch]|function(index, class,switch)[,switch])
当提供classname时则增删指定的CSS类,当不提供时则增删所有拥有的CSS类。
当提供switch,则根据其true或false指,增或者删,否则,根据CSS类是否存在增或者删。
修改CSS属性
1.css(propertyName|propertyNames)
获取css属性值,1.9版新增用属性名数组来获取多个css属性的方法。如
$( elem ).css([ "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth" ])
将获取一个包含各属性值的数组。
2.css(propertyName,value|propertyName,function(index,value)|properties)
设置css属性值,1.6版新增用+=和-=在原有值的基础上设置属性值的方法,如css("width"."+=100")在原有width值的基础上加上100.
css函数拥有极为强大的兼容性,CSS和DOM的样式属性都能用在css函数中,比如background-color和backgroundColor都能被css用来设置背景。
特殊的样式函数
css看起来如此的强大,我们似乎不需要别的函数来获取样式值了,可是JQuery为我们想得更多。
我们知道用css('width')来获取宽度时得到的是'400px'这种带px的字符串,而我们有时候需要用400这个值来做一些算术计算,这时JQuery为我们提供了一系列的函数来获取这些特殊的算术值。
1.获取长宽算术值
width(),height()
获取内容的长宽值,这个值不包括padding,border,margin部分
innerWidth(),innerHeight()
获取内部的长宽值,这个值是width()和height()的值加上padding部分。
outerWidth(),outerHeight()
获取外部的长宽值,这个值是width()和height()的值加上padding和border部分。但是不包括margin。
outerWidth(true),outerHeight(true)
获取外部的长宽值,这个值是width()和height()的值加上padding,border和margin部分。
注意:对于window和document对象来说,它们不存在padding,border,margin部分,因此只能对它们使用width()和height()函数。
2.设置长宽值
height(value|function(index,height))
可以设置的值为100px,50%,auto等,当只设定为100,而没有指定其单位时,px是其默认单位。
注意:我们只能设置内容的长宽值,而不能设置inner或outer长宽值。
3.获取位置
offset()
获取对象集中第一个对象相对于document的位置
position()
获取对象集中第一个对象相对于其parent的位置
注意:获取到的位置信息为{left:100,top:20}这种形式的数据。
4.设置位置
offset(coords|function(index,coords))
对象集中对象相对于document的位置,用{left:100,top:20}这种形式的数据来进行设置。
5.获取和设置其滚动属性
scrollLeft([value])
获取和设置其向右滚动的值
scrollTop([value])
获取和设置其向下滚动的值
JQuery知识快览之四—样式的更多相关文章
- JQuery知识快览之三—JQuery对象集
本文讲述JQuery对象集的各相关知识 获取JQuery对象集 JQuery对象,和DOM对象是两个不同的东西,JQuery对象可以是DOM对象的封装,但是JQuery对象不只是DOM对象的封装,它还 ...
- JQuery知识快览之五—操作属性和结构
前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法. prop还是attr? 从JQuery1.6版开始,新增了prop方法来获取和设 ...
- JQuery知识快览之二—事件
事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...
- JQuery知识快览之一—选择器
阅读指导:本文参考最新的1.10.2版写成,针对用得比较多的1.4版,所有1.5版之后的函数都会注明哪一版新增.对于熟悉1.4版想学1.10版的请直接搜索"新增". JQuery是 ...
- 最全的jQuery知识汇总
本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...
- 基于jQuery虾米音乐播放器样式代码
分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div c ...
- jQuery动态添加删除CSS样式
jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...
- jQuery知识重构
jQuery知识重构 目录: 一.入口函数 1 $(document).ready(function(){}); 2 $(function(){}); jQuery ...
- jQuery知识梳理20190817
目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...
随机推荐
- 移动端<head>头部 常用<meta>标签
<!DOCTYPE html><html lang = ""><head> <title></title> <me ...
- WebService之Axis2(4):二进制文件传输
在<WebService大讲堂之Axis2(2):复合类型数据的传递>中讲过,如果要传递二进制文件(如图像.音频文件等),可以使用byte[]作为数据类型进行传递,然后客户端使用RPC方式 ...
- GTA项目 二, JSON接口开放跨域访问
public class CORSAttribute : ActionFilterAttribute { public string Domains { get; set; } public CORS ...
- centos 6.4下的postgresql 9.2使用
http://www.cnblogs.com/mchina/archive/2012/06/06/2539003.html
- java的I/O操作:文件的路径
package solutions; import java.io.*; /** * Created by Administrator on 2016/3/14. */ public class Re ...
- PHP上传图片时,如何判断上传的文件是否为可用的图片文件
利用getimagesize函数: function isImage($filename){$types = '.gif|.jpeg|.png|.bmp';//定义检查的图片类型if(file_exi ...
- POJ 3243 Clever Y(离散对数-拓展小步大步算法)
Description Little Y finds there is a very interesting formula in mathematics: XY mod Z = K Given X, ...
- hdu5255 魔法因子
题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=5255 首先先预处理出一个p,使得p*因子X等于一个整数,且p最小,设q=p*X. 则题目则可以看成存在 ...
- archlinux锁屏
启动管理器用的是 slim 发现锁屏可以用 slimlock
- 解决PHP在IE浏览器下载文件,中文文件名乱码问题
前提:我们网站所有文件全部使用的是UTF-8 NO BOM的编码方式 1.找测试重现.360浏览器下载的呵呵,果然文件名是乱码.再请测试在ie浏览器下测试.IE9,8,7也全部是乱码.查看编码就是UT ...