程序员人生网站导航

jQuery学习笔记（一）使用jQuery选择器（荐）

栏目：htmlcss时间：2015-01-24 08:40:53

jQuery预先的javascript的编程，提供了计划所有css3下的标准选择器，开发者可以利用这些选择器轻松选择各种元素，供javascript使用。

重要的是jQuery对这些选择器的兼容性特别好，主流的阅读器都测试通过，这使得理论上的css3选择器1下编程了事实。开发者可以依照之前的方法定义各种css种别，然后通过addClass()方法或className属性将其添加到指定的元素集合中。

1.属性选择器

（属性可以参考jQuery文档或http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp）

属性选择器的语法是在标记的后面用中括号"[" 和"]"添加相干属性，然后在赋予不同的逻辑关系。

以下为HTML

        <li>第1个</li>
        <li><a href="1⑴.html">第2个</a></li>
        <li><a href="1⑵.html" title="第3个">第3个</a></li>
        <li><a href="1⑶.html">第4个</a></li>
        <li><a href="1⑷.html" title="制作">第5个</a></li>

如果希望选择设置了title属性的标记，则使用以下语法

$("a[title]")

给设置了title属性的两个超链接添加css样式

<style>
            .altcss {
                /* 设定某个CSS种别 */
                
                background-color: #005890;
                color: #4eff00;
            }
        </style>
<script type="text/javascript">
            $(function() {
                $("a[title]").addClass("altcss")
            });
        </script>

显示样式：

属性选择器还有很多种，大家可以参考各版本的jQuery的手册灵活使用，经常使用的有以下几类。

[attribute]
[attribute=value] //匹配给定的属性是某个特定值的元素
[attribute!=value] //匹配所有不含有指定的属性，或属性不等于特定值的元素。
[attribute^=value] //匹配给定的属性是以某些值开始的元素
[attribute$=value] //匹配给定的属性是以某些值结尾的元素
[attribute*=value] //匹配给定的属性是以包括某些值的元素

例如匹配超链接以pdf结尾的元素，可使用

    $(function() {
        $("li a[href$='pdf']")
    });

2.包括选择器

jQuery还提供了包括选择器用来选择包括了某种特殊标记的元素，比如以下代码：

$("li:has(a)")

表示给包括了超链接的li元素

例如

$("div:has(p)").addClass("test");

表示给所有包括 p 元素的 div 元素添加1个 test 类

最后整理了jQuery支持的css3属性选择器，贡献查询。

选择器	说明
*	所有的标记
E	所着名称为E的标记
EF	所着名称为F的标记，并且是E标记的子标记（包括孙，重孙标记）
E>F	所着名称为F的标记，并且是E标记的子标记（不包括孙标记）
E+F	所着名称为F的标记，并且该标记紧接着前面的E标记
E~F	所着名称为F的标记，并且该标记前面有1个E标记
E:has(F)	所着名称为E的标记，并且该标记包括F标记
E.C	所着名称为E的标记，属性分类为C，如果去掉E，就是属性选择器.C
E#I	所着名称为E的标记，id为I，如果去掉E，就是ＩＤ选择器I
E[A]	所着名称为E的标记，并且设置了属性A
E[A=V]	所着名称为E的标记，并且属性A的值等于V
E[A^=V]	所着名称为E的标记，并且属性A的值以V开头
E[A$=V]	所着名称为E的标记，并且属性A的值以V结尾
E[A *=V]	所着名称为E的标记，并且属性A的值包括V

	纯属手打，如有毛病，请指正

3.位置选择器

css3还允许通过标记所处的位置来进行选择，例如选择第1个li元素

$("li:first-child")

选择奇数行的li元素

$("li:nth-child(odd)")

需要注意的是:nth-child(odd)的选择器和li:odd选择出的结果是1样的，这是由于：nth-child的相干css 选择器是从1开始计数的，而其他的选择器是从0开始计数的。

例如以下

$("p:eq(4)").addClass()

匹配添加className的元素有5个。

以下整理了jQuery支持的css3位置选择器

