jquery jQuery选择器
文志学
jQuery选择器优点：
（1）简洁的写法
（2）支持css1.0到css3.0的选择器
（3）完善的处理机制
基本选择器
标签选择器（h2）
，类选择器（.class）
，ID选择器（#id）
，并集选择器$（“div，盘，.title”）:所有div，p和拥有class为.title的元素
，交集选择器和全局选择器（h2.title）选取所有拥有class为title的h2元素
jQuery的四种层次选择器
后代选择器 A B（后代）
子选择器 A>B（子）
相邻元素选择器 A~B
同辈元素选择器 A+B
过滤选择器
基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤，表单对象属性过滤选择器
：frist 第一个元素
：last 最后一个元素
：even 所有索引是偶数的元素
：odd 所有索引是奇数的元素
可见性过滤选择器
。show();显示
。hide（）隐藏
!DOCTYPE html>
<html>
<head>
<title>3.html</title>
<script type="text/javascript">
//一：类选折器 标签选择器
并集选折器/交集选折器/全局选折器
//1.交集
/* $(
function()
{
$("div#today").css("color","green");
}
); */
//2.并集
/* $(
function()
{
$("#today,#tomary").css("color","pink");
}
); */
//3.全局
$(function() {
$("*").css("color", "yellow");
});
//4.后代选折器 不直接 空格 子元素
//5.子选折器 > 直接子
5、6.相邻选折器 + 后一个 向后查找之前的不行
7.同辈~
三：同辈选折器("[href]")/("[href=]")键值
^ 以谁开头 "[href^=cn]"
$ 以谁结尾 "[href$=cn]"
* 包含 "[href$*=cn]"
复合选折器 ( "a[href$*=cn]")
四：过滤选择器
1.$(
function(){
//$("li:first").css("color","pink");第一个
$("li:last").css("color","pink");最后一个
$("li:eq(1)").css("color","pink");某一个
$("li:gt(1)").css("color","pink");大于1
$("li:odd").css("color","pink");奇数
//$("li:even").css("color","pink");偶数
$("[id=box]").css("color","pink");
$("div:hidden");隐藏
$("div:hidden").show();显示
}
}
);
//2.可见性过过滤选折器/不可见性过过滤选折器
hidden();
</script>
</head>
<body>
<div id="today">如果爱可以重来</div>
<div id="tomary">把最美好的留在昨天</div>
//四：过滤选择器
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>冰果消消乐</li>
</ul>
</body>
</html>
类似资料：