一、addClass() - 向被选元素添加一个或多个类

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $("button").click(function(){
    　　$("h1,h2,p").addClass("blue");
    　　$("div,p").addClass("important");
  });
});
</script>
<style type="text/css">
　　.important{font-weight:bold; font-size:xx-large;}
　　.blue{color:blue;}
</style>
</head>
<body>
　　<h1>标题 1</h1>
　　<h2>标题 2</h2>
　　<p>这是一个段落。</p>
　　<p>这是另一个段落。</p>
　　<div>这是非常重要的文本！</div><br>
　　<button>向元素添加类</button>
</body>

也可以在 addClass() 方法中规定多个类：

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $("button").click(function(){
    　　$("#div1").addClass("important blue");
  });
});
</script>
<style type="text/css">
　　.important{font-weight:bold; font-size:xx-large;}
　　.blue{color:blue;}
</style>
</head>
<body>
　　<div id="div1">这是一些文本。</div>
　　<div id="div2">这是一些文本。</div><br>
　　<button>向第一个 div 元素添加多个类</button>
</body>

二、removeClass() - 从被选元素删除一个或多个类

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
<style type="text/css">
.important{font-weight:bold; font-size:xx-large;}
.blue{color:blue;}
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另一个段落。</p><br>
<button>从元素上删除类</button>
</body>

三、hasClass() - 对被选元素进行判断是否有该类

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $("h1").click(function(){
    　if($(this).hasClass("blue")){
        $(this).removeClass("important");
      }else{
        /*...............*/
      }
  });
});
</script>
<style type="text/css">
　　.important{font-weight:bold; font-size:xx-large;}
　　.blue{color:blue;}
</style>
</head>
<body>
　　<h1 class="blue important">标题 1</h1>
　　<h2>标题 2</h2>
　　<p>这是一个段落。</p>
　　<p>这是另一个段落。</p>
　　<button>切换 CSS 类</button>
</body>

四、toggleClass() - 对被选元素进行添加/删除类的切换操作

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $("button").click(function(){
    　　$("h1,h2,p").toggleClass("blue");//切换css类，当类存在时，就删除，不存在时就添加，必须要有点击动作
  });
});
</script>
<style type="text/css">
　　.important{font-weight:bold; font-size:xx-large;}
　　.blue{color:blue;}
</style>
</head>
<body>
　　<h1>标题 1</h1>
　　<h2>标题 2</h2>
　　<p>这是一个段落。</p>
　　<p>这是另一个段落。</p>
　　<button>切换 CSS 类</button>
</body>

默认的 CSS 类切换只能是无样式和指定样式之间的切换，如果想实现样式 red和样式 blue之间的切换还必须自己写一些逻辑。

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    $('div').click(function () {
        $(this).toggleClass('red'); //一开始切换到样式 red
        if ($(this).hasClass('red')) { //判断样式 red 存在后
            $(this).removeClass('blue'); //删除样式 blue
        } else {
            $(this).toggleClass('blue'); //添加样式 blue，这里也可以 addClass
        }
   });
});
</script>
<style type="text/css">
    .blue{ color:blue;}
    .red{ color:red;}
    .size{ font-size:36px;}
    .green{ color:green;}
</style>
</head>
<body>
    <div>JQuery1</div>
    <div>JQuery2</div>
</body>

.toggleClass()方法提供了传递匿名函数的方式，来设置你所需要切换的规则。

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
    /* $('div').click(function () {
        $(this).toggleClass(function () {     //传递匿名函数，返回要切换的样式
            return $(this).hasClass('red') ? 'blue' : 'red';        //这里有个缺陷red添加进去后就删除不了
        });
    });
    */

    $('div').click(function () {
        $(this).toggleClass(function () {
            if ($(this).hasClass('red')) {
                $(this).removeClass('red');
                return 'blue';
            } else {
                $(this).removeClass('blue');
                return 'red';
            }
        });
    });

});
</script>
<style type="text/css">
    .blue{ color:blue;}
    .red{ color:red;}
    .size{ font-size:36px;}
    .green{ color:green;}
</style>
</head>
<body>
    <div class="blue">JQuery1</div>
    <div>JQuery2</div>
</body>

五、css() - 设置或返回被选元素的一个或多个样式属性

1、返回指定的 CSS 属性的值：

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
  alert("Background color = " + $("p").eq(1).css("background-color"));//这里可以通过eq()这个方法来选择第几个p标签
});
</script>
</head>
<body>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
</body>

在 CSS 获取上，我们也可以获取多个 CSS 样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用 for in 遍历。

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
      var box = $('p').css(['color', 'height', 'width']); //得到多个 CSS 样式的数组对象
    　alert(box);//返回的是一个对象数组object

    /*
    for (var i in box) {     //逐个遍历出来
        alert(i + ':' + box[i]);
    }
    */

    //上面使用了js的原生方法，这里jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。
    $.each(box, function (attr, value) { //遍历 JavaScript 原生态的对象数组
        alert(attr + ':' + value);
    });

    //使用$.each()可以遍历原生的 JavaScript 对象数组，如果是 jQuery 对象的数组怎么使用.each()方法呢？
    $('p').each(function (index, element) {     //index 为索引，element 为元素 DOM对象
        alert(index + ':' + element);
    });
});
</script>
<style type="text/css">
    p{ background-color:#ff0000;}
</style>
</head>
<body>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>
</body>

2、设置指定的 CSS 属性：

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
  $("p").eq(0).css("background-color","#FF0");//这里可以通过eq()这个方法来选择第几个p标签
});
</script>
</head>
<body>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
</body>

