JQ隨筆 jquery class大全

標籤：als   this   dcl   function   on()   attribute   參數表   class   bsp   

分類：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‘; 　　　　} 　　});

 

 

 

 

JQ隨筆 jquery class大全