addClass() 和 toggleClass()

addClass()是在原有的类基础上增加类属性,仍然保留原有的类的样式。语法格式为:addClass(class0 class1 ...) ,例如: $("p").addClass("cls1 cls2") ,p原有的class为cls0,则执行结束之后,变为 <p class="cls0 cls1 cls2"/>;

toggleClass() 是切换元素class类别,删除原有的class样式,替换为新的class样式。语法格式为:toggleClass(class) ,例如:

$(function() {

$("img").click(function() {

$(this).toggleClass("clsImg"); //切换样式类别

})

})

这个函数的作用就是点击图片就切换样式,再次点击就切换到之前的样式。

时间: 2024-11-13 07:57:59

addClass() 和 toggleClass()的相关文章

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

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

jQuery addClass removeClass toggleClass方法概述

通过动态改变类名(class),可以让其修改元素呈现出不同的效果.在HTML结构中里,多个class以空格分隔,当一个节点(或称为一个标签)含有多个class时,DOM元素响应的className属性获取的不是class名称的数组,而是一个含有空格的字符串,这就使得多class操作变得很麻烦.同样的jQuery开发者也考虑到这种情况,增加了一个.addClass()方法,用于动态增加class类名 .addClass( className )方法 .addClass( className ) :

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

<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"&g

addClass, removeClass, toggleClass(从jquery中抠出来)

<div id="d3" class="cur"></div> 1 var mylibs = (function(){ 2 var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, 3 core_trim = String.prototype.trim, 4 core_rspace = /\s+/, 5 rclass = /[\t\r\n]/g; 6 7 var trim = function(tex

原生JS实现addClass,removeClass,toggleClass

<style type="text/css"> div.testClass{ background-color:gray; } </style> <script type="text/javascript"> function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function ad

js实现css、addClass、removeClass和toggleClass

JQuery中获取CSS样式css(name):访问第一匹配元素的样式属性css(name,value):在所有匹配的元素中,设置一个样式属性的值css(properties):把一个“名/值对”对象设置为所有匹配元素的样式属性css(name,function(index,value)):在所有匹配的元素中,设置一个样式属性的值 Javascript中获取样式的值 function css(obj, attr, value) { switch (arguments.length) { case

jquery13 attr() prop() val() addClass()等 : 对元素属性的操作

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> jQu

Angular页面选项卡切换要注意的toggleClass

在第一,第二篇随笔中写到的选项卡切换,我回头看了看发现缺少了一个很重要的部分,那就是toggleClass. //在js控制器中必须写明指令,要不然在页面写了toggle-class="active"也是会报错的!!! .directive('toggleClass', function(){ return { restrict: 'A', scope: { toggleClass: '@' }, link: function(scope, element,attrs){ elemen

jQuery常见的50种用法

1. 如何创建嵌套的过滤器: //允许你减少集合中的匹配元素的过滤器, //只剩下那些与给定的选择器匹配的部分.在这种情况下, //查询删除了任何没(:not)有(:has) //包含class为“selected”(.selected)的子节点. .filter(":not(:has(.selected))") 2. 如何重用元素搜索 var allItems = $("div.item"); var keepList = $("div#containe