jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)_jquery

对此,我把CSS3标准中nth-child()用法大致介绍下:

CSS3伪类选择器:nth-child()

简单的归纳下nth-child()的几种用法。

第一:nth-child(number) 直接匹配第number个元素。参数number必须为大于0的整数。

(EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二:nth-child(an) 匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
(EG) li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
第三:nth-child(an+b) 与 :nth-child(an-b) 先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)
(EG)li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/
第四:nth-child(-an+b) 此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个。
(EG) li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/

第五:nth-child(odd) 与 :nth-child(even) 分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

jQuery中用此方法可以实现条纹效果:

$("table tr:nth-child(even)").addClass("striped");

even 可以换成别的参数,上面介绍的五种情况都可以。

后面的addClass("striped") striped 是个CSS class名称。

学习jquery顺便学习了 CSS中的一些选择器。
希望能坚持下来。

时间: 2024-08-01 09:14:35

jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)_jquery的相关文章

基于jQuery的select下拉框选择触发事件实例分析_jquery

本文实例讲述了基于jQuery的select下拉框选择触发事件实现方法.分享给大家供大家参考,具体如下: 我一直以来都认为,select 下拉框选择对选项 options 使用 onclick 注册事件即可,如下: <select> <option value="0" onclick="func(0)">选项一</option> <option value="1" onclick="func(1

Jquery 插件学习实例1 插件制作说明与tableUI优化_jquery

一. 先对jQuery制作方式,jQuery为开发扩展提拱了两个方法,分别是: jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. 1.1.jQuery.fn.extend(object): 可以参靠jquery参考手册的连个例子: 复制代码 代码如下: $.fn.extend({ check: function() { return this.each(function()

jquery submit ie6下失效的原因分析及解决方法_jquery

ie6中, $('a.btn').click(function(){ form.submit(); }) 点击失效: 分析: 微软低版本浏览器会先执行link标签的自身事件也就是href事件,这样就中断了form的submit事件,"return false;"的意思是中断link标签的的自身事件执行. 解决办法:换思路,用jquery直接处理图片.文字等的click $('a.btn').click(function(){       $('form').get(0).submit(

Jquery Ajax学习实例7 Ajax所有过程事件分析示例_jquery

一.Ajax所有过程事件分析    JQuery在执行Ajax的过程中会触发很多事件.   这些事件可以分为两种事件,一种是局部事件(Local),一种是全局事件(Global).   局部事件:可以通过$.ajax来调用,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false.   全局事件:跟click等事件类似,可以绑定到到每一个DOM元素上.   这些事件的按照事件的触发顺序如下介绍:   局部事件(Local) 全局事件(Global) ajaxStart 全局事

jQuery EasyUI学习教程之datagrid点击列表头排序_jquery

这个示例展示如何排序datagrid通过点击列表头. 在datagrid的所有columns 可以通过点击列表头排序,你可以定义哪行可以排序,默认的列是不能排序的除非你设置sortable 属性为true 创建an DataGrid <table id="tt" class="easyui-datagrid" style="width:600px;height:250px" url="datagrid8_getdata.php&q

jQuery中的.bind()、.live()和.delegate()之间区别分析_jquery

DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素

jquery css选择器学习笔记

1. $('node+next') == $('node').next() 2. $('node~siblings') == $('node').nextAll(); 3. :gt(index)大于index序号的的元素,从0开始 4. :lt(index)小于index序号的元素,从0开始 4. :header 获取所有h1,h2,h3,h4...的元素 例子 比如你要获取id为123的div的z-index的值 $("#123").css("z-index")

jQuery插件实现可输入和自动匹配的下拉框_jquery

实现可输入+带自动匹配功能的下拉框,我试过以下几种方法: 1.直接使用h5的新标签<datalist>,对应demo如下: <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option val

jquery 属性选择器(匹配具有指定属性的元素)_jquery

jQuery 选择器 在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例. 关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素. jQuery 元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择. 选择器允许您对 HTML 元素组或单个元素进行操作. 在 HTML DOM 术语中: 选择器允许您对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("