jquery学习：序列直排变横排展示、隔行变色、

横向序列展示：

方法是在jsp里jquery下：

$(document).ready(function() {
$('#selected-plays > li').addClass('horizontal');}
css：
.horizontal {
float: left;
list-style: none;
margin: 10px;
}

 

页面是：序列中第一个ul id 如 右 ：<ul id='selected-plays'>

----------------------------------------------------

如果要页面上弄一个email点进去就到发送email的地方。
css里写：

a.mailto{
background: url(imges/email.jpg) no-repeat right top;
padding-right: 100px;
}

解释：a标签下的class叫mailto的样式：一个带有url的图片，不重复图片放在100px的右边。

jsp里jquery下：$('a[href^="mailto:"]').addClass('mailto');
解释：找到a标签带有mailto的标签增加一个class名字。
body下：<a href="mailto:henryiv@king.co.uk" >EMAIL</a>

---------------------------------------------------

 

隔行变色用jquery 里的odd和even。
如果有两张表，用even奇数时候，就变色，第一张表最后一行还是奇数行，下一张表第一行就是会变色，那么这个时候就用用odd方法，让第二张表第一行开始变色。
方法是在jsp里jquery下：

$(document).ready(function() {
alert(1111);
$('tr:nth-child(odd)').addClass('alt');
});

 

解释：nth-child是从1开始计数的选择符。如果是页面上只有一个表，$('tr:even').addClass('alt');
如果在这里加{$('td:contains("henry")').addClass('highlight');}意思是在td标签中找到henry的单词 ，找到就添加一个class为highlight（就是为了添加样式），css：.highlight{
font-weight: bold;
font-style: italic;
}

 

css：

tr{
background-color: #fff;
}
.alt{
background-color: #ccc;
}
$(document).ready(function() {
alert(1111);
$('tr:nth-child(odd)').addClass('alt');
$('td:contains("henry")').addClass('highlight');
});

 

效果图：

 

---

 

如果想添加样式给henry子的同辈的下一单元格，可以这么写：
$('td:contains("henry")').next().addClass('highlight');
添加.next()

如果用nextAll(),就会把下个单元格全部变。
$('td:contains("henry")').parent().children().addClass('highlight');
这样就是整一行变。