JQuery_元素样式操作

元素样式操作包括了直接设置CSS 样式、增加CSS 类别、类别切换、删除类别这几种操作方法。
而在整个jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点掌握。

一、css()方法：

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
      //alert($("#box").css("color"));//获取某个元素的行内样式，不同浏览器结果不一样，有些返回rgb格式的颜色值
      $("#box").css("color","yellow");//设置某个元素的行内样式
   });
</script>
<style type="text/css">
    #box{color:red}
</style>
</head>
<body>
    <div id="box" title="我是域名">发生</div>
</body>

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

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          var box = $('div').css(['color', 'height', 'width']); //得到多个CSS 样式的数组对象
        for (var i in box) { //逐个遍历出来
            alert(i + ':' + box[i]);
        }
   });
</script>
<style type="text/css">
    #box{color:red}
</style>
</head>
<body>
    <div id="box" title="我是域名">发生</div>
</body>

　　jQuery 提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          var box = $('div').css(['color', 'height', 'width']); //得到多个CSS 样式的数组对象
        /*for (var i in box) { //逐个遍历出来
            alert(i + ':' + box[i]);
        }*/
        $.each(box, function (attr, value) { //遍历JavaScript 原生态的对象数组
            alert(attr + ':' + value);
        });
   });
</script>
<style type="text/css">
    #box{
        color:red;
        height:200px;
        width:300px;
    }
</style>
</head>
<body>
    <div id="box" title="我是域名">发生</div>
</body>

　　使用$.each()可以遍历原生的JavaScript 对象数组，如果是jQuery 对象的数组怎么使用.each()方法呢？

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          var box = $('div').css(['color', 'height', 'width']); //得到多个CSS 样式的数组对象
        /*for (var i in box) { //逐个遍历出来
            alert(i + ':' + box[i]);
        }*/
        /*$.each(box, function (attr, value) { //遍历JavaScript 原生态的对象数组
            alert(attr + ':' + value);
        });*/
        $('div').each(function (index, element) { //index 为索引，element 为元素DOM
            alert(index + ':' + element);
        });
   });
</script>
<style type="text/css">
    #box{
        color:red;
        height:200px;
        width:300px;
    }
</style>
</head>
<body>
    <div id="box" title="我是域名">发生</div>
    <div id="" title="我是域名">发生</div>
    <div id="" title="我是域名">发生</div>
</body>

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

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          $('div').css({
            'background-color' : '#ccc',
            'color' : 'red',
            'font-size' : '20px'
        });
   });
</script>
<style type="text/css">
    #box{
        color:red;
        height:200px;
        width:300px;
    }
</style>
</head>
<body>
    <div id="box" title="我是域名">发生</div>
    <div id="" title="我是域名">发生</div>
    <div id="" title="我是域名">发生</div>
</body>

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

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          $('#box').css('width', function (index, value) {
            return (parseInt(value) - 500) + 'px';    //value是之前的长度，这里将全局的操作包装成局部的操作
        });
   });
</script>
<style type="text/css">
    #box{
        color:red;
        height:200px;
        width:800px;
    }
</style>
</head>
<body>
    <div id="box" title="我是域名">发生</div>
    <div id="" title="我是域名">发生</div>
    <div id="" title="我是域名">发生</div>
</body>

二、addClass()方法/removeClass()方法

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          $('div').addClass("box");//添加一个类
        $("div").addClass("box bg");//同事添加多个类
   });
</script>
<style type="text/css">
    .box{
        color:red;
        height:20px;
        width:800px;
    }
    .bg{
        background-color:yellow;
    }
</style>
</head>
<body>
    <div id="" title="我是域名">发生</div>
    <div id="" title="我是域名">发生</div>
    <div id="" title="我是域名">发生</div>
</body>

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
   $(function(){
          $('div').removeClass("box");//删除一个类
        $("div").removeClass("box bg");//同时删除多个类
   });
</script>
<style type="text/css">
    .box{
        color:red;
        height:20px;
        width:800px;
    }
    .bg{
        background-color:yellow;
    }
</style>
</head>
<body>
    <div class="box" title="我是域名">发生</div>
    <div class="box bg" title="我是域名">发生</div>
    <div class="box" title="我是域名">发生</div>
</body>

三、toggleClass()方法

　　我们还可以结合事件来实现CSS 类的样式切换功能。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
      $(function(){
         $('div').click(function(){ //当点击后触发
            $(this).toggleClass('box bg');     //单个样式多个样式均可
        });
    });
</script>
<style type="text/css">
    .box{
        color:red;
        height:20px;
        width:800px;
    }
    .bg{
        background-color:yellow;
    }
</style>
</head>
<body>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
</body>

　　.toggleClass()方法的第二个参数可以传入一个布尔值，true 表示执行切换到class 类，false表示执行回默认class 类(默认的是空class)，运用这个特性，我们可以设置切换的频率。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
      $(function(){
        var count = 0;
        $('div').click(function () { //每点击两次切换一次red
            $(this).toggleClass('box bg', count++ % 3 == 0);
        });
    });
</script>
<style type="text/css">
    .box{
        color:red;
        height:20px;
        width:800px;
    }
    .bg{
        background-color:yellow;
    }
</style>
</head>
<body>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
</body>

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

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
      $(function(){
        $('div').click(function () {
            $(this).toggleClass('blue'); //一开始切换到样式2
            if ($(this).hasClass('blue')) { //判断样式2 存在后
                $(this).removeClass('red'); //删除样式1
            } else {
                $(this).toggleClass('red'); //添加样式1，这里也可以addClass
            }
        });
    });
