JQ随笔 jquery class大全

Posted 2020-09-30

分类：class属性//http://www.jquery123.com/category/manipulation/class-attribute/

.addClass();为每个匹配的元素添加制定的样式类名//http://www.jquery123.com/addClass/

　　1：.addClass(className);

　　　　eg：$("p").addClass("myClass yourClass");

　　2：.addClass(function(index,currentClass){})  

　　　　eg1:

　　　　$("ul li:last").addClass(function(index) {

　　　　　　return "item-" + index;

　　　　});

　　　　eg2:

　　　　

　　　　$("div").addClass(function(index, currentClass) {　　//index为当前的索引值，currentClass为当前类名

　　　　　　var addedClass; 

　　　　if ( currentClass === "red" ) {

　　　　　　addedClass = "green";

　　　　$("p").text("There is one green div");

　　　　} 

　　　　return addedClass;

　　　　});

.hasClass();确定任何一个匹配元素是否有被分配给定类//http://www.jquery123.com/hasClass/

　　1:.hasClass(className) 返回true/false;

　　eg:$(‘#mydiv‘).hasClass(‘foo‘);

.removeClass();移除集合中每个匹配元素上一个，多个或者全部样式。

　　1:removeClass([className]) 每个匹配元素移除一个或多个空格隔开的样式名

　　eg:.$(‘p‘).removeClass("myClass noClass").addClass("yourClass");　　　　

　　2:.removeClass(function(index,class){}) //index参数，表示所有在匹配元素的集合中当前元素的索引位置。class参数表示原有的样式名。

　　eg:

　　　　$(‘li:last‘).removeClass(function() {

　　　　　　return $(this).prev().attr(‘class‘);

　　　　});

.toggleClass();在匹配的元素集合的每个元素上添加或者删除一个或多个样式类，取决于这个样式类是否存在或值切换属性。即：有无切换。

　　1:.toggleClass(className);

　　eg:$(‘div.tumble‘).toggleClass(‘bounce‘)

　　2:toggleClass(className,switch); //className 在匹配元素集合中的每个元素上用来切换的一个或多个（空格隔开）样式类名。switch，用于判断是否被移除or添加

　　eg1：$(‘#foo‘).toggleClass(className, addOrRemove);

　　上一例子等价于：

　　　　if (addOrRemove) {

　　　　　　$(‘#foo‘).addClass(className);

　　　　}

　　　　else {

　　　　　　$(‘#foo‘).removeClass(className);

　　　　}

　　

　　3:.toggleClass([switch]);//switch一个用来判断样式添加还是移除的布尔值。

　　4:toggleClass(function(index,class,switch)[,switch])//function(index,class,switch);用来返回在匹配元素集合中的每个元素上用来切换的样式类名的一个函数。接受元素的索引位置和元素就的样式类作为参数。switch判断样式类是否是添加还是移除　　

　　eg：

 

　　

　　$(‘div.foo‘).toggleClass(function() {

　　　　if ($(this).parent().is(‘.bar‘)) {

　　　　　　return ‘happy‘;

　　} else {

　　　　return ‘sad‘;

　　　　}

　　});