JQuery-中的基本筛选器

1. first()

1. 描述：获取匹配的第一个元素
2. 使用方法： ① $(“ul li”).first(); ② $(‘ul li:first’)

<ul>
	<li>第一个</li>
	<li>第二个</li>
	<li>第三个</li>
	<li>第四个</li>
	<li>第五个</li>
	<li>第六个</li>
</ul>

<script>
	var first1 = $('ul li').first().text();
	var first2 = $('ul li:first').text();
	console.log('第一种方法：',first1); // 输出 “第一个”
	console.log('第二种方法：',first2);// 输出 “第一个”
</script>

2. not()

描述：去除所有与给定选择器匹配的元素
使用方法： ① $ (‘input’).not($(‘input:checked’)); ② $(‘input:not(:checked)’);

<input type="checkbox" checked>1
<input type="checkbox">2
<input type="checkbox">3

<script>
	var input = $('input').not($('input:checked'));
	var input1 = $('input:not(:checked)');
	console.log(input); // <input type="checkbox">2 ,<input type="checkbox">3
	console.log(input1);// <input type="checkbox">2 ,<input type="checkbox">3
</script>

3. even

概述：匹配所有索引值为偶数的元素，从 0 开始计数
使用方法： $(‘div:even’);

<div class="even">1</div>
<div class="even">2</div>
<div class="even">3</div>
<div class="even">4</div>

<script>
var div_even = $('.even:even').html();
console.log(div_even); // 1,3
</script>

4. odd

概述：匹配所有索引值为奇数的元素，从 0 开始计数
使用方法： $(‘div:odd’);

<div class="even">1</div>
<div class="even">2</div>
<div class="even">3</div>
<div class="even">4</div>

<script>
var div_even = $('.even:odd').html();
console.log(div_even); // 2,4
</script>

5. :eq(index)

概述：匹配一个给定索引值的元素
使用方法： 1. $ (‘div:eq()’); 2. $(‘div’).eq();

<div class="even">1</div>
<div class="even">2</div>
<div class="even">3</div>
<div class="even">4</div>

<script>
var div_even = $('.even:eq(0)').html();
var div_even1 = $('.even').eq(1).html();
console.log(div_even); // 1
console.log(div_even1); // 2
</script>

6. :gt(index)

概述：匹配所有大于给定索引值的元素
使用方法： 1. $ (‘div:gt()’);

<div class="even">1</div>
<div class="even">2</div>
<div class="even">3</div>
<div class="even">4</div>

<script>
var div_even = $('.even:gt(0)').html();
console.log(div_even); // 2,3,4
</script>

7. :last(index)

概述：获取最后的元素
使用方法： 1. $ (‘div:last’); 2. $(‘div’).last();

<div class="even">1</div>
<div class="even">2</div>
<div class="even">3</div>
<div class="even">4</div>

<script>
var div_even = $('.even:last').html();
var div_even1 = $('.even').last().html();
console.log(div_even); // 4
console.log(div_even1); // 4
</script>

8. :lt(index)

概述：查找第一第二行，即索引值是0和1，也就是比2小
使用方法： 1. $ (‘div:lt()’);

<div class="even">1</div>
<div class="even">2</div>
<div class="even">3</div>
<div class="even">4</div>

<script>
var div_even = $('.even:lt(2)').html();
console.log(div_even); // 1,2
</script>