</script>
<style type="text/css">
    .red{
        color:red;
    }
    .blue{
        color:blue;
    }
</style>
</head>
<body>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
</body>

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

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
      $(function(){
        $('div').click(function () {
            $(this).toggleClass(function () { //传递匿名函数，返回要切换的样式
                return $(this).hasClass('red') ? 'blue' : 'red';
            });
        });
    });
</script>
<style type="text/css">
    .red{
        color:red;
    }
    .blue{
        color:blue;
    }
</style>
</head>
<body>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
</body>

　　注意：上面虽然一句话实现了这个功能，但还是有一些小缺陷，因为原来的class 类没有被删除，只不过被替代了而已。所以，需要改写一下。

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script type="text/javascript">
      $(function(){
        $('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">
    .red{
        color:red;
    }
    .blue{
        color:blue;
    }
</style>
</head>
<body>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
    <div class="" title="我是域名">发生</div>
</body>

JQuery_元素样式操作的更多相关文章

JQuery_元素属性操作
除了对元素内容进行设置和获取,通过jQuery 也可以对元素本身的属性进行操作,包括获取属性的属性值.设置属性的属性值,并且可以删除掉属性. <script type="text/ja ...
jQuery编程基础精华02（属性、表单过滤器，元素的each，表单选择器，子元素过滤器(*)，追加方法，节点，样式操作）
属性.表单过滤器属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...
jQuery学习之------元素样式的操作
jQuery学习之------元素样式的操作一..addClass( className )方法----增加样式 1.addClass( className ) : 为每个匹配元素所要增加的一个或多 ...
DOM访问元素样式和操作元素样式
在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...
解密jQuery内核样式操作
基础回顾 jQuery里节点样式读取以及设置都是通过.css()这个方法来实现的,本章通一下分解探究下jquery里这部分代码的实现那么jQuery要处理样式的哪些问题? 先简单回顾下样式操作会遇到 ...
jQuery 2.0.3 源码分析样式操作
根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...
深入学习jQuery样式操作
× 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作前面的话使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...
11月8日上午Jquery的基础语法、选取元素、操作元素、加事件、挂事件及移除事件
jquery基础知识 1.jquery文件的引入,所有的js代码要写在下面那段代码下面. <script src="../jquery-1.11.2.min.js">& ...
JavaScipt 样式操作
我们知道HTML样式定义的三种方式: <link/>外部引入也就是定义 CSS 中的 <style/>嵌入式样式 style特性地定义给一个HTML元素设置css属性,如: ...

随机推荐

AS配置IDE
字体调整 settings->editor->colors&fonts->font,必须save as一个名称,个人选择Courier New字体,大小为14: 快捷键设置 ...
Windows内核开发中如何区分文件对象究竟是文件还是文件夹？
今天有同行问了一个问题,Windows文件过滤驱动里的如何去区分一个对象是文件还是文件夹?我花了1小时左右翻阅了一些微软的文档以及以前的遗留代码,发现在WDK的帮助文档中是这么定义的: FILE_OB ...
EF并非我们想象的那么智能
我之前在项目中用EF读取一个视图的数据,页面展示出现重复数据,当时百思不得其解,跟踪代码,数据读取时取到的数据并不是重复,为什么在前台显示就有重复了呢,我当时就在业务层将数据去重,但取到的数据跟数据库 ...
css浮动与绝对定位小记
浮动 float属性可以设置的值为none,left,right.对于设置了浮动的元素,会向其父元素的左侧或右侧紧靠,默认情况下,盒子的宽度不再伸展,而是根据盒子里面的内容来确定.浮动可以让一个元素移 ...
iOS学习——制作一个小型加法计算器
一.项目要求:制作一个加法计算器.在第1个和第2个文本框中输入两个整数,然后点击“计算”按钮,可将计算结果显示在第3个文本框中. 二.开发步骤: 1.搭建UI界面 2.监听按钮的点击事件 3.获取文本 ...
WebSphere MQ Explorer的sqlserver的jdbc
一.IBM WebSphere MQ7.0的jdbc支持数据库有: DB2 Informix Informix_With_Date_Format Microsoft_SQL_Server Oracle ...
递归将Map里的字段名由驼峰转为下划线
导航定位概述算法设计递归技巧代码实现定位本文适合于想要使用Java递归地将Map里的Key字段名从驼峰转为下划线,或者想了解如何处理任意递归的Map结构的筒鞋. 概述在进行多语言混合编 ...
集群间Session共享问题解决方案
两个基本概念的生命周期 session: 当新客户端发现一个HTTP请求时服务端会创建一个session.并分配一个sessionID作为服务端来客户端的识别,session对象会保存在服务端.此时s ...
电脑装的是office2013，右键新建却是2007,或者右键新建菜单中没有excel2013问题解决办法。
我的office出现了两个问题,因为工作比较忙,也没有着急解决,今天实在受不了了,花费一下午才找到解决方法. 原来万恶之源都是可恶的wps,以后千万不安装kingsoft了. 第一个问题:excel打 ...
OpenGL FAQ
转自:http://www.cnblogs.com/indif/archive/2011/04/22/2024659.html 1.什么是OpenGL?OpenGL即开放图形库(Open Graphi ...

JQuery_元素样式操作

JQuery_元素样式操作的更多相关文章

随机推荐

热门专题