2．jQuery的css()函数--元素的层叠样式
该函数取得或者设置匹配元素的层叠样式。其语法形式如下：
- 语法一 css(name) //访问第一个匹配元素的样式属性
- 语法二 css(properties) //把一个"名/值对"对象设置为所有匹配元素的样式属性
- 语法三 css(name,value|fn) //在所有匹配元素中，设置一个样式的值，数字自动转换为像素值
注：第一种语法形式中name参数必须是有效的属性名。第二种语法形式中参数以 CSS样式设定的形式出现，并用花括号包围。第三种语法形式参数分成两种表现形式，一种是(name，value)，name为有效属性名，value为属性值；另一种是(name,fn)，name同样是有效属性名，fn为返回属性值的函数。
3．功能实现
控制列表项的宽度步骤如下。
（1）需要利用jQuery的ready()函数实现在页面整体加载完成后执行特效效果。
（2）在function()内部使用each()函数遍历列表项。
（3）判断每一个列表项的整体宽度是否大于预定义宽度。
（4）如果大于，计算出列表项第一部分需要的长度并设置。
（5）适当调整每个列表项的高度。
首先，把jQuery库引入进来：
- <script src="jslib/jquery-1.6.min.js" type="text/JavaScript"></script>
然后，添加JavaScript代码，利用jQuery的选择器找出每个列表项，获取需要的长度，并按照要求来进行设置。完整代码如下：
- 1<script type="text/JavaScript">
- 2 $(function () { //隐式调用ready()函数
- 3 var linelen = 120; //预定义列表项的宽度
- 4 $.each($(".list"), function (i) { //使用each()遍历每一个div
- //判断列表项实际长度是否超出范围
- 5 if (($(".subone:eq(" + i + ")").width() + $(".subtwo:eq(" +
- i + ")").width()) > linelen) {
- //计算出列表项第一部分需要的宽度
- 6 var length = linelen - $(".subtwo:eq(" + i + ")").width();
- 7 $(".subone:eq(" + i + ")").CSS("width", length + "px"); //设置列表项第一部分的宽度
- 8 $(".subone:eq("+i+")").CSS("height",65+"px"); //适当调整列表项的高度
- 9 }
- 10 });
- 11 });
- 12</script>
这里假定列表项第二部分，也就是"简介"的宽度是相同的。由于层的宽度改变后原有内容要变成多行，因此在代码的最后一部分可以加上修改标题所在DIV的高度，使标题信息可以完全显示出来，而不会被其他内容覆盖掉。图4.4为应用了jQuery调整列表项宽度后的效果。
 |
| 图4.4 调整层的宽度实现列表中的列表项宽度相同 |
