• 技术文章 >web前端 >js教程

    jquery中选择子元素的选择器即nth-child选择器

    黄舟黄舟2017-06-23 14:16:19原创1128
    jQuery 的nth-child 选择器用来选择其父标签的第n个child 标签。其索引是从1 开始的即n是从1开始,而非从0开始。

    例如:

    1 $(‘tr:nth-child(3)’) —选择tr父标签元素中的第三个tr孩子元素。

    2 $(‘tr:nth-child(3n)’)—选择tr父标签中的第3的倍数位置上的tr 孩子标签元素。

    3 $(‘tr:nth-child(even)’)—选择tr父标签中的所有偶数位置上的tr孩子元素。

    jquery 例子

    一个简单的例子用来阐述nth-child函数动态改变表格行的背景色。

    <html>  
        <head>  
            <title>jquery nth-child example</title>  
            <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>  
        </head>  
        <body>  
            <h1>jquery nth-child example</h1>  
            <table boder=1>  
                <tr><td>row 1</td></tr>  
                <tr><td>row 2</td></tr>  
                <tr><td>row 3</td></tr>  
                <tr><td>row 4</td></tr>  
                <tr><td>Row #5</td></tr>  
        <tr><td>Row #6</td></tr>  
        <tr><td>Row #7</td></tr>  
        <tr><td>Row #8</td></tr>  
        <tr><td>Row #9</td></tr>  
        <tr><td>Row #10</td></tr>  
            </table>  
            <br/>  
            <button>:nth-child(4)</button>  
                <button>:nth-child(3n)</button>  
                    <button>:nth-child(even)</button>
         <button>:nth-child(odd)</button>  
                    <script type="text/javascript">  
                        $("button").click(function(){  
                            var str=$(this).text();  
                            $("tr").css("background","white");  
                            $("tr"+str).css("background","coral");  
                              
                              
                            });  
                          
                          
                        </script>  
    </body>  
    lt;/html>

    效果:

    1585.png

    点击按钮1 :

    1586.png

    点击按钮2

    1587.png

    点击按钮3:

    1588.png

    点击按钮4:

    1589.png

    以上就是 jquery中选择子元素的选择器即nth-child选择器的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    上一篇:jquery :nth-child选择器所出现的问题解决 下一篇:jquery中nth-child(3n)的意思是什么?
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 什么是变更检测?聊聊angular的变更机制• 深入了解angular中的@Component装饰器• JavaScript面向对象详细解析之属性描述符• 什么是状态?深入学习angular中的动画• 浅析node中path路径模块的一些API
    1/1

    PHP中文网