这个视频我们去试一下 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 … 它会把图像变成圆形的 …