游戏人生看别样风景

首页 » 前端技术 » 正文

jQuery选择器学习总结

2014年12月11日 | 分类:前端技术 | 作者:hucker | 评论:0条评论 | 浏览:684

       jQuery选择器共有四大类,分别为基本选择器,层次选择器,过滤选择器和表单选择器。下边就来分别总结一下。

1, 基本选择器?

       基本选择器就是jQuery中最常用的选择器,也是最简单的选择器,它通过元素标签名,元素Id,Class来查找DOM元素。基本选择器共有五种,总结如下:

       选择器

返回

示例

元素标签选择器

集合元素

$(“p”)选取所有的<p>元素。

Id选择器

单个元素

$(“#test”)选取Id为test的元素。

Class选择器

集合元素

$(“.test”)选取所有class为test的元素

通配符选择器

集合元素

$(“*”)选取所有的元素。

群组选择器

集合元素

$(“div,span,p.myclass”)选取所有<div>,<span>,和拥有class为myclass的<p>标签的一组元素。

2, 层次选择器?

       适合于通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相 邻元素和兄弟元素。

       选择器

返回

示例

后代元素选择器

集合元素

$(“div span”)选取<div>里的所有的<span>元素。

子元素选择器

集合元素

$(“div>span”)选取<div>元素下元素名是<span>的子元素。

相邻元素选择器

集合元素

$(“.one+div”)选取class为one的下一个<div>兄弟元素。

兄弟元素选择器

集合元素

$(“#two~div”)选取Id为two的元素后面的所有<div>兄弟元素。

       注意:$(“prev~siblings”)选择器与siblings()方法的区别。

       $(“#prev~div”)选择的是”#prev”元素后面的所有的同辈的div元素。而siblings()方法与 前后位置无关,只要是同辈节点就都能匹配。

 3, 过滤选择器?

       过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则与CSS    中的伪类选择器语法相同,即选择器都以一个冒号(:)开头。按照不同的过滤规则,过滤选择器可以分为基本过滤,内容过滤,可见性过滤,属性过滤,子元素过 滤和表单 对象属性过滤选择器共六种选择器。

       这边只总结基本过滤器,其它过滤器在实际的开发过程中需要的时候再查看就可以了。

       选择器

返回

示例

:first

单个元素

$(“div:first”)选取所有<div>元素中第1个<div>元素。

:last

单个元素

$(“div:last”)选取所有<div>元素中最后1个<div>元素。

not(selector)

集合元素

$(“input:not(.myClass)”)选取class不是myClass的<input>元素。

:even

集合元素

$(“input:even”)选取索引是偶数的<input>元素。

:odd

集合元素

$(“input:odd”)选取索引是奇数的<input>元素。

:eq(index)

单个元素

$(“input:eq(1)”)选取索引等于1的<input>元素。

:gt(index)

集合元素

$(“input:gt(1)”)选取索引大于1的<input>元素。

:lt(index)

集合元素

$(“input:lt(1)”)选取索引小于1的<input>元素。(不包括1)

:header

集合元素

$(“:header”)选取网页中所有的<h1>,<h2>,<h3>...

:animated

集合元素

$(“div: animated”)选取正在执行动画的<div>元素。

4, 表单选择器?

       利用表单选择器我们可以极其方便地获取表单的某个或某类型的元素。

       选择器

返回

示例

:input

集合元素

$(“:input”)选取所有<input>,<textarea>,<select>和<button>元素。

:text

集合元素

$(“:text”)选取所有的单行文本框。

:password

集合元素

$(“: password”)选取所有的密码框。

:radio

集合元素

$(“: radio”)选取所有的单选框。

:checkbox

集合元素

$(“:checkbox”)选取所有的复选框。

:submit

集合元素

$(“: submit”)选取所有的提交按钮。

:image

集合元素

$(“: image”)选取所有的图像按钮。

:reset

集合元素

$(“: reset”)选取所有的重置按钮。

:button

集合元素

$(“: button”)选取所有的按钮。

:file

集合元素

$(“: file”)选取所有的上传域。

:hidden

集合元素

$(“: hidden”)选取所有不可见元素。


发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«   2024年3月   »
123
45678910
11121314151617
18192021222324
25262728293031
网站分类
标签列表
最近发表
最新留言
网站收藏
    RainbowSoft Studio Z-Blog订阅本站的 RSS 2.0 新闻聚合html5创意