您的位置：首页 > Web前端 > JQuery

jQuery 选择器的类型（学习笔记）

2014-05-14 14:10 330 查看
根据所获取页面中元素的不同，可以将jQuery选择器分为四大类：基本选择器、层次选择器、过滤选择器、表单选择器。其中在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器。

基本过滤选择器

它由元素ID、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。

选择器功能描述返回值
#id根据给定的ID匹配一个元素单个元素
element根据给定的元素名匹配所有元素元素集合
.class根据给定的类匹配元素元素集合
* 匹配所有元素元素集合
selector1，selectorN将每一个选择器匹配到元素合并后一起返回元素集合
示例：
<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery基本选择器</title>
<script language="javascirpt" type="text/javascript"
src="jquery-1.11.1.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
.clsFrame{width:300px;height:100px}
.clsFram div,span{display:none;float:left;
width:65px;height:65px;border:solid 1px #ccc; margin:8px}
.clsOne{background-color:#eee}
</style>
<script type="text/javascript">
$(function(){
$("#divOne").css("display","block");
})
$(function(){
$("#div span").css("display","block");
})
$(function(){
$(".clsFrame .clsOne").css("dispaly","block");
})
$(function(){
$("*").css("display","block");
})
$(function(){
$("#divOne,span").css("display","block");
})
</script>
</head>
<body>
<div class="clsFrame">
<div id="divOne">ID</div>
<div class="clsOne">CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>

层次选择器

层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素。

选择器功能描述 返回值
ancestor descendant根据祖先元素匹配所有的后代元素元素集合
 parent>child 根据父元素匹配所有的子元素元素集合
prev +next 匹配所有紧接在prev元素后的相邻元素  元素集合
 pre~siblings 匹配pre元素之后的所有兄弟元素元素集合
                                                                                                                                                                                   
示例：
<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery基本选择器</title>
<script language="javascirpt" type="text/javascript"
src="jquery-1.11.1.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
.clsFrame{width:300px;height:100px}
.clsFram div,span{display:none;float:left;
width:65px;height:65px;border:solid 1px #ccc; margin:8px}
.clsOne{background-color:#eee}
</style>
<script type="text/javascript">
$(function(){
$("#divOne").css("display","block");
})
$(function(){
$("#div span").css("display","block");
})
$(function(){
$(".clsFrame .clsOne").css("dispaly","block");
})
$(function(){
$("*").css("display","block");
})
$(function(){
$("#divOne,span").css("display","block");
})
</script>
</head>
<body>
<div class="clsFrame">
<div id="divOne">ID</div>
<div class="clsOne">CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>


简单过滤选择器

过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（：）开头；简单过滤选择器是过滤选择器中过滤选择中使用最广泛的一种

选择器功能描述返回值
first()或 :first获取第一个元素单个元素
last()或 :last获取最后一个元素单个元素
:not(selector)获取除给定选择器外的所有元素元素集合
:even获取所有索引值为偶数的元素，索引号从0开始元素集合
:odd获取所有索引值为奇数的元素，索引号从0开始元素集合
:eq(index)获取指定索引值的元素，索引号从0开始单个元素
:gt(index)获取所有大于给定索引值的元素，索引号从0开始元素集合
:lt(index)获取所有小于给定索引值的元素，索引号从0开始元素集合
:header获取所有标题类型的元素，如h1、h2...... 元素集合元素集合
:animated获取正在执行动画效果的元素元素集合
示例：
<!DOCUTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery基本过滤选择器</title>
<script language="javascirpt" type="text/javascript"
src="jquery-1.11.1.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{width:241px;height:83px;border:solid 1px #eee}
h1{font-size:13px}
ul{lsit-style-type:none;padding:0px}
.DefClass,.NotClass{height:23px;width:60px;
line-height:23px;float:left; border-top:solid 1px #eee;border-bottom:solid 1px #eee}
.GetFocus{width:58px;border:solid 1px #666; background-color:#eee}
#spnMove{width:238px;height:23px;line-height:23px}

</style>
<script type="text/javascript">
$(function(){
$("li:frist").addClass("GetFocus");
})
$(function(){
$("li:last").addClass("GetFocus");
})
$(function(){
$("li:not(.NotClass)").addClass("GetFocus");
})
$(function(){
$("li:even").addClass("GetFocus");
})
$(function(){
$("li:odd").addClass("GetFocus");
})
$(function(){
$("li:eq(1)").addClass("GetFocus");
})
$(function(){
$("li:gt(1)").addClass("GetFocus");
})
$(function(){
$("li:lt(4)").addClass("GetFocus");
})
$(function(){
$("div h1").css("width","238");
$(":header").addClass("GetFocus");
})
$(function(){
animateIt();
$("#spnMove:animated").addClass("GetFocus");
})
function animateIt(){
$("#spnMove").slideToggle("slow",animateIt);
}
</script>
</head>
<body>
<div >
<h1>基本过滤选择器</h1>
<ul>
<li class="DefClass">Item0</li>
<li class="DefClass">Item1</li>
<li class="NotClass">Item2</li>
<li class="DefClass">Item3</li>
</ul>
<span id="spnMove">Span Move</span>
</body>
</html>

内容过滤选择器

内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以绝对模糊或绝对匹配进行元素定位

选择器功能描述返回值
:contains(text)获取包含给定文本的元素元素集合
:empty获取所有不包含子元素或者文本的空元素元素集合
:has(selector)获取含有选择器所匹配的元素元素集合
:parent获取含有子元素或者文本的元素元素集合

可见性过滤器

可见性过滤选择器根据元素是否可见的特征获取元素

选择器功能描述返回值
:hidden获取所有不可见元素，或者type为hidden的元素元素集合
:visble 获取所有的可见元素元素集合

属性过滤器

属性过滤器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、一"]"号结束

选择器功能描述返回值
[attribute]获取包含给定属性的元素元素集合
[attribute=value]获取等于给定的属性是某个特定值的元素元素集合
[attribute!=value]获取不等于给定的属性是某个特定值的元素元素集合
[attribute^=value]获取给定的属性是以某些值开始的元素元素集合
attribute$=value]]获取给定的属性是以某些值结束的元素元素集合
[attribute*=value]获取给定的属性是以包含某些值的元素 元素集合
[selector1][selector2][selectorN]获取满足多个条件的符合属性的元素元素集合

子元素过滤器

在页面开发过程中，尝尝遇到突出指定某行的需求。虽然使用基本过滤选择器“:eq(index)"可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中的某个元素。

选择器选择器返回值
:nth-child(eq|even|odd|index)获取每个父元素下的特定位置元素，索引号从1开始 元素集合
:first-child获取每个父元素下的第一子元素元素集合
:last-child获取每个父元素下的最后一个子元素元素集合
:only-child获取每个父元素下的仅有一个子元素元素集合

表单对象属性顾虑器

表单对象属性过滤选择器通过表单中的某对象属性特征获取该元素，如enabled、disabled、checked、selected属性。

选择器功能描述返回值
:enabled获取表单中所有属性为可用的元素元素集合
:disabled获取表单中素有属性为不可用的元素元素集合
:checked获取表单中所有被选中的元素元素集合
:selected获取表单中所有被选中option的元素元素集合

表单选择器

在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。

选择器功能描述返回值
:input获取所有input、textarea、select 元素集合
:text获取所有单行文本框 元素集合
:password获取所有密码框 元素集合
:radio获取所有单选按钮元素集合
:checkbox获取复选框元素集合
:submit 获取所有提交按钮元素集合
:image获取所有图像域元素集合
:reset获取所有重置按钮元素集合
:button获取所有按钮
元素集合
:file获取所有文件域元素集合
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jquery
相关文章推荐
新的分享
章节导航