jquery 属性选择器（匹配具有指定属性的元素）
jQuery选择器
在前面的章节中，我们展示了一些有关如何选取HTML元素的实例。
关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。
jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。
选择器允许您对HTML元素组或单个元素进行操作。
在HTMLDOM术语中：
选择器允许您对DOM元素组或单个DOM节点进行操作。
jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
$("p")选取<p>元素。
$("p.intro")选取所有class="intro"的<p>元素。
$("p#demo")选取所有id="demo"的<p>元素。
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href!='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
jQueryCSS选择器
jQueryCSS选择器可用于改变HTML元素的CSS属性。
下面的例子把所有p元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
更多的选择实例
语法
描述
$(this)
当前HTML元素
$("p")
所有<p>元素
$("p.intro")
所有class="intro"的<p>元素
$(".intro")
所有class="intro"的元素
$("#intro")
id="intro"的元素
$("ulli:first")
每个<ul>的第一个<li>元素
$("[href$='.jpg']")
所有带有以".jpg"结尾的属性值的href属性
$("div#intro.head")
id="intro"的<div>元素中的所有class="head"的元素
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>属性选择器</title>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<styletype="text/css">
.yang{border-collapse:collapse;width:500px;height:30px;border:1pxsolidred;"}
</style>
<scripttype="text/javascript"src="jquery-1.7.1.min.js"></script>
<scripttype="text/javascript">
/*
[attribute]:匹配具有指定属性的元素
[attribute=value]:匹配属性为指定值的元素
[attribute!=value]:匹配属性值不等于指定值的元素
[attribute^=value]:匹配属性值以指定值开始的元素
[attribute$=value]:匹配属性值以指定值结束的元素
[attribute*=value]:匹配属性值中包含指定值的元素
[selector1][selector2][selectorN]:同时指定多个匹配条件
*/
window.onload=function(){
$(‘#btnOk‘).click(function(){
//匹配具有color属性的font并把内容改为jquery
$(‘font[color]‘).html(‘jquery‘);
});
};
</script>
</head>
<body>
<font>字体1</font>
<hr/>
<fontcolor="#336699">字体2</font>
<hr/>
<fontcolor="#667788">字体3</font>
<hr/>
<fontcolor="#338899">字体4</font>
<hr/>
<fontcolor="#FFAA99">字体5</font>
<hr/>
<hr/>
<inputtype="button"id=‘btnOk‘value=‘确定‘/>
</body>
</html>
以上就是对jquery属性选择器的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！