JQuery第一季 ——Ajax开发续2.ppt

JQuery ——Ajax开发 jQuery 与CSS3 html head title属性选择器/title style type=text/css !-- .myClass{ /* 设定某个CSS 类别 */ background-color:#005890; color:#4eff00; } -- /style script language=javascript src=jquery.min.js/script script language=javascript $(function(){ //先用CSS3 的选择器，然后添加样式风格 $(li:nth-child(2)).addClass(myClass); }); /script /head body ul li糖醋排骨/li li圆笼粉蒸肉/li li泡菜鱼/li li板栗烧鸡/li li麻婆豆腐/li /ul /body /html 以上选择器li:nth-child(2)表示选中li中位于第2 个子元素的标记 jQuery 支持的CSS3 最基本的选择器 使用jQuery 中的位置选择器 html head title位置选择器/title style type=text/css !-- div{ font-size:12px; border:1px solid #003a75; margin:5px; } p{ margin:0px; padding:4px 10px 4px 10px; } .myClass{ /* 设定某个CSS 类别 */ background-color:#c0ebff; text-decoration:underline; } -- /style /head body div p1. 大礼堂/p p2. 清华学堂/p /div div p3. 图书馆/p /div div p4. 紫荆公寓/p p5. C 楼/p p6. 清清地下/p /div /body /html 在上述代码中有3 个div块，每个div块都包含文章段落p标记，其中第1 个div块 包含2 个p，第2 个div块包含1 个p，最后一个包含3 个p标记。在没有任何jQuery 代码的情况下，显示结果如图 在页面中如果希望选择每个div块的第1 个p标记，则可以通过:first-child 来选择，代码如下： $(p:first-child) 以上代码表示选择所有的p标记，并且这些p标记是其父标记的第1 个子标记。 jQuery会自动清除Firefox 中的空格问题，因此下面的代码在IE 和Firefox 中的运行结果如图所示，兼容性非常好。 script language=javascript src=jquery.min.js/script script language=javascript $(function(){ $(p:first-child).addClass(myClass); }); /script 同样可以通过类似的方法选中每个div块中的奇数行，例如： $(p:nth-child(odd)).addClass(myClass); :nth-child(odd|even)中的奇偶顺序是根据各自的父元素单独排序的，因此上面的代码选中的是1.大礼堂、3.图书馆、4.紫荆公寓、6.清清地下。如果希望将页面中整个p元素表进行排序，则可以直接使用:even 或者:odd 另外，可以从第1 个div块中发，:nth-child(odd)与p:even 选择出的结果一致。这是因为:nth-child 相关的CSS 选择器是从1 开始计数的，而其他选择器是从0 开始计数的。 例如下面的代码匹配所有p列表中的第5 个。 $(p:eq(4)).addClass(myClass); jQuery 支持的CSS3 位置选择器 获取元素的个数 在jQuery 中可以通过size()方法获取选择器中元素的个数，它类似于数组中的length 属性，返回整数值，例如： $(img).size() 获得页面中所有图片img的数目。例 是一个稍微复杂一点的示例，用来添加并计算页面中的div块。 html1-transitional.dtd html head titlesize()方法/title style type=text/css !-- html{ cursor:help; font-size:12px; font-family:Arial, Helvetica, sans-serif; } div{ border:1px solid #003a75; background-color:#FFFF00; margin:5px; padding:20px; text-a