这个视频我们去试一下 jQuery 里的基本的选择器。 … 这个文档的开始是一组 header 标签 … 上面有一个 header id … 还有一个 page-header 的类 …

它的里面是一个 h1 标签，还有一个 h5 标签 …

另外，页面上还有一组无序列表 … 列表里的项目是图像 …

下面我们可以直接在控制台上去测试一下 jQuery 的选择器 … 控制台会直接给我们返回选择的结果 …

先试一下按元素的标签名称来选择元素 …

$( ‘header' )

它可以找到页面上的 header 标签元素 … 因为这个标签上定义了 id ，我们也可以使用这个 id 来选择这个元素 …

$( ‘#header' )

输入一个 # 号 … 后面是 id 的名称 … 跟在 CSS 样式表里的写法是一样的 …

同样会返回这个元素 …

再试一下用类来选择 … $( ‘.page-header' )

类名的前面加上一个 .

返回的还是一样的元素 … 因为这个页面上只有一个元素上面有这个 page-header 类 .

想要选择这个元素里面包含的 h1 标签 … 可以这样 … .page-header 这个类下面的 h1 元素 …

$( '.page-header h1' )

找到的就是在这个类下面的 h1 元素 …

再试一下其它的其它的标签 　…

$( ‘img’ )

找到所有的 img 标签元素 … 选择了元素我们可以对它们做一些事情 … 比如可以看一下选择的结果的数量 …

可以去访问选择的结果这个 jQuery 对象的 length 属性 … $( 'img' ).length

显示页面上一共有 12 个 img 元素 … 这个 length 是数组对象的标准属性 … 我们也可以使用 jQuery 的 size() 方法，获取到对象里的项目数 …

下面，可以给它们添加一个统一的 css 类 … $( 'img' ).addClass( ‘img-circle' )

.img-circle 这个类里面的样式来自 bootstrap … 它会把图像变成圆形的 …