jQuery选择器使用

0. 前言

这一周时间在公司做项目用到不少jquery的知识，从开始的烦到现在好像还有些喜欢，觉得有必要记录一些自己的感想。

对于我这种相对擅长写算法的人来讲，做前端是有些痛苦的，然而更痛苦的莫过于写javascript这种声称是弱类型语言的代码，之前我永远不知道javascript里一个变量他到底是个什么类型，只知道它是个var，它既是字符串也是数组也是函数也是对象，有一种我既是我，也是招式也是武器，是天也是地的感觉。

然而在我现在看来javascript更像是一种隐藏了自己类型的强类型语言，只是你不用声明它罢了，所以我觉得想要写好javascript，心中要一直对操作变量的类型、各个类型间能否转换以及表达式结果的预期类型做到心中有数才行。

1. jQuery简述

所以，对于jQuery，首先我要说的是jQuery对象的类型。jQuery对象都是一个包含了DOM对象的数组（jQuery对象的本质是数组)。

另外学习jQuery，心中还要有DOM树的概念，知道父节点，子节点，兄弟节点，以及后代节点等。

2. 基本jQuery选择器

jQuery的选择器$()就好比是一种构造函数，用以构造jQuery对象。

• $(“#mytable”)
  这个选择器返回一个包含了所有id=”mytable”的DOM对象的数组，也就是一个jQuery对象，一般而言id在全局是唯一的，这时候该jQuery对象的长度为1。其实id相同也是可以的，返回的对象是个长度为n的数组。

• $(“.myClass”)
  这个选择器返回所有包含class=”myClass”的DOM对象的数组——一个jQuery对象，同上。

• $(“div”)
  这个选择器返回DOM文档树中所有div标签节点。

这三个我认为是三个基本选择器，其他复杂的选择器可以由此三种再加上一些规则拼出来。总结起来：

• 1. 选择器$(“”)中双引号不能少
• 2. #表示ID， .表示CLASS， 字母开头表示标签名

3. 复杂jQuery选择器

直接上例子;

• $(“form input”)

  空格隔开的两个参数分别都是基本选择器，一个表示form标签元素，一个表示input标签元素，而空格表示了一种层级关系，即form元素下，其后代中的所有input元素。可以看成先选择form标签，再分别以form为根节点，寻找input标签元素，返回的是input元素集合。

• $(“form #myInput”)

  此例原理同上，先选择所有form标签元素，再以所有form元素为根节点，寻找id=myInput的所有节点，返回id=myInput 的元素集合

• $(“#myInput form”)
  此例依然同上，先选择id=myInput的元素，再以该结果为全集寻找form标签子集，返回form标签节点集合。

• $(“form > #myInput”)

  >表示的是子节点关系，两边的空格可要可不要，它表示先选择form标签节点，在选择这些form节点中子节点id=myInput的元素，返回的是id=myInput的元素集合。

还有类似$(“form + #myInput”) 和$(“form ~ #myInput”)的选择器，用的很少，就不说了，
对于复杂选择器而言，以上两种绝对够用了。

4. 属性选择器

上面的例子看懂了，其实看这些也就不难了：
$(“input[name=’myTag’]”)

在标签后面加[]表示属性，前面我们有$(“#hhh”)，表示所有id=hhh的元素集合，那我现在要选择input元素中所有id=hhh的元素怎么办呢？ 那就用$(“input[id=’hhh’]”)来表示就好。

5. jQuery还有一些过滤用的选择器，是以： 开头的，种类非常多，不建议去记，可以浏览下文档，用到的时候查文档即可

6. jQuery使用函数实现选择

写代码的时候很多时候并不喜欢上面那种，写的像绝对路径的那种选择器，限定的太死，缺少灵活性，特别是我们的代码通常是以函数为模块的。比如：

function fun(tag) //tag传入一个jQuery对象{    var t1=tag.find("#myInput"); //这里的find函数就有种前面讲的那个空格的意思，表示以tag选中的节点集合为根节点，寻找id=myInput的元素。    var t2=tag.find("div[name='hhh']");    var t3=tag.parent(); //tag的父节点集合    var t4=tag.prev(); //tag的前一个兄弟节点}

个人比较喜欢用那个find()和parent()函数，这些函数返回的都是jQuery对象。

7. 将DOM对象转换为jQuery对象

直接上代码讲解：

function fun(tag){    //tag为一个jQuery对象，表示的是一个DOM对象数组。敲黑板：所有的jQuery对象本质都可以看成DOM数组，哪怕选择器选出的元素只有一个，也是长度为1的数组。    //这里假设tag选中的是一组div标签，现在我想用jQuery的html()函数，分别取出各个div标签中的文本。    //一种写法是：    for(var i=0;i<tag.length;++i)    {        var content=tag[i].html();        ...    }    //这种写法会报错：对象没有html方法    //因为html()函数是jQuery对象才有的，而tag[i]返回的是一个DOM对象，记得我们前面说过吗？jQuery对象是DOM对象数组。    //所以可以这样写    for(var i=0;i<tag.length;++i)    {        var content=$(tag[i]).html();        ...        //敲黑板：这里$()里面没有引号，没有引号，没有引号！表示的是将DOM对象转化为jQuery对象。    }}

8. 后记

这些差不多是jQuery选择器使用的基本内容了吧，jQuery的强大还来自于他很多的插件和函数，使我们解放双手，抛开基本的javascript也能够写出好的代码，这些以后有机会再说吧。