jquery nth-child()选择器的简单应用

通过网上咨询使用这个选择器便很容易的解决。特此记录一下。
下面是主要的代码
js脚本:


代码如下:

<script type="text/javascript">
$(document).ready(
function () {
//每隔五行给li加一个样式
$('.article_li li:nth-child(5n)').addClass('liborder');
$('.article_li li:last').addClass('liborder');
}
);
</script>

html代码:


代码如下:

<ul class="article_li">
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点物业税:长沙暂不试点</a>
</li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
<li>
<label class="datename">
<span>2010-06-12 08:37:59 </span>
</label>
<a href="/a/xinwenzixun/caishuidongtai/20100612/2323.html">物业税:长沙暂不试点</a> </li>
</ul>

具体的用法这里就不写了,大家可以参考
http://www.jb51.net/css/28294.html 
http://www.jb51.net/article/23617.htm
效果图如下:

(0)

相关推荐

  • jQuery原理系列-css选择器的简单实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

  • jQuery中复合选择器简单用法示例

    本文实例讲述了jQuery中复合选择器简单用法.分享给大家供大家参考,具体如下: 一 介绍 复合选择器将多个选择器(可以是ID选择器.元素选择或是类名选择器)组合在一起,两个选择器之间以逗号","分隔,只要符合其中的任何一个筛选条件就会被匹配,返回的是一个集合形式的jQuery包装集,利用jQuery索引器可以取得集合中的jQuery对象. 多种匹配条件的选择器并不是匹配同时满足这几个选择器的匹配条件的元素,而是将每个选择器匹配的元素合并后一起返回. 复合选择器的使用方法如下: $(&

  • jQuery中元素选择器(element)简单用法示例

    本文实例讲述了jQuery中元素选择器(element)简单用法.分享给大家供大家参考,具体如下: 一.介绍 元素选择器是根据元素名称匹配相应的元素. 通俗的讲元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的. 可以把元素的标记名理解成学生的姓名,在一个学校中可能有多个姓名为"刘伟"的学生,但是姓名为"吴语"的学生也许只有一个,所以通过元素选择器匹配到的元素可能有多个,也可能是一个. 多数情况下,元素选择器匹配的是一组元素. 元素选择

  • jQuery.prototype.init选择器构造函数源码思路分析

    一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

  • jQuery使用cookie与json简单实现购物车功能

    本文实例讲述了jQuery使用cookie与json简单实现购物车的方法.分享给大家供大家参考,具体如下: 1.生成一个cookie 用来存储商品的id  String类型 2.添加商品id的时候 把cookie转化成数组,并检查是否已经包含了.没有包含用js push重新生成新的数组. 3.把数组转化成String 用cookie存储. 以下是jquery对cookie和JSON的操作方法 $.cookie("cart","ids",{expires:-7,pat

  • jQuery日期范围选择器附源码下载

    jQuery Date Range Picker是一款允许用户选择一个日期时间范围的jQuery日期选择器插件.整个日期选择器插件使用CSS来渲染样式,可以非常容易的使用CSS来定制皮肤.而且浏览器兼容性非常好,支持多种时间格式. 查看演示             下载源码 准备 使用该日期选择器插件需要 jQuery 1.3.2+和Moment 2.2.0+的支持. <link rel="stylesheet" href="css/daterangepicker.cs

  • Jquery中基本选择器用法实例详解

    本文实例讲述了Jquery中基本选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • Jquery删除css属性的简单方法

    有时我们不需要某个css属性时,想删除它,但有没有removeCss方法,怎么办呢? 可以使用如下方法解决 $('选择器').css('css属性',''); 即将css属性值赋值为空,页面中就不会显示该css属性了. 如:$('.div1').css('opacity',''); 以上这篇Jquery删除css属性的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • jQuery基本过滤选择器使用介绍

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.简单过滤选择器:根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头:简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.内容过滤选择器.可

  • 使用jQuery内容过滤选择器选择元素实例讲解

    复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.

随机推荐