jQuery 选择器(1)

来源:互联网 发布:怎样下载python 编辑:程序博客网 时间:2024/03/29 03:18

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>


原创粉丝点击