从零开始学习jQuery-------jQuery元素选择器(三)
下面我们来介绍一下jQuery元素选择器，在Web开发中我们最常用的操作是获取元素，然后对获取的元素进行一系列的操作，jQuery根据获取页面元素的不同，可以将jQuery选择器分为四大类：基本选择器、层次选择器、过滤选择器、表单选择器，其中过滤选择器有可以分为简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤器。
jQuery基本选择器：
|
选择器 |
功能描述 |
返回值 |
|
#id |
根据给定的ID匹配一个元素 |
单个元素 |
|
element |
根据给定的元素匹配所有的元素 |
元素集合 |
|
.class |
根据给定的类匹配元素 |
元素集合 |
|
* |
匹配所有的元素 |
元素结合 |
|
selector，selector |
将每一个匹配到的元素合并一起返回 |
元素集合 |
<body>
<div class="classframe">
<div id="divone">divone</div>
<div class="classone">classone</div>
<span>SPAN</span>
<h4>i am test</h4>
</div>
div
</body>
</html>
<script type="text/javascript">
$(function(){
/* 设置class为classframe的div样式 */
$("div.classframe").css({"width":"200px","height":"200px","background-color":"gray"});
/* 设置id为divone的div样式 */
$("div#divone").css({"display":"block","background-color":"#f00"});
$("div.classone").css({"display":"block","background-color":"#0f0"});
/* 设置div元素所有的span后代元素样式 */
$("div span").text("lyq");
/* 设置 span，h4元素样式 */
$("span,h4").css("background-color","yellow");
});
</script>
效果如下：
jQuery层次选择器：
层次选择器通过DOM之间的层次关系获取元素，其主要的层次关系是后代、父子、相邻、兄弟关系，其通过获取某个元素后可以快速的获取与之相关联的元素。
| 选择器 | 功能描述 | 返回值 |
| ancesor descendant | 根据祖先元素匹配所有的后代元素 | 元素集合 |
| parent>child | 根据父元素匹配所有的子元素 | 元素集合 |
| prev+next | 匹配所有紧接在prev后的相邻元素 | 元素集合 |
| prev~siblings | 匹配所有的prev之后所有兄弟元素 | 元素集合 |
代码：
<ul id="ul1" style="">
<li><a href=""></a>1</li>
<li><a href=""></a>2</li>
<li id="li3"><a href="">test</a>3</li>
<li><a href=""></a>4</li>
<li><a href=""></a>5</li>
<li><a href=""></a>6</li>
<li><a href=""></a>7</li>
</ul> $(function () {
/* 设置ul元素所有的li子元素的样式 */
$("ul li").css("font-size","28px");
/* 设置#li3元素所有的a子元素的样式 */
$("#li3>a").css("background-color","red");
/* 设置#li3元素后面的li相邻元素的样式 */
$("#li3+li").text("相邻元素");
/* 设置#li3元素之后所有的li兄弟元素的样式 */
$("#li3~li").css("background-color","gray");
});
效果：
过滤选择器------简单过滤选择器
过滤选择器根据某类规律规则进行元素匹配，书写时都以冒号（：）开头，简单过滤选择器是过滤选择器中使用最广泛的一种，详细规则如下。
| 选择器 | 功能描述 | 返回值 |
| first()或者:first | 获取第一个元素 | 单个元素 |
| last()或者:last | 获取最后一个元素 | 单个元素 |
| :not(selector) | 获取除给定选择器外的所有元素 | 元素集合 |
| :even | 获取所有索引值为偶数的，索引从0开始 | 元素集合 |
| :odd | 获取所有索引值为基数的元素 | 元素集合 |
| :eq(index) | 获取指定索引值得元素 | 单个元素 |
| :gt(index) | 获取所有大于指定索引的元素 | |
| :header | 获取所有标题类的元素 比如h1 h2 | 元素集合 |
| :animated | 获取正在执行动画效果的元素 | 元素集合 |
<ul id="test">
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
</ul> $(function () {
/* 查找ul的所有字元素的第一个 */
$("ul#test li:first").text("i am first");
$("ul#test li:last").text("i am last");
$("ul#test li:not(li.item2)").css("background-color","gray");
$("ul#test li:even").css("background-color","red");
$("ul#test li:odd").css("background-color","green");
$("ul#test li:eq(4)").text(" i am 4");
});
过滤选择器------内容过滤选择器
内容过滤选择器根据元素中的文字内容或者所包含的子元素特征获取元素，其文字内容可以模糊或者绝对匹配进行元素定位。
| 选择器 | 功能描述 | 返回值: |
| :contains(text) | 获取包含给定文本的元素 | 元素集合 |
| :empty | 获取不包含子元素或者文本为空的元素 | 元素集合 |
| :has(selector) | 获取含有选择器所匹配的元素 | 元素集合 |
| :parent | 获取含有子元素或者有文本的元素 | 元素集合 |
<style type="text/css">
div{
width: 100px;
height:20px;
} </style> <div>ABCD</div>
<div><span></span></div>
<div>FH</div>
<div></div> $("div:contains('A')").css("font-size","20px");
$("div:empty").css("background-color","yellow");
$("div:parent").css("background-color","green");
$("div:has(span)").css("background-color","red");
过滤选择器------可见性过滤选择器
可见性过滤选择器是指在页面中创建一个元素标签，如果我们将元素的display设置为none或者display时，我们可以根据可见性选择器获取元素。
| 功能描述 | 功能描述 | 返回值 |
| :hidden | 获取所有不可见的元素 | 元素集合 |
| :visible | 获取所有可见的元素 | 元素集合 |
过滤选择器------属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如ID或者匹配属性值得内容，以“[]”表示属性。常用的属性有id、class、title等
| 选择器 | 功能描述 | 返回值 |
| [attribute] | 获取包含给定属性的元素 | 元素集合 |
| [attribute=value] | 获取等于给定属性值的元素 | 元素集合 |
| [attribute!=value] | 获取不等于给定属性值的元素 | 元素集合 |
| [attribute^=value] | 获取给定属性以某些值开始的元素 | 元素集合 |
| [attribute$=value] | 获取给定属性以某些值结尾的元素 | 元素集合 |
| [attribute*=value] | 获取给定属性以包含某些值的元素 | 元素集合 |
| [attribute][attribute][attribute] | 获取满足多个给定属性的元素 | 元素集合 |
比如以下几段代码，属性可以是 id class等
<div id="divid" class="divid"></div>
<div title="a" class="divid"> title a</div>
<div id="divab" title="ab" class="divab"></div>
<div title="abc">tilte abc</div> $("div[class='divid']").css("background-color","red");
$("div[title='ab'][id='divab']").css("background-color","green");
过滤选择器------子元素过滤选择器
在页面开发过程中，常常遇到要突出某行的需求，虽然我们可以通过基本过滤器的”eq(index)”，可以实现任意一个行列的显示，但是还是不能满足大量数据和多个表格的选择需求，为了实现这样的功能，jQuery可以通过子元素过滤选择器获取父元素中指定的某个元素。
| 选择器 | 功能描述 | 返回值 |
| :nth-child(eq|even|odd|index) | 获取每个父元素下的特定位置元素，索引号从1开始 | 元素集合 |
| :first-child | 获取每个父元素下的第一个元素 | 元素集合 |
| :last-child | 获取每个父元素下的最后一个字元素 | 元素集合 |
| :only-child | 获取每个父元素下的仅有一个子元素 | 元素集合 |
<ul>
<li>item0</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
<ul>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
</ul> /*获取所有 ul下的子元素li的偶数列 */
$("ul li:nth-child(even)").css("background-color","red");
/* 获取第一个ul元素 */
$("ul:first").css("background-color","green");
过滤选择器-------表单对象属性过滤选择器
表单对象属性过滤属性选择器通过表单中的某对象属性特征获取该类元素，如enabled,disabled,checked,selected
| 选择器 | 功能描述 | 返回值 |
| :enabled | 获取表单中所有属性为可用的元素 | 元素集合 |
| :disabled | 获取表单中所有属性为不可用的元素 | 元素集合 |
| :checked | 获取表单中所有属性为选中的元素 | 元素集合 |
| :selected | 获取表单中所有属性选中的option的元素 | 元素集合 |
.
| 选择器 | 功能描述 | 返回值 |
| :input | 获取所有的input、textarea、select | 元素集合 |
| :text | 获取所有的单行文本框 | 元素集合 |
| :password | 获取所有的密码框 | 元素集合 |
| :radio | 获取所有的单选按钮 | 元素集合 |
| :checkbox | 获取所有的复选框 | 元素集合 |
| :submit | 获取所有的提交按钮 | 元素集合 |
| :image | 获取所有的图像域 | 元素集合 |
| :reset | 获取所有的重置按钮 | 元素集合 |
| :button | 获取所有的按钮 | 元素集合 |
| :file | 获取所有的文件域 | 元素集合 |
从零开始学习jQuery-------jQuery元素选择器(三)的更多相关文章
- jquery子元素选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 一个样例看清楚JQuery子元素选择器children()和find()的差别
近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.htm ...
- jQuery层级元素选择器
第一个: 1:空格表示所有 2:> 第一层 3:+/- 同级 +:之后的第一个元素 -:之后所有同级 d 代码示例: <!DOCTYPE html PUBLIC "-//W3C/ ...
- jquery1.9学习笔记 之层级选择器(三)
下一个相邻选择器(“prev + next”) 描述:选择所有给出祖先选择器的子孙选择器. 例子: <!doctype html> <html lang='zh'> <h ...
- 前端学习 -- Css -- 兄弟元素选择器
为一个元素后边的元素设置css样式: 语法:前一个 + 后一个. 作用:可以选中一个元素后紧挨着的指定的兄弟元素. 为一个元素后边的所有相同元素设置css样式: 语法:前一个 ~ 后边所有. < ...
- 前端学习笔记之CSS选择器
阅读目录 一 基本选择器 二 后代选择器.子元素选择器 三 兄弟选择器 四 交集选择器与并集选择器 五 序列选择器 六 属性选择器 七 伪类选择器 八 伪元素选择器 九 CSS三大特性 一 基本选择器 ...
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
随机推荐
- delegate 中的BeginInvoke和EndInvoke方法
开发语言:C#3.0 IDE:Visual Studio 2008 一.C#线程概述 在操作系统中一个进程至少要包含一个线程,然后,在某些时候需要在同一个进程中同时执行多项任务,或是为了提供程序的性能 ...
- 使用Python操作Redis
1. 安装pyredis 首先安装pip 1 2 3 4 5 6 7 8 <SHELL># apt-get install python-pip ...... <SHELL> ...
- github的访问变慢了
以下个人观点:把操作系统的自主研究还有处理器自主研究列入重点,还有互联网上的种种动作,我发现里面似乎揭示了某些迹象,科研真的不应该以牺牲大部分人的河法全益为代价甚至目的.当某一天win不可能出现在出厂 ...
- Oracle数据库基础知识_字符串操作相关2
6.LPAD,RPAD 作用:左/右边的字符串填充一些特定的字符语法: LPAD(string , n, [pad_String]) string:可是字符或者参数 ...
- java导入导出excel常用操作小结及简单示例
POI中常用设置EXCEL的操作小结: 操作excel如下 HSSFWorkbook wb = new HSSFWorkbook(); //创建一个webbook,对应一个Excel文件 HSSFS ...
- Ajax 的同步与异步
1.Ajax的工作原理如图: 2.同步 XMLHttpRequest 对象用于和服务器交换数据. XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参 ...
- mysql的乱码问题
ALTER TABLE `news`.`snapshots` MODIFY title VARCHAR() CHARACTER SET utf8; ALTER TABLE `news`.`snapsh ...
- ORACLE PL/SQL异常处理(Exception)学习笔记
1.PL/SQL错误类型 错误类型 报告者 处理方法 编译时错误 PL/SQL编译器 交互式地处理:编译器报告错误,你必须更正这些错误 运行时错误 PL/SQL运行时引擎 程序化地处理:异常由异常处理 ...
- cscope使用
[[]][]再加上][一共是 4 个在段落(对于 C 来讲就是函数)间跳转的命令. 总结是:1,相同就跳到函数的开头:(如果都是左括号或者都是右括号),不同就跳到函数的结尾: { 和 } 用来 ...
- （转载）PHP去掉转义后字符串中的反斜杠\函数stripslashes
(转载)http://www.beijibear.com/index.php?aid=182 addslashes()函数主要是在字符串中添加反斜杠对特殊字符进行转义,stripslashes()则是 ...