阅读指导：本文参考最新的1.10.2版写成，针对用得比较多的1.4版，所有1.5版之后的函数都会注明哪一版新增。对于熟悉1.4版想学1.10版的请直接搜索"新增"。

JQuery是一个JavaScript库，它提供了很多有用的API,简化了我们使用JavaScript的方式。

JQuery由JQuery.com提供，你可以在该网站上下到最新的

有两种类型的JQuery，一种是未压缩的，便于你学习其源代码，另一种是压缩的，不易阅读但是更节约流量。

现在有两个版本的JQuery，V1.x支持ie6,7,8，V2.x开始不支持ie6,7,8了。

现在1.x的最新版本是1.10.2

如果你不愿意在自己的计算机上存放JQuery库，你可以连接到以下的一些CDN.

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>

使用CDN的好处，用户已经访问了包含这些资源的网站的话，在访问你的网站时就不用重复下载资源了。

本文主要介绍JQuery选择器，这可以说是JQuery的亮点之一，JQuery提供了有丰富功能的选择器，可以方便的获取页面中的元素。

使用选择器注意事项

1.选择器对元素，属性，值的大小是不敏感的

2.对于!"#$%&'()*+,./:;<=>?@[\]^`{|}~等特殊符号，需要用//转义

基础选择器

1.选择所有的元素

$("*")

2.根据元素Id选择

$("#myid")

注意一个页面的id都是唯一的，这个只能选择第一个match的

3.根据元素的名称选择

$("div")

4.根据元素的css类选择

$(".myclass")

注意：一个元素可以有多个css类，只要其中一个匹配就会被选择

5.复合选择器

