脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ѧϰJQuery - 4,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
3. 自定义选择器
我们已经学习了CSS选择器,那么jQuery是否有自己定义的选择器呢?答案是肯定的。
例如,下面的HTML文件是两个table,怎么样使他颜色分明呢?
chapter2-2 <script tyPE="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="chapter02.js"></script>Shakespeare's plays
As You Like IT | Comedy | |
All's Well that Ends Well | Comedy | 1601 |
Hamlet | Tragedy | 1604 |
Macbeth | Tragedy | 1606 |
romeo and Juliet | Tragedy | 1595 |
Henry IV, Part I | History | 1596 |
Henry V | History | 1599 |
The Fair Youth | 1-126 |
The Dark Lady | 127-152 |
The Rival Poet | 78-86 |
tr { background-color: #fff; } .alt { background-color: #ccc }
$('tr:even').addClass('alt');
As You Like It | Comedy | |
All's Well that Ends Well | Comedy | 1601 |
Hamlet | Tragedy | 1604 |
Macbeth | Tragedy | 1606 |
Romeo and Juliet | Tragedy | 1595 |
Henry IV, Part I | History | 1596 |
Henry V | History | 1599 |
The Fair Youth | 1-126 |
The Dark Lady | 127-152 |
The Rival Poet | 78-86 |
我们想让两个表都是偶数有底色。
$('tr:nth-child(odd)').addClass('alt');
As You Like It | Comedy | |
All's Well that Ends Well | Comedy | 1601 |
HaMLet | Tragedy | 1604 |
Macbeth | Tragedy | 1606 |
Romeo and Juliet | Tragedy | 1595 |
Henry IV, Part I | History | 1596 |
Henry V | History | 1599 |
The Fair Youth | 1-126 |
The Dark Lady | 127-152 |
The Rival Poet | 78-86 |
现在还想把所有“Henry”加高亮
高亮CSS:
.highlight { font-weight: bold; font-style: italic; }js代码:
$('td:contains(Henry)').addClass('highlight');
As You Like It | Comedy | |
All's Well that Ends Well | Comedy | 1601 |
Hamlet | Tragedy | 1604 |
Macbeth | Tragedy | 1606 |
Romeo and Juliet | Tragedy | 1595 |
Henry IV, Part I | History | 1596 |
Henry V | History | 1599 |
The Fair Youth | 1-126 |
The Dark Lady | 127-152 |
The Rival Poet | 78-86 |
附:
chapter02-2.html
chapter2-2 <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="chapter02-2.js"></script>Shakespeare's Plays
As You Like It | Comedy | |
All's Well that Ends Well | Comedy | 1601 |
Hamlet | Tragedy | 1604 |
Macbeth | Tragedy | 1606 |
Romeo and Juliet | Tragedy | 1595 |
Henry IV, Part I | History | 1596 |
Henry V | History | 1599 |
The Fair Youth | 1-126 |
The Dark Lady | 127-152 |
The Rival Poet | 78-86 |
@charset "utf-8"; /* CSS Document */ .horizontal { float: left; list-style: none; margin: 10px; } .sub-level { background: #ccc; } a { color: #00c; } a.mailto { background: url(images/email.png) no-repeat right top; padding-right: 18px; } a.pDFlink { background: url(images/pdf.png) no-repeat right top; padding-right: 18px; } a.henrylink { background-color: #fff; padding: 2px; border: 1px solid #000; } /* Part 2 */ tr { background-color: #fff; } .alt { background-color: #ccc } .highlight { font-weight: bold; font-style: italic; }
$(document).ready(function() { //$('tr').filter(':even').addClass('alt'); $('tr:nth-child(odd)').addClass('alt'); $('td:contains(Henry)').addClass('highlight'); });
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-ѧϰJQuery - 4全部内容,希望文章能够帮你解决javascript代码实例教程-ѧϰJQuery - 4所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。