`
KAXU
  • 浏览: 266353 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

jquery 属性 toggleClass(class)

阅读更多

toggleClass(class)

如果匹配元素集合中元素没有使用样式‘class’则对该元素加入样式‘class’;如果已经使用该样式,则从该元素中删除该样式。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p").click(function () {
      $(this).toggleClass("highlight");
    });

  });
  </script>
  <style>
  p { margin: 4px; font-size:16px; font-weight:bolder; 
      cursor:pointer; }
  .blue { color:blue; }
  .highlight { background:yellow; }
  </style>
</head>
<body>
  <p class="blue">Click to toggle</p>
  <p class="blue highlight">highlight</p>
  <p class="blue">on these</p>
  <p class="blue">paragraphs</p>
</body>
</html>

 

$(this).toggleClass("highlight");
点击p元素后,如果匹配p元素集合中p元素包含样式‘highlight’则删除该样式,没有包含‘highlight’样式则增加该样式

 

分享到:
评论

相关推荐

    jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法。分享给大家供大家参考。具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,...

    jQuery中toggleClass()方法用法实例

    本文实例讲述了jQuery中toggleClass()方法用法。分享给大家供大家参考。具体分析如下: 此方法对添加或移除匹配元素的一个或多个类进行切换。 toggleClass()方法检查匹配元素中指定的类。如果不存在则添加类,如果已...

    jQuery修改class属性和CSS样式整理

    class属性修改  类属性即class属性,规定类名.  用类选择器规定样式的... 用jQuery进行类名修改既可以用attr()方法修改”class”属性,也可以用addClass(), removeClass(), toggleClass()等方法来完成. addClass()

    jQuery点击改变class并toggle及toggleClass()方法定义用法

    主要介绍了jQuery点击改变class并toggle及toggleClass()方法定义用法的相关资料,需要的朋友可以参考下

    通过jquery toggleClass()属性制作文章段落更改背景颜色

    jQuery制作文章段落更改背景颜色属性jquery toggleClass()属性。文中给大家附实例代码和源码,感兴趣的朋友参考下吧

    JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例

    主要介绍了JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作,涉及jquery事件响应及页面元素属性动态操作相关使用技巧,需要的朋友可以参考下

    jQuery中与toggleClass等价的程序段 以及未来学习的方向

    以下两段jQuery是等价的 1 使用toggleClass实现class值的交替 代码如下: $(“#in1”).click(function(){ $(“li”).toggleClass(“ok2”); }) 2 使用js判断实现class值的交替 代码如下: $(“#in1”).click(function...

    jQuery帮助文档

    toggleClass(class [, switch]) HTML代码 html( [val] ) 文本 text( [val] ) 值 val( [val] ) CSS CSS css(name) css(properties) css(name, value) 位置 offset() position() scrollTop( [val] ) ...

    jQuery 1.4.1 中文参考

    4.2.6 toggleClass(class, switch) 67 4.2.7 toggleClass(function(index, class), [switch]) 67 4.3 HTML代码 68 4.3.1 html() 68 4.3.2 html(val) 68 4.3.3 html(function(index, html)) 68 4.4 文本 69 4.4.1 ...

    JQuery新版中文手册

    toggleClass(class|fn[,sw]) HTML代码/文本/值 html([val|fn]) text([val|fn]) val([val|fn|arr]) CSS CSS css(name|pro|[,val|fn]) 位置 offset([coordinates]) position() scrollTop([val]) ...

    jquery常用的方法

    Attribute: $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr({src:”test.jpg”,alt:...$(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式

    JQUERY 常用方法大全

    $(”元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 $(”input元素名称”).val(); 获取input元素的值 $(”input元素名称”).val(value); 设置input元素的值为value

    Jquery常用方法.txt

    Attribute: $("p").addClass(css中定义的样式类型);...$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 $("input元素名称").val(); 获取input元素的值

    超实用的jQuery代码段

    2.19 jQuery实现outerHTML属性 2.20 实现带固定表头的表格 2.21 为表单内控件设定缺省数值和文本 2.22 防止单个页面重复提交按钮 2.23 取得列表控件选中的option对象 2.24 限制输入框仅接受特殊字符的输入 2.25 禁止...

    jQuery方法简洁实现隔行换色及toggleClass的使用

    今天用一种简洁的方法toggleClass()实现了隔行换色:代码如下: 代码如下: &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=”utf-8″&gt; &lt;title&gt;隔行换色&lt;/title&gt; [removed][removed] ...

    jQuery 1.5 API 中文版

    $.toggleClass( class [, switch] ), .toggleClass( fn(index, class) [, switch] ) HTML, text str.html( ) $.html( val ), .html( fn(index, html) ) str.text( ) $.text( val ), .text( fn(index, html) ) Value ...

    jquery插件使用方法大全

    第二行代码得到class 为container的div元素,第三行代码得到标签下面id为msg的div元素(不过最好别这样写,因为jQuery需要遍历所有的div元素,对于带id的元素,直接用$("#id"))。第四行代码得到context为上下文的table...

    jQuery详细教程

    演示 jQuery hide() 函数,隐藏所有 class="test" 的元素。 jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。 基础语法是:$(selector).action() • 美元符号定义 jQuery • 选择符...

Global site tag (gtag.js) - Google Analytics