jQuery属性-addClass()方法

2016-09-20 23:38
分类:编程  AJAX  
作者:凯泽鲜森

1.普通定义和用法

语法

$(selector).addClass(class)
参数 描述
class 必需。规定一个或多个 class 名称。

 

 

 

2.函数添加类:使用函数向被选元素添加类。

语法

$(selector).addClass(function(index,oldclass)
参数 描述
function(index,oldclass) 必需。规定返回一个或多个待添加类名的函数。
  •     index - 可选。选择器的 index 位置。
  •     class - 可选。选择器的旧的类名。

 

 

 

 

普通定义用法

 

<html>
<head>
  <script src="js/jquery.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("example");
  });
});
</script>
  <style type="text/css">
    .example {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Hello kayze-refresh</h1>
  <p>Hello kayze-refresh</p>
  <p>Hello kayze-refresh</p> <button>向第一个 p 元素添加一个类</button> </body> </html>

 

 

函数添加类用法

1、function(index)

index - 可选。选择器的 index 位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learning notes</title>
    <script src="js/jquery.min.js"></script>
</head>
<style>
    body{
        color: #FFF;
    }
    .selected0{
        background: #008744;
    }
    .selected1{
        background: #0057e7;
    }
    .selected2{
        background: #d62d20;
    }
</style>
<body>
    <ul class="addClass">
        <li>Hello kayze-refresh</li>
        <li>Hello kayze-refresh</li>
        <li>Hello kayze-refresh</li>
    </ul>
<script> 
    $(function(){ 
    $('.addClass li').addClass(function(n){
        return 'selected' + n;
        });
    });
</script>
</body>
</html>

 

2、function(index,oldclass)

index - 可选。选择器的 index 位置。
class - 可选。选择器的旧的类名。

当需要添加类时的目标元素含有该类时,才会对包含该类的元素

使用该方法时,当目标元素含有 oldClass 类名时,才会添加类名的函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learning notes</title>
    <script src="js/jquery.min.js"></script>
</head>
<style>
    body{
        color: #FFF;
    }
    .selected0{
        background: #008744;
    }
    .selected1{
        background: #0057e7;
    }
    .selected2{
        background: #d62d20;
    }
</style>
<body>
    <ul class="addClass">
        <li class="old">Hello kayze-refresh</li>
        <li>Hello kayze-refresh</li>
        <li>Hello kayze-refresh</li>
    </ul>
<script> 
    $(function(){ 
    $('.addClass li').addClass(function(n,old){
        return 'selected' + n;
        });
    });
</script>
</body>
</html>

 

我是菜鸟,有什么其他的看法请留言跟我说下,我会学习修改。

未完待续!

好文要顶 收藏该文 我要举报
如果您觉得本文对你有用,不妨帮忙点个赞,或者在评论里给我一句赞美,小小成就都是今后继续为大家编写优质文章的动力!
上一篇:Context.js 右键菜单
下一篇:文件上传的几个 - 示例

一起悦读网    Copyright © 2016    浙ICP备11048508号