JQuery 1.*速成版之二

　　过滤选择器简称：过滤器。它其实也是一种选择器，而这种选择器类似与 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:

时间： 2024-10-13 00:29:30

JQuery 1.*速成版之二的相关文章

JQuery 1.*速成版之一

jQuery1.x 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性.jQuery选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择. 一．简单选择器 选择器          CSS 模式            jQuery 模式                             描述元素名             div {}    

Windows Azure 实验培训学习与交流（官方版整理二）

Windows Azure 技术更新比较快,也许有很多人下面的都已看过,为以后我们好回头可以查看,也为还没有看到这些官方材料的小伙伴们带来一些帮助,如下是整理的官方版实验材料都以链接形式呈现,方便大家学习和交流. 微软培训材料下载 http://windowsazure-trainingkit.github.io/index.htm 注:Github作为培训材料的存储库微软所有配套的材料都会及时更新到Github上 目前微软团队已将大部分培训材料翻译成中文 https://github.com/

Jquery Easy UI初步学习(二)datagrid的使用

第一篇学的是做一个管理的外框,接着就是数据datagrid绑定了,这里我用asp.net mvc3来做的,主要就是熟悉属性.方法. 打开easyui的demo 就可以看到如下一段代码: 和上篇一样class="easyui-datagrid", data-options="...",这是一样的,其他我在网上查了查,并做了整理 DataGrid 属性 参数名 类型 描述 默认值 title string Datagrid面板的标题 null iconCls strin

jQuery打造智能提示插件二（可编辑下拉框）

在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 下拉按钮素材: js封装,注意红色部分为BUG修复,然后传入boxwidth不带px: /* /// <reference path="jquery-autocomplete2.0.js" /> zhangs 20140516 */ (function($) { $.fn.combox = function(options) { var KEY = { UP: 38, DOW

jquery源码学习（二）sizzle部分 【转】

一,sizzle的基本原理 sizzle是jquery选择器引擎模块的名称,早在1.3版本就独立出来,并且被许多其他的js库当做默认的选择器引擎.首先,sizzle最大的特点就是快.那么为什么sizzle当时其他引擎都快了,因为当时其他的引擎都是按照从左到右逐个匹配的方式来进行查找的,而sizzle刚好相反是从右到左找的. 举个简单的例子 “.a .b .c”来说明为什么sizzle比较快.这个例子如果按照从左到右的顺序查找,很明显需要三次遍历过程才能结束,即先在document中查找.a,然后

[Unity+Android]横版扫描二维码

终于解决了一个忧伤好久的问题,严重拖了项目进度,深感惭愧!一直被一系列的问题所困扰,然后又只能自己一个人摸索,也是一段辛酸忧伤史,现在小结一下上个月在做二维码的过程中所碰到的问题以及解决办法,现在庆幸终于解决好了,终于能将这个功能告一段落,一下小结也是分享一下Unity的某些"坑",让同行少走弯路,起码在二维码这方面应该会有所启迪,欣慰的是接下来几天终于可以做自己应该做的事情了! 效果图: 先小结一下碰到的问题: 1.Unity工程屏幕方向与Android工程屏幕方向要一致的问题 本来

jQuery实现简易版列表联动

jQuery实现简易版列表联动 本文为学习过程中的总结,也许许多地方可能过于片面,考虑不周全,还望前辈们评论区批评指正呐! 简易版三级联动效果如下: 代码如下: <!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title&g

C primer plus 第五版十二章习题

看完C prime plus(第五版)第十二章,随带完成了后面的习题. 1.不使用全局变量,重写程序清单12.4的程序. 先贴出12.4的程序,方便对照: 1 /* global.c --- 使用外部变量 */ 2 #include <stdio.h> 3 int units = 0; //一个外部变量 4 void critic(void); 5 int main(void) 6 { 7 extern int units; 8 9 printf ("How many pounds

Jquery自定义扩展方法（二）--HTML日历控件

一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看看效果图吧 效果图很简单,代码封装在JQuery中,网页端只需要要调用即可: 二.Jquery自定义实体对象 Jquery可以自定义函数function,有没有可以定义实体对象,里面封装方法那?查询了一下资料发现,是可以的,不仅能够封装属性,还可以写自己的方法,调用模板代码如下: $.Calende