例说FPGA：可直接用于工程项目的第一手经验【2.9】
jQuery è�·å�– class ç‰äº� abc çš„ table å…ƒç´ è�·å�–到 table 以å��设置第三列和第七列边框为红色使用 jQuery 设置内è�”æ ·å¼�é’ˆå¯¹â€œå¤šä¸ªè¡¨æ ¼â€�以å�Šâ€œæ ·å¼�被覆盖â€�的问题之å‰�çš„é€�è¡Œé��å�†æ–¹å¼�效ç�‡è¾ƒä½�。我们å�¯ä»¥åˆ©ç”¨CSS ç±»æ�¥ç®¡ç�†æ ·å¼�这是解决优先级冲çª�最优雅且高效的方法。æ�¨è��æ–¹æ¡ˆæ·»åŠ CSS 类最佳å®�践这ç§�方法ä¸�仅性能更好æµ�览器å�Ÿç”Ÿå¤„ç�†æ ·å¼�而且能轻æ�¾è§£å†³ä¼˜å…ˆçº§é—®é¢˜ã€‚
先在 CSS ä¸å®šä¹‰æ ·å¼�在headä¸çš„styleæ ‡ç¾æˆ– CSS æ–‡ä»¶é‡Œæ·»åŠ style/* å®šä¹‰ç¬¬ä¸‰åˆ—å’Œç¬¬ä¸ƒåˆ—çš„æ ·å¼� */.table-abc-highlight tbody tr *:nth-child(
, .table-abc-highlight tbody tr *:nth-child(
{border:2px solid red!important;/* 使用 !important ç¡®ä¿�覆盖å�Ÿæœ‰æ ·å¼� */padding:5px;/* å�¯é€‰é˜²æ¢è¾¹æ¡†å¡Œé™· */}/style
jQuery 代ç �批é‡�处ç�†$(document).ready(function(){//
找到所有 class 包� abc 的 table//
ç»™å®ƒä»¬æ·»åŠ ä¸€ä¸ªæ–°çš„ class table-abc-highlight$(table.abc).addClass(table-abc-highlight);//
(å�¯é€‰) 如æ�œè¡¨æ ¼æœ‰ thead 或 tfoot上é�¢çš„ CSS å�ªé’ˆå¯¹ tbody// 如æ�œéœ€è¦�包å�«è¡¨å¤´å�¯ä»¥ä½¿ç”¨è¿™ä¸ªæ›´é€šç”¨çš„选择器// $(table.abc).find(tr).find(td, th).removeClass(highlight-col);// $(table.abc).find(tr).find(td:nth-child(
, th:nth-child(
, td:nth-child(
, th:nth-child(
).addClass(highlight-col);});备选方案强制内è�”æ ·å¼�如æ�œå¿…须用 JS如æ�œä½ æ— æ³•ä¿®æ”¹ CSS 文件必须使用 jQuery 内è�”æ ·å¼�å�¯ä»¥ä½¿ç”¨attr(style, ...)æ�¥å¼ºåˆ¶è¦†ç›–。$(document).ready(function(){// é��å�†æ¯�一个 class 为 abc çš„ table$(table.abc).each(function(){var$table$(this);// é��å�†è¯¥è¡¨æ ¼ä¸‹çš„æ¯�一行$table.find(tr).each(function(){// 使用 attr ç›´æ�¥å†™å…¥ style å±�性并包å�« !important// 第三列 (索引
$(this).find(td, th).eq(
.attr(style,border: 2px solid red !important;);// 第七列 (索引
$(this).find(td, th).eq(
.attr(style,border: 2px solid red !important;);});});});方案对比ä¸�建议方案一addClass强烈æ�¨è��。性能高代ç �清晰维护方便。通过 CSS 类管ç�†æ ·å¼�是å‰�ç«¯æ ‡å‡†å�šæ³•ã€‚方案二attr style在必须通过 JS 动æ€�æ�§åˆ¶ä¸”æ— æ³•é¢„çŸ¥æ ·å¼�的场景下使用。性能ç¨�差且代ç �è¾ƒå†—é•¿ã€‚å»ºè®®ä½¿ç”¨æ–¹æ¡ˆä¸€å®ƒèƒ½ä¸€åŠ³æ°¸é€¸åœ°è§£å†³æ ·å¼�优先级问题并且代ç �é��常简æ´�。
郭童童MSD课后辅导-郭童童MSD课后辅导应用
