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 )：传递一组数组，返回一个对象结果

<style>

        .cs1{

            height:50px;

            width:50px;

            background:#f00;

        }

        .cs2{

            height:50px;

            width:50px;

            background:#ff0;

        }

        .cs3{

            height:50px;

            width:50px;

            background:#00f;

            font-size:30px;

        }

    </style>

</head>

<body>

	<h4>css()获取样式的属性值</h4>

    <div class="cs1">1</div>

    <P></P>

    <div class="cs2">2</div>

    <P></P>

    <div class="cs3">3</div>

    <P></P>

	<script type="text/javascript">

		//background-color:blue; => rgb(0, 0, 255)

		//颜色都会转化成统一的rgb标示

		$('p:eq(0)').text( $('.cs1').css("background-color") )

    </script>

	<script type="text/javascript">

		//字体大小都会转化成统px大小 em=>px

		$('p:eq(1)').text( $('.cs2').css("font-size") )

    </script>

	<script type="text/javascript">

		//获取尺寸，传入CSS属性组成的一个数组

		//{width: "60px", height: "60px"}

		var value = $('.cs3').css(['width','height']);

		//因为获取的是一个对象，取到对应的值

		$('p:eq(2)').text( 'widht:' + value.width +  ' height:' +value.height )

    </script>

设置：

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

<body>

	<h4>css()设置元素样式</h4>

    <div class="cs1">1</div>

    <div class="cs2">2</div>

    <div class="cs3">3</div>

	<script type="text/javascript">

		//多种写法设置颜色

		$('.cs3').css("background-color","red");

		$('.cs1').css("backgroundColor","blue");

    </script>

	<script type="text/javascript">

		//多种写法设置字体大小

		$('.cs3').css("font-size","23px");

		$('.cs1').css("fontSize","0.9em");

    </script>

	<script type="text/javascript">

		//获取到指定元素的宽度，在回调返回宽度值

		//通过处理这个value，重新设置新的宽度

		$('.cs2').css("width",function(index,value){

            //value带单位，先分解

            value = value.split('px');

            //返回一个新的值，在原有的值上，增加50px

            return (Number(value[0]) + 50) + value[1];

        })

    </script>

	<script type="text/javascript">

		//合并设置,通过对象传设置多个样式

		$('.cs1').css({

            'font-size'        :"15px",

            "background-color" :"#40E0D0",

            "border"           :"1px solid red"

        })

    </script>

</body>

jQuery学习之------元素样式的操作的更多相关文章

jQuery学习之旅 Item3 属性操作与样式操作
本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...
jquery学习笔记----元素筛选
1.eq() 筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有指定的类5.filter() 筛 ...
DOM访问元素样式和操作元素样式
在HTML中定义样式的方式有三种:通过<link/>元素包含外部样式表文件(外部样式表).使用<style/>元素定义嵌入式样式(嵌入式样式表).使用style特性定义针对特定 ...
jQuery学习笔记2——表单操作
一.获取和设置表单的值:val()和text() 1. 获取表单的值: $("#username").val(); 2. 设置表单的值: $("#username&quo ...
jQuery改变兄弟元素样式，及:not([class="allclassname"])筛选小结
以前一直对于jquery感到很畏惧,最近做点击图表变色,将其他元素图片复位的小需求,总结了一下一点小心得. 主要两点是:1.将所有兄弟元素的样式设置为一样,对于子元素的遍历: 2.对于特殊不需要变化的 ...
[jQuery学习系列六]6-jQuery实际操作小案例
前言最后在这里po上jQuery的几个小案例. Jquery例子1_占位符使用需求: 点击第一个按钮后自动去check 后面是否有按钮没有选中, 如有则提示错误消息. <html> &l ...
jQuery的基础dom和css操作
1.元素以及内容操作 $(function () { // alert($("a").html()); // 获取元素中间的html内容,包括标签和文本内容 // alert($( ...
web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记
hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...
jquery学习笔记(二)：DOM元素操作
内容来自[汇智网]jquery学习课程 2.1 元素属性操作 1.获取元素的属性语法:attr(name) 参数name表示属性的名称 2.设置元素的属性单个属性设置语法:attr(key,val ...

随机推荐

[转]Boosting
1 Boosting算法的起源 Boosting方法是一种用来提高弱分类算法准确度的方法,这种方法通过构造一个预测函数系列,然后以一定的方式将他们组合成一个预测函数.Boosting是一种提高任意给定 ...
CMake学习笔记三：cmake 常用指令
1 基本指令 1,ADD_DEFINITIONS 向 C/C++编译器添加-D 定义,比如: DD_DEFINITIONS(-DENABLE_DEBUG -DABC),参数之间用空格分割. 如果你的代 ...
DFS Gym 100553J Jokewithpermutation
题目传送门 /* 题意:将字符串分割成一个全排列 DFS:搜索主要在一位数和两位数的处理,用d1, d2记录个数,在不饱和的情况下,两种都试一下 DFS还是写不来,难道是在家里懒? */ #inclu ...
ACM_送气球（规律题）
送气球 Time Limit: 2000/1000ms (Java/Others) Problem Description: 为了奖励近段时间辛苦刷题的ACMer,会长决定给正在机房刷题的他们送气球. ...
在Eclipse+ADT中开发Android系统的内置应用
转自: http://www.iteye.com/topic/1050439 在Eclipse+ADT中开发Android系统的内置应用 Android系统内置有:Browser(浏览器).Mms( ...
短视频SDK用于旅游行业
超级简单易用的短视频SDK来自RDSDK.COM.锐动天地为开发者提供短视频编辑.视频直播.特效.录屏.编解码.视频转换,等多种解决方案,涵盖PC.iOS.Android多平台.以市场为导向,不断打磨 ...
iOS - - JSON 和 XML解析
JSON 和 XML 一.JSON 1.什么是JSON JSON是一种轻量级的数据格式,一般用于数据交互服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) 2.JSON的格 ...
4K屏选购秘诀
最近我买了一台三星4K 27.7吋显示器,经试用,虽然达到4K标准,但感觉像素精细度不够.明显达不到我的苹果笔记本视网膜屏的精细程度,事后总结一下原因:因为4K屏总的像素是3840×2160,屏越大像 ...
java规范与标准？
所谓规范,即指由很多人同时遵守的行为或理论. java的规范并不是指其中一种,而是有很多种,比如java编码规范,java命名规范,java虚拟机规范等等,甚至于一个编码规范都有很多种,不同的公司.组 ...
ALTER SEQUENCE - 更改一个序列生成器的定义
SYNOPSIS ALTER SEQUENCE name [ INCREMENT [ BY ] increment ] [ MINVALUE minvalue | NO MINVALUE ] [ MA ...

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

jQuery学习之------元素样式的操作的更多相关文章

随机推荐

热门专题