jQuery - 4.简单选择器

简单选择器#
案例 #
练习#
相对定位#

4.1 简单选择器

(1) :first 选取第一个元素。

(2) :last 选取最后一个元素。

(3) :not(选择器) 选取不满足“选择器”条件的元素

(4) :even、:odd，选取索引是奇数、偶数的元素：

(5) :eq(索引序号)等于、:gt(索引序号)大于、:lt(索引序号)小于

(6) $(":header")选取所有的h1……h6元素（*）

(7) $("div:animated")选取正在执行动画的<div>元素。（*）

案例

4.2 相对定位

简单选择器#

(1) :first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first");

(2) :last 选取最后一个元素。$("div:last")选取最后一个<div>

(3) :not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")

选取样式名不是myClass的<input>

这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title></title>
```

    <script src="Jqeury/jquery-1.10.2.js" type="text/javascript"></script>

```
    <script type="text/javascript">
```
```
        $(function () {
```

            //:first 选取第一个元素。

            $("input:first").css("background-color", "blue");

            //:last 选取最后一个元素。

            $("input:last").css("background-color", "gray");

            //:not(选择器) 选取不满足“选择器”条件的元素

            $("input:not(.myClass)").val("不是myClass");

```
        })
```
```
    </script>
```
```
</head>
```
```
<body>
```

    <input id="d1" type="text" />first<br />

```
    <input type="text" /><br />
```

    <input class="myClass" type="text" /><br />

    <input class="myClass" type="text" /><br />

```
    <input type="text" /><br />
```

    <input type="button" value="aaa" /><br />

    <input type="button" value="aaa" /><br />

```
    <input type="text" /><br />
```
```
    <input type="text" />last<br />
```
```
</body>
```
```
</html>
```

(4) :even、:odd，选取索引是奇数、偶数的元素：$("input:even")选取索引是奇数的<input>
(5) :eq(索引序号)等于、:gt(索引序号)大于、:lt(索引序号)小于选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input>
(6) $(":header")选取所有的h1……h6元素（*）
(7) $("div:animated")选取正在执行动画的<div>元素。（*）

案例 #

第一行是表头，所以显示大字体（fontSize=30），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示大的字体（28）表格的奇数行是黄色背景。
用Dom实现；用JQuery实现。对比差异！

这是一段程序代码。

```
<!DOCTYPE html>
```

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head>
```

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

```
    <title></title>
```

    <script src="Jqeury/jquery-1.10.2.js"></script>

```
    <script type="text/javascript">
```
```
        $(function () {
```
```
            //表头
```

            $("#salary tr:eq(0)").css({ "font-size": "30px", "text-align": "center" });

```
            //最后1行
```

            $("#salary tr:last").css("color", "red");

```
            //排除表头的前3行
```

            $("#salary tr:not(:first):lt(3)").css("font-size", "22px");

```
            //排除表头和汇总
```

            var str = "#salary tr:not(:first):not(:last)";

```
            //各行变色
```

            $(str + ":even").css("background-color", "yellow");

```
            var bgColor;
```
```
            //光棒效果
```

            $(str).mouseover(function () {

                bgColor = $(this).css("background-color");

                $(this).css("background-color", "blue");

```
            }).mouseout(function () {
```

                $(this).css("background-color", bgColor);

```
            })
```
```
            //鼠标变小手
```

            $(str).css("cursor", "pointer");

```
        })
```
```
    </script>
```
```
</head>
```
```
<body>
```

    <table id="salary" border="1px" width="300">

```
        <tbody>
```
```
            <tr>
```
```
                <td>姓名</td>
```
```
                <td>年龄</td>
```
```
                <td>工资</td>
```
```
            </tr>
```
```
            <tr>
```
```
                <td>江户川</td>
```
```
                <td>42</td>
```
```
                <td>30000</td>
```
```
            </tr>
```
```
            <tr>
```
```
                <td>刘备</td>
```
```
                <td>38</td>
```
```
                <td>25000</td>
```
```
            </tr>
```
```
            <tr>
```
```
                <td>关羽</td>
```
```
                <td>28</td>
```
```
                <td>15000</td>
```
```
            </tr>
```
```
            <tr>
```
```
                <td>张飞</td>
```
```
                <td>27</td>
```
```
                <td>8000</td>
```
```
            </tr>
```
```
            <tr>
```
```
                <td>诸葛亮</td>
```
```
                <td>38</td>
```
```
                <td>22000</td>
```
```
            </tr>
```
```
            <tr>
```
```
                <td>汇总</td>
```

                <td colspan="2">220000</td>

```
            </tr>
```
```
        </tbody>
```
```
    </table>
```
```
</body>
```
```
</html>
```

练习#

案例：表格隔行变色
案例：前三名粗体显示

相对定位#

不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素. $("ul", $(this)).css("background", "red");
案例：修改点击行的所有td的背景色

（看上面工资表格那块）

作者：【唐】三三

出处：https://www.cnblogs.com/tangge/p/3180830.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @ 2013-07-09 20:18 【唐】三三阅读(289) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

历史上的今天：
2011-07-09 C# 基础知识整理篇

公告

昵称：【唐】三三
园龄： 14年3个月
粉丝： 176
关注： 64

+加关注

2025年3月

日

一

二

三

四

五

六

【唐】三三

ConFused Road, ConFused People, All In [Tang]San.

jQuery - 4.简单选择器

简单选择器#

案例 #

练习#

相对定位#

公告

搜索

常用链接

最新随笔

我的标签

积分与排名

合集 (3)

随笔分类 (727)

随笔档案 (675)

相册 (11)

友情链接

阅读排行榜

评论排行榜

推荐排行榜

最新评论