从JavaScript 到 JQuery (2) JQuery选择器

来源：互联网发布：91邀请码淘宝店编辑：程序博客网时间：2024/06/05 22:33

$("# Control_ID"); //通过控件 id进行选择
            $("Contril_Name"); //通过控件 name进行选择
            $(".Contril_cssClass"); //通过控件 cssClass进行选择
            $("input[type='text']"); //通过属性来选择
            $("table tr");      //通过标记来选择

            这些都是常用的选择方式,此外JQuery 还支持XPath 和 Css 等方式进行选择

首先掌握这些常用方法就可以在实际应用中起到非常大的作用了

下面讲解一个简单的 table 隔行采用不同颜色显示的例子

        .find("tr:first").css("background-color","red").end()     // find 为这选择到元素基础上执行找到第一行
        .find("tr:gt(0):even").css("background-color","blue").end() // gt 为大于号 even为奇数
        .find("tr:gt(0):odd").css("background-color","yellow"); //odd 为偶数

通过 .end() 方法可以返回到对象顶层也就是 $("table") 的位置

.css 方法用于添加 style 属性

查找的方法还有 parent child next prep 等
}

);
</script>

html 代码如下

<body>
    <table>
        <tr>
            <td>
                title</td>
            <td>
                title</td>
        </tr>
        <tr>
            <td>
                details</td>
            <td>
                details</td>
        </tr>
        <tr>
            <td>
                details</td>
            <td>
                details</td>
        </tr>
        <tr>
            <td>
                details</td>
            <td>
                details</td>
        </tr>
        <tr>
            <td>
                details</td>
            <td>
                details</td>
        </tr>
        <tr>
            <td>
                details</td>
            <td>
                details</td>
        </tr>
        <tr>
            <td>
                details</td>
            <td>
                details</td>
        </tr>
        <tr>
            <td>
                details</td>
            <td>
                details</td>
        </tr>
        <tr>
            <td>
                details</td>
            <td>
                details</td>
        </tr>
        <tr>
            <td>
                details</td>
            <td>
                details</td>
        </tr>
    </table>
</body>