做多种选择器的和，比如$("#myid,div,.myclass)相当于$("#myid").add("div").add(".myclass")

层次选择器

1.选择选择器1中所选元素的所有符合选择器2条件的直接子节点

$("body > div")

2.选择选择器1中所选元素的所有符合选择器2条件的所有子孙节点

$("body div")

3.选择选择器1中所选元素后面的一个符合选择器2条件的节点，选择器2所选元素和选择器1所选元素要在同一节点下。

$("#myid + li")

4.选择选择器1中所选元素后面的所有符合选择器2条件的节点，选择器2所选元素和选择器1所选元素要在同一节点下。

$("#myid ~ li")

表单选择器

用表单选择器要注意两点，一点是最好和input一起用，比如$("input:submit")。另一点是大多数选择器都不属于css规范，无法用其优化功能。最好是先做别的选择，再用表单选择器过滤。

1.匹配所有按钮

$(":button")

匹配所有的<button>mybutton</button>和<input type="button" value="mybutton" />

2.匹配提交按钮

$(":submit")

匹配所有的<button>mybutton</button>，<button type="submit">mybutton</button>和<input type="submit" value="提交" />

3.匹配所有文本

$(":text")

匹配所有的<input type="text" >

注意：从版本1.5.2开始，<input>也能被匹配。

4.匹配当前焦点

$(":focus")

这是1.6版新增的，能获取当前获得焦点的元素

5.获取被选择状态的元素

$(":checked")

注意:它适用于checkbox,radio button和select列表。

6.其他的一些，很容易理解的。

$(":selected")

$(":reset")

$(":password")

$(":input")

$(":image")

$(":file")

$(":enabled")

$(":disabled")

属性选择器

1.有某属性

$("[attribute]")

如$("div[id]")选择有id属性的div

2.属性为某值

$("[attribute='value']")

3.属性为某值或‘某值-’打头的值

$("[attribute|='value']")

4.属性的值中含有某值

$("[attribute*='value']")

5.属性含有某值

$("[attribute~='value']")

注意：一个属性可以有多个值，每个值之间用空格分开，这个选择器正好能处理多个值中包含给定值就被选择的情况

6.属性的值以某值打头

$("[attribute^='value']")

7.属性的值以某值结尾

$("[attribute$='value']")

8.不含某属性或有该属性但是属性不为某值

$("[attribute!='value']")

注意：该选择器不属于css规范，无法用其优化功能。最好是先做别的选择，再用该选择器过滤。

9.复合属性选择器

$("[attributeFilter1][attributeFilter2][attributeFilterN]")

基本过滤器

1.获取当前选择器中给定位置的元素,从0开始计数

$("selector:first")

$("selector:last")

$("selector:even")偶数位

$("selector:odd")奇数位

$("selector:eq(index)")等于给定索引值的元素

$("selector:gt(index)")所有大于给定索引值的元素

$("selector:lt(index)")所有小于给定索引值的元素

注意:从1.8版开始，给定索引值可以为负数，表示从尾部开始索引。

2.去除与给定选择器匹配的元素

$(":not(selector)")

最好用.not()函数

3.选择h1,h2等header标签

$(":header")

4.选择给定语言的元素

1.9版新增

对于<div lang="en-us"></div>

用$("div:lang(en)")可以匹配所有lang属性为en或en-打头的元素

5.获取根元素

1.9版新增

$(":root")获取<html>元素

6.获取文档URI所指向的元素。

比如有个URI是http://example.com/#foo,$("p.target")会获取<p id="foo">元素

7.获取当前正在动画的对象

$(":animated")

内容过滤器

1.匹配包含给定文本的元素

$(":contains(text)")

2.匹配所有不包含子元素或者文本的空元素

$(":empty")

3.匹配所有包含子元素或者文本的元素

$(":parent")

注意：所有的p都认为非空

4.匹配含有选择器所匹配的元素的元素.

$(":has(selector)")

注意:被匹配的元素可以是其孙子元素

子元素过滤器

1.获取在父元素中给定位置的元素，从1开始计数，对每个父元素分别计数。

需要注意的是如果选择器中的元素有n个在一个父元素中，但是这n个并不在父元素中的给定位置处，这样这n个元素都不会被选择。

$(":first-child")

$(":last-child")

$(":nth-child(index/even/odd/equation)")

equation的写法如:

$(":nth-child(3n+2)")

$(":nth-last-child(index/even/odd/equation)")  1.9版新增

2.选择在其父元素中是唯一元素的元素

$(":only-child")

3.获取在父元素中给定位置的元素，从1开始计数，对每个父元素分别计数。

针对原有的:nth-child等选择器对位置的判断是针对父元素中所有的元素的情况，1.9版新增了一些选择器，其对位置的判断变为针对父元素中所有在选择器中的元素来计数。

$(":first-of-type")

$(":last-of-type")

$(":nth-of-type(index/even/odd/equation)")

$(":nth-last-of-type(index/even/odd/equation)")

4.选择在选择器中是父元素唯一元素的元素

$(":only-of-type")

这个也是1.9版新增的

可见性过滤器

只有两个

$(":hidden")和$(":visible")

下面这些元素被认为是hidden的：

1.CSS的display属性为none

2.type="hidden"

3.元素的长或宽被设置为0

4.祖先为hidden，则元素为hidden

注意：不在document中的元素无法判断是否可见。

visibility:hidden或opacity:0被认为是可见的，因为它们仍会消耗布局空间。

JQuery知识快览之一—选择器的更多相关文章

  1. JQuery知识快览之三—JQuery对象集

    本文讲述JQuery对象集的各相关知识 获取JQuery对象集 JQuery对象,和DOM对象是两个不同的东西,JQuery对象可以是DOM对象的封装,但是JQuery对象不只是DOM对象的封装,它还 ...

  2. JQuery知识快览之二—事件

    事件是脚本语言的核心.本文将为大家介绍JQuery支持的一些事件和如何自定义事件 JQuery内置事件 1.Document加载事件 JQuery提供了ready,load,unload三个Docum ...

  3. JQuery知识快览之五—操作属性和结构

    前文提到JQuery提供了丰富的内置方法来操作对象集,本文主要介绍JQuery中的那些内置操作属性和DOM结构的方法. prop还是attr? 从JQuery1.6版开始,新增了prop方法来获取和设 ...

  4. JQuery知识快览之四—样式

    前面我们获取了对象集,本文介绍怎么控制对象集的样式 基本概念 在一个html页面中,我们有两种方式来控制一个对象的样式,用HTML attribute控制,或者用CSS类来控制,这两种方法虽然都能控制 ...

  5. 最全的jQuery知识汇总

    本帖最后由 断天涯大虾 于 2016-12-26 10:22 编辑<ignore_js_op> jQuery是什么? jQuery是javascript编写一个可重用的JavaScript ...

  6. jQuery 知识体系

    jQuery基础知识一 jQuery之知识二-选择器 [jQuery知识]jQuery之知识三-过滤器 [jQuery知识]jQuery之知识四-DOM和CSS操作 [jQuery知识]jQuery之 ...

  7. 常用jQuery知识

    什么是jQuery jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML do ...

  8. jQuery知识重构

    jQuery知识重构 目录: 一.入口函数 1          $(document).ready(function(){}); 2          $(function(){}); jQuery ...

  9. jQuery知识梳理20190817

    目录 jQuery知识梳理20190817 1. jQuery的特征 2. jQuery的两把利器 2.1 jQuery核心函数 2.2 jQuery核心对象 3. jQuery核心函数详解 4. j ...

随机推荐

  1. SQLSERVER：Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This may have occurred because all pooled connections were in use and max pool size was reached.

    背景: 在最近开发中遇到一个问题,对一个数据库进行操作时,我采用64个并行的任务每个任务保证一个数据库连接对象:但是每个任务内部均包含有24个文件需要读取,在读取文件之后,我们需要快速将这24个文件批 ...

  2. 事件监听addEventListener()和removeEventListener() ---------1

    一直想写一个原生事件监听的记录,方便以后看,不愿意写主要是事件监听的单词太长,记起来好难记每次都要查,这次把知道的写完了,来这里查好了,以后要是理解的更透彻了,就再补全好了 首先,DOM0级事件和DO ...

  3. stucts2 基础程序

    参考<Struts2+Hibernate+Spring> index.jsp

  4. java程序运行时内存分配详解 （转）

    转自:http://www.tuicool.com/articles/uU77v2 一.  基本概念 每运行一个java程序会产生一个java进程,每个java进程可能包含一个或者多个线程,每一个Ja ...

  5. Hashing function

    Hashing function (散列函式) 在网页应用中被广泛采用,从数码签署.错误检测.登入验证.到压缩储存空间,由于它的原理比较复杂,很多人把它跟加密函式混淆,对于如何运用hash funct ...

  6. Kafka集群模式部署

    环境:kafka 0.8.1.1 基本概念 Kafka维护按类区分的消息,称为主题(topic) 生产者(producer)向kafka的主题发布消息 消费者(consumer)向主题注册,并且接收发 ...

  7. Hbase HRegionServer启动后自动关闭

    突然发现HBASE无法使用了. 然后看到在分布式的情况下,节点上的HRegionServer启动后自动关闭. 同步时间就能解决这个问题. 网上同步时间 1.  安装ntpdate工具 sudo apt ...

  8. Struts2中<jsp:forward page="xxx.action"></jsp:forward>失效

    问题:在Struts2中<jsp:forward page="xxx.action"></jsp:forward>失效了,不但调转不过去还报404错误.不知 ...

  9. iphone设置铃声

    iphone同步铃声 1.下载itunes 2.打开itunes.文件->将文件添加到资料库...选择一首歌曲加进去 3.右击新加的歌曲,显示简介->选项.调整结束开始时间.不得超过40秒 ...

  10. 鸟哥的linux私房菜学习记录之bash

    当你对计算机输入一个指令时,bash会将指令传送给核心kernel,核心再去调用相关的程序,启动硬件. 如果直接让用户操作操作系统,可能会造成系统的崩溃,所以操作系统通过应用程序来让用户操作系统即壳程 ...