一、基本选择器

  1. 　　标签选择器：　　$('button')
  2. 　　ID选择器：　　$('#id1')
  3. 　　类选择器：　　$('.class1')
  4. 　　多重选择器：　　$('#id1,.class1,button')
  5. 　　全体选择器：　　$('*') 

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

二、层次选择器

  1. 　　子选择器：　　$('parent > child')　　　　　　　　
  2. 　　后代选择器：　　$('ancester descendant')
  3. 　　单一兄弟选择器：　　$('prev + next')
  4. 　　所有兄弟选择器：　　$('prev ~ siblings')

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

　　简单例子如下：

  1. <html>
  2. <head>
  3.     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  4.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  5.     <script>
  6.     $(function(){
  7.         $("#btn1").click(function(){
  8.             $('body > div').each(function(index, element) {
  9.                 alert($(this).html());
  10.             });
  11.         });
  12.         $("#btn2").click(function(){
  13.             $('body div').each(function(index, element) {
  14.                 alert($(this).html());
  15.             });
  16.         });
  17.         $("#btn3").click(function(){
  18.             $('#btn1 + button').each(function(index, element) {
  19.                 alert($(this).html());
  20.             });
  21.         });
  22.         $("#btn4").click(function(){
  23.             $('#btn1 ~ button').each(function(index, element) {
  24.                 alert($(this).html());
  25.             });
  26.         });
  27.     });
  28.     </script>
  29. </head>
  30. <body>
  31. <button id='btn1'>click1</button>
  32. <button id='btn2'>click2</button>
  33. <button id='btn3'>click3</button>
  34. <button id='btn4'>click4</button>
  35. <div>
  36.     <div id='div1'>div1</div>
  37.     <div id='div2'>div2</div>
  38. </div>
  39. </body>
  40. </html>

三、属性选择器

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

  1. 　　属性包含：　　　　　　　　[attr]
  2. 　　属性值为指定字符串：　　　　[attr = "value"]
  3. 　　属性值不为指定字符串：　　　　[attr != "value"]
  4. 　　属性值以指定字符串开始：　　　　[attr ^= "value"]
  5. 　　属性值以指定字符串结束：　　　　[attr $= "value"]
  6. 　　属性值包含指定字符串：　　　　[attr *= "value"]
  7. 　　多属性筛选：　　　　　　　　[attr1 *= "value1"][attr2 = "value2"]

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

　　简单例子如下：

  1. <html>
  2. <head>
  3.     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  4.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  5.     <script>
  6.     $(function(){
  7.         $("#btn1").click(function(){
  8.             $('[id]').each(function(index, element) {
  9.                 alert($(this).html());
  10.             });
  11.         });
  12.         $("#btn2").click(function(){
  13.             $('button[id]').each(function(index, element) {
  14.                 alert($(this).html());
  15.             });
  16.         });
  17.         $("#btn3").click(function(){
  18.             $('[id $= "1"]').each(function(index, element) {
  19.                 alert($(this).html());
  20.             });
  21.         });
  22.         $("#btn4").click(function(){
  23.             $('button[id $= "1"]').each(function(index, element) {
  24.                 alert($(this).html());
  25.             });
  26.         });
  27.         $("#btn5").click(function(){
  28.             $('button[id][name]').each(function(index, element) {
  29.                 alert($(this).html());
  30.             });
  31.         });
  32.     });
  33.     </script>
  34. </head>
  35. <body>
  36. <button id='btn1'>click1</button>
  37. <button id='btn2'>click2</button>
  38. <button id='btn3'>click3</button>
  39. <button id='btn4'>click4</button>
  40. <button id='btn5' name='name5'>click5</button>
  41. <div>
  42.     <div id='div1'>div1</div>
  43.     <div id='div2'>div2</div>
  44. </div>
  45. </body>
  46. </html>

四、基本过滤器

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

  1. 　　:animated　　　　    当前执行动画的元素
  2. 　　:eq(index)　　　　    取出指定索引的元素（jQuery 对象是集合，索引从0开始）
  3. 　　:gt(index)　　　　　　取出索引大于指定值的元素
  4. 　　:lt(index)　　　　　　　　取出索引小于指定值的元素
  5. 　　:first 　　　　　 取出第一个元素，即索引为0的元素
  6. 　　:last　　　　　　取出最后一个元素，即索引为 size()-1 的元素
  7. 　　:even　　　　　　取出索引为偶数的元素
  8. 　　:odd　　　　　　取出索引为奇数的元素
  9. 　　:header　　　　　取出所有标题元素，如 h1,h2,h3 等
  10. 　　:root　　　　　　取出根元素
  11. 　　:not(selector)　　取出所有不匹配指定过滤器的元素　
  12. 　　:focus　　　　　　　　　　当前得到焦点的元素

五、子元素过滤器

  1. 　　:first-child　　　　　　　　是其父元素的第一个子元素
  2. 　　:last-child　　　　　　　　是其父元素的最后一个元素
  3. 　　:first-of-type　　　　　　　　是同辈同类元素中的第一个元素
  4. 　　:last-of-type　　　　　　　　是同辈同类元素中的最后一个元素
  5. 　　:only-child　　　　　　　　是其父元素的唯一子元素
  6. 　　:only-of-type　　　　　　在同辈元素中，没有同类元素的元素，即此元素是同辈元素中唯一的该类型元素
  7. 　　:nth-child(index)　　　　其父元素的第 index 元素，该 index 从 1 开始
  8. 　　:nth-last-child(index)　　　　其父元素的倒数第 index 元素，该 index 从 1 开始
  9. 　　:nth-of-type(index)　　　　　　是同辈的同类元素中的第 index 元素，该 index 从 1 开始
  10. 　　:nth-last-of-type(index)　　　　是同辈的同类元素中倒数第 index 元素，该 index 从 1 开始

六、内容过滤器

  1. 　　:contains(text)　　　　　　包含指定字符串的元素
  2. 　　:empty　　　　　　　　　　没有子元素的元素
  3. 　　:has(selector)　　　　　　 包含至少一个指定的选择器匹配的元素
  4. 　　:parent　　　　　　　　　　包含至少一个子节点的（一个元素或文本）元素

七、表单过滤器

  1. 　　:input
  2. 　　:text
  3. 　　:password
  4. 　　:button
  5. 　　:reset
  6. 　　:submit
  7. 　　:radio
  8. 　　:checkbox
  9. 　　:checked
  10. 　　:selected
  11. 　　:file
  12. 　　:image
  13. 　　:focus
  14. 　　:enabled
  15. 　　:disabled

八、可见性过滤器

  1. 　　:hidden　　　　当前隐藏的元素
  2. 　　: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. 关于《加密与解密》的读后感----对dump脱壳的一点思考

    偶然翻了一下手机日历,原来今天是夏至啊,时间过的真快.ISCC的比赛已经持续了2个多月了,我也跟着比赛的那些题目学了2个月.......虽然过程很辛苦,但感觉还是很幸运的,能在大三的时候遇到ISCC, ...

  2. Swift 函数做参数和闭包做参数的一个细节差别

    函数作参数,示例为传入一个String和一个添加前缀的函数,返回一个添加完前缀的String: func demo(str:String,addPrefix:(String)->String)- ...

  3. Windows_7_休眠按钮没有了_如何找回？

    1. 在运行中输入:   powercfg -h on或者在命令行下输入:   powercfg.exe /hibernate on注意:执行这个命令需要管理员权限. “休眠”回来了   2. 还是没 ...

  4. 使用IDEA进行远程调试

    虽然很早以前就只有Eclipse和IDEA都支持远程调试功能的,但是基本没怎么使用过,今天因为紧急处理一个问题,而本地环境搭建起来比较麻烦,所以就使用了IDEA的远程调试功能.因此写一篇文章记录一下. ...

  5. HDU 1698 Just a Hook（线段树/区间更新）

    题目链接: 传送门 Minimum Inversion Number Time Limit: 1000MS     Memory Limit: 32768 K Description In the g ...

  6. CF 435B Pasha Maximizes（贪心）

    题目链接: [传送门][1] Pasha Maximizes time limit per test:1 second     memory limit per test:256 megabytes ...

  7. java语言：Linux与JVM的内存关系分

    在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m.从表面上,物理内存应该 ...

  8. HDU1024Max Sum Plus Plus（M段最大和）

    题意:求一个数组中 M 段的 最大和 没看明白怎么搞得 抽空来看,写的不赖 #include <iostream> #include <cstring> #include &l ...

  9. 利用 Django REST framework 编写 RESTful API

    利用 Django REST framework 编写 RESTful API Updateat 2015/12/3: 增加 filter 最近在玩 Django,不得不说 rest_framewor ...

  10. gnuplot使用1

    安装之后,迫切需要运行一个程序来看看,首先要找到软件默认的使用路径: 输入 show loadpath命令就会显示默认查找的几个路径, loadpath is loadpath from GNUPLO ...