今天的学习
1、:contains(text)
$("p:contains(is)")所有包含 "is" 的 <p> 元素的将背景颜色换成#B2E0FF
2、:empty
$(":empty")选择每个空元素就是<td></td>里面没有任何的内容找到这些元素在把他们的背景颜色换成#B2E0FF
3、:visible
$("body :visible")找到 <body> 元素中每个可见的元素并将他们的背景颜色换成#B2E0FF
4、[attribute]
$("[id]")找到带有 id 属性的所有元素将他们的背景颜色换成#B2E0FF
5、[attribute=value]
$("[id=choose]")找到所有 id="choose" 的元素将他们的背景颜色换成#B2E0FF
6、[attribute!=value]
$("body [id!=main_header]")找到(<body> 标签中)不包含 id="main_header" 的元素将背景颜色换成#B2E0FF
7、[attribute$=value]
$("[id$=header]")找到所有带有 id 属性且属性值以 "header" 结尾的元素将背景颜色换成#B2E0FF
1、:contains(text)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p:contains(is)").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
$("p:contains(is)")所有包含 "is" 的 <p> 元素的将背景颜色换成#B2E0FF
2、:empty
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(":empty").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Web Page</h1>
<table>
<tr>
<th>Id</th>
<th>LastName</th>
<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>
<tr>
<td>1</td>
<td></td>
<td>John</td>
<td>Oxford Street</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td></td>
<td>New York</td>
</tr>
<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>
<tr>
<td>4</td>
<td>Obama</td>
<td></td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>
</table>
</body>
</html>
</body>
</html>
$(":empty")选择每个空元素就是<td></td>里面没有任何的内容找到这些元素在把他们的背景颜色换成#B2E0FF
3、:visible
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body :visible").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
$("body :visible")找到 <body> 元素中每个可见的元素并将他们的背景颜色换成#B2E0FF
4、[attribute]
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[id]").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1 id="main_header">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<h3 id="sub_header">My uncle is Scrooge</h3>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
$("[id]")找到带有 id 属性的所有元素将他们的背景颜色换成#B2E0FF
5、[attribute=value]
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[id=choose]").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1 id="main_header">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<h3 id="sub_header">My uncle is Scrooge</h3>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
$("[id=choose]")找到所有 id="choose" 的元素将他们的背景颜色换成#B2E0FF
6、[attribute!=value]
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body [id!=main_header]").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1 id="main_header">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<h3 id="sub_header">My uncle is Scrooge</h3>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
$("body [id!=main_header]")找到(<body> 标签中)不包含 id="main_header" 的元素将背景颜色换成#B2E0FF
7、[attribute$=value]
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("[id$=header]").css("background-color","#B2E0FF");
});
</script>
</head>
<body>
<html>
<body>
<h1 id="main_header">Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<h3 id="sub_header">My uncle is Scrooge</h3>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
</body>
</html>
</body>
</html>
$("[id$=header]")找到所有带有 id 属性且属性值以 "header" 结尾的元素将背景颜色换成#B2E0FF