一、基本选择器

　　标签选择器：　　$('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. PhpStorm PHP开发神器

    链接:http://pan.baidu.com/s/1b4Vwjs 密码:c5uh

  2. hdu 4403 dfs

    巨麻烦的模拟题orz.... 先确定等号的位置,然后两层dfs,分别算等号前面的和后面的,再比较 话说这题竟然不开long long都能水过 #include <iostream> #in ...

  3. Bzoj4066 简单题

    Time Limit: 50 Sec  Memory Limit: 20 MBSubmit: 2185  Solved: 581 Description 你有一个N*N的棋盘,每个格子内有一个整数,初 ...

  4. 洛谷P1774 最接近神的人

    题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...

  5. 蓝牙(Bluetooth) IEEE 802.15.1 协议学习

    catalogue . 蓝牙概念 . 配对和连接 . 机密安全性 . 蓝牙协议分类 . 蓝牙协议栈 1. 蓝牙概念 蓝牙(Bluetooth)是一种无线技术标准,可实现固定设备.移动设备和楼宇个人域网 ...

  6. NetLink Communication Mechanism And Netlink Sourcecode Analysis

    catalog . Netlink简介 . Netlink Function API Howto . Generic Netlink HOWTO kernel API . RFC Linux Netl ...

  7. Hackerrank Going to the Office

    传送门 Problem Statement Ms.Kox enjoys her job, but she does not like to waste extra time traveling to ...

  8. Jquery 随便写些知识点

    针对jQuery随便写些觉得还挺实用的一些东西,也没系统的去理一番,只是想到哪写到哪,写的不完全也请多见谅. jQuery和其他javascript库产生$符号冲突了?$符号想必用jQuery的人都不 ...

  9. [转]如何启用Ubuntu的休眠模式

    大家都知道 Windows 有休眠模式,其实 Ubuntu 也有.休眠模式简单来说,就是可以在用户暂时离开时将内存中的所有内容都写入到硬盘当中,当用户下次开机时,就可以直接启动到上次保存的时间状态. ...

  10. Unable to execute dex: java.nio.BufferOverflowException.解决办法

    异常提示: [2014-01-16 09:27:35 - Dex Loader] Unable to execute dex: java.nio.BufferOverflowException. Ch ...