《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.3 技巧：生成类名
生活随笔
收集整理的這篇文章主要介紹了
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.3 技巧：生成类名
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
本節(jié)書摘來自異步社區(qū)《jQuery、jQuery UI及jQuery Mobile技巧與示例》一書中的第3章，第3.3節(jié)，作者：【荷】Adriaan de Jonge , 【美】Phil Dutson著，更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“異步社區(qū)”公眾號查看
3.3 技巧：生成類名
addClass()函數(shù)的參數(shù)可以不是靜態(tài)字符串。可以傳入一個函數(shù)，如代碼清單3-3所示。這在動態(tài)Web應(yīng)用程序中尤其方便。但要小心：除了必需的CSS樣式外，不要把它搞得太復(fù)雜。使用適當(dāng)?shù)倪x擇器，不使用麻煩的類名就可以做很多的事情。
代碼清單3-3 向addClass()傳入函數(shù)
00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>A function as argument to addClass()</title> 05 <style> 06 /* 請將下列代碼移至一個外部的 07 .css文件*/ 08 09 p.changed-0 { 10 background-color: green; 11 } 12 13 p.differentchanged-1 { 14 background-color: blue; 15 } 16 17 p.twochanged-2 { 18 background-color: red; 19 } 20 21 </style> 22 </head> 23 <body> 24 25 <p>This text will have a different appearance 26 after the class change</p> 27 <p class="different">This text will have a different 28 appearance after the class change</p> 29 <p class="one two">This text will have a different 30 appearance after the class change</p> 31 <div>This text will not change</div> 32 33 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 34 35 <script> 36 // 請將下列代碼移至一個外部的.js文件中 37 $(document).ready(function() { 38 39 $('p').addClass(function(index, className) { 40 $(this).removeClass(); 41 return className + 'changed-' + index; 42 }); 43 44 }); 45 </script> 46 </body> 47 </html>在第39行，函數(shù)的index參數(shù)表示選取集中的元素索引值，className參數(shù)表示當(dāng)前元素的類名。第41行利用當(dāng)前元素的類名和索引值組合成一個新的名字，以便演示函數(shù)的功能。然而這個例子在實踐中可能用處不大。
總結(jié)
以上是生活随笔為你收集整理的《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.3 技巧：生成类名的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《数据中心虚拟化技术权威指南》一2.2
- 下一篇： Linux基础第一章 概述