WEB前端开发

接《像写css选择器一样写jQuery选择器（二）》

五、Jquery的子元素选择器

1. :first-child ：匹配每个父元素的第一个子元素，相当于E:nth-child(0)，例如：$(“ul li:first-child”)；
2. :last-child ：匹配每个父元素的最后一个子元素，例如：$(“ul li: last -child”)；
3. :nth-child(index/even/odd/equation)：匹配每一个父元素的第N个子或奇偶元素，例如：$(“ul li:nth-child(2)”)；
4. nly-child ：如果某个元素是父元素中唯一的子元素，那将会被匹配$(“ul li:only-child”)；

六、子元素选择器和过滤性选择器的一些区别

:first-child和:first：

:first只匹配一个元素，而:first-child将为每个父元素匹配一个子元素，所以:first-child匹配出来的是一个集合当然也有可能只匹配一个元素，而:first永远只能匹配到一个元素。

:last-child和:last的区别道理也是一样的； 继续阅读：像写css选择器一样写jQuery选择器（三）【jQuery入门六】»

接《像写css选择器一样写jQuery选择器（一）》

四：简单的过滤选择器

1. :animated：匹配所有正在执行动画效果的元素集合；
2. :eq(index)：匹配索引为 index 的一个元素，例如：$(“div:eq(0)”)//第一个div；
3. :even：匹配索引为偶数（双数）的元素集合，例如：$(“div:even”)；
4. dd：匹配索引为奇数（单数）的元素集合，例如：$(“div:odd”)；
5. :first：匹配找到的第一个元素，等价于:eq(0)，例如：$(“div:first”)；
6. :gt(index) ：匹配索引大于 index 的 元素集合，例如：$(“div:gt(0)”)//除了第一个div外的所以div；
7. :lt(index)：匹配索引小于于 index 的 元素集合，例如：$(“div:lt(0)”)；
8. :header：匹配h1-h6的所有 元素集合；
9. :last：匹配找到的最后一个元素，例如：$(“div:last”)//最后一个div；
10. :not(selector)：去除所有与给定选择器匹配的元素，例如：$(“input:not(:checked)”)//除了被选中的所有input；

示例代码：

jQuery选择器有很大一部分的写法和css选择器的写法非常相识，

我们先来看看css选择器的写法;这些对于你应该不是很陌生，呵呵。那么我们开始学习jQuery选择器。

一、简单的jQuery选择器

首先看看最简单的jQuery选择器,再次说明jQuery选择器获取的DOM元素返回的是一个数组，及时他只返回一个元素：

查看上一篇jQuery选择器入门【jQuery入门三】中的$(”div”)：标签名，$(”#nickName”)：ID属性，$(”.user”)：样式名及例子，

1. $(”div”)：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合，$(”.user”)：样式名：
2. $(”#nickName”)：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；
3. $(”.user”)：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；

这里再补充1个通配符，即*：

$(“*”):通配符，取得DOM文档中所有节点元素；例如：$(“*”).css(“color”,”#FF3300″);则整个文档的文字颜色都会显示红色。至于.css(“color”,”#FF3300″)给元素加上color:#FF3300的css样式，我们会在后面再给大家详细解释。

大家可以看看这个我们写的css选择器非常的相似，下面的例子也是一样，这样我们就非常容易理解jQuery选择器的含义了

二、jQuery的组合选择器： 继续阅读：像写css选择器一样写jQuery选择器（一）【jQuery入门四】»

jQuery选择器是我们学jQuery的真正的开始也是我们必须做的第一件事情，jQuery选择能让我们取得我们想要的几乎所有的页面DOM对象（如果你不知道什么是DOM元素，google一下“什么是DOM”）。确切的说我们获取的应该是jQuery对象，这在上面的章节中我已经说过两者的区别和转换。

大家知道javascript变成中很大一块是对DOM的操作，当我们获取了DOM元素后，我们就可以对改元素绑定事件，增删属性等操作，通过这些操作可以实现很多绚丽的页面效果和富因特网的应用，但是我们在做这些事情之前首相要通过DOM元素的钩子找到该DOM元素，javascript是非常灵活的语言，查找DOM元素和DOM元素的钩子方法非常多，再者由于各个浏览器对js dom属性解析的少许区别，也给我们带来了不少麻烦。jQuery的选择器就解决了这些问题，而且功能非常强大。

jQuery选择器函数–$()

大家可以去很多jQuery程序，绝大部分的函数都是从$()开始的，$()函数简化了javascript获取DOM元素的复杂性，消除了使用for循环获取一组DOM元素，所以$()函数获取的DOM元素其实是一个DOM元素组成的数组。

简单的$()

这些是最常用的几个例子：

1. $(“div”)：标签名，取得DOM文档中所有div标签的元素，返回的是一个元素集合；
2. $(“#nickName”)：ID属性，取得DOM文档中ID为nickName的一个元素（ps：一个文档中ID是唯一的），返回的是一个元素；
3. $(“.user”)：样式名，取得DOM文档中class为user的所有元素，返回的是一个元素集合；

我们来看一个简单的例子：

继续阅读：jQuery选择器入门【jQuery入门三】»

jQuery对象和DOM对象；这是我第一个碰到的问题。

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法，但是不能使用DOM的方法；例如：

$(“#img”).attr(“src”,”test.jpg”); 这里的$(“#img”)就是获取jQuery对象；

DOM对象就是Javascript固有的一些对象操作。DOM对象能使用Javascript固有的方法，但是不能使用jQuery里的方法。例如：

document.getElementById(“img”).src=”test.jpg”;这里的document.getElementById(“img”)就是DOM对象；

$(“#img”).attr(“src”,”test.jpg”); 和document.getElementById(“img”).src=”test.jpg”;是等价的，是正确的，但是$(“#img”).src=”test.jpg”;或者document.getElementById(“img”).attr(“src”,”test.jpg”); 都是错误的。

再说一个例子：就是this，我在写jQuery的时候经常这样写：

this.attr(“src”,”test.jpg”);

可是就是出错。其实this是DOM对象，而

.attr(“src”,”test.jpg”)

是jQuery方法，所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象，例如：

$(this).attr(“src”,”test.jpg”);

1.DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象) 继续阅读：jQuery对象和DOM对象【jQuery入门二】»

昨天收到了cssrain的赠书《锋利的jQuery》，看了一个章节，非常不错，这里先推荐一下！

今天开始我将博客的重点放在jQuery上了，重新开始学习jQuery，并将重新学到的东西和大家分享，有不对或不妥的地方希望大家能毫无保留的留言指出，大家一起学习，一起进步。

至于什么是jQuery,jQuery的优缺点，jQuery和其他javascript库的对比我就不说了，网上已经有很多了，我这里只说一些可能更关心的一些东西。

我没js基础，能学jQuery吗？

能！很多人说jQuery非常容易上手，不懂js也能学的很好，是的，但是我相信如果你懂得js能更好的学习jQuery;

有没有支持jQuery语法和语法提示的编辑器或工具呢？

有，而且很多。这里推荐最常用的几款：

1.aptana

官方下载：http://www.aptana.com/

aptana最强大的就是支持js及各个有名的js框架的语法提示，当然包括jQuery，看一些关于aptana的使用，

Aptana使用入门一（中文）

web开发利器Aptana studio 1.2(下载，破解，汉化)

aptana要支持jQuery语法提示只要在References窗口下的Global References下勾选jQuery就可以了，如图：

继续阅读：学jQuery前的准备【jQuery入门一】»