JavaScript框架：jQuery选择器精通教程

虽然jQuery上手简单，相比于其他库学习起来较为简单，但是要全面掌握，却不轻松。因为它涉及到网页开发的方方面面，提供的方法和内部变化有上千种之多。初学者常常感到，入门很方便，提高很困难。本文的目标是将jQuery选择器做一个系统的梳理，试图理清jQuery的设计思想，找出学习的脉络，使读者从入门到精通。
　　jQuery是什么

　　简单的说，jQuery是一个JavaScript框架，它的宗旨是：写更少的代码，做更多的事情。对于Web开发人员而言，jQuery是一个功能强大的JavaScript库，能更加快速开发相关应用，例如AJAX交互，JavaScript动画效果等。对于Web设计师而言，jQuery封装了Javascript源码细节，实现了与HTML标签的有效分离，便于设计师更加专注于Web页面设计效果。基于此，网页的用户体验大大增强，包括网页的交互性，视觉效果等等。

　　jQuery的核心设计思想是：选择某个网页元素，然后对其进行某种操作。那么如何选择、定位某个网页元素呢?对于JavaScript开发人员而言，通常的一种手段是document.getElementById()。而在jQuery语法中，使用的是美元符号“$”，等价的选择表达式写法为：

var someElement = $("#myId");
　　jQuery之所以称之为“jQuery”，主要就是因为它强大的选择器，也就是Javascript Query的意思。下面，我们具体介绍jQuery选择器相关的设计思想：

　　一、jQuery基本选择器

　　前面提到，选择器是jQuery的特色。jQuery的基本选择器主要分为tb以下五种类型：

　　1. $(“#myId”) // 选择ID为myId的网页元素

　　2. $(“标签名”) // 例如$(“div”)获取的就是HTML文档中的所有的div元素的jQuery对象集合

　　3. $(“.myClass”) // 获取的是HTML文档中所有的class为“myClass”的元素集合

　　4. $(“*”) // 这个获取的是HTML文档中的所有的元素

　　5. $(“selector1,selector2,selector3…selectorN “) // 这种选择器叫做组选择器。例如：$(“span,#two”)

　　// 选取所有的span标签元素和id=two的元素。

　　二、jQuery层次选择器

　　无论何时，通过jQuery选择器获取的jQuery对象任何时候都是一组元素。jQuery的层次选择器主要分为以下两种类型：

　　1. $(“ancestor descendant”)：选取parent元素后所有的child元素。ancestor的中文意思是“祖先”，descendant的中文意思是“后代”。例如：

　　$(“body div”) 选取body元素下所有的div元素。

　　$(“div#test div”) 选取id为“test”的div所包含的所有的div子元素

　　2. $(“parent > child”)：选取parent元素后所有的第一个child元素。例如：

　　$(“body > div”) 选取body元素下所有的第一级div元素。

　　$(“div#test > div”) 选取id为“test”的div所包含的所有的第一级div子元素
　三、jQuery过滤选择器

　　jQuery最基本过滤选择器包括：

　　1. :first // 选取第一个元素。$(“div:first”)选取所有div元素中的第一个div元素

　　2. :last // 选取最后一个元素。$(“div:last”)选取所有div元素中的最后一个div元素

　　3. :even // 选取索引是偶数的所有元素。$(“input:even”)选取索引是偶数的input元素。

　　4. :odd // 选取索引是奇数的所有元素。$(“input:odd”)选取索引是奇数的input元素。

　　5. :eq(index) // 选取索引等于index的元素。$(“input:eq(1)”)选取索引等于1的input元素。

　　6. :gt(index) // 选取索引大于index的元素。$(“input:gt(1)”)选取索引大于1的input元素。

　　7. :lt(index) // 选取索引小于index的元素。$(“input:lt(3)”)选取索引小于3的input元素。

　　jQuery内容过滤选择器，可以轻松地对DOM文档中的文本内容进行筛选，从而准确地选取我们所需要的元素。

　　1. :contains(text) // 选取含有文本内容为“text”元素。$(“div:contains(‘你’)”)选取含有文本“你”的div元素。

　　2. :empty // 选取不包含子元素和文本的空元素。$(“div:empty”)选取不包含子元素(包括文本元素)的div空元素。

　　3. :parent // 选取含有子元素或者文本的元素。$(“div:parent”)选取拥有子元素(包括文本元素)的div元素。

　　可以看见，jQuery内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。

　　jQuery可见性过滤选择器的用法如下：

　　1. :hidden // 选取所有不可见的元素。$(“:hidden”)选取网页中所有不可见的元素。

　　2. :visible // 选取所有可见元素。$(“div:visible”)选取所有可见的div元素。

　　jQuery属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

　　1. [attribute] // 选择拥有此属性的元素。$(“div[id]“)选取拥有属性id的元素。

　　2. [attribute=value] // 选取属性值为value的元素。$(“div[name=test]“)选取属性name的值为“test”的div元素。

　　3. [attribute!value] // 选取属性值不等于value的元素。

　　4.[attribute^=value] // 选取属性的值以value开始的元素。

　　5. [attribute$=value] // 选取属性的值以value为结束的元素。

　　6. [attribute*=value] // 选取属性的值含有value的元素。

　　7. [selector1] [selector2] [selectorN] //复合属性选择器。$(“div[id][name*=test]“)选取拥有属性id，且属性name的值含有“test”的div元素

　　jQuery子元素过滤选择器的过滤规则相对于其它的选择器稍微有些复杂。

　　1. :nth-child(index/even/odd/equation) // 选取每个父元素下的第index个子元素或者奇偶元素。

　　2. :first-child // 选取每个父元素的第一个子元素

　　3. :last-child // 选取每个父元素的最后一个子元素

　　jQuery表单对象属性过滤选择器主要是对所选择的表单元素进行过滤，例如选择不可用的表单元素、被选中的下拉框、多选框等等。

　　1. :enabled // 选取所有可用的表单元素。$(“#form1 :enabled”)选取id为“form1”的表单内的所有可用元素。

　　2. :disabled // 选取所有不可用的表单元素。

　　3. :checked // 选取所有被选中的元素。$(“input:checked”)选取所有被选中的元素。

　　4. :selected // 选取所有被选中的选项元素。$(“select :selected”)选取所有被选中的选项元素(option)。

　　jQuery中引入了表单选择器，让我们能极其方便地获取到一个表单中的某个或某类型的元

补充：web前端 , JavaScript ,

上一个：JavaScript与.NET应用程序交互_实验1
下一个：jQuery绘图插件jCanvas 绘制窗口的技巧分享