jQuery&Selectors(选择器)的使用(六、属性篇)
图老师小编精心整理的jQuery&Selectors(选择器)的使用(六、属性篇)希望大家喜欢，觉得好的亲们记得收藏起来哦！您的支持就是小编更新的动力~
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 本篇讲解：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。 您对本系列文章有任何建议或意见请发送到邮箱： 由于是第一次写技术性系列文章，难免会出错或代码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 titlejQuery-Selectors-5/title META content="text/ charset=gb2312" http-equiv=content-type script src="/files/jquery-1.3.2.min.js" type="text/javascript"/script style type="text/css" .div { width:95%; margin-left:15 margin-top:15 margin-right:15 padding-left:5 padding-top:5 padding-bottom:5 background-color:# border:#999 1 line-height:30 font-size:13 font-family:微软雅黑; } .blue{color:B} .green{color:G} .button{border:green 1width:100} .xiaobiao{ font-weight:} .red_test{background-color: color:W width:300 height:30} .li_test{border:#000 1} /style /head body div class="div" div style="width:100%; text-align: font-size:16 font-weight:"jQuery-Selectors(选择器)的使用(六、属性篇)/div 本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。本篇讲解：[attribute],[attribute=value],[attribute!=value],[attribute^=value],[attribute$=value],[attribute*=value],[selector1][selector2][selectorN]的用法。您对本系列文章有任何建议或意见请发送到邮箱： 由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！您可以到a href="/" target="_blank"jQuery官网/a来学习更多的有关jQuery知识。span style="color:R"strong版权所有：code-cat 博客:a href="/bynet/" target="_blank"/bynet/a 转载请保留出处和版权信息！/strong/span /div div class="div" span class="xiaobiao"1. [attribute]用法/span定义：匹配包含给定属性的元素返回值：ArrayElement参数：attribute (String) : 属性名实例：将ID为"div_a1"的DIV中有ID属性的span元素的背景色改为红色span style="border:blue 1"代码： $("#div_a1 span[id]").css("background-color","red");span style="color:" //点击按钮一将执行这句代码/span/span div id="div_a1" style="border:red 1 padding-bottom:5 padding-left:5 width:98%;" DIV ID="div_a1"span id="span_1" style="border:#333 1 width:200 float: margin-right:5padding-left:5 " span ID="span_1"/span span style="border:#333 1 width:200 float: margin-right:5padding-left:5 " span 无ID属性/span span id="span_2" style="border:#333 1 width:200margin-right:5padding-left:5 " span ID="span_2"/span div id="div_a5" style="width:625 border:#333 1 background-color:#999; margin-top:5 padding-left:5" 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定义：匹配给定的属性是某个特定值的元素返回值：ArrayElement参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。实例：将ID为"div_b1"的DIV中name属性值为chk_attribute_test的input元素的背景色改为红色span style="border:blue 1"代码：$("#div_b1 input[name=chk_attribute_test]").css("background-color","red");span style="color:" //点击按钮二将执行这句代码/span/span div id="div_b1" style="border:red 1 padding-bottom:5 padding-left:5 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:625 border:#333 1 background-color:#999; margin-top:5 padding-left:5" 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定义：匹配给定的属性是不包含某个特定值的元素返回值：ArrayElement参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。实例：将ID为"div_c1"的DIV中name属性值不是chk_attribute_test的input元素的背景色改为红色span style="border:blue 1"代码：$("#div_c1
input[name!=chk_attribute_test]").css("background-color","red");span style="color:" //点击按钮三将执行这句代码/span/span div id="div_c1" style="border:red 1 padding-bottom:5 padding-left:5 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:625 border:#333 1 background-color:#999; margin-top:5 padding-left:5" 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:R"strong注意：这里我用了''，如果将''换成' '，则按钮三的背景颜色也会变成红色/strong/span /div div class="div" span class="xiaobiao"4. [attribute^=value]用法/span定义：匹配给定的属性是以某些值开始的元素返回值：ArrayElement参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。实例：将ID为"div_d1"的DIV中name属性值以'txt'开头的input元素的背景色改为红色span style="border:blue 1"代码：$("#div_d1
input[name^=txt]").css("background-color","red");span style="color:" //点击按钮四将执行这句代码/span/span div id="div_d1" style="border:red 1 padding-bottom:5 padding-left:5 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:625 border:#333 1 background-color:#999; margin-top:5 padding-left:5" 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定义：匹配给定的属性是以某些值结尾的元素返回值：ArrayElement参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。实例：将ID为"div_e1"的DIV中name属性值以'list'结尾的input元素的背景色改为红色span style="border:blue 1"代码：$("#div_e1
input[name$=list]").css("background-color","red");span style="color:" //点击按钮五将执行这句代码/span/span div id="div_e1" style="border:red 1 padding-bottom:5 padding-left:5 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:625 border:#333 1 background-color:#999; margin-top:5 padding-left:5" 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定义：匹配给定的属性是以包含某些值的元素返回值：ArrayElement参数：attribute (String):属性名 value (String):属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。实例：将ID为"div_f1"的DIV中name属性值包含'_'的input元素的背景色改为红色span style="border:blue 1"代码：$("#div_f1
input[name*=_]").css("background-color","red");span style="color:" //点击按钮六将执行这句代码/span/span div id="div_f1" style="border:red 1 padding-bottom:5 padding-left:5 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:625 border:#333 1 background-color:#999; margin-top:5 padding-left:5" 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定义：复合属性选择器，需要同时满足多个条件时使用。返回值：ArrayElement参数：selector1 (Selector):属性选择器 selector2 (Selector):另一个属性选择器，用以进一步缩小范围 selectorN (Selector):任意多个属性选择器实例：将ID为"div_g1"的DIV中有id属性且name属性值以'rd'开头和以'test'结尾的input元素的背景色改为红色span style="border:blue 1"代码：$("#div_g1
input[id][name$=test][name^=rd]").css("background-color","red");span style="color:" //点击按钮七将执行这句代码/span/span div id="div_g1" style="border:red 1 padding-bottom:5 padding-left:5 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:625 border:#333 1 background-color:#999; margin-top:5 padding-left:5" 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 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
来源:/n/7204.html
HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的样式命名。 每个选择器都有属性在{}里面，比如简单点像color,font-weight或background-color。 值在冒号（不是等号）后面，分号分离属性。 body&{ &&&&font-size:&0.8 &&&&color:& } 上面的意思是为body...
在jQuery出世以来，它取得很大的成就和认同。JQuery是一个轻量级的JavaScript框架，它的发布版很小仅16K左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果，轻松的处理JavaScript的DOM数以及Ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jQuery插件使用。由于它这一大堆的优点，它已经被微软...
1.从$开始 对于熟悉prototype的朋友，$符号应该很熟悉, prototype: var element = $('eleId') jquery: var element = $('#eleId') DOM: var element = document.getElementById('eleId') 以上三种选择方式是等价的,相比prototype来说jquery多了个#号 例: $('#j1′).html() div id=“j1“Hello, jQuery!/content 2.通过xpath+css来...
代码如下: !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 meta http-equiv="Content-Type" content="text/ charset=utf-8" / script src="js/jquery-1.3.2.js"/script script type="text/javascript...
$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): ----凡是运用$,其返回值是一个object $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节...【图文】第6讲、Jquery属性选择器_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
第6讲、Jquery属性选择器
大小：1.67MB
登录百度文库，专享文档复制特权，财富值每天免费拿！
你可能喜欢jQuery选择器之属性过滤选择器详解
作者：*给我取个名*
字体：[ ] 类型：转载 时间：
这篇文章主要为大家详细介绍了jQuery选择器之属性过滤选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jQuery属性过滤选择器的具体代码，供大家参考，具体内容如下
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&title&Untitled Document&/title&
&link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" &
&style type="text/css"&
div, span, p {
width: 140
height: 140
background: #
border: #000 1
font-size: 17
font-family: V
div.mini {
height: 55
background-color: #
font-size: 12
div.hide {
&script type="text/javascript" src="jquery-1.7.2.js"&&/script&
&script type="text/javascript"&
$(function(){
$("#btn1").click(function(){
$("div[title]").css("background", "#ffbbaa");
$("#btn2").click(function(){
$("div[title='test']").css("background", "#ffbbaa");
$("#btn3").click(function(){
//选取的元素中包含没有 title 的 div 元素.
$("div[title!='test']").css("background", "#ffbbaa");
$("#btn4").click(function(){
$("div[title^='te']").css("background", "#ffbbaa");
$("#btn5").click(function(){
$("div[title$='est']").css("background", "#ffbbaa");
$("#btn6").click(function(){
$("div[title*='es']").css("background", "#ffbbaa");
$("#btn7").click(function(){
$("div[id][title*='es']").css("background", "#ffbbaa");
$("#btn8").click(function(){
$("div[title][title!='test']").css("background", "#ffbbaa");
&input type="button" value="选取含有 属性title 的div元素." id="btn1"/&
&input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/&
&input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/&
&input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/&
&input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/&
&input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/&
&input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7"/&
&input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/&
&div class="one" id="one"&
id 为 one,class 为 one 的div
&div class="mini"&class为mini&/div&
&div class="one" id="two" title="test"&
id为two,class为one,title为test的div
&div class="mini" title="other"&class为mini,title为other&/div&
&div class="mini" title="test"&class为mini,title为test&/div&
&div class="one"&
&div class="mini"&class为mini&/div&
&div class="mini"&class为mini&/div&
&div class="mini"&class为mini&/div&
&div class="mini"&&/div&
&div class="one"&
&div class="mini"&class为mini&/div&
&div class="mini"&class为mini&/div&
&div class="mini"&class为mini&/div&
&div class="mini" title="tesst"&class为mini,title为tesst&/div&
&div style="display:" class="none"&style的display为"none"的div&/div&
&div class="hide"&class为"hide"的div&/div&
包含input的type为"hidden"的div&input type="hidden" value="" size="8"&
&div id="mover"&正在执行动画的div元素.&/div&
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具