Jquery选择器练习（三）

来源：互联网发布：linux io 编辑：程序博客网时间：2024/05/16 06:29

<!DOCTYPE html><html lang="zh-cn"><head><title>Test</title><meta charset="UTF-8" /><script src="js/jquery-1.11.1.min.js"></script><script src="js/index.js"></script></head><body><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="clear"></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 id="tesst" class="mini">class 为mini,title为tesst</div></div><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>

* {margin: 0;padding: 0;}div {width: 140px;height: 140px;margin: 5px;background: #aaa;border: 1px solid #000;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}span {width: 140px;height: 100px;background: #aaa;border: 1px solid #000;display: block;float:left;margin-top: 5px;}.clear {clear: both;height: 0px;border: 0;overflow: hidden;}.white {background: #ffffff}

$(document).ready(function() {initElementBgColor();});var initElementBgColor = function() {$("#one").css("background-color","#fff");$("#one").addClass("white");$(".mini").css("background-color","#fff");$("div").css("background-color","#fff");$("*").css("background-color","#fff");$("span,#two,#one,.mini").css("background-color","#fff");//多项选择器$("body div").css("background-color", "#fff");$("body>div").css("background-color", "#fff");/*临近同辈元素选择，可以用next()函数代替*/$(".one+div").css("background-color", "#fff");$(".one").next().css("background-color", "#fff");$(".one").next("div").css("background-color", "#fff");/*所有后面的同辈元素选择，可以用next()函数代替*/$("#two~div").css("background-color", "#fff");$(".one").nextAll().css("background-color", "#fff");   $(".one").nextAll("div").css("background-color", "#fff");$("div:first").css("background-color", "#fff");$("div:last").css("background-color", "#fff");$("div:not(.mini)").css("background-color", "#fff");$("div:even").css("background-color", "#fff");      //索引为偶数的所有div$("div:odd").css("background-color", "#fff");$(":animated").css("background-color", "#fff");/*选择焦点元素*/$("input").focus();$(":focus").css("background-color", "red");  $("div:contains(id)").css("background-color", "#fff");$("div:contains('id')").css("background-color", "#fff");$("div:empty").css("background-color", "#fff");$("div:not(:empty)").css("background-color", "#fff");$(":not(:empty)").css("background-color", "#fff");/*选取包含某种元素的选择器，has()中可以是标签和类*/$("div:has(.mini)").css("background-color", "#fff");$(":parent").css("background-color", "#fff");$("div:parent").css("background-color", "#fff");  //所有有文本或子元素的div$("div:visible").css("background-color", "#fff");$(":hidden").show(3000);    //显示所有元素，包括隐藏display:none; visibility:hidden ;type=hidden$("input:hidden").show();}

0 0