jQuery 实战读书笔记之第二章：选择元素
基本选择器
html 代码如下，后面的 js 使用的 html 基本大同小异。
doctype html>
<html>
<head>
<title>基本选择器title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="../css/main.css"/>
<style>
.found-element
{
border: 2px solid #000000;
background-color: #DDDDDD;
}
.red-border
{
border: 2px solid #E80C0C;
}
.opaque
{
opacity: 0.5;
}
style>
head>
<body>
<div id="sample-dom">
<span>Some images:span>
<div>
<img src="../images/image.1.jpg" id="hibiscus" alt="Hibiscus"/>
<img src="../images/image.2.jpg" id="little-bear" title="A dog named Little Bear"/>
<img src="../images/image.3.jpg" id="verbena" alt="Verbena"/>
<img src="../images/image.4.jpg" id="cozmo" title="A puppy named Cozmo"/>
<img src="../images/image.5.jpg" id="tiger-lily" alt="Tiger Lily"/>
<img src="../images/image.6.jpg" id="coffee-pot"/>
div>
<div id="some-div">This is a <div> with an id of <code>some-divcode>div>
<h2>Hello, I'm a <h2> elementh2>
<p>
I'm a paragraph, nice to meet you.
p>
<ul class="my-list">
<li>
<a href="http://jquery.com">jQuery websitea>
<ul>
<li><a href="#css1">CSS1a>li>
<li><a href="#css2">CSS2a>li>
<li><a href="#css3">CSS3a>li>
<li>Basic XPathli>
ul>
li>
<li>
jQuery also supports
<ul>
<li>Custom selectorsli>
<li>Form selectorsli>
ul>
li>
ul>
<table id="languages">
<thead>
<tr>
<th>Languageth>
<th>Typeth>
<th>Inventedth>
tr>
thead>
<tbody>
<tr>
<td>Javatd>
<td>Statictd>
<td>1995td>
tr>
<tr>
<td>Rubytd>
<td>Dynamictd>
<td>1993td>
tr>
<tr>
<td>Smalltalktd>
<td>Dynamictd>
<td>1972td>
tr>
<tr>
<td>C++td>
<td>Statictd>
<td>1983td>
tr>
tbody>
table>
<form id="form-fake" action="#">
<div>
<label for="text-field">Text:label>
<input type="text" id="text-field" name="text-field"/>
div>
<div>
<span>Radio group:span>
<label><input type="radio" name="radio-group" id="radio-a" value="A"/> Alabel>
<label><input type="radio" name="radio-group" id="radio-b" value="B" checked="checked"/> Blabel>
<label><input type="radio" name="radio-group" id="radio-c" value="C"/> Clabel>
div>
<div>
<span>Checkboxes:span>
<label><input type="checkbox" name="checkboxes" id="checkbox-1" value="1"/> 1label>
<label><input type="checkbox" name="checkboxes" id="checkbox-2" value="2"/> 2label>
<label><input type="checkbox" name="checkboxes" id="checkbox-3" value="3" checked="checked"/> 3label>
<label><input type="checkbox" name="checkboxes" id="checkbox-4" value="4"/> 4label>
div>
<input type="submit" id="button-submit" value="Submit" />
form>
div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">script>
<script>
window.jQuery || document.write('