jquery之基本过滤选择器

零到壹度 原创: 2018-03-31 17:06:28 1066浏览

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

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

一、选中单行或双行

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

二、筛选大于，小于的

三、注意选择的顺序呦

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

插入代码位置：

View Code

四、header

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

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

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

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

习题代码插入位置：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 2 <html xmlns="http://www.w3.org/1999/xhtml"> 
 3 <head> 
 4     <title></title> 
 5     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script> 
 6     <script type="text/javascript"> 
 7         $(function () { 
 8             $('#btn').click(function () { 
 9                 //设置表格的第一行为表头，即显示字体变为30px
 10                 $('#table1 tr:first').css('font-size', '30px');
 11                 $('#table1 tr:last').css('color', 'red');
 12                 //注意在写代码的时候，写点调点。
 13                 $('#table1 tr:gt(0):lt(3)').css('font-size', '28px');
 14                 $('#table1 tr:odd').css('backgroundColor','red');
 15             });
 16         });
 17     </script>
 18 </head>
 19 <body>
 20     <input type="button" name="name" value="设置表格样式" id="btn"/>
 21   <table id="table1" border="1" >
 22         <tr>
 23             <td>
 24                 姓名
 25             </td>
 26             <td>
 27                 成绩
 28             </td>
 29         </tr>
 30         <tr>
 31             <td>
 32                 tom
 33             </td>
 34             <td>
 35                 100
 36             </td>
 37         </tr>
 38         <tr>
 39             <td>
 40                 jim
 41             </td>
 42             <td>
 43                 99
 44             </td>
 45         </tr>
 46         <tr>
 47             <td>
 48                 john
 49             </td>
 50             <td>
 51                 98
 52             </td>
 53         </tr>
 54         <tr>
 55             <td>
 56                 jason
 57             </td>
 58             <td>
 59                 97
 60             </td>
 61         </tr>
 62         <tr>
 63             <td>
 64                 aaa
 65             </td>
 66             <td>
 67                 97
 68             </td>
 69         </tr>
 70         <tr>
 71             <td>
 72                 平均分73             </td>
 74             <td>
 75                 98
 76             </td>
 77         </tr>
 78     </table>
 79 </body>
 80 </html>

习题演示

案例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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2   
  3 <html xmlns="http://www.w3.org/1999/xhtml">  
  4 <head>  
  5     <title></title>  
  6     <script src="jq/jquery-1.8.2.js" type="text/javascript"></script>  
  7     <script type="text/javascript">  
  8     //记得把注册的点击事件写在ready里面，否则的话不报错。  
  9         $(function () { 
  10             $('#t1 tr').click(function () { 
  11                 //限定范围，在当前点的那行里面找td 
  12                 //写完后，再把其它行清一下。 
  13                 $('#t1 tr td').css('backgroundColor', '') 
  14                 $('td:odd', $(this)).css('backgroundColor', 'red'); 
  15                 $('td:even', this).css('backgroundColor', 'blue');    
 16             }); 
 17         }); 
 18     </script> 
 19 </head> 
 20 <body> 
 21    <table id="t1" border="1"> 
 22         <tr> 
 23             <td>川川是狗狗 
 24             </td> 
 25             <td>川川是狗狗 
 26             </td> 
 27             <td>川川是狗狗 
 28             </td> 
 29             <td>川川是狗狗 
 30             </td> 3
 1             <td>川川是狗狗 
 32             </td> 
 33             <td>川川是狗狗 
 34             </td> 
 35         </tr> 
 36          <tr>
  37             <td>川川是狗狗 
  38             </td> 
  39             <td>川川是狗狗 
  40             </td> 
  41             <td>川川是狗狗
  42             </td> 
  43             <td>川川是狗狗 
  44             </td> 
  45             <td>川川是狗狗 
  46             </td> 
  47             <td>川川是狗狗 
  48             </td> 
  49         </tr> 
  50          <tr> 
  51             <td>川川是狗狗 
  52             </td> 
  53             <td>川川是狗狗 
  54             </td> 
  55             <td>川川是狗狗 
  56             </td> 
  57             <td>川川是狗狗 
  58             </td> 
  59             <td>川川是狗狗 
  60             </td> 
  61             <td>川川是狗狗 
  62             </td> 
  63         </tr> 
  64          <tr> 
  65             <td>川川是狗狗 
  66             </td> 
  67             <td>川川是狗狗 
  68             </td> 
  69             <td>川川是狗狗 
  70             </td> 
  71             <td>川川是狗狗 
  72             </td> 
  73             <td>川川是狗狗 
  74             </td> 
  75             <td>川川是狗狗 
  76             </td> 
  77         </tr> 
  78          <tr> 
  79             <td>川川是狗狗 
  80             </td> 
  81             <td>川川是狗狗 
  82             </td> 
  83             <td>川川是狗狗 
  84             </td> 
  85             <td>川川是狗狗 
  86             </td> 
  87             <td>川川是狗狗 
  88             </td> 
  89             <td>川川是狗狗 
  90             </td> 
  91         </tr> 
  92          <tr> 
  93             <td>川川是狗狗 
  94             </td> 
  95             <td>川川是狗狗 
  96             </td> 
  97             <td>川川是狗狗 
  98             </td> 
  99             <td>川川是狗狗
  100             </td>
  101             <td>川川是狗狗
  102             </td>
  103             <td>川川是狗狗
  104             </td>
  105         </tr>
  106     </table>
  107 </body>
  108 </html>

以上就是jquery之基本过滤选择器的详细内容，更多请关注php中文网其它相关文章！

jquery 选择器过滤 PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

上一条：七种基础的Python运算符下一条：五大Python基础数据类型