一、基本选择器

　　标签选择器：　　$('button')

　　ID选择器：　　$('#id1')

　　类选择器：　　$('.class1')

　　多重选择器：　　$('#id1,.class1,button')

　　全体选择器：　　$('*') 

　　基本选择器完全根据 CSS 选择器的规范而来，对于了解 CSS 的用户非常容易掌握。

二、层次选择器

　　子选择器：　　$('parent > child')　　　　　　　　

　　后代选择器：　　$('ancester descendant')

　　单一兄弟选择器：　　$('prev + next')

　　所有兄弟选择器：　　$('prev ~ siblings')

　　子选择器和后代选择器的区别：子选择器是后代选择器的子集，前者只筛选出符合条件的直接子元素，后者筛选出符合条件的所有子孙元素。
　　单一兄弟选择器与所有兄弟选择器类似，前者只筛选出符合条件的下一个同辈元素，后者筛选出符合条件的后面的所有的同辈元素。

　　简单例子如下：

<html>

<head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script>

    $(function(){

        $("#btn1").click(function(){

            $('body > div').each(function(index, element) {

                alert($(this).html());

            });

        });

        $("#btn2").click(function(){

            $('body div').each(function(index, element) {

                alert($(this).html());

            });

        });

        $("#btn3").click(function(){

            $('#btn1 + button').each(function(index, element) {

                alert($(this).html());

            });

        });

        $("#btn4").click(function(){

            $('#btn1 ~ button').each(function(index, element) {

                alert($(this).html());

            });

        });

    });

    </script>

</head>

<body>

<button id='btn1'>click1</button>

<button id='btn2'>click2</button>

<button id='btn3'>click3</button>

<button id='btn4'>click4</button>

<div>

    <div id='div1'>div1</div>

    <div id='div2'>div2</div>

</div>

</body>

</html>

三、属性选择器

　　属性选择器可以筛选出包含特定属性的元素，或者根据属性的值的格式来筛选出元素。

　　属性包含：　　　　　　　　[attr]

　　属性值为指定字符串：　　　　[attr = "value"]

　　属性值不为指定字符串：　　　　[attr != "value"]

　　属性值以指定字符串开始：　　　　[attr ^= "value"]

　　属性值以指定字符串结束：　　　　[attr $= "value"]

　　属性值包含指定字符串：　　　　[attr *= "value"]

　　多属性筛选：　　　　　　　　[attr1 *= "value1"][attr2 = "value2"]

　　其中，[name != "value"] 的实现效率较低，可以使用 :not([attr = 'value']) 的形式。

　　简单例子如下：

<html>

<head>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script>

    $(function(){

        $("#btn1").click(function(){

            $('[id]').each(function(index, element) {

                alert($(this).html());

            });

        });

        $("#btn2").click(function(){

            $('button[id]').each(function(index, element) {

                alert($(this).html());

            });

        });

        $("#btn3").click(function(){

            $('[id $= "1"]').each(function(index, element) {

                alert($(this).html());

            });

        });

        $("#btn4").click(function(){

            $('button[id $= "1"]').each(function(index, element) {

                alert($(this).html());

            });

        });

        $("#btn5").click(function(){

            $('button[id][name]').each(function(index, element) {

                alert($(this).html());

            });

        });

    });

    </script>

</head>

<body>

<button id='btn1'>click1</button>

<button id='btn2'>click2</button>

<button id='btn3'>click3</button>

<button id='btn4'>click4</button>

<button id='btn5' name='name5'>click5</button>

<div>

    <div id='div1'>div1</div>

    <div id='div2'>div2</div>

</div>

</body>

</html>

四、基本过滤器

　　有些过滤器的实现并不高效，原因参见官网，对于这部分过滤器，建议使用 .filter(selector) 来调用，如 $('div').filter(':hidden') ，后面所有的这类过滤器都以红色特殊标出。

　　:animated　　　　    当前执行动画的元素

　　:eq(index)　　　　    取出指定索引的元素（jQuery 对象是集合，索引从0开始）

　　:gt(index)　　　　　　取出索引大于指定值的元素

　　:lt(index)　　　　　　　　取出索引小于指定值的元素

　　:first 　　　　　 取出第一个元素，即索引为0的元素

　　:last　　　　　　取出最后一个元素，即索引为 size()-1 的元素

　　:even　　　　　　取出索引为偶数的元素

　　:odd　　　　　　取出索引为奇数的元素

　　:header　　　　　取出所有标题元素，如 h1,h2,h3 等

　　:root　　　　　　取出根元素

　　:not(selector)　　取出所有不匹配指定过滤器的元素　

　　:focus　　　　　　　　　　当前得到焦点的元素

五、子元素过滤器

　　:first-child　　　　　　　　是其父元素的第一个子元素

　　:last-child　　　　　　　　是其父元素的最后一个元素

　　:first-of-type　　　　　　　　是同辈同类元素中的第一个元素

　　:last-of-type　　　　　　　　是同辈同类元素中的最后一个元素

　　:only-child　　　　　　　　是其父元素的唯一子元素

