jquery层次选择器

原创 2012年03月21日 19:35:11
 
•jQuery层次选择器:

    $(“div span”):

    选取<div>下面的所有的<span>元素,包括后代元素

    $(“div > span”):选取<div>元素下面(儿子)所有的<span>子元素,不包括后代元素

    $(“.one + div”):

    选取class为one的下一个<div>相邻元素,即紧接着.one元素后面的div元素

    “+”紧接着的意思,相邻 不间隔  的元素

    $(“#one ~ div”):选取id为one的元素之后的所有同辈的<div>兄弟元素,可以间隔其他元素

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>层次选择器学习</title>
<script language="javascript" type="text/javascript" src="../../include/jquery.js"></script>
<style>
  div{
   width:150px;
   height:150px;
   border:1px dashed #00F;
   background-color:#CCC;
   margin:5px;
   float:left;}
  
  .one-1{
   width:80px;
   margin:30px;
   height:80px;
   border:1px dashed #00F;
   background-color: #FFC;
   }

</style>

 

<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
 
 //<input id="btn0" type="button" value="清空样式" />
 $("#btn0").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  $("*").removeAttr("style");
  
 });
 
 
 //<input id="btn1" type="button" value="选中所有div中span的元素 $('div span')" /> />
 
 //增加id为btn1按钮的事件
 $("#btn1").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  //选取div下的span和class=p的元素下的span
  $("div span,.p span").css("background","green");
  
 });
 
 
 //<input id="btn2" type="button" value="选中所有的div中所有span元素(只选儿子一层,不选择后代元素)  $(div>span)" />
 $("#btn2").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  //选取div下的span和class=p的元素下的span
  $("body> div").css("background","green");
  
 });
 
 //<input id="btn3" type="button" value="选中id=two的的下一个div元素   $('#two + div')" />
 
 $("#btn3").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  //选取div下的span和class=p的元素下的span
  $("#two + div").css("background","green");
  
 });
 
 //<input id="btn4" type="button" value="选取class=d2的所有的兄弟元素 $('.d2 ~ div')" />
 $("#btn4").click(function (){
  
  //当点击按钮后,设置id=two的div的背景颜色是绿色
  //选取div下的span和class=p的元素下的span
  $(".d2 ~ div").css("background","green");
  
 });
 
 
 
});

 

 

</script>

 

</head>

<body>
<div id="one">id=one
   <div class="one-1">class=one-1</div>
</div>
<div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>

<div id="three">id=three<br><span>id=three,span的内容</span></div>
<div class="d2">class=d2</div>
<p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>

<div style="clear:both;">
<input id="btn0" type="button" value="清空样式" />
<input id="btn1" type="button" value="选中所有div中span的元素 $('div span,.p span')" />
<input id="btn2" type="button" value="选中所有的div中所有span元素(只选儿子一层,不选择后代元素)  $(div>span)" />
<input id="btn3" type="button" value="选中id=two的的下一个div元素   $('#two + div')" />
<input id="btn4" type="button" value="选取class=d2的之后的兄弟元素 $('.d2 ~ div')" />
</div>
</body>
</html>

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

jQuery基础教程之+层次选择器

隐式迭代 $(“选择器”).css(“background-color”,”red”)则是为这组元素中每个元素的样式都加上红色背景。jQuery会自动迭代每个元素,这就免去了我们编写代码遍历每个元素...

jQuery层次选择器

jQuery基础教程之强大的选择器(层次选择器) 无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点:...
  • huaben
  • huaben
  • 2012-02-23 16:16
  • 1351

jQuery_层次选择器

Untitled Document div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; b...

jQuery笔记之层次选择器

层次选择器 层次选择器通过DOM元素之间的层次关系来获取元素 //下面通过demo演示上面的理论 $(fu...

Jquery层次选择器

Jquery层次选择器的入门案例

黑马day16 jquery&层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器. 1 、ancestor descendant       用法: $(”f...

jQuery的层次选择器

Untitled Document div, span, p { width: 140px; height: 140px; margin: 5px...

Jquery-层次选择器

层次选择器 后代选择器后代选择器的语法是使用空格隔开(ancestor  descendant) 选取ancestor元素里的所有descendant(后代)元素 ,返回元素集合,如:$("#menu...

jquery的 层次选择器

无标题文档 $(function(){ $("#bt1").click(function(){ $("div > p").css("background","red") }) })...

使用jQuery层次选择器选择元素

1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)