在需要设置多个样式的时候，我们可以传递多个 CSS 样式的键值对即可。

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
      $("p").eq(0).css({
        "background-color":"#FF0",
        "font-size":"36px"
    });//这里可以通过eq()这个方法来选择第几个p标签
});
</script>
</head>
<body>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
</body>

如果想设置某个元素的 CSS 样式的值， 但这个值需要计算我们可以传递一个匿名函数。

<script src="jquery-1.11.1.min.js"></script>
<script>
$(function(){
      $('p').css('width', function (index, value) {
        alert(value);
        return (parseInt(value) - 500) + 'px';
    });
});
</script>
</head>
<body>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
</body>

JQuery_给元素添加或删除类等以及CSS()方法的更多相关文章

  1. 原生JS动态添加和删除类

    原生JS动态添加和删除类 由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类 添加和和删除类有三种方法 首先等 ...

  2. 原生js添加和删除类

    原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类" ...

  3. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  4. 使用 jQuery 选择器获取页面元素，然后利用 jQuery 对象的 css() 方法设置其 display 样式属性，从而实现显示和隐藏效果。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素,然后利用 jQuery 对象的 css() 方法设置其 display 样式属性,从而实现显示和隐藏效果. 具体要求如下: ...

  5. 使用 jQuery 基本选择器获取页面元素，然后利用 jQuery 对象的 css() 方法动态设置 ＜span＞ 和 ＜a＞ 标签的样式

    查看本章节 查看作业目录 需求说明: 使用 jQuery 基本选择器获取页面元素,然后利用 jQuery 对象的 css() 方法动态设置 <span> 和 <a> 标签的样式 ...

  6. 原生js查询、添加、删除类

    1.添加类 为标签添加一个class的类 如:<div id="box" class="box">内容</div> document.g ...

  7. jQ HTML之捕获 设置 元素添加与删除

    捕获 设置修改 添加元素 删除元素

  8. TreeMap和TreeSet在排序时如何比较元素？Collections工具类中的sort()方法如何比较元素？

    TreeSet要求存放的对象所属的类必须实现Comparable接口,该接口提供了比较元素的compareTo()方法,当插入元素时会回调该方法比较元素的大小.TreeMap要求存放的键值对映射的键必 ...

  9. TreeMap和TreeSet在排序时如何比较元素，Collections工具类中的sort()方法如何比较元素

    TreeSet和TreeMap排序时比较元素要求元素对象必须实现Comparable接口 Collections的sort方法比较元素有两种方法: 元素对象实现Comparable接口 实体类Dog ...

随机推荐

  1. [geeksforgeeks] Count the number of occurrences in a sorted array

    Count the number of occurrences in a sorted array Given a sorted array arr[] and a number x, write a ...

  2. My97日历控件常用功能记录

    My97相信大家都不陌生,应该是我所见过的最强大的一个日历控件了,最近的项目中也比较多地用到了此控件,而且项目中经常会有不同时间范围的需求,在此列出一些比较常用的日期范围格式的设置,尽管在My97的官 ...

  3. awk 统计数据在文件中的出现次数

    突然发现awk原来可以统计同一数据在要处理的文件中所出现的次数.原来的时候为了分析数据还自己写程序,哎,无语,当时还以为自己多强,手工分析不过来的东西写程序处理.现在想来实在是年少轻狂.解决问题嘛,不 ...

  4. 高德地图根据经纬度转换成地址JS代码demo

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 开源搜索引擎Solr的快速搭建及集成到企业门户最佳实施方案--转载

    笔者经过研究查阅solr官方相关资料经过两周的研究实现了毫秒级百万数据的搜索引擎的搭建并引入到企业门户.现将实施心得和步骤分享一下. 1.      jdk1.6 安装jdk1.6到系统默认目录下X: ...

  6. JSP 页面打印

    <HTML><HEAD><TITLE>javascript打印-打印页面设置-打印预览代码</TITLE> <META http-equiv=Co ...

  7. HDU4836 The Query on the Tree(树状数组&&LCA)

    由于智力的问题,百度之星完全lu不动..开场看第一题根据题目给的条件我觉得一定是可以构造出来的,题目给的意思颇有鸽巢原理的感觉,于是觉得开场第一题应该就是智力构造题了,想了半个小时,发现完全想不动,于 ...

  8. Windows Server2008+IIS7部署网站的日期格式问题

    最近部署一个ASP网站,发现网站的某个功能上的日历在原来的服务器上访问时是会根据特定日期来对该日进行加粗加红显示的,但部署到我公司机房的win2008服务器上访问时却没有这效果了. 于是通过本地部署, ...

  9. C Primer Plus之指针

    c之精髓——指针(pointer)——用来存储地址的变量.一般来讲,指针是一个其数值为地址的变量(或更一般地说是一个数据对象). 一元运算符&可以取得变量的存储地址,一个变量的地址可以被看作是 ...

  10. Chrome 开发工具指南

    Chrome 开发工具指南 谷歌 Chrome 开发工具,是基于谷歌浏览器内含的一套网页制作和调试工具.开发者工具允许网页开发者深入浏览器和网页应用程序的内部.该工具可以有效地追踪布局问题,设置 Ja ...