JQuery 1.*速成版之二

2022-10-25 19:05:27

　　过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与 CSS3(http://t.mb5u.com/css3/)里的伪类，可以让不支持 CSS3 的低版本浏览器也能支持。和常规
选择器一样，jQuery 为了更方便开发者使用，提供了很多独有的过滤器。
一．基本过滤器
　　过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素，和 CSS 中的伪类的语法类似：使用冒号(:)开头。

过滤器名                 jQuery                          语法说明                                                    返回
:first                     $('li:first')          选取第一个元素                                                     单个元素
:last                      $('li:last')            选取最后一个元素                                                  单个元素
:not(selector)         $('li:not(.red)')    选取class 不是red 的li 元素                                     集合元素
:even                    $('li.even')           选择索引(0开始)是偶数的所有元素                             集合元素
:odd                      $('li:odd')            选择索引(0开始)是奇数的所有元素                             集合元素
:eq(index)             $('li:eq(2)')          选择索引(0开始)等于index的元素                              单个元素
:gt(index)             $('li:gt(2)')           选择索引(0开始)大于index的元素                              集合元素
:lt(index)              $('li.lt(2)')            选择索引(0开始)小于index的元素                              集合元素
:header               $(':header')          选择标题元素，h1 ~ h6                                          集合元素
:animated            $(':animated')       选择正在执行动画的元素                                          集合元素
:focus                  $(':focus')             选择当前被焦点的元素                                            集合元素

注意： :focus 过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab键盘敲击激活的。

jQuery 为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素，负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
$('li').not('.red').css('background', '#ccc'); //元素 li 不含class 为red的元素
注意：:first、:last 和first()、last()这两组过滤器和方法在出现相同元素的时候，first会实现第一个父元素的第一个子元素，last会实现最后一个父元素的最后一个子元素。所以，如果需要明确是哪个父元素，需要指明：$('#box li:last').css('background', '#ccc'); //#box元素的最后一个 li
//或$('#box li).last().css('background', '#ccc'); //同上

<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

二．内容过滤器
内容过滤器的过滤规则主要是包含的子元素或文本内容上。
过滤器名                                         jQuery                                                  语法说明                        返回
:contains(text)               $(':contains("ycku.com")')                  选取含有"ycku.com"文本的元素            元素集合
:empty                                     $(':empty')                             选取不包含子元素或空文本的元素           元素集合
:has(selector)                           $(':has(.red)')                        选取含有 class 是red 的元素                元素集合
:parent                                      $(':parent')                            选取含有子元素或文本的元素                 元素集合

jQuery 提供了一个has()方法来提高:has 过滤器的性能： $('ul').has('.red').css('background', '#ccc'); //选择子元素含有 class 是red 的元素。

jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。
$('li').parent().css('background', '#ccc'); //选择当前元素的父元素

<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

三．可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素。
过滤器名                  jQuery               语法说明                         返回
:hidden                $(':hidden')        选取所有不可见元素            集合元素
:visible                $(':visible')         选取所有可见元素               集合元素
$('p:hidden).size(); //元素 p 隐藏的元素       $('p:visible').size(); //元素 p 显示的元素
注意：:hidden过滤器一般是包含的内容为：CSS 样式为display:none、input表单类型为type="hidden"和 visibility:hidden的元素。

<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

四．子元素过滤器
子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。
过滤器名                                                       jQuery                                   语法说明                                                   返回
:first-child                                               $('li:first-child')            获取每个父元素的第一个子元素                                    集合元素
:last-child                                              $('li:last-child')            获取每个父元素的最后一个子元素                                 集合元素
:only-child                                              $('li:only-child')           获取只有一个子元素的元素                                         集合元素
:nth-child(odd/even/eq(index)/n[+1])       $('li:nth-child(even)')   获取每个自定义子元素的元素(索引值从1 开始计算)           集合元素

<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

五．其他方法
jQuery 在选择器和过滤器上，还提供了一些常用的方法，方便我们开发时灵活使用。
方法名 jQuery 语法说明返回
is(s/o/e/f) $('li').is('.red') 传递选择器、DOM、jquery对象或是函数来匹配元素结合集合元素

hasClass(class) $('li').eq(2).hasClass('red') 其实就是 is("." + class) 集合元素
slice(start, end) $('li').slice(0,2) 选择从start 到end位置的元素，如果是负数，则从后开始集合元素

filter(s/o/e/f) $('li').filter('.red') --------- ---

end() $('div').find('p').end() 获取当前元素前一次状态集合元素
contents() $('div').contents() 获取某元素下面所有元素节点，包括文本节点，如果是 iframe，则可以查找文本内容集合元素

<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>

实例：

$(function () {

    //$('li:first').css('background', '#ccc');

    //$('li:last').css('background', '#ccc');

    //$('#box li:last').css('background', '#ccc');

    //$('ul:first li:last').css('background', '#ccc');

    //$('li:not(.red)').css('background', '#ccc');

    //$('li:even').css('background', '#ccc');

    //$('li:odd').css('background', '#ccc');

    //$('li:eq(2)').css('background', '#ccc');

    //$('li:eq(-2)').css('background', '#ccc');

    //$('li:gt(3)').css('background', '#ccc');

    //$('li:lt(2)').css('background', '#ccc');

    //$('div :header').css('background', '#ccc');

    //$('input').get(0).focus();

    //$(':focus').css('background', 'red');

    //$('li').first().css('background', '#ccc');

    //$('li').last().css('background', '#ccc');

    //$('li').not('.red').css('background', '#ccc');

    //$('li').eq(2).css('background', '#ccc');

    //$('div:contains("ycku.com")').css('background', '#ccc');

    //$('div:empty').css('background', '#ccc').css('height','20px');

    $('ul:has(.red)').css('background', '#ccc');

    //$('div:parent').css('background', '#ddf');

    //$('ul').has('.red').css('background', '#ccc');

    //alert($('li').parent().size());

    //alert($('li').parent().get(0));

    //$('li').parent().css('background', '#ccc');

    //$('li').parents().css('background', '#ccc');

    //$('li').parentsUntil('body').css('background', '#ccc');

    //alert($('div:hidden').size());

    //$('div:hidden').css('background', '#ccc').show(1000);

    //alert($('div:visible').size());

});

js code1：

$(function () {

    //$('li:first-child').css('background', '#ccc');

    //$('li:last-child').css('background', '#ccc');

    //$('li:only-child').css('background', '#ccc');

    //$('li:nth-child(even)').css('background', '#ccc');

    //$('li:nth-child(odd)').css('background', '#ccc');

    //$('li:nth-child(5n)').css('background', '#ccc');

    //$('li:nth-child(4n+1)').css('background', '#ccc');

    //alert($('.red').is('li'));

    //alert($('.red').is('div'));

    //alert($('.red').is($('li')));

    //alert($('.red').is($('div')));

    //alert($('.red').is($('li').get(2)));

    //alert($('.red').is($('li').eq(2)));

    //alert($('.red').is(function () {

    //    return $(this).attr('title') == '列表3';

    //}));

    //注意，必须使用$(this)来表示要判断的元素，否则，不管function里面是否返回true或false都和调用的元素无关了

    //alert($('li').eq(2).hasClass('red'));

    //$('li').slice(5,7).css('background', '#ccc');

    //$('li').slice(2).css('background', '#ccc');

    //$('li').slice(0, -2).css('background', '#ccc');

    //$('li').slice(2, -2).css('background', '#ccc');

    //alert($('#box').find('li').end().get(0));

    //alert($('#box').find('li').parent().get(0));

    //$('#box').next('ul').end().css('background', '#ccc');

    //alert($('div:first').children().size());

    //alert($('div:first').contents().size());

    //$('li').filter('.red, :first-child, :last-child').css('background', '#ccc');

    $('li').filter(function () {

        return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';

    }).css('background', '#ccc');

});

js code2:

<!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.1.js"></script>

<script type="text/javascript" src="demo.js"></script>

<link rel="stylesheet" href="style.css" type="text/css" />

</head>

<body>

<div>我们的新域名为：<span>ycku.com</span></div>

<div style="display:none;">我们的新域名为：ycku.com</div>

<div>我们的旧域名为：yc60.com</div>

<div></div>

<div></div>

<ul>

    <li>列表1</li>

    <li>列表2</li>

    <li class="red">列表3</li>

    <li>列表4</li>

    <li>列表5</li>

    <li>列表6</li>

</ul>

<ul>

    <li>列表1</li>

    <li>列表2</li>

    <li>列表3</li>

    <li>列表4</li>

    <li>列表5</li>

    <li>列表6</li>

</ul>

<input type="text" />

    <h3>我是标题</h3>

</body>

</html>

html code:

码农公寓

相关文章