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

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

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

1.属性选择器

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

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

以下为HTML

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

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

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

显示样式：

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

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

2.包括选择器

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

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

例如

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

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

3.位置选择器

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

选择奇数行的li元素

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

例如以下

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

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

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>

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

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

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

5.实现反向过滤

上述过滤器中的:not(filter)的过滤器可以进行反向选择，其中filter参数可以是任意其它的过滤选择器，例以下面代码表示<input>标记中所有非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"> 生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