jQuery选择器 层次选择器
来源:互联网 发布:mac优化 编辑:程序博客网 时间:2024/04/30 03:33
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="../jquerysource/jquery.js" type="text/javascript"></script> <!-- <link rel="stylesheet" type="text/css" href="../css/style.css"/>--> <style> div,span,p { width:140px; height:140px; margin:5px; background:#aaa; border:#000 1px solid; float:left; font-size:17px; font-family:Verdana; } div.mini { width:55px; height:55px; background-color: #aaa; font-size:12px; } div.hide { display:none; } </style> <script> /* 辅助: 1,自动重置 2,给元素添加动画 */ $(document).ready(function(){ //手动重置页面元素 $("#reset").click(function(){ $("*").removeAttr("style"); $("div[class=none]").css({"display":"none"}); }); //判断是否自动重置 $("input[type=button]").click(function(){ if($("#isreset").is(":checked")){ $("#reset").click(); } }); //给id为mover的元素添加动画. function animateIt() { $("#mover").slideToggle("slow", animateIt); } animateIt(); }) $(function(){ //层次选择器 //1.$("ancestor descendant");选取ancestor(先祖)里的所有descendant(后代)元素;集合;$("div span")选取<div>里的所有<span>元素 //2.$("parent>child");选取parent元素下child(子)元素,而1中选择的是后代元素;集合;$("div>span")选取<div>下名字为<span>的子元素 //3.$("prev + next");选取prev后的next元素,同辈元素 集合; $(".one>div")选取class为one的下一个<div>的同辈元素 //4.$("prev~sliblings");选取prev元素之后所有的sliblings(兄弟姐妹)元素,同辈元素;集合;$("#two~div")选取id为two元素后面的所有<div>同辈元素 //改变body内所有div颜色 $("#btn1").click(function(){ $("body div").css("background","#bfa"); }); //改变body内子div元素的颜色 $("#btn2").click(function(){ $("body>div").css("background","#bfa"); }); //改变class为one的下一个<div>同辈元素背景颜色 $("#btn3").click(function(){ $(".one+div").css("background","#bfa"); }); //改变id为two的元素后面的所有<div>同辈元素背景颜色 $("#btn4").click(function(){ $("#two~div").css("background","#bfa"); }); //5.1和2选择器常用,而3,4选择器有简单的方法替代 //a.$(".one + div");等价于$(".one").next("div"); //改变class为one的下一个<div>同辈元素背景颜色 $("#btn5").click(function(){ $(".one").next("div").css("background","#bfa"); }); //不加参数获取next,不是指定的next //$("#btn5").click(function(){ // $(".one").next().css("background","#bfa"); //}); //b.$("prev~div");等价于$("prev").nextAll("div"); $("#btn6").click(function(){ $("#two").nextAll("div").css("background","#bfa"); }); //不加参数获取全部 // $("#btn6").click(function(){ // $("#two").nextAll().css("background","#bfa"); // }); //c.sliblings()与$("prev~div")与$("prev").nextAll("div")比较;sliblings()与位置无关而后两者都是prev元素后面的元素 $("#btn7").click(function(){ $("#two").siblings("div").css("background","#bfa"); }); }); </script></head><body><h3>层次选择器.</h3><button id="reset">手动重置页面元素</button><input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /><!-- 控制按钮 --><input type="button" value="改变body内所有div颜色" id="btn1"/><input type="button" value="改变body内子div元素的颜色" id="btn2"/><input type="button" value="改变class为one的下一个<div>同辈元素背景颜色" id="btn3"/><input type="button" value="改变id为two的元素后面的所有<div>同辈元素背景颜色" id="btn4"/><input type="button" value="等价方法:改变class为one的下一个<div>同辈元素背景颜色" id="btn5"/><input type="button" value="等价方法:改变id为two的元素后面的所有<div>同辈元素背景颜色" id="btn6"/><input type="button" value="sliblings 改变id为two的元素所有<div>同辈元素背景颜色,与位置无关" id="btn7"/><br /><br /><!-- 测试的元素 --><div class="one" id="one" > id为one,class为one的div <div class="mini">class为mini</div></div><div class="one" id="two" title="test" > id为two,class为one,title为test的div. <div class="mini" title="other">class为mini,title为other</div> <div class="mini" title="test">class为mini,title为test</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="tesst">class为mini,title为tesst</div></div><span id="next">next下一个.</span><div style="display:none;" class="none"> style的display为"none"的div</div><div class="hide">class为"hide"的div</div><div> 包含input的type为"hidden"的div<input type="hidden" size="8"/></div><span id="mover">正在执行动画的span元素.</span></body></html>
1 0
- jQuery选择器 层次选择器
- jQuery选择器之层次选择器
- jquery选择器之层次选择器
- jquery选择器之层次选择器
- jQuery选择器-层次选择器示例
- 3.jquery选择器 层次选择器
- Jquery选择器的层次选择器
- jQuery 层次选择器,属性选择器
- JQuery选择器(二) 层次选择器
- jQuery基本选择器、层次选择器
- jQuery 层次选择器
- jQuery层次选择器
- jquery层次选择器
- jquery层次选择器
- jQuery层次选择器
- jQuery层次选择器
- jquery层次选择器
- JQuery层次选择器
- BOL的使用例子
- 相似度的算法(编辑距离法)(Java实现代码)
- java InputStream 和 OutputStream
- 分享一个链接
- 十进制转换为任何进制
- jQuery选择器 层次选择器
- eclipse javax.net.ssl.SSLHandshakeException: Received fatal alert: handshake_failure
- AndroidL之后ROOM的zip包中关于system.new.dat无法挂载
- 在Spring整合 SpringMVC,SpringData和 JPA 时,如何解决 Lazy懒加载问题?
- CodeForces - 766D Mahmoud and a Dictionary (并查集)
- c# 泛型(一)--引入
- 使用 Hibernate 在 JPA 中 调用 generateSchema 会出现执行两次 SQL 语句问题的解决方法
- 关闭手机软键盘代码
- web服务端 缓存技术总结