jQuery学习之------元素样式的操作

Posted 2020-10-13 NotFoundObject

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery学习之------元素样式的操作相关的知识，希望对你有一定的参考价值。

jQuery学习之------元素样式的操作

一、.addClass( className )方法----增加样式

1.addClass( className ) : 为每个匹配元素所要增加的一个或多个样式名

<head>
 <style>   
/*css样式代码*/
 .soulsjie{
        background:red;
    }
    .newstyle{
        height:100px;
        width:100px;
    }
    .newsty2{
        font-size:16px;   
    }
    </style>
<!--引入jQuery-->
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <div class="soulsjie">内容</div>

     <script type="text/javascript"> 
        //利用addClass（）给div增加样式，可增加一个或者多个
        $(‘.soulsjie‘).addClass(‘newstyle newsty2‘)
    </script>
</body>

2.addClass( function(index, currentClass) ) : 这个函数返回一个或更多用空格隔开的要增加的样式名

    .soulsjie{
        background:red;
    }
    .cs1{
        background:#f0f;
    }
     .cs2{
        background:#ff0;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <div class="soulsjie">内容</div>
     <script type="text/javascript"> 
     var aa=1;
        //利用addClass（）给div增加样式
        $(‘.soulsjie‘).addClass(function(){
            if(aa%2==2){
               $(this).addClass(‘cs1‘);
            }
            else{
               $(this).addClass(‘cs2‘) ;
            }  
        })
    </script>
</body>

二、.removeClass( )方法-----移除元素的css样式

1.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名

 .soulsjie{
        background:red;
    }
    .cs1{
        background:#f0f;
    }
     .cs2{
        background:#ff0;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <div class="soulsjie cs1 cs2">内容</div>
     <script type="text/javascript"> 
     var aa=1;
        //利用removeClass（）移除元素上的样式
        $(‘.soulsjie‘).removeClass(‘soulsjie‘)     
    </script>
</body>

2.removeClass( function(index, class) ) ：一个函数，返回一个或多个将要被移除的样式名

 .soulsjie{
        background:red;
    }
    .cs1{
        background:#f0f;
    }
     .cs2{
        background:#ff0;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <div class="soulsjie cs1 cs2">内容</div>
     <script type="text/javascript"> 
     var aa=1;
        //利用removeClass（）移除元素上的样式
var aa=1;
        $(‘.soulsjie‘).removeClass(function(){
        if(aa%2==0){
         return ‘cs1‘;   
     }
    else{
     return ‘cs2‘;
   }
})     
    </script>
</body>

三.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的布尔值
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>隔行换色的例子</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style type="text/css">
    body,
    table,
    td, 
    {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 12px;
    }
    
    .dise {
        background: #ebebeb;
    }
    </style>
</head>

<body>
    <div>
    <table id="table" width="50%" border="0" cellpadding="3" cellspacing="1">
        <tr>
            <td>vv</td>
            <td>vv</td>
        </tr>
        <tr>
            <td>vv</td>
            <td>vv</td>
        </tr>
        <tr>
            <td>vv</td>
            <td>vv</td>
        </tr>
        <tr>
            <td>ss</td>
            <td>ss</td>
        </tr>
        <tr>
            <td>ww</td>
            <td>ww</td>
        </tr>
    </table>
    </div>
    <script type="text/javascript">
    //给所有的tr元素加一个class="dise"的样式
    $("#table tr").toggleClass("dise");
    </script>
    <script type="text/javascript">
    //给所有的偶数tr元素切换class="dise"的样式
    //所有基数的样式保留，偶数的被删除
    $("#table tr:odd").toggleClass("dise");
    </script>
    <script type="text/javascript">
    //第二个参数判断样式类是否应该被添加或删除
    //true，那么这个样式类将被添加;
    //false，那么这个样式类将被移除
    //所有的奇数tr元素，应该都保留class="dise"样式
    $("#table tr:even").toggleClass("dise", true); //这个操作没有变化，因为样式已经是存在的
    </script>
</body>

</html>

四、.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果

设置：

.css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式

以上是关于jQuery学习之------元素样式的操作的主要内容，如果未能解决你的问题，请参考以下文章

JQuery学习之语法

jQuery_DOM学习之------包裹元素的方法

jQuery源代码学习之九—jQuery事件模块

jquery学习之初始化和获取值

JQuery学习之遍历

jQuery源代码学习之六——jQuery数据缓存Data