选择器	说明
:first	第1个元素
:last	最后1个元素
:first-child	第1个子元素
:last-child	最后1个子元素
:only-child	所有无兄弟的元素，例如：p:only-child选中所有的p元素，如果该p元素是父元素的唯1子元素
:nth-child(n)	第n个子元素（从1开始计数）
:nth-child(odd/even)	所有奇数号或偶数号子元素（从1开始计数）
:nth-child(nX+Y)	利用公式来计算元素的位置，例如li:nth-child(5n+1)，表示选中所有的li元素，并且这些li元素为父元素的的5n+1个元素（1,6,11,16...）
:odd或:even	奇数或偶数号元素
:eq(n)	第n个元素（从0开始计数）
:gt(n)	第n个以后的所有元素（n从0开始计数，并且计算不包括第n本身）
:lt(n)	第n个之前的所有元素（n从0开始计数，并且计算不包括第n本身）

	纯属手打，如有毛病，请指正

4.过滤选择器

除css3中的1些选择器外，jQuery还提供了很多自定义的过滤选择器，用来处理更复杂的选择。例如很多时候希望知道用户所选中的复选框，如果通过属性值来判断，那末只能取得初始状态下选中的情况，而不是真实的选择情况。利用jQuery的:checked选择器则可以轻松取得用户的选择。

实例代码以下

<script src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
        <script type="text/javascript">
        function showChecked(oCheckBox){
            //使用checked过滤出被用户选中的添加altcss
            $("input[name="+oCheckBox+"]:checked").addClass("altcss");
        }
        </script>
        <style>
            .altcss {
                /* 设定某个CSS种别 */
                }
        </style>
<form name="myform">
            <p>
                <label for="football">足球
                    <input type="checkbox" name="like" id="football" />
                </label>
            </p>
            <p>
                <label for="basketball">篮球
                    <input type="checkbox" name="like" id="basketball" />
                </label>
            </p>
            <p>
                <label for="volleyball">排球
                    <input type="checkbox" name="like" id="volleyball" />
                </label>
            </p>
            <p>
                <input type="button" value="显示选择" onclick="showChecked('like')">
            </p>
        </form>

另外，过滤器之间可以迭代使用。

:checkbox:checked:enabled

表示input type="checkbox"中所有被用户选中而且没有被禁用的。

以下整理了jQuery中经常使用的选择过滤器

选择器	说明
:animated	所有处于动画中的元素
:button	所有按钮，包括input[type=button]、[type=submit]、[type=reset]和<button>标记
:checkbox	所有复选框，同等于input[type=checkbox]标记
:contains(foo)	选择了包括文本"foo"的元素
:disabled	页面中被禁用了的元素
:enabled	页面中没有被禁用的元素
:file	上传文件元素
:header	选中所有的标题元素，如<h1><h6>
:hidden	页面中被隐藏了的元素
:image	图片提交按钮，同等于input[type=image]
:input	表单元素，包括<input>,<select>,<textarea>,<button>
:not(filter)	反向选择
:parent	选择所有子元素（包括文本）的元素，空元素将被排除
:password	密码文本框,同等于input[type=password]
:radio	单选按钮,同等于input[type=radio]
:reset	重置按钮，同等于input[type=reset]
:selected	下拉菜单被选中的项
:submit	提交按钮，包括input[type=submit]和button[type=submit]
:text	文本输入框，同等于input[type=text]
:visble	页面中的所有可见元素
	纯属手打，如有毛病，请指正

5.实现反向过滤

上述过滤器中的:not(filter)的过滤器可以进行反向选择，其中filter参数可以是任意其它的过滤选择器，例以下面代码表示<input>标记中所有非radio元素

input:not(:radio)

另外过滤选择器还可以迭代使用。

以下的例子就是使用jQuery的反向过滤功能。

<script src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                //迭代使用选择器
                $(":input:not(:checkbox):not(:radio)").addClass("altcss");
            });
        </script>
        <style>
            .altcss {
                background-color: #ffbff4;
                text-decoration: underline;
                border: 1px solid #0000FF;
                font-family: Arial, Helvetica, sans-serif;
                font-size: 12px;
            }
        </style>
        <form method="post" name="myForm1" action="addInfo.aspx">
            <p>
                <label for="name">姓名:</label>
                <input type="text" name="name" id="name">
            </p>
            <p>
                <label for="passwd">密码:</label>
                <input type="password" name="passwd" id="passwd">
            </p>
            <p>
                <label for="color">最喜欢的色彩:</label>
                <select name="color" id="color"> 
    

            ------分隔线----------------------------
上一篇 JavaScript 中的"类"与"实例" 
下一篇 Managed Metadata Service Application(四)Enterprise metadata and keywords  

            ------分隔线----------------------------