如何理解和运用jquery基本过滤器

2024-11-03 12:48:19

1、我们先看什么叫先入为主body部分<ul><li>列表1</li><li class="red">列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul><ul><li>列表7</li><li>列表8</li><li>列表9</li><li>列表10</li><li>列表11</li><li>列表12</li></ul>demo.js代码部分$('li:first').css('background','red');//第一个ul的第一个li变成红色,因为第一个li抢先得到红色。这跟抢新娘是一个道理，第一个抢到新娘，才是新郎嘛我们再看什么叫后发制人demo.js代码部分$('li:last').css('background','red');//最后一个ul的的最后一个li变成红色，这跟我们看春晚差不多，压轴往往放到最后爆发，你看列表12不就是吗？

2、下面我们理解什么叫奇大偶小？body部分<ul><li>列表1</li><li class="red">列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul><ul><li>列表7</li><li>列表8</li><li>列表9</li><li>列表10</li><li>列表11</li><li>列表12</li></ul>奇的demo.js代码$('li:odd').css('background','red');输出结果：列表2 4 6 8 10 12都变红，为什么呢？因为索引值是从0开始所以列表2 4 6 8 10都是奇数偶的demo.js代码$('li:even').css('background','red');输出结果：列表1 3 5 7 9 11都变红，为什么呢？因为索引值是从0开始所以列表1 3 5 7 9 11的索引值都是奇数大的demo.js代码$('li:gt(2)').css('background','red');输出结果：列表4-12都变红，为什么呢？因为索引值是从0开始，大于2是大于列表 3 的索引值小的demo.js代码$('li:lt(2)').css('background','red');输出结果：列表1 2都变红，为什么呢？因为索引值是从0开始，小于2是小于列表 3 的索引值

3、最后理解非标等焦body部分<ul><li>列表1</li><li class="red">列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul><ul><li>列表7</li><li>列表8</li><li>列表9</li><li>列表10</li><li>列表11</li><li>列表12</li></ul><div><h3>我是标题</h3></div><input type="text"/>非的demo.js代码：$('li:not(red)').css('background','red');输出结果：不是列表2都变红。例如列表1 3 4 5 6-12标的demo.js代码：$('h3:header').css('background','red');输出结果：h3变红等的demo.js$('li:eq(2)').css('background','red');输出结果：列表3都变红。道理跟大小相同焦的demo.js$('input').get(0).focus();//这代表获取了焦点$('input:focus').css('background','red');//input变红

4、完整代码如下，大家可以测试一下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>常规选择器</title><script type="text/javascript" src="..\jquery-1.10.2\jquery.js"></script><script type="text/javascript" src="demo.js"></script><link rel="stylesheet" href="style.css" type="text/css"/></head><body><ul><li>列表1</li><li class="red">列表2</li><li>列表3</li><li>列表4</li><li>列表5</li><li>列表6</li></ul><ul><li>列表7</li><li>列表8</li><li>列表9</li><li>列表10</li><li>列表11</li><li>列表12</li></ul><div><h3>我是标题</h3></div><input type="text"/></body></html>demo.js代码如下：$(function(){ /*$('li:first').css('background','red');//第一个ul的li变成红色 $('li:last').css('background','red');//最后一个ul的li变成红色 $('ul:first li:last').css('background','red');//第一个ul的最后一个li变成红色 $('li:even').css('background','red');//偶数*/ //$('li:odd').css('background','red');//奇数 //$('li:even').css('background','red'); //$('li:eq(2)').css('background','red');第三个被变红，负数则是倒数 //$('li:gt(2)').css('background','red');索引值大于2 $('li:lt(2)').css('background','red');索引值小于2 //$('div :header').css('background','red'); //$('h3:header').css('background','red'); //$('input').get(0).focus(); //$('input:focus').css('background','red');});