一、选择器
- 基础选择器: 类选择器 元素选择器 ID选择器 子元素选择器 后代元素选择器
- 属性选择器 :完美匹配 包含 前缀 开头 结尾 空格
- jQuery扩展选择器: eq even odd first last gt lt
示例代码:
<div class="container"></div>
<div id="box"></div>
<span></span>
<ul id="nav">
<li>1</li>
<li>2</li>
<li>
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
//id选择器
$('#box').html("我是box");
//类选择器
$('.container').html("我是container")
//元素选择器
$("span").html("我是span")
// 后代选择器
$("#nav li").css("border", "1px solid red")
//子代选择器
$("#nav>li").css("border", "2px solid green")
// :eq(index) Selector 在匹配的集合中选择索引值为index的元素。
$("li:eq(2)").css("border", "4px solid red")
// :even Selector 选择所引值为偶数的元素
// $("li:even").css("border", "1px solid blue")
// :odd Selector 选择索引值为奇数元素
$("li:odd").css("border", "2px solid yellow")
// :first Selector 选择第一个匹配的元素
// $("li:first").css("border", "1px solid red");
// :last Selector 选择最后一个匹配的元素
// $("li:last").css("border", "1px solid red");
// :gt(index) Selector 选择匹配集合中所有大于给定index(索引值)的元素。
// $("li:gt(1)").css("border", "1px solid red");
// :lt(index) Selector 选择匹配集合中所有索引值小于给定index参数的元素
// $("li:lt(3)").css("border", "4px solid red");