　　:only-of-type　　　　　　在同辈元素中，没有同类元素的元素，即此元素是同辈元素中唯一的该类型元素

　　:nth-child(index)　　　　其父元素的第 index 元素，该 index 从 1 开始

　　:nth-last-child(index)　　　　其父元素的倒数第 index 元素，该 index 从 1 开始

　　:nth-of-type(index)　　　　　　是同辈的同类元素中的第 index 元素，该 index 从 1 开始

　　:nth-last-of-type(index)　　　　是同辈的同类元素中倒数第 index 元素，该 index 从 1 开始

六、内容过滤器

　　:contains(text)　　　　　　包含指定字符串的元素

　　:empty　　　　　　　　　　没有子元素的元素

　　:has(selector)　　　　　　 包含至少一个指定的选择器匹配的元素

　　:parent　　　　　　　　　　包含至少一个子节点的（一个元素或文本）元素

七、表单过滤器

　　:input

　　:text

　　:password

　　:button

　　:reset

　　:submit

　　:radio

　　:checkbox

　　:checked

　　:selected

　　:file

　　:image

　　:focus

　　:enabled

　　:disabled

八、可见性过滤器

　　:hidden　　　　当前隐藏的元素

　　:visible　　　　当前显示的元素

jQuery 学习之路（2）：选择器与过滤器的更多相关文章

  1. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. jquery学习笔记(一)：选择器

    内容来自[汇智网]jquery学习课程 1.1 基础选择器 选择器 功能 返回值 #id 根据给定的id匹配一个元素 单个元素 element 根据给定的元素名匹配所有元素 元素集合 .class 根 ...

  3. jQuery学习之旅 Item1 选择器【一】

    点击"名称"会跳转到此方法的jQuery官方说明文档. 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择I ...

  4. jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  5. jQuery 学习之路（1）：引子

    一.主流 javascript 库 除 jQuery 外,还有 Prototype.Dojo.YUI.ExtJS.MooTools ,其中 Prototype 较老,结构设计较为松散,ExtJS 界面 ...

  6. jquery学习（2）--选择器

    jquery-李炎恢学习视频学习笔记.自己手写. 简单的选择器    css 写 法: #box{ color:#f00;}    //id选择器    jquery获取:$('#box').css( ...

  7. jQuery学习之旅 Item2 选择器【二】

    这里接着上一个Item1 把jQuery的选择器讲完.主要有:属性过滤器和子元素过滤器 点击"名称"会跳转到此方法的jQuery官方说明文档. 5. 属性过滤器 Attribute ...

  8. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  9. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

随机推荐

  1. 【BZOJ-4269】再见Xor 高斯消元 + 线性基

    4269: 再见Xor Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 131  Solved: 81[Submit][Status][Discuss] ...

  2. 【poj3615】 Cow Hurdles

    http://poj.org/problem?id=3615 (题目链接) 题意 给出一张有向图,求从u到v最大边最小的路径的最大边.→_→不会说话了.. Solution 好久没写Floyd了,水一 ...

  3. NuGet多个项目依赖的公共组件如何打包

    会有这样一种情况:在同一个解决方案下面,类库A是独立的,类库B是依赖于类库A的:类似这样: 所以在使用类库B时必须引入类库A的东西,这时如果作为nuget包打包发布,有如下的解决思路: 1.在整个解决 ...

  4. POJ3735 矩阵

    题意:有n只猫咪,开始时每只猫咪有花生0颗,现有一组操作,由下面三个中的k个操作组成:        1. g i 给i只猫咪一颗花生米        2. e i 让第i只猫咪吃掉它拥有的所有花生米 ...

  5. Windows下Nginx+Mysql+Php(wnmp)环境搭建

    前言 最近想在windows下使用nginx搭建web环境,本来想用套件(WNMP)一键安装,但后来放弃了,觉得还是自己动手,丰衣足食的好,而且套件的局限性太大.所以后来就各种搜索,看到前辈写关于wn ...

  6. Codeforces Round #389 Div.2 A. Santa Claus and a Place in a Class

    time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...

  7. siege详解

    简介 siege是一款HTTP/FTP负载测试和基准压测工具   Download http://download.joedog.org/siege/siege-latest.tar.gz   安装 ...

  8. VS2010生成安装包

    项目的第一个版本出来了,要做个安装包,之前没有做过,网上看看贴,写了一个,总结下,根据本项目的需要,没有写的太复杂,可能还不是很完善,仅作参考. 首先在打开 VS2010    >   文件 & ...

  9. RabbitMQ配置文件

    配置文件Config 在Web的可视化管理界面中可以看到一些文件的路径 比如 Config文件的地址 数据库存放的文件夹 log文件的地址 进入到这个文件夹会发现有这些文件,其中example是con ...

  10. AngularJs $animate 让页面动起来

    $animate $animate服务提供了基本的DOM操作功能如在DOM里插入.移除和移动元素,以及添加和删除类.这个服务是ngAnimate的核心服务,为CSS和Javascript提供了高档次的 ...