跟着Jquery API学Jquery之一 选择器

Jquery选择器是最基本的操作了，当我们用原生的javascript的时候，我们为了选择一个对象不得不花费九头二虎之力，有了Jquery的选择器，吃饭饭饭香，身体倍棒……1.基本我们知道jquery最常用的就是选择器了，我们看一下jqueryAPI中的选择器—基本中有5种情况class,id,element,*,还有一个多选择器，这里我们想一下css样式的写法css样式也有几种情况：1.类样式2.id样式3.标签样式，1.如果有一个aa的类，那么我们定义aa的样式就要写成.aa{}2.如果有一个bb的id，那么我们定义bb的样式就要写成#bb{}3.如果有标签div/div,那么我们定义的样式就写成div{}4.如果我们要定义所有的标签样式，那我们就写成*{}（当然这样简写不太好）5.如果我们要定义多个标签之类的就用分号来分开比如.aa,#bb,div{}就定义了class为aa，id为bb，标签为div的样式了。我们看到上面5个如果，在和jquery的5个基本的选择器对比一下1.如果我们要选择一个aa的类就写成$(“.aa”)2.如果我们要选择一个bb的id就写成$(“#bb”)3.如果我们要选择div的标签就写成$(“div”)4.如果我们要选择所有就写成$(“*”)5.如果我们要选择多个对象就写成$(“.aa,#bb,div”)对比一下，发现基本的选择器完全是按在css的语法在操作，是不是很容易呢2层次我们现在知道了上面5个选择器的写法之后，现在我们来考虑如果对层次做选择器，先想一下什么是层次，其实说的就是HTML的DOM结构一层一层的，或者说XML的结构层次那我们就打开jquery的Api，发现有4个关于层次的选择器。归纳一下就是a空格b，ab，a+b，a~b当然我这里只是为了少打几个字而已，比如有如下的一个结构divdivclass=bbspan1spanspan2span/divspan3spandivclass=”cc”/divspan4span/div1.我们现在想选择id为aa节点下所有的span节点，就用$(“#aaspan”)2.我们现在想选择id为aa节点下第一层的span就是span中文本为3，4的两个，就用$(“#aaspan”)3.我们现在想得到跟在class为bb后的那个span就是span中文本为3的那个，就用$(“.bb+span”)4.现在我们想得到class为bb后所有的span就用$(“.bb~span”)总结一下：第一个的写法还是css样式的写法一样用空格表示节点下的元素第二个用来表示子节点，和空格不同的是它只作用在第一层第三个第四个都是用来表示跟随节点，只不过不同的是用+号表示紧接着的用~表示所有跟随的我们是需要记住(空格+~)四个符号就可以了3简单我们知道了基本的选择器和层次的选择器，有时候我们选择出的是多个比如ulliid=’aa’1/lili2/lili3/lili4/li/ul我们想得到ulli的第一个（first），最后一个（last），基数行（odd），偶数行（even）匹配第三个（eq（2）），匹配大于2行（gt（1）），匹配小于第三行（lt（2）），这里说了7个那么我们要怎么来写这个选择器呢，比如匹配第一个$(“ulli:first”)，匹配第三个$(“ulli:eq(2)”),其他的就不写了这里我们想一下css中a链接的几种样式的的写法a：hovera:link……是不是一样呢好了这里我们看了7种，在看看api还有3种是什么呢，1:not去除所有与给定选择器匹配的元素语法一样$(“ulli:not(#aa)”)意思是去掉在ulli里面的含有id为aa的元素元素我们用$(“ulli”)能够得到4个li用$(“ulli:not(#aa)”)就去掉了第一个li只得到了三个2:header只是用来选择h1h2h3……这样的标题3:animated匹配执行动画的元素还是总结一下，上面的这几个其实就是对已经选择出来的在一次的做筛选。建立在基础和层次上面。4文本可见性继续往下看api，文本中有4个函数，当然功能还是对已经选择出来的内容做再次的筛选上面是对节点的筛选，现在我们要对内容筛选1divaxxiu/a/div2divxxiuzhang/div3divzhang/div4div/div51.包含指定文本$(div:contains(xxiu))我们希望我们所选择的div的文本中含有xxiu这个字符串2.匹配空文本$(div:empty)第四个div节点下什么都没有，就匹配它了3.匹配含有某个节点的元素匹配含有a节点的div$(“div:has(a)”)4.匹配不为空文本的和2刚好相反$(“div:parent”)就匹配了前三个div总结一下文本匹配主要是做了文本（1）和节点匹配（3），和匹配无文本或节点（2）匹配有文本节点（4），两句话：有没有文本或节点，有什么文本和节点然后我们在看一下可见性，可见性很容易理解就两种情况可见:hidden选择可见节点或不可见:visible选择不可见节点，没什么好说的5属性选择器我们先看看最基本的属性选择器divid=”aa”name=”zhang”zhang/divdivname=”zhangxxiu”asdf/divdivid=”bb”name=”xxiu”xxiu/div如上面的节点，我们想选择含有id的节点，我们如果用以前的方法要怎么做呢。用多选择方式$(“#aa,#bb”)得到了我们想要的，但是如果有N个，那不是要跟很长吗，我们都是很懒的，于是就有了属性选择器$(“div[id]”)就得到了我们想要的结果，对name做选择$(“div[name]”)但是我们只想得到name为xxiu的那我们就用$(“div[name=’zhang’]”)得到不为zhang的$(“div[name！=’zhang’]”)，得到以zh开始的$(“div[name^=’zh’]”)以xxiu结尾的$(“div[name$=’zhang’]”),包含ang的$(“div[name*=’ang’]”)或者是有id且包含xxiu的$(“div[id][name*=’xxiu’]”)好，看了上面一对东西，肯定是有点晕了，总结一下1有什么[id]等于什么[id=’aa’]不等于什么[id!=’aa’]2以什么开始^=以什么结束$=匹配什么*=(完全是正则表达式的语法吗)3多属性选择$(“div[id][name*=’xxiu’]”)6子元素1匹配子元素中的第一个$(ulli:first-child)最后一个$(ulli:last-child)2匹配在子元素中是唯一的$(ulli:only-child)3匹配对于的元素$(ulli:nth-child(2))和$(“ulli:eq(1)”)一样，前者是从1开始计数，后者是从0开始计数7表单看看就知道是input中几种表单$(“:text”)得到文本表单$(“:checkbox”)得到复选表单等等看看API就知道是怎么个回事了我们用前面的选择方式可以这样写$(“input[type=’text’]”)但是少打几个字总比多大几个要好，$(“:text”)这样写是不是清爽的多呢8表单属性1可用enabled和不可用disabled找出2被选中checked和选择selected好到这里所有的API都过了一遍，对选择器基本上就差不多了，差的就是自己去写几句代码玩玩。本文中没有代码，只是对API归纳一下，如果要看代码，看Jquery文档就可以了