第03章常规选择器（4）-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_17658/article/details/82636889

本文通过一个简单的HTML页面展示了如何使用jQuery的选择器来选取带有特定属性的元素，并对其样式进行修改。示例中包含了基本的HTML结构及内联的jQuery脚本，用于演示如何匹配具有特定属性值的a标签。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

index.html

<!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/html; charset=utf-8" />
<title>常规选择器</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<!--
<div id="box">
	<p>高级选择器</p>
</div>
<p>高级选择器</p>
-->

<a title="num">num1</a>
<a>num2</a>
<a>num3</a>
<a title="no4">num4</a>
<a title="num">num5</a>
<a bbb="zzz" title="num">num1</a>

</body>
</html>

demo.js

$(function(){
	//$('#box p').css('color','red');
	//$('p','#box').css('color','red');
	//$('p',$('#box')).css('color','red');
	//$('a[title]').css('color','red');
	//$('a[title=num1]').css('color','red');
	//$('a[title^=num]').css('color','red');
	//$('a[title$=num]').css('color','red');
	//$('a[title|=num]').css('color','red');
	//$('a[title!=num1]').css('color','red');
	//$('a[title~=aaa]').css('color','red');
	//$('a[title*=num]').css('color','red');
	$('a[bbb][title=num]').css('color','red');
});