跟着JqueryAPI学Jquery之一选择器.docx

Jquery 选择器是最基本的操作了，当我们用原生的javascript的时候，我们为了选择一个对象不得不花费九头二虎之力，有了 Jquery的选择器，吃饭饭饭香，身体倍棒 1.基本我们知道jquery 最常用的就是选择器了，我们看一下 jqueryAPI中的 选择器一基本 中有5种情况class ,id ,element, *,还有一个多选择器，这里我们想一下css样式的写法css样式也有几种情况：1.类样式2.id样式3.标签样式，1 .如果有一个aa的类，那么我们 定义aa的样式就要写成.aa2 .如果有一个bb的id，那么我们定 义bb的样式就要写成#bb3 .如果有标签<div></div>, 那么 我们定义的样式就写成div4 .如果我们要定义所有的标签样式， 那我们就写成*(当然这样简 写不太好)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 , a>b , a+b , ab当然我这里只是为了少打几个字而已，比如有如下的一个结构<div ><div class ="bb"><span >1<span ><span >2<span >< / div >< span >3<span ><div class =" cc” ></ div >< span >4<span ></ div >1 .我们现在想选择id为aa节点下所 有的span节点，就用 $( "#aa span )2 .我们现在想选择id为aa节点下第 一层的span 就是span中文本为3 , 4的两个，就用$( " #aa >span " )3 .我们现在想得到跟在 class为bb 后的那个span就是span中文本 为3的那个，就用$( ".bb+span")4 .现在我们想得到class为bb后所 有的 span 就用 $( ".bbspan")总结一下：第一个的写法还是css样式的写法一样用空格表示节点下的元素第二个用 >来表示子节点，和空格不同的是它只作用在第一层第三个第四个都是用来表示跟随节点，只不过不同的是用+号表示紧接着的用表示所有跟随的 我们是需要记住(空格> + )四个符号就可以了3简单我们知道了基本的选择器和层次的选择器，有时候我们选择出的是多个比如<ul ><li id =' aa' d</ li >< li >2</ li >< li >3</ li >< li >4</ li ></ ul >我们想得到ul li的第一个(first ),最后一个(last ),基数行(odd )，偶数行(even ) 匹配第三个(eq (2),匹配大于 2行(gt (1),匹配小于第三行(lt (2),这里 说了 7个那么我们要怎么来写这个选择器呢，比如匹配第一个$( "ul li:first ；匹配第三个$( "ul li:eq(2)”)，其他的就不写了这里我们想一下 css中a链接的几种样式的的写法a： hover a:link 是不是一样呢好了 这里我们看了 7种，在看看api还有3种是什么呢，1 :not 去除所有与给定选择器匹配的元素语法一样$( " ul li:not(#aa) 意思去掉在ul li里面的含有id为aa的元素元素 我们用$( " ul li能够得到4个li用 $( " ul li:not(#aa)就去掉了第一个li只得到了三个2:header只是用来选择 hl h2 h3 这样的标题3:animated匹配执行动画的元素还是总结一下，上面的这几个其实就是对已经选择出来的在一次的做筛选。建立在基础和层次上面。4文本可见性继续往下看api ,文本中有4个函数，当然功能还是对已经选择出来的内容做再次的筛选上面是对节点的筛选，现在我们要对内容筛选1 <div ><a>xxiu </ a> </ div >2 <div>xxiu zhang</div >3 <div>zhang </div>4 <div></ div >51 .包含指定文本$("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属性选择器我们先看看最基本的属性选择器<div id =" aa" name=" zhang” >zhang </ div ><divname=" zhangxxiu ” > asdf </ div ><div id =" bb" name=" xxiu ” >xxiu</ div >如上面的节点，我们想选择含有id的节点，我们如果用以前的方法要怎么做呢。用多选择方式 $( "#aa,#bb")得到了我们想要的，但是如果有N个，那不是要跟很长吗，我们都是很懒的，于是就有了属性选择器$( "divid ”就得到了我们想要的结果，对name做选择$( "divname")但是我们只想得到name为xxiu的那我们就用$( "divname='zhang ' ”)得到不为 zhang 的$( "divname! =' zhang' ”,)得到以 zh 开始的 $( "divname人=，zh， ”)以 xxiu 结尾的 $( "divname $= ' zhang'"),包含 ang 的$( "divname *= ' ang'")或者是有 id 且包含 xxiu 的$( "dividname *=' xxiu '")好，看了上面一对东西，肯定是有点晕了，总结一下1有什么id等于什么id= ' aa不等于什么id!=' aa '2以什么开始 A=以什么结束$=匹配什么*=(完全是正则表达式的语法吗)3 多属性选择 $( " dividname *=' xxiu '")6子元素1 匹配子元素中的第一个 $("ul li:first-child")最后一个 $("ul li:last-child")2匹配在子元素中是唯一的$("ul li:only-child")3匹配对于的元素$("ul li:nth-child(2)") 和$( " ul li:eq一样；)前者是从1开始计数，后者是从0开始计数7表单看看就知道是input中几种表单$( " :text得到文本表单$( ":checkbox”彳密iij复选表单等等 看看API就知道是怎么个回事了我们用前面的选择方式可以这样写$( " inputtype= ' text但是我7油个字总比多大几个要好，$(":text ”这样写是不是清爽的多呢8表单属性1可用enabled 和不可用 disabled找出2被选中checked 和选择selected好到这里 所有的API都过了一遍，对选择器基本上就差不多了，差的就是自己去写几句代码玩玩。本文中没有代码，只是对 API归纳一下，如果要看代码，看Jquery文档就可以了