<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. 白鹭引擎 - 对象的添加与删除 ( 开关效果 addChild, removeChild )

    class Main extends egret.DisplayObjectContainer { /** * Main 类构造器, 初始化的时候自动执行, ( 子类的构造函数必须调用父类的构造函数 ...

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

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

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

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

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

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

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

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

随机推荐

  1. Android开发在路上：少去踩坑，多走捷径(转)

    最近一朋友提了几个Android问题让我帮忙写个小分享,我觉得对新人还是挺有帮助的,所以有了这个小分享. 1. 目前, Android APP开发完成后,通常需要在哪些机型上进行测试? 2. 目前, ...

  2. Spring3.0学习笔记文档的官方网站（六）--3.4.1

    3.4 依靠 3.4.1 依赖注入     依赖注入两种方式:基于构造函数DI.基于setter方法DI. 3.4.1.1 基于构造函数DI     参数是引进一个对象的.和缺乏父母之前-子类关系: ...

  3. 《C++ Primer Plus》学习笔记6

    <C++ Primer Plus>学习笔记6 第11章 使用类 <<<<<<<<<<<<<<<&l ...

  4. 每天进步一点点--&gt;功能fseek() 使用方法

    在阅读代码时,遇到了非常早之前用过的fseek(),非常久没实用了.有点陌生,写出来以便下次查阅. 函数功能是把文件指针指向文件的开头.须要包括头文件stdio.h fseek   函数名: fsee ...

  5. C语言中符号格式说明

    scanf 语法: #include <stdio.h>int scanf( const char *format, ... ); scanf()函数根据由format(格式)指定的格式从 ...

  6. NYoj The partial sum problem(简单深搜+优化)

    题目链接:http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=927 代码: #include <stdio.h> #include & ...

  7. hdoj 1226 超级password 【隐图BFS】

    称号:hdoj 1226 超级password 分析:这题属于隐式图搜索,状态不是非常明显,须要自己建立. 事实上搜索说白了就是暴力. 这个题目就是,首先对给出的能够组成的全部的数依次枚举.长度从小到 ...

  8. crawler_浅谈网络爬虫

    题记: 1024,今天是个程序猿的节日 ,哈哈,转为正题,从事了一线网络爬虫开发有近1000天.简单阐述下个人对网络爬虫的理解. 提纲: 1:是什么 2:能做什么 3:怎么做 4:综述 1:是什么 w ...

  9. javascript中用来定义引用类型的一种"默认"模式

    // 终极版:组合使用构造函数模式和原型模式:***************************** // 评价:集构造函数模式和原型模式之大成: 用来定义引用类型的一种默认模式 function ...

  10. 【机器学习算法-python实现】KNN-k近邻算法的实现（附源代码）

    ,400],[200,5],[100,77],[40,300]]) shape:显示(行,列)例:shape(group)=(4,2) zeros:列出一个同样格式的空矩阵,例:zeros(group ...