JQ隨筆 jquery class大全

來源:互聯網
上載者:User

標籤: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大全

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.