珠江路在线
首页
互联网思维
硬件中心
软件中心
游戏中心
源码之家
今日新鲜事
传奇
软件开发培训班
>>
编程开发
>> JavaScript
软件新闻
编程开发
创意设计
操作系统
软件下载
jQuery Selectors(选择器)的使用(六、属性篇)
<!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> <script src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <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> <div class="div"> <div style="width:100%; text-align:center; font-size:16px; font-weight:bold;">jQuery-Selectors(选择器)的使用(六、属性篇)</div> 本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！ 本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章 。 本篇讲解：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法 。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com 由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！ 您可以到jQuery官网来学习更多的有关jQuery知识 。 <span style="color:Red;"><strong>版权所有：code-cat 博客:http://www.cnblogs.com/bynet 转载请保留出处和版权信息！</strong></span> </div> <div class="div"> <span class="xiaobiao">1. [attribute]用法</span> 定义：匹配包含给定属性的元素 返回值：Array<Element> 参数：attribute (String) : 属性名 实例：将ID为"div_a1"的DIV中有ID属性的span元素的背景色改为红色 <span style="border:blue 1px solid;">代码： $("#div_a1 span[id]").css("background-color","red");<span style="color:green;"> //点击按钮一将执行这句代码</span></span> <div id="div_a1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> DIV ID="div_a1" <span id="span_1" style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> span ID="span_1" </span> <span style="border:#333 1px solid; width:200px; float:left; margin-right:5px;padding-left:5px; "> span 无ID属性 </span> <span id="span_2" style="border:#333 1px solid; width:200px;margin-right:5px;padding-left:5px; "> span ID="span_2" </span> <div id="div_a5" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> DIV ID="div_a5" <input type="button" id="btn_1" value="按钮一" class="button" /> <script type="text/javascript"> $("#btn_1").click(function(){ $("#div_a1 span[id]").css("background-color","red"); }); </script> </div> </div> </div> <div class="div"> <span class="xiaobiao">2. [attribute=value]用法</span> 定义：匹配给定的属性是某个特定值的元素 返回值：Array<Element> 参数：attribute (String):属性名 value (String):属性值 。引号在大多数情况下是可选的 。但在遇到诸如属性值包含"]"时，用以避免冲突 。 实例：将ID为"div_b1"的DIV中name属性值为chk_attribute_test的input元素的背景色改为红色 <span style="border:blue 1px solid;">代码：$("#div_b1 input[name=chk_attribute_test]").css("background-color","red");<span style="color:green;"> //点击按钮二将执行这句代码</span></span> <div id="div_b1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 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" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> DIV ID="div_b5" <input type="button" id="btn_2" value="按钮二" class="button" /> <script type="text/javascript"> $("#btn_2").click(function(){ $("#div_b1 input[name=chk_attribute_test]").css("background-color","red"); }); </script> </div> </div> </div> <div class="div"> <span class="xiaobiao">3. [attribute!=value]用法</span> 定义：匹配给定的属性是不包含某个特定值的元素 返回值：Array<Element> 参数：attribute (String):属性名 value (String):属性值 。引号在大多数情况下是可选的 。但在遇到诸如属性值包含"]"时，用以避免冲突 。 实例：将ID为"div_c1"的DIV中name属性值不是chk_attribute_test的input元素的背景色改为红色 <span style="border:blue 1px solid;">代码：$("#div_c1 > input[name!=chk_attribute_test]").css("background-color","red");<span style="color:green;"> //点击按钮三将执行这句代码</span></span> <div id="div_c1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 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" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> DIV ID="div_c5" <input type="button" id="btn_3" value="按钮三" class="button" /> <script type="text/javascript"> $("#btn_3").click(function(){ $("#div_c1 > input[name!=chk_attribute_test]").css("background-color","red"); }); </script> </div> </div> <span style="color:Red;"><strong>注意：这里我用了>，如果将>换成 ，则按钮三的背景颜色也会变成红色</strong></span> </div> <div class="div"> <span class="xiaobiao">4. [attribute^=value]用法</span> 定义：匹配给定的属性是以某些值开始的元素 返回值：Array<Element> 参数：attribute (String):属性名 value (String):属性值 。引号在大多数情况下是可选的 。但在遇到诸如属性值包含"]"时，用以避免冲突 。 实例：将ID为"div_d1"的DIV中name属性值以txt开头的input元素的背景色改为红色 <span style="border:blue 1px solid;">代码：$("#div_d1 > input[name^=txt]").css("background-color","red");<span style="color:green;"> //点击按钮四将执行这句代码</span></span> <div id="div_d1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 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" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> DIV ID="div_d5" <input type="button" id="btn_4" value="按钮四" class="button" /> <script type="text/javascript"> $("#btn_4").click(function(){ $("#div_d1 > input[name^=txt]").css("background-color","red"); }); </script> </div> </div> </div> <div class="div"> <span class="xiaobiao">5. [attribute$=value]用法</span> 定义：匹配给定的属性是以某些值结尾的元素 返回值：Array<Element> 参数：attribute (String):属性名 value (String):属性值 。引号在大多数情况下是可选的 。但在遇到诸如属性值包含"]"时，用以避免冲突 。 实例：将ID为"div_e1"的DIV中name属性值以list结尾的input元素的背景色改为红色 <span style="border:blue 1px solid;">代码：$("#div_e1 > input[name$=list]").css("background-color","red");<span style="color:green;"> //点击按钮五将执行这句代码</span></span> <div id="div_e1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 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" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> DIV ID="div_e5" <input type="button" id="btn_5" value="按钮五" class="button" /> <script type="text/javascript"> $("#btn_5").click(function(){ $("#div_e1 > input[name$=list]").css("background-color","red"); }); </script> </div> </div> </div> <div class="div"> <span class="xiaobiao">6. [attribute*=value]用法</span> 定义：匹配给定的属性是以包含某些值的元素 返回值：Array<Element> 参数：attribute (String):属性名 value (String):属性值 。引号在大多数情况下是可选的 。但在遇到诸如属性值包含"]"时，用以避免冲突 。 实例：将ID为"div_f1"的DIV中name属性值包含_的input元素的背景色改为红色 <span style="border:blue 1px solid;">代码：$("#div_f1 > input[name*=_]").css("background-color","red");<span style="color:green;"> //点击按钮六将执行这句代码</span></span> <div id="div_f1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 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" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> DIV ID="div_f5" <input type="button" id="btn_6" value="按钮六" class="button" /> <script type="text/javascript"> $("#btn_6").click(function(){ $("#div_f1 > input[name*=_]").css("background-color","red"); }); </script> </div> </div> </div> <div class="div"> <span class="xiaobiao">7. [selector1][selector2][selectorN]用法</span> 定义：复合属性选择器，需要同时满足多个条件时使用 。 返回值：Array<Element> 参数：selector1 (Selector):属性选择器 selector2 (Selector):另一个属性选择器，用以进一步缩小范围 selectorN (Selector):任意多个属性选择器 实例：将ID为"div_g1"的DIV中有id属性且name属性值以rd开头和以test结尾的input元素的背景色改为红色 <span style="border:blue 1px solid;">代码：$("#div_g1 > input[id][name$=test][name^=rd]").css("background-color","red");<span style="color:green;"> //点击按钮七将执行这句代码</span></span> <div id="div_g1" style="border:red 1px solid; padding-bottom:5px; padding-left:5px; width:98%;"> 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" style="width:625px; border:#333 1px solid; background-color:#999; margin-top:5px; padding-left:5px;"> DIV ID="div_g5" <input type="button" id="btn_7" value="按钮七" class="button" /> <script type="text/javascript"> $("#btn_7").click(function(){ $("#div_g1 > input[id][name$=test][name^=rd]").css("background-color","red"); }); </script> </div> </div> </div> </body> </html>
技术文章快速查找
jquery获取div距离窗口和父级dv的距离示例
jQuery绑定事件不执行但alert后可以正常执行
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
3月份8个jQuery最佳插件推荐
js时间比较示例分享(日期比较)
javascript 定义初始化数组函数
浅说js变量
JavaScript Undefined，Null类型和NaN值区别
相关下载
在线教程导航
软件应用
·
Windows8
·
Windows7
·
Word
·
Excel
·
PPT
·
WPS
Web开发
·
ASP
·
JavaScript
·
DIV+CSS
·
JSP
·
VbScript
·
XML
·
PHP
开发语言
·
VB
·
VC
·
ASP.NET
·
Java
·
C++
·
Delphi
数据库开发
·
MySQL
·
MsSQL
·
Access
·
Oracle
·
DB2
手机系统
·
Android
·
iOS
·
WindowsPhone
网站设计
·
Flash
·
Dreamweaver
·
Fireworks
平面设计
·
Photoshop
·
CorelDraw
·
AutoCAD
·
3DsMAX
·
Illustrator
网络技术
·
网站运营
·
网络安全
·
网络搭建
工具：
成语大全
邮编区号
全国地图
南京二手车
免费电影
汉字换拼音
繁体字转换
二维码
| 站长工具：
收录/反向链接
ALEXA排名
关键词排名
WHOIS
教程：
PPT
Excel
Word
Dreamweaver
Photoshop
|
ASP
PHP
|
ASP.NET
Java
|
SQL
MySQL
热门论坛：
游戏
美食
传奇
冒险岛
魔域
天龙八部
DNF
征途
游戏：
传奇
天龙八部
魔域
奇迹
DNF公益服
传奇世界
神途
梦幻西游
天龙八部
魔域
DNF
冒险岛
奇迹
魔域
传奇
单职业
天龙
魔域
梦幻西游
DNF
天龙八部
关于我们
广告报价
|
版权声明
：本网站归南京网爵数码科技有限责任公司版权所有。
苏ICP备05016148号-1
公安备案号 32010202010177
