jQuery 选择器（1）
参考资料：1、《锋利的jQuery》 作者：单东林 张晓菲 魏然 出版社: 人民邮电出版社
2、w3school 在线教程
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title></title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
//<span>元素动画效果
function spanAnimate() {
$("span").animate({width: 380}, "fast");
$("span").animate({width: 140}, 1000, spanAnimate);
}
$(function() {
spanAnimate(); //<span>元素执行动画效果
//以下选择的元素均改变背景色
//1、基本选择器
$("#one").css("background", "#b17af5"); //选择 Id 为 one 的元素
$("div").css("background", "#b17af5"); //选择所有<div> 元素
$(".mini").css("background", "#b17af5"); //选择 class 为 mini 的元素
$("*").css("background", "#b17af5"); //选择所有元素
$("span, #two, .mini").css("background", "#b17af5"); //选择所有<span>元素、Id为two的元素和class为mini的元素
//2、层次选择器
$("body div").css("background", "#b17af5"); //选择 <body> 中所有 <div> 元素
$("body > div").css("background", "#b17af5"); //选择 <body> 的子 <div> 元素
$(".one + div").css("background", "#b17af5"); //选择紧挨着class为one的元素的下一个<div>元素
$(".one").next("div").css("background", "#b17af5"); //（效果同上）
$("#two ~ div").css("background", "#b17af5"); //选择Id为two的元素之后所有同辈<div>元素
$("#two").nextAll("div").css("background", "#b17af5"); //（效果同上）
$("#two").siblings("div").css("background", "#b17af5");//与nextAll()方法不同，siblings()方法会匹配所有同辈元素
//3.1、基本过滤选择器
$("div:first").css("background", "#b17af5"); //选择第一个 <div> 元素
$("div:last").css("background", "#b17af5"); //选择最后一个<div> 元素
$("div:not(.one)").css("background", "#b17af5"); //选择 class 不为 one 的 <div> 元素
$("div[class != one]").css("background", "#b17af5"); //（效果同上）
$("div:even").css("background", "#b17af5"); //选择索引为偶数的 <div> 元素，索引从 0 开始
$("div:odd").css("background", "#b17af5"); //选择索引为奇数的 <div> 元素，索引从 0 开始
$("div:eq(6)").css("background", "#b17af5"); //选择索引为 6 的 <div> 元素，索引从 0 开始
$("div:gt(6)").css("background", "#b17af5"); //选择索引大于 6 的 <div> 元素，索引从 0 开始
$("div:lt(6)").css("background", "#b17af5"); //选择索引小于 6 的 <div> 元素，索引从 0 开始
$("div:not(:eq(6))").css("background", "#b17af5"); //选择索引不等于6的<div>元素，索引从0开始
$(":header").css("background", "#b17af5"); //选择所有标题元素：<h1>、<h2>、...、<h6>
$(":animated").css("background", "#b17af5"); //选择正在执行动画的元素
//3.2、内容过滤选择器
//选择文本含有"mini"、或后代元素的文本含有"mini"的<div>元素
$("div:contains(mini)").css("background", "#b17af5");
$("div:empty").css("background", "#b17af5"); //选择不包含子元素（包括文本元素）的<div>元素
$("div:has(.mini)").css("background", "#b17af5"); //选择含有 class 为 mini 的元素的<div>元素
$("div:parent").css("background", "#b17af5"); //选择含有子元素（包括文本元素）的<div>元素
//3.3、可见性过滤选择器
$("div:visible").css("background", "#b17af5"); //选择所有可见的 <div> 元素
$("body :hidden").show(3000).css("background", "#b17af5"); //选择<body>下的所有不可见元素，将他们显示出来并改变背景色
//3.4、属性过滤选择器
$("div[title]").css("background", "#b17af5"); //选择有 title 属性的 <div> 元素
$("div[title = test]").css("background", "#b17af5"); //选择属性 title 值为 test 的 <div> 元素
$("div[title != test]").css("background", "#b17af5"); //选择属性 title 值不为 test 的 <div> 元素
$("div[title ^= te]").css("background", "#b17af5"); //选择属性 title 值以 te 开头的 <div> 元素
$("div[title $= st]").css("background", "#b17af5"); //选择属性 title 值以 st 结尾的 <div> 元素
$("div[title *= t]").css("background", "#b17af5"); //选择属性 title 值包含 t 的 <div> 元素
$("div[id][title *= t]").css("background", "#b17af5"); //选择属性title值包含t、并且有Id属性的<div>元素
//3.5、子元素过滤选择器
//选择 class 为 one 的 <div> 元素的后代元素中索引为 2 的子元素（索引从 1 开始）
$("div.one :nth-child(2)").css("background", "#b17af5");
//选择class为one的<div>元素的后代元素中索引是(2n + 1)的子元素（索引从 1 开始，n 从 0 开始）
$("div.one :nth-child(2n + 1)").css("background", "#b17af5");
//选择 class 为 one 的 <div> 元素中索引是 3 的 <div> 元素（索引从 1 开始）
$("div.one:nth-child(3)").css("background", "#b17af5");
//（效果同上）选择 class 为 one 的 <div> 元素中索引是 2 的 <div> 元素 （索引从 0 开始）
$("div[class = one]:eq(2)").css("background", "#b17af5");
//选择 class 为 one 的 <div> 元素的后代元素中第一个子元素
$("div.one :first-child").css("background", "#b17af5");
//（效果同上）选择 class 为 one 的 <div> 元素的后代元素中索引为 1 的子元素（索引从 1 开始）
$("div.one :nth-child(1)").css("background", "#b17af5");
//选择 class 为 one 的 <div> 元素的后代元素中最后一个子元素
$("div.one :last-child").css("background", "#b17af5");
//若 class 为 one 的 <div> 作为父元素下只有一个子元素（包括后代元素），那么选择这个子元素
$("div.one :only-child").css("background", "#b17af5");
});
</script>
<!-- CSS -->
<style type="text/css">
div, span, p {
height: 140px;
width: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-family: Verdana;
font-size: 17px;
}
div.mini {
height: 55px;
width: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
</head>
<!-- HTML -->
<body>
<div id="one" class="one">
id 为 one，class 为 one 的 div
<div class="mini">class 为 mini</div>
</div>
<div id="two" class="one" title="test">
id 为 two，class 为 one，title 为 test 的 div
<div class="mini" title="other">class 为 mini，title 为 other</div>
<div class="mini" title="test">
<h6>class 为 mini，title 为 test</h6>
</div>
</div>
<div class="one">
<div class="mini">class 为 mini</div>
<div class="mini">class 为 mini</div>
<div class="mini">class 为 mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class 为 mini</div>
<div class="mini">class 为 mini</div>
<div class="mini">class 为 mini</div>
<div class="mini" title="test">class 为 mini，title 为 test</div>
</div>
<div class="none" style="display: none;">style 的 display 为 "none" 的 div</div>
<div class="hide">class 为 hide 的 div</div>
<div>
包含 input 为 hidden 的 div
<input type="hidden" size="8" value="input" />
</div>
<span id="move">正在执行动画的 span</span>
</body>
</html>
4630
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
