测试用html:##
<body>
<span class='article'>
<h2>测试标题一</h2>
<p id='p1'>段落一,测试段落,仅供测试之用!!!<a href='#'>linkage</a></p>
<a href='#'>read more!</a>
</span>
<div class='article'>
<h2>测试标题二</h2>
<p id='p2'>段落二,测试段落,仅供测试之用!!!<a href='#'>linkage</a></p>
<a href='#'>read more!</a>
</div>
<span class='article'>
<h2>测试标题三</h2>
<p id='p3'>段落三,测试段落,仅供测试之用!!!<a href='#'>linkage</a></p>
<a href='#'>read more!</a>
</div>
<span class='article'>
<h2>测试标题四</h2>
<p id='p4'>段落四,测试段落,仅供测试之用!!!<a href='#'>linkage</a></p>
<a href='#'>read more!</a>
</div>
... // 后面省略的全部为<div class='article'>...</div>元素
<input type='button' class='article'>提交</input>
</body>
一、简单的CSS选择符
选择符 | 匹配 |
---|---|
* | 匹配所有元素 |
#id | 匹配带有给定id的元素 |
element | 给定元素类型的所有元素 |
.class | 匹配给定类的所有元素 |
a, b | 与a或b匹配的元素 |
a b | a的所有后代元素中,与b匹配的元素 |
a > b | 作为a子元素的所以b元素 |
a + b | a之后的第一个与b匹配的兄弟元素 |
a - b | a之后的所有兄弟元素中与b匹配的元素 |
测试代码:
$('*') // 匹配上面html文档中的所有元素
$('#p1') // 匹配html文档中id='p1'的元素,即为段落一的<p>元素
$('p') // 匹配html文档中所有的<p>元素,即所有的段落
$('.article') // 匹配所有class='article'的元素
$('h2,a') // 匹配所有的<h2>或<a>元素
$('div a') // 匹配<div>元素所有后代中的,所有的<a>元素,此处为html中所有的<a>元素
$('div > a') // 匹配<div>元素的子元素中的<a>元素,此处为所有<a href='#'>read more!</a>
</br>
===
二、同辈元素间定位
选择符 | 匹配 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
:nth-child(index) | 匹配父元素的第index个子元素(从1开始计数) | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
:nth-child(even) | 匹配父元素的下标(索引)为偶数的</b>子元素(从1开始计数)</td></tr>
:nth-child(odd) |
匹配父元素的下标(索引)为奇数的</b>子元素(从1开始计数)</td></tr>
| :nth-child(formula) |
匹配父元素的第n个子元素(从1开始计数),formula(公式)格式为an+b,a和b为整数 | :nth-last-child() |
与:nth-child()相同(从最后一个元素,由1开始向前计数) | :first-child |
匹配父元素的第一个子元素 | :last-child |
匹配父元素的最后一个子元素 | :only-child |
匹配父元素唯一一个子元素,若有多个元素,匹配为空 | :nth-of-type() |
与:nth-child()的功能相同,只是此方法只计相同元素 | :nth-last-of-type() |
与:nth-of-type()的功能相同,但是计数从最后一个元素开始 | :first-of-type |
同名的元素中的第一个元素 | :last-of-type |
同名元素中的最后一个元素 | :only-of-type |
没有同名的同辈元素的元素 | ,,都行,(以后简称.article元素)
$('.article:nth-child(even)') // 匹配偶数位置(2,4,6,8...)的.article元素
$('.article:nth-child(odd)') // 匹配奇数位置(1,3,5,7...)的.article元素
$('.article:nth-child(2n+1)') // 匹配奇数位置(1,3,5,7...)的.article元素
// 即当n为0,1,2,3...时,表达式2n+1的值即为匹配元素
$('.article:nth-last-child(2)') // 匹配倒数第2个.article元素
$('.article:first-child') // 匹配第一个.article元素
$('.article:last-child') // 匹配最后一个.article元素
$('.article:only-child') // 因为匹配元素中不止一个.article元素,匹配为空
$('.article:nth-of-type(2)') // 匹配同类元素中的第二个元素,
// 首先会找到含有class='article'所有元素,然后根据元素名称分类,
// 最后匹配不同分类中的第二个元素(如果存在的话)
// 此处匹配段落二和段落四所在的元素
$('.article:nth-last-of-type(1)') // 分别匹配同类元素中倒数第一个元素
// 此处匹配段落二和段落四,还有最后一个元素
$('.article:first-of-type') // 分别匹配同类元素中的第一个元素
// 此处匹配段落一、段落二所在元素,和最后一个元素
$('.article:last-of-type') // 分别匹配同来元素中的最后一个元素
// 雨nth-last-of-type(1)匹配结果相同
$('.article:only-of-type') // 匹配当前jQuery对象元素中,没有同名同辈元素的元素
// 如当前jQuery对象元素中,仅仅包含一个...</input>元素,
// 那么此元素即为匹配元素
// 此处匹配最后一个元素
</br>
===
## 三、匹配元素间定位 ##
元素中也包含a元素,将不会匹配在内 $('article [href]') // 匹配包含class='article'元素所有后代元素中,带有href属性的元素 // 与上面一个一样,匹配所有a元素,包含在
|