您的位置：首页 > Web前端 > JQuery

Jquery层次选择器

2016-12-04 22:50 344 查看

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);
})
}
);

效果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery 层次选择器 javascript 基础

相关文章推荐

新的分享

章节导航