javascript代码实例教程-ѧϰJQuery - 4

发布时间:2019-02-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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

Shakespeare's Sonnets

The Fair Youth 1-126
The Dark Lady 127-152
The Rival Poet 78-86

我们添加灰底色

tr {  background-color: #fff; } .alt {  background-color: #ccc }

js代码:

$('tr:even').addClass('alt');

实现效果:

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

Shakespeare's Sonnets

The Fair Youth 1-126
The Dark Lady 127-152
The Rival Poet 78-86

我们想让两个表都是偶数有底色。

 $('tr:nth-child(odd)').addClass('alt');

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

Shakespeare's Sonnets

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');

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

Shakespeare's Sonnets

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

Shakespeare's Sonnets

The Fair Youth 1-126
The Dark Lady 127-152
The Rival Poet 78-86

chapter02.css

@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; } 

chapter02-2.js

$(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,请注明来意。