jQuery基本过滤选择器

过滤从字面上大家非常清楚,就是过滤掉自己不想要的东西,也就是说经过过滤后留下来的都是自己需要的,那么其用到jQuery选择器中就是通过特定的过滤规则来筛选出所需的DOM元素,jQuery选择器的过滤规则与CSS中的伪类选择器语法是相同的。选择器都以一个冒号(:)开头。按照过滤规则的不同,我们通常把jQuery过滤选择器主要分为:基本过滤内容过滤可见性过滤属性过滤子元素过滤表单对象属性过滤器等。今天我们主要是一起探讨一下其中的“基本过滤选择器”。

我们沿续《jQuery选择器——层次选择器》一文中的HTML和DOM树形图来一起学习今天的基本过滤选择器。

<form class="form" action="#" method="post">
    <div class="form-item">
      <label for="name">Name:</label>
      <input name="name" type="text" class="form-text" id="name" />
  </div>
  <div class="form-item">
      <label for="lastname">LastName:</label>
        <input name="lastname" type="text" class="form-text" id="lastname" />
    </div>
    <div class="form-item">
      <label for="password">Password:</label>
        <input name="password" type="text" class="form-text" id="password" />
    </div>
  <fieldset>
      <div class="form-item">
      <label>Newsletter:</label>
      <input name="newsletter" type="text" class="text-form" id="newsletter"/>
    </div>  
 </fieldset>
 <div class="form-item">
     <input type="submit" value="submit" class="form-submit" id="submit" />
     <input type="reset" value="reset" calss="form-submit" id="reset" />
 </div>

一、基本过滤器——:first

语法:

$('E:first')  //其中E是DOM元素,:first是过滤

描述:

选取第一个元素

返回值:

单个元素

实例:

<script type="text/javascript">   $(document).ready(function(){
      $('input:first').css('border','1px solid red');
   });</script>

功能:

改变表页面中最后一个input元素的边框属性。

效果:

二、基本过滤器——:last

语法:

$('E:last')  //其中E是DOM元素,:last是过滤

描述:

选取最后一个元素

返回值:

单个元素

实例:

<script type="text/javascript">   $(document).ready(function(){
      $('input:last').css('border','1px solid red');
   });</script>

 

功能:

改变表单中第一个input元素的边框属性。

效果:

三、基本过滤器——:not(selector)

语法:

$("E:not(selector)")  //E表示有效果的DOM元素,而selector是用来筛选的选择器

描述:

去除所有与给定选择器匹配的元素。

返回值:

集合元素

实例:

<script type="text/javascript">   $(document).ready(function(){
      $('input:not(fieldset input)').css('border','1px solid red');
   });</script>

功能:

改变除fieldset下的input的所有input元素边框属性

效果:

从jQuery1.3后,我们selector选择器可以支持复杂选择器,如我们例子的后元素选择器,我们也可以使用多元素选择器,如:$("E:not(div,a,p)")。

四、基本过滤选择器——:even

语法:

$("E:even")  //E指所有有效的DOM元素,:even是指元素的索引值为偶数

描述:

选取索引值为偶数的所有元素。其中索引值从0开始计算,也就是指0,2,4...

返回值:

集合元素

实例:

<script type="text/javascript">   $(document).ready(function(){
      $('input:even').css('border','1px solid red');
   });</script>

功能:

改变页面中所有索引值为偶数的input元素的边框属性。也就是input索引值为0,2,4,6等偶数的就会改变边框属性

效果:

五、基本过滤选择器——:odd

:odd和:even其实很相似,只不过:even的索引值是偶数,而:odd的索引值为奇数而以。

语法:

$("E:odd")

描述:

选取索引值是奇数的所有元素,同样索引值从0开始计算,即1,3,5,7....

返回值:

集合元素

实例:

<script type="text/javascript">   $(document).ready(function(){
     $('input:odd').css('border','1px solid red');
   });</script>

功能:

改变页面中索引值为奇数的input元素。

效果:

从上面两个实例可以看出,其实:even就是改变奇数元素,比如说,我们上面示例中共有七个input元素,我们:even就是改变从上往下数的1,3,5,7这四个input,因为他们的索引值刚好是这几个数字减1,从而也就是我们所说的,其索引值为偶数;而odd就是改变从上到下2,4,6这三个input,因为他们各自减1刚好值为奇数,也是我们odd索引值为奇数的说法。所以我总结了一句话:面奇为even;面偶为odd。(表格的行来说例:行为单数是even,行为双数是odd)不知道我这样说,大家能不能理解,如果不能理解,大家可以结合实例仔细对照一下。

