js进阶 10-7 简单的伪类选择器可以干什么
一、总结
一句话总结：伪类选择器是冒号。
1、学而不用，有什么用？
多用啊，在项目中多用
2、简单的伪类选择器可以干什么？
除某元素以外，某元素的一切索引相关（奇偶，开始最后，大于小于等于）
除某元素以外，某元素的第一个，最后一个，以及某元素所有和索引相关的操作
3、伪类选择器的关键性符号是什么？
冒号，以英文冒号“：”开头
4、如何选取某一个元素中的其他元素？
用后代选择器
$('ul :not(#one)').css('color','blue');
5、如何给选择器限定内容？
加上限定的标签即可
33 // $('li:first').css('color','red');
二、简单的伪类选择器可以干什么
1、相关知识点：
伪类选择器
伪类选择器也称作过滤选择器。
JQuery伪类选择器都是以英文冒号“：”开头，和css中的伪类选择器用法相似，使得我们可以快速地选择我们想要获取的元素。
- 简单伪类选择器元素
- ：not(selector)选择除了某个选择器之外的所有元素
- ：first或first()选择某元素的第一个元素（非子元素）
- ：last或last()选择某元素的最后一个元素（非子元素）
- ：odd选择某元素的索引值为奇数的元素
- ：even选择某元素的索引值为偶数的元素
- ：eq(index)选择给定索引值的元素，索引值index是一个整数，从0开始
- ：gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始
- ：lt(index)选择所有小于索引值的元素，索引值index是一个整数，从0开始
- ：header选择h1~h6的标题元素
- ：focus选取当前具有焦点的元素
- ：root选择页面的根元素
- ：animated选择所有正在执行动画效果的元素
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script src="jquery-3.1.1.min.js"></script>
</head>
<body>
<div>
<h4>伪类选择器</h4>
<p>伪类选择器都是以英文冒号“:”开头。jQuery参考css选择器的形式，为我们提供了大量的伪类选择器，使得我们可以快速地选择我们想要获取的元素。</p>
<hr>
<h5>简单伪类选择器</h5>
<ul>
<li id="one">:not(selector) 选择除了某个选择器之外的所有元素</li>
<li>:first或first() 选择某元素的第一个元素（非子元素）</li>
<li>:last或last() 选择某元素的最后一个元素（非子元素）</li>
<li>:odd 选择某元素的索引值为奇数的元素</li>
<li>:even 选择某元素的索引值为偶数的元素</li>
<li>:eq(index) 选择给定索引值的元素，索引值index是一个整数，从0开始</li>
<li>:lt(index) 选择所有小于索引值的元素，索引值index是一个整数，从0开始</li>
<li>:gt(index) 选择所有大于索引值的元素，索引值index是一个整数，从0开始</li>
<li>:header 选择h1~h6的标题元素</li>
<li>:root 选择页面的根元素</li>
<li>:animated 选择所有正在执行动画效果的元素</li>
</ul>
<input type="text" value="测试">
</li>
</div>
<script>
$(function(){
//$('li:not(#one)').css('color','blue');
// $('li:first').css('color','red');
// $('li:last').css('color','red');
//$('li:odd').css('color','red');
//$('li:even').css('color','blue');
$('li:eq(3)').css('color','red');
$('li:lt(3)').css('color','blue');
$('li:gt(3)').css('color','orange'); })
</script>
</body>
</html>