Jquery层次选择器

来源：互联网发布：支付宝淘宝霸王条款编辑：程序博客网时间：2024/06/05 10:38

Jquery层次选择器的入门案例

diverse.css：

div,span{width: 140px;height: 140px;margin: 10px;background: #9999CC;border: #000 1px solid;float:left;font-size: 17px;font-family:Roman;}.min{width: 50px;height: 30px;background: #CC66FF;border: #000 1px solid;font-size: 12px;font-family:Roman;}

HTML正文：

<script type="text/javascript" src="js/jquery-1.3.1.js"></script><link href="js/diverse.css"  rel="stylesheet" type="text/css"><br><input type="button" value="设置<body>内所有<div>的背景色为绿色"    id="b1"/><br><input type="button" value="设置div02内子 <div>的背景色为黄色"    id="b2"/><br><input type="button" value="设置id 为 div01 的下一个 <div> 的背景色为紫色"  id="b3"/><br><input type="button" value="设置id 为 div02 的元素后面的所有兄<div>的元素的背景色为蓝色"  id="b4"/><br><input type="button" value="设置id 为 div02 的元素所有 <div> 兄弟元素的背景色为黄色"  id="b5"/><br><input type="button" value="改变含有文本 ‘div01’ 的 div 元素的背景色为黄色"  id="b6"/><br><input type="button" value="改变不包含子元素(或者文本元素) 的 div 的背景色为红色"    id="b7"/><br><input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为紫色"  id="b8"/><br><input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色"  id="b9"/><br><input type="button" value="循环div元素的值"  id="b10"/><br><div id="div01" class="min" value="hello">div01</div><div id="div02">div02<div id="div021" class="min">div021</div><div id="div022" class="min">div022</div></div><div id="div03" >div03<div id="div031" class="min">div31</div></div><span id="sp01">span01</span><div id="div04"></div>

Javascript操作代码：

<script type="text/javascript">$('#b1').click(function(){  $('div').css("background","green");});//parent > child:父元素下的第一级子元素获取$('#b2').click(function(){   $('#div02 > div').css("background","yellow");});//pre + div :pre元素下一个同一级子元素$('#b3').click(function(){   $('#div01 + div').css("background","purple");});//pre ~ div:pre元素之后所有的兄弟div元素获取$('#b4').click(function(){  $('#div01 ~ div').css("background","blue");});//siblings("div"):相邻的兄弟元素$('#b5').click(function(){  $("#div02").siblings("div").css("background","yellow");});//contains 包含文本$('#b6').click(function(){  $("div:contains('div01')").css("background","yellow");});//不包含子元素和文本元素$('#b7').click(function(){   $("div:empty").css("background","red");});//parent:含子元素$('#b8').click(function(){  $("div:parent").css("background","purple");});//不含文本$('#b9').click(function(){   $("div:not(:contains('div01'))").css("background","green");});$('#b10').click(function(){//循环函数var $objs=$("div");/*$.each($objs,function(i,obj){alert(i+"---"+obj.innerText);})*///this表示$objs[i]$.each($objs,function(){   alert("---"+this.innerText);})});

效果：
这里写图片描述

1 0