jQuery Selectors(选择器)的使用(六、属性篇)

站长资源 2026/9/5 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
本篇讲解：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！

运行后，请刷新下代码，以便加载jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jQuery-Selectors-5</title> <META content="text/html; charset=gb2312" http-equiv=content-type>  <style type="text/css"> .div {     width:95%;     margin-left:15px;     margin-top:15px;     margin-right:15px;     padding-left:5px;     padding-top:5px;     padding-bottom:5px;     background-color:#ccc;     border:#999 1px solid;     line-height:30px;     font-size:13px;     font-family:微软雅黑; } .blue{color:Blue;} .green{color:Green;} .button{border:green 1px solid;width:100px;} .xiaobiao{ font-weight:bold;} .red_test{background-color:red; color:White; width:300px; height:30px;} .li_test{border:#000 1px solid;} </style> </head> <body>  jQuery-Selectors(选择器)的使用(六、属性篇) 本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！ 本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com  由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！ 您可以到jQuery官网来学习更多的有关jQuery知识。 <strong>版权所有：code-cat 博客:http://www.cnblogs.com/bynet 转载请保留出处和版权信息！</strong>   1. [attribute]用法 定义：匹配包含给定属性的元素 返回值：Array&lt;Element> 参数：attribute (String) : 属性名 实例：将ID为"div_a1"的DIV中有ID属性的span元素的背景色改为红色 代码： $("#div_a1 span[id]").css("background-color","red"); //点击按钮一将执行这句代码  DIV ID="div_a1"  span ID="span_1"   span 无ID属性   span ID="span_2"   DIV ID="div_a5" <input type="button" id="btn_1" value="按钮一" class="button" />      2. [attribute=value]用法 定义：匹配给定的属性是某个特定值的元素 返回值：Array&lt;Element> 参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 实例：将ID为"div_b1"的DIV中name属性值为chk_attribute_test的input元素的背景色改为红色 代码：$("#div_b1 input[name=chk_attribute_test]").css("background-color","red"); //点击按钮二将执行这句代码  DIV ID="div_b1" <input type="text" name="txt_name" value="name='txt_name'" /> <input type="radio" name="rd" value="0" />radio name='rd' <input type="radio" name="rd" value="1" />radio name='rd' <input type="checkbox" name="chk_attribute_test" value="0" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="1" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="2" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="3" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="4" />checkbox name='chk_attribute_test'  DIV ID="div_b5" <input type="button" id="btn_2" value="按钮二" class="button" />      3. [attribute!=value]用法 定义：匹配给定的属性是不包含某个特定值的元素 返回值：Array&lt;Element> 参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 实例：将ID为"div_c1"的DIV中name属性值不是chk_attribute_test的input元素的背景色改为红色 代码：$("#div_c1 > input[name!=chk_attribute_test]").css("background-color","red"); //点击按钮三将执行这句代码  DIV ID="div_c1" <input type="text" name="txt_name" value="name='txt_name'" /> <input type="radio" name="rd" value="0" />radio name='rd' <input type="radio" name="rd" value="1" />radio name='rd' <input type="checkbox" name="chk_attribute_test" value="0" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="1" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="2" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="3" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="4" />checkbox name='chk_attribute_test'  DIV ID="div_c5" <input type="button" id="btn_3" value="按钮三" class="button" />    <strong>注意：这里我用了'>'，如果将'>'换成' '，则按钮三的背景颜色也会变成红色</strong>   4. [attribute^=value]用法 定义：匹配给定的属性是以某些值开始的元素 返回值：Array&lt;Element> 参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 实例：将ID为"div_d1"的DIV中name属性值以'txt'开头的input元素的背景色改为红色 代码：$("#div_d1 > input[name^=txt]").css("background-color","red"); //点击按钮四将执行这句代码  DIV ID="div_d1" <input type="text" name="txt_name" value="name='txt_name'" /> <input type="radio" name="rd" value="0" />radio name='rd' <input type="radio" name="rd" value="1" />radio name='rd' <input type="checkbox" name="chk_attribute_test" value="0" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="1" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="2" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="3" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="4" />checkbox name='chk_attribute_test' <input type="password" name="txt_pass" value="123123" />  DIV ID="div_d5" <input type="button" id="btn_4" value="按钮四" class="button" />      5. [attribute$=value]用法 定义：匹配给定的属性是以某些值结尾的元素 返回值：Array&lt;Element> 参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 实例：将ID为"div_e1"的DIV中name属性值以'list'结尾的input元素的背景色改为红色 代码：$("#div_e1 > input[name$=list]").css("background-color","red"); //点击按钮五将执行这句代码  DIV ID="div_e1" <input type="checkbox" name="chk_attribute_list" value="0" />checkbox name='chk_attribute_list' <input type="text" name="txt_name" value="name='txt_name'" /> <input type="radio" name="rd" value="0" />radio name='rd' <input type="radio" name="rd" value="1" />radio name='rd' <input type="checkbox" name="chk_attribute_list" value="1" />checkbox name='chk_attribute_list' <input type="checkbox" name="chk_attribute_list" value="2" />checkbox name='chk_attribute_list' <input type="checkbox" name="chk_attribute_list" value="4" />checkbox name='chk_attribute_list' <input type="password" name="txt_pass" value="123123" /> <input type="checkbox" name="chk_attribute_list" value="3" />checkbox name='chk_attribute_list'  DIV ID="div_e5" <input type="button" id="btn_5" value="按钮五" class="button" />      6. [attribute*=value]用法 定义：匹配给定的属性是以包含某些值的元素 返回值：Array&lt;Element> 参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。 实例：将ID为"div_f1"的DIV中name属性值包含'_'的input元素的背景色改为红色 代码：$("#div_f1 > input[name*=_]").css("background-color","red"); //点击按钮六将执行这句代码  DIV ID="div_f1" <input type="text" name="txt_name" value="name='txt_name'" /> <input type="radio" name="rd" value="0" />radio name='rd' <input type="radio" name="rd" value="1" />radio name='rd' <input type="checkbox" name="chk_attribute_test" value="0" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="1" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="2" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="3" />checkbox name='chk_attribute_test' <input type="checkbox" name="chk_attribute_test" value="4" />checkbox name='chk_attribute_test' <input type="password" name="txt_pass" value="123123" />  DIV ID="div_f5" <input type="button" id="btn_6" value="按钮六" class="button" />      7. [selector1][selector2][selectorN]用法 定义：复合属性选择器，需要同时满足多个条件时使用。 返回值：Array&lt;Element> 参数：selector1 (Selector):属性选择器 selector2 (Selector):另一个属性选择器，用以进一步缩小范围 selectorN (Selector):任意多个属性选择器 实例：将ID为"div_g1"的DIV中有id属性且name属性值以'rd'开头和以'test'结尾的input元素的背景色改为红色 代码：$("#div_g1 > input[id][name$=test][name^=rd]").css("background-color","red"); //点击按钮七将执行这句代码  DIV ID="div_g1" <input type="text" name="txt_name" value="name='txt_name'" /> <input type="radio" id="rd_0" name="rd_test" value="0" />radio id='rd_0' name='rd_test' <input type="radio" id="rd_1" name="rd_test" value="1" />radio id='rd_1' name='rd_test' <input type="checkbox" id="chk_0" name="chk_attribute_test" value="0" />checkbox id='chk_0' name='chk_attribute_test' <input type="checkbox" id="chk_1" name="chk_attribute_test" value="1" />checkbox id='chk_1' name='chk_attribute_test' <input type="checkbox" id="chk_2" name="chk_attribute_test" value="2" />checkbox id='chk_2' name='chk_attribute_test' <input type="checkbox" id="chk_3" name="chk_attribute_test" value="3" />checkbox id='chk_3' name='chk_attribute_test' <input type="checkbox" id="chk_4" name="chk_attribute_test" value="4" />checkbox id='chk_4' name='chk_attribute_test' <input type="password" id="chk_5" name="txt_pass" value="123123" />  DIV ID="div_g5" <input type="button" id="btn_7" value="按钮七" class="button" />     </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

jQuery,Selectors,属性篇

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

评论“jQuery Selectors(选择器)的使用(六、属性篇)”

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

jQuery Selectors(选择器)的使用(六、属性篇)

IE浏览器打印的页眉页脚设置解决方法

JQuery 表单中textarea字数限制实现代码

评论“jQuery Selectors(选择器)的使用(六、属性篇)”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

jQuery Selectors(选择器)的使用(六、属性篇)

IE浏览器打印的页眉页脚设置解决方法

JQuery 表单中textarea字数限制实现代码

评论“jQuery Selectors(选择器)的使用(六、属性篇)”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存