知识库 : JQuery选择元素相关API介绍

       在JQuery框架中,提供了许多方便的API供开发人员使用。在完成前台相关内容开发时,对html或者jsp页面中的元素进行选择是一件最常用的操作。使用好JQuery提供的API能够大大提高开发的效率。下面简单介绍一下JQuery中常见的元素选择器。

       $(“param”)是常见的元素选择API,$(“#id”)可以选择属性为id的元素,如果出现了多个属性为id的元素的话,默认会选择出第一个,因此$(“#id”)返回的结果最多只有一个;$(“.class”)可以选择出class属性值为class的所有元素,凡是符合条件的元素都会被选择出来;$(“tagName”)会选择出所有标签名称为tagName的元素,返回的值有可能是多个;$(“RexExp”)在参数部分,可以使用正则表达式进行元素的匹配,或者使用上面几种方式结合的方式匹配标签。在$(“param”)中,可以使用伪选择器进行元素的筛选,如$(“:first”)可以选择出第一个元素;$(“:last”)可以选择出最后一个元素;$(“:odd”)可以选择出奇数的元素;$(“:even”)可以选择出偶数的元素等等。

       在$(“param”,context)函数中,还有第二个参数,就是context。context就是查找的上下文,如果调用这个API的时候不传入第二个参数,就默认搜索整个文档,如果传入context就会从context的内部找到符合第一个参数的元素。

       在上面提到使用$(“param”)进行查找元素时,有可能返回多个满足条件的元素,如何在这个结果中找到你想要的结果呢。JQuery提供了eq(number)函数,它可以直接返回第number个元素。比如使用$(“param”)函数选择出了5个满足条件的元素,那么$(“param”).eq(2)就能直接得到这5个元素中的第3个(eq函数中的0是第一个)。在实际的开发过程中,eq函数要酌情使用,如果文档内容发生变化的话,很可能造成eq中的参数值修改。

       在搜索一个给定元素的兄弟元素时,有如下API可供使用,prev()函数返回给定元素的上一个兄弟节点;prevAll()返回所有之前的兄弟节点;next()返回下一个兄弟节点;nextAll()返回所有之后的兄弟节点;siblings()返回所有的兄弟节点,部分前后顺序。

       在搜索父子关系节点时,可以使用到如下的API,parent()函数返回调用该方法元素的直接的父元素,在parent()函数中,可以传入表达式进行过滤,如果传入了参数那么查找的可能是所有祖先元素,不仅仅是直接的父元素;children()方法会获得元素的直接子元素;find()方法会查询到元素的所有子元素。

       在上述的所有方法中,都可以使用链式调用,即一个函数的返回值可以作为下一个函数的调用者,这样可以大大减少代码的编写量。