JQuery选择器

浏览数：52 / 时间：2015年06月09日

JQuery选择器顾名思义就是通过选择器选中相应的DOM元素执行需要的操作，JQuery选择器的强大之处还在于它支持连缀，也就是说一条语句可以连续使用多个选择器执行多次操作，这样保证了代码的简洁性，更提高了代码的使用效率。

1. 使用ID选中DOM元素

代码1

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#div1").addClass("class1");  // 使用ID选中DOM元素
        });
    </script>
    <style type="text/css">
        .class1
        {
            color:red;
        }
    </style>
</head>
<body>
    <div id="div1">Welcome to JQuery!</div>
</body>
</html>

2. 使用类选择多个DOM元素

代码2

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".div_changecolor").addClass("class1"); // 使用类选择多个DOM元素
        });
    </script>
    <style type="text/css">
        .class1
        {
            color:red;
        }
    </style>
</head>
<body>
    <div id="div1" class="div_changecolor">Welcome to JQuery!</div>
    <div id="div2" class="div_changecolor">Welcome to JQuery!</div>
    <div id="div3" >Welcome to JQuery!</div>
</body>
</html>

显示结果如下图，只有含有class的div才会显示红色

3. 根据DOM元素类型选择元素

只需修改代码2中的部分代码为下面的代码即可

$("div").addClass("class1");

显示结果如下图，全部div元素的内容都显示红色

4. 根据层级选择元素

在div元素中包含有超链接a元素，默认的超链接元素是有下划线的，如下图

现在希望通过选择器定位到a元素然后将其下划线显示去掉

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#div3 a").addClass("class2");  // 选择的是DOM元素ID为div3下面的所有a标签
        });
    </script>
    <style type="text/css">
        .class1
        {
            color:red;
        }

        .class2
        {
            text-decoration:none;
        }
    </style>
</head>
<body>
    <div id="div1" class="div_changecolor">Welcome to JQuery!</div>
    <div id="div2" class="div_changecolor">Welcome to JQuery!</div>
    <div id="div3" ><a href="#">Welcome to JQuery!</a></div>
</body>
</html>

经过这样处理后显示结果如下：

5. 根据位置选择DOM元素

经常会看到一些报表显示记录的时候奇偶行的底色是相间的，这样看起来让人很舒服，通过选择器就可以做到

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $("tr:odd").css("background-color","#bbffff");
            $("td").addClass("class1");
        });
    </script>
    <style type="text/css">
        .class1
        {
            width:100px;text-align:center
        }
    </style>
 </head>
<body>
    <table border="1">
        <tr><td>大众</td><td>德国</td></tr>
        <tr><td>别克</td><td>美国</td></tr>
        <tr><td>红旗</td><td>中国</td></tr>
        <tr><td>现代</td><td>韩国</td></tr>
    </table>
</body>
</html>

显示效果：