<1>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>

    <style type="text/css">

        .class1{ color:Red}

        .class2{ font-size:100px}

    </style>

    <script type="text/javascript">

        $(function () {

            $("#btn1").click(function () {  //当点击#btn1的时候给#div1加入一个class2的样式

                $("#div1").addClass("class2")

            })

        })

        $(function () {

            $("#btn2").click(function () {

                $("#div1").removeClass("class1") //当点击#btn2的时候移除#div1中的class1的样式

            })

        })

        $(function () {

            $("#btn3").click(function () {

                $("#div1").toggleClass("class2") //当点击#btn2的时候就将原来的样式切换到class2样式，再点击#btn2的时候就在class2样式切换到原来的样式

            })

        })

        $("textarea").attr("class", "class1") //将textarea的样式加入一个 class1 样式

        $("textarea").attr("class", "class1 class2") //给textarea加入两个样式一个是class1样式，另外一个是class2样式

    </script>

</head>

<body  style=" background:red">

<div class="class1" id="div1">我是div</div>

<input type="button" value="加入样式"id="btn1" />

<input type="button" value="移除样式"id="btn2" />

<input type="button" value="切换样式"id="btn3" />

<textarea rows="5" cols="10">我是textarea</textarea>

</body>

</html>

<2>

<head>

    <title></title>

    <script src="Jquery/jquery-1.10.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $(".btnClass1,.btnClass2").css("background", "red"); //将具有btnClass1，和btnClass2样式的表单的背景颜色设为红色

            $("#b1,#b2").css("color", "blue"); //将id属性为 b1,或者b2的字体颜色设为蓝色,注意选择器是$("#b1,#b2")而不是$("#b1","#b2")

            $("input,p").css("color", "yellow"); //将input标签，和p标签的字体颜色设为黄色

            $("body *").css("background", "yellow"); //将body以下全部的标签背景颜色设为黄色

        })

    </script>

</head>

<body>

<input type="button"  value="ok" class="btnClass1" id="b1"/>

<input type="button"  value="ok" class="btnClass2" id="b2"/>

<div>1231</div>

<p>我是p</p>

</body>

</html>

版权声明：本文博主原创文章。博客，未经同意不得转载。

class 添加样式,删，开关 【选择】addClass,removeClass,toggleClass的更多相关文章

  1. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  2. class 添加样式,删除，开关 【选择】addClass,removeClass,toggleClass

    <1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...

  3. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

  4. jQuery addClass removeClass toggleClass方法概述

    通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性 ...

  5. .addClass(),.removeClass(),.toggleClass()的区别

    .addClass("className")方法是用来给指定元素增加类名,也就是说给指定的元素追加样式: 可以同时添加多个类名,空格符隔开 $("selector&quo ...

  6. Jquery重新学习之三[属性addClass(),removeClass(),toggleClass()]

    1:属性.addClass(class|fn)及.removeClass(class|fn) 1.1 .addClass(class) 参数class一个或多个要添加到元素中的CSS类名,请用空格分开 ...

  7. addClass, removeClass, toggleClass（从jquery中抠出来）

    <div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...

  8. 原声js实现addClass removeClass toggleClass效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JQuery为元素添加样式

    由于jquery支持css3,所有能很好的兼容很多浏览器,所以通过jquery来使用css样式比较好 为定义好的css样式可以调用元素的css方法添加样式 $("span").cs ...

随机推荐

  1. windows 2003 域控制器(AD)的常规命令行操作以及修复

    查询服务器的角色 Netdom query fsmo 强制升级操作主机角色(如果两台DC都无损,可以直接用图形模式传送,这里指的是一台DC出问题,另一台强制升级占用角色的情况) Ntdsutil Ro ...

  2. 52. 模版和设计元素——Lotus Notes的代码重用

    不论是理论上还是实用上,代码重用都是编程的一个重要议题.可以从两个角度来讨论代码重用. 一是逻辑上代码以怎样的方式被重用.既可以通过面向对象的思想普及以来耳熟能详的继承的方式.比如先建了一个车的基类, ...

  3. NSDate与时间戳的那点事

    对于项目中常常使用的时间来说,通过时间戳的形式进行数据的操作能带来极大的方便,以下就时间戳的生成和转换通过Demo的形式进行解说 声明一个时间类型的变量: // 获取当前的时间 // 以下的第一个方法 ...

  4. Eequal sum sets

    Let us consider sets of positive integers less than or equal to n. Note that all elements of a set a ...

  5. 浅析——SCTP协议（转）

    SCTP处于SCTP用户应用层与IP网络层之间,它运用“关联”(association)这个术语定义交换信息的两个对等SCTP用户间的协议状态 .SCTP也是面向连接的,但在概念上,SCTP“关联”比 ...

  6. JavaScript快速入门（三）——JavaScript语句

    JavaScript基本语句 基本概述 JavaScript是脚本语言,从上到下解释执行,最小单位为语句或语句块,每个语句以分号结尾,每个语句块以右大括号结尾. JavaScript可以将多条语句或语 ...

  7. mysql高可用架构方案之二(keepalived+lvs+读写分离+负载均衡)

    mysql主从复制与lvs+keepalived实现负载高可用 文件夹 1.前言    4 2.原理    4 2.1.概要介绍    4 2.2.工作原理    4 2.3.实际作用    4 3方 ...

  8. Delphi颜色的表示（一共5种表示法）

    //全以红色举例: //1. RGB 模式:Self.Color := $0000ff; //不过和HTML.PhotoShop.FireWorks中的 #ff0000 是完全反的,应该叫 BGR. ...

  9. python中使用ctypes调用MinGW生成的动态链接库（dll）

    关于gcc编译dll的我就不说了,网上举例一大堆,下面以g++为例. 假设有一个test.cpp文件如下: extern "C" { __declspec(dllexport) d ...

  10. Android开发之搜Ya项目说明（3）

    项目 搜芽移动client ----seller,app,base三个包的简单说明 作者 曾金龙 Tel:18664312687 QQ :470910357@qq.com 时间 2014-10-14 ...