六、基本过滤选择器——:eq(index)

语法:

$("E:eq(index)")  //其中E为有效DOM元素,:eq(index)是指定一个索引值元素

描述:

选取索引值等于index的元素,其中index从0开始计算

返回值:

单个元素

实例:

<script type="text/javascript">   $(document).ready(function(){
      $('input:eq(1)').css('border','1px solid red');
   });</script>

功能:

改变页面中input的索引值为1的元素边框属性

效果:

七、基本过滤选择器——:gt(index)

语法:

$("E:gt(index)")  //其中E为有效DOM元素,:gt(index)是指定一个索引值元素

描述:

选取索引值大于index的元素,其中index从0开始计算

返回值:

集合元素

实例:

<script type="text/javascript">   $(document).ready(function(){
      $('input:gt(1)').css('border','1px solid red');
   });</script>

功能:

改变页面中input的索引值大于1的元素边框属性

效果:

八、基本过滤选择器——:lt(index)

语法:

$("E:lt(index)")  //其中E为有效DOM元素,:lt(index)是指定一个索引值元素

描述:

选取索引值小于index的元素,其中index从0开始计算

返回值:

集合元素

实例:

<script type="text/javascript">   $(document).ready(function(){
      $('input:lt(1)').css('border','1px solid red');
   });</script>

功能:

改变页面中input的索引值小于1的元素边框属性

效果:

九、基本过滤选择器——:header

语法:

$(":header") //:heaer是指页面所有标题:h1~h6

描述:

选取页面所有的标题元素h1~h6

返回值:

集合元素

实例:

<script type="text/javascript">   $(document).ready(function(){
      $(':header').css('border','1px solid red');
   });</script>

功能:

改变页面所有的标题边框属性

因为我们这个实例中找不到任何标题元素,所以是没有任何效果的变化。

十、基本过滤选择器——:animated

语法:

$("E:animated") //E为任何有效的DOM元素,:animated为当前正在执行动画的元素

描述:

选取当前正在执行动画的所有元素

返回值:

集合元素

实例:

<script type="text/javascript">   $(document).ready(function(){
      $('input:not(:animated)').css('border','1px solid red');
   });</script>

功能:

改变页面中没有执行动画的所有input元素的边框属性

效果:


Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <style> .left { width: auto; height: 120px; } .left div { width: 100px; height: 70px; padding: 5px; margin: 5px; float: left; background: #bbffaa; border: 1px solid #ccc; } .bottom { width: 800px; } .bottom div, .bottom span { display: block; width: 80px; height: 80px; margin: 5px; background: #bbffaa; float: left; font-size: 14px; } .bottom .small { width: 60px; height: 25px; font-size: 12px; background: #fab; } </style> </head> <body> <h2>可见性筛选选择器</h2> <h3>:visible/:hidden</h3> <div class="left"> <div class="div"> <a>display</a> <p id="div1" style="display:none;">display</p> </div> <div class="div"> <a>width</a> <a>height</a> <p id="div2" style="width:0;height:0">width/height</p> </div> <div class="div"> <a>visibility</a> <a>opacity</a> <p id="div3" style="visibility:hidden;opacity:0">visibility</p> </div> </div> <p id="show"></p> <script type="text/javascript"> function show (ele) { if (ele instanceof jQuery) { $("#show").html('元素的长度的 = ' + ele.length) } else { alert(ele+' 不是jQuery对象') } } </script> <script type="text/javascript"> //查找id = div1的DOM元素,是否可见 show( $('#div1:visible') ); </script> <script type="text/javascript"> //查找id = div2的DOM元素,是否可见 show( $('#div2:visible') ); </script> <script type="text/javascript"> //查找id = div3的DOM元素,是否可见 show( $('#div3:visible') ); </script> <script type="text/javascript"> //查找id = div1的DOM元素,是否隐藏 show( $('#div1:hidden') ); </script> <script type="text/javascript"> //查找id = div2的DOM元素,是否隐藏 show( $('#div2:hidden') ); </script> <script type="text/javascript"> //查找id = div3的DOM元素,是否隐藏 show( $('#div3:hidden') ); </script> </body> </html>
einreichenCode zurücksetzen