jquery之基本过滤选择器

本次的这篇文章主要是和大家分享了jquery之基本过滤选择器，有需要的小伙伴可以看一下

首先，我们看看基本过滤选择器：

一、选中单行或双行

能不能选中指定的某一个呢？

二、筛选大于，小于的

三、注意选择的顺序呦

:not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的

插入代码位置：

View Code

四、header

有了这些知识以后，下面我们做几个练习。

题目：第一行是表头，所以显示大字体（fontSize=30px），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（28）表格的偶数行是红色色背景。

用Dom实现；用jQuery实现。对比差异！

注意：gt(0):lt(3),表示先筛选出所有大于0的，然后在此基础上再筛选出所有小于3的，即：在所有大于0的基础上再选择0,1,2。

习题代码插入位置：

 1  
 2  
 3  
 4      
 5      
 6     
 18 
 19 
 20     
 21   
 22         
 23             
 26             
 29         
 30         
 31             
 34             
 37         
 38         
 39             
 42             
 45         
 46         
 47             
 50             
 53         
 54         
 55             
 58             
 61         
 62         
 63             
 66             
 69         
 70         
 71             
 74             
 77         
 78     

 24                 姓名
 25             

 27                 成绩
 28             

 32                 tom
 33             

 35                 100
 36             

 40                 jim
 41             

 43                 99
 44             

 48                 john
 49             

 51                 98
 52             

 56                 jason
 57             

 59                 97
 60             

 64                 aaa
 65             

 67                 97
 68             

 72                 平均分73             

 75                 98
 76             
 79 
 80 

习题演示

案例2：点击按钮，表格隔行变色。奇红，偶黄。

案例2代码插入位置：

View Code

案例2演示

案例3：列表中的前三名粗体显示。（前三个li）font-weight:bolder

案例3代码插入位置：

View Code

案例3演示

案例4:表格点击行背景色变黄，其他行背景色变白。

案例4代码插入位置：

View Code

案例4演示

五、几个小问题

六、学会使用帮助

这里出两道题，测试一下：

$(    “ul”, $(this)    ).css(“background”, “red”);

$(选择器,context);例如：$(‘td’,$(‘p table tr’));

context参数可以是用dom对象集合或jQuery对象

默认如果不传递context则，会在整个文档中搜索。

案例：修改点击行的所有td的背景色，将当前点击行的td设置为奇数td背景色红色，偶数td背景色蓝色。通过$(‘td’,context)

  1   
  2   
  3   
  4   
  5       
  6       
  7      
 19  
 20  
 21     
 22          
 23              
 25              
 27              
 29              3
 1              
 33              
 35          
 36          
  37              
  39              
  41              
  43              
  45              
  47              
  49          
  50           
  51              
  53              
  55              
  57              
  59              
  61              
  63          
  64           
  65              
  67              
  69              
  71              
  73              
  75              
  77          
  78           
  79              
  81              
  83              
  85              
  87              
  89              
  91          
  92           
  93              
  95              
  97              
  99             
  101             
  103             
  105         
  106     
川川是狗狗 
 24             
川川是狗狗 
 26             
川川是狗狗 
 28             
川川是狗狗 
 30             
川川是狗狗 
 32             
川川是狗狗 
 34             
川川是狗狗 
  38             
川川是狗狗 
  40             
川川是狗狗
  42             
川川是狗狗 
  44             
川川是狗狗 
  46             
川川是狗狗 
  48             
川川是狗狗 
  52             
川川是狗狗 
  54             
川川是狗狗 
  56             
川川是狗狗 
  58             
川川是狗狗 
  60             
川川是狗狗 
  62             
川川是狗狗 
  66             
川川是狗狗 
  68             
川川是狗狗 
  70             
川川是狗狗 
  72             
川川是狗狗 
  74             
川川是狗狗 
  76             
川川是狗狗 
  80             
川川是狗狗 
  82             
川川是狗狗 
  84             
川川是狗狗 
  86             
川川是狗狗 
  88             
川川是狗狗 
  90             
川川是狗狗 
  94             
川川是狗狗 
  96             
川川是狗狗 
  98             
川川是狗狗
  100             
川川是狗狗
  102             
川川是狗狗
  104             
  107 
  108