前面我们获取了对象集,本文介绍怎么控制对象集的样式

基本概念

在一个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知识快览之四—样式的更多相关文章

  1. JQuery知识快览之三—JQuery对象集

    本文讲述JQuery对象集的各相关知识 获取JQuery对象集 JQuery对象,和DOM对象是两个不同的东西,JQuery对象可以是DOM对象的封装,但是JQuery对象不只是DOM对象的封装,它还 ...

  2. JQuery知识快览之五—操作属性和结构

    前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法. prop还是attr? 从JQuery1.6版开始,新增了prop方法来获取和设 ...

  3. JQuery知识快览之二—事件

    事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...

  4. JQuery知识快览之一—选择器

    阅读指导:本文参考最新的1.10.2版写成,针对用得比较多的1.4版,所有1.5版之后的函数都会注明哪一版新增.对于熟悉1.4版想学1.10版的请直接搜索"新增". JQuery是 ...

  5. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  6. 基于jQuery虾米音乐播放器样式代码

    分享一款基于jQuery虾米音乐播放器样式代码.这是一款基于jquery+html5实现的虾米音乐播放器源码下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div c ...

  7. jQuery动态添加删除CSS样式

    jQuery框架提供了两个CSS样式操作方法,一个是追加样式addClass,一个是移除样式removeClass,下面通过一个小例子讲解用法. jQuery动态追加移除CSS样式 <!DOCT ...

  8. jQuery知识重构

    jQuery知识重构 目录: 一.入口函数 1          $(document).ready(function(){}); 2          $(function(){}); jQuery ...

  9. jQuery知识梳理20190817

    目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...

随机推荐

  1. 类似 select 选择框效果及美化

    网上有各种各样的关于 select 选择框的美化,找了很多,并没有好的样式效果.所以就找了一个利用 ul li 做的类似 select 选择框的效果,不废话了,先上图,效果如下: 对于上图的箭头效果, ...

  2. IntelliJ IDEA 项目相关的几个重要概念介绍

    必备材料介绍 IntelliJ IDEA 对其他 IDE 转过来的用户有特别优待,对其专门整理了非常棒的资料,还请其他 IDE 过来的用户抽时间查看,会有很大帮助:Eclipse 用户可以看:http ...

  3. struts2 radio标签 性别固定选项

    <s:radio list="#{'男':'man', '女':'woman'}" value="'男'" name="users.sex&qu ...

  4. WEB简单数据操作练习

    主要学习代码: Login.aspx: <!--第一种方式--> <%-- <script type="text/javascript"> funct ...

  5. [原创]java WEB学习笔记60:Struts2学习之路--Actioin-声明式异常处理

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  6. C#控件:TabControl

    tabcontrol在切换页面的时候经常用到 这里讲下如何让tabcontrol更好看 ref:http://blog.csdn.net/conmajia/article/details/759671 ...

  7. extjs grid 单元格 多选

    new Ext.grid.CellSelectionModel({ last : false, // 上一次选中的单元格 selections : [], // 选择区缓存 handleMouseDo ...

  8. 封装smarty类

    <?php/** * Project:     Smarty: the PHP compiling template engine * File:        Smarty.class.php ...

  9. 1019: A+B和C比大小

    1019: A+B和C比大小 时间限制: 1 Sec  内存限制: 128 MB提交: 518  解决: 300[提交][状态][讨论版] 题目描述 给定区间[-231, 231]内的3个整数A.B和 ...

  10. MySQL 中NULL和空值的区别 (转载 http://blog.sina.com.cn/s/blog_3f2a82610102v4dn.html)

    平时我们在使用MySQL的时候,对于MySQL中的NULL值和空值区别不能很好的理解.注意到NULL值是未知的,且占用空间,不走索引,DBA建议建表的时候最好设置字段是NOT NULL 来避免这种低效 ...