一、基本选择器

  标签选择器:  $('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. 研究dotnet动态语言IronPython(对应Java的Groovy)

    Java的标配动态语言Groovy,两者搭配可以说是完美!大规模运用的项目,如:Jenkins,通过动态语言可以弥补先天系统缺陷的bug,再者就是加强自己的业务逻辑等. 那么换过dotnet上,对应的 ...

  2. Visual Studio 2015出现Cannot find one or more components. Please reinstall the application.的问题解决

    cd C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE devenv.exe /resetuserdata devenv. ...

  3. 再次深入探索datasource问题?

    datasource现在几乎每个web框架都会有集成,但是对于数据源的设计原理以及应用上,很少进行深入的研究:实际上数据源也是web框架的核心之一了解一下其内涵还是非常重要的. 数据源(Data So ...

  4. 加州大学伯克利分校Stat2.2x Probability 概率初步学习笔记: Section 4 The Central Limit Theorem

    Stat2.2x Probability(概率)课程由加州大学伯克利分校(University of California, Berkeley)于2014年在edX平台讲授. PDF笔记下载(Acad ...

  5. POJ 3468 A Simple Problem with Integers(线段树/区间更新)

    题目链接: 传送门 A Simple Problem with Integers Time Limit: 5000MS     Memory Limit: 131072K Description Yo ...

  6. 使用PM控制台 查找和安装一个 NuGet Package

    1. Get-Package -ListAvailable -Filter elmah -ListAvailable获取所有可用的package,-Filter 关键字过滤 2.  Install-P ...

  7. 机器学习实战------利用logistics回归预测病马死亡率

    大家好久不见,实战部分一直托更,很不好意思.本文实验数据与代码来自机器学习实战这本书,倾删. 一:前期代码准备 1.1数据预处理 还是一样,设置两个数组,前两个作为特征值,后一个作为标签.当然这是简单 ...

  8. JavaWeb---总结(五)Http协议

    一.什么是HTTP协议 HTTP是hypertext transfer protocol(超文本传输协议)的简写,它是TCP/IP协议的一个应用层协议,用于定义WEB浏览器与WEB服务器之间交换数据的 ...

  9. Mysql数据库基本操作 (一)

    1.使用mysql数据库的必备要素 a. 安装MySQL服务端 b. 安装MySQL客户端 c. [客户端]连接[服务端] d. [客户端]发送命令给[服务端MySQL]服务的接受命令并执行相应操作( ...

  10. Python获取文件名

    本文实例讲述了python实现从URL地址提取文件名的方法.分享给大家供大家参考.具体分析如下: 如:地址为 http://www.jb51.net/images/logo.gif 要想从该地址提取l ...