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层次选择器

后代选择器 //选择 body内的所有div元素. $('#btn1').click(function(){ $('body div').css("back...
  • csujiangyu
  • csujiangyu
  • 2015年08月18日 10:42
  • 1133

jQuery基础教程之强大的选择器(层次选择器)

无论何时,我们都要记住的一点就是通过jQuery选择器获取的jQuery对象任何时候都是一组元素。 而JQuery选择器又具有这样的特点: 隐式迭代 $(“选择器”).css(“backgrou...
  • wql19881207
  • wql19881207
  • 2012年03月31日 13:52
  • 2213

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013年08月01日 15:50
  • 1163

jquery 联合选择器,相对选择和层级选择器__多类交集选择器,多属性选择器

1、多条件选择器 用途:使用多个条件同时选择多个标签 用法:$(“条件1,条件2,条件3,……,条件n “); 特征:多个条件在“”内用逗号隔开; 用例:$(“div#id,span.tip,...
  • h330531987
  • h330531987
  • 2017年10月26日 10:26
  • 186

jQuery 选择器(基本选择器/层级选择器/过滤选择器/筛选选择器)

jQuery选择器 1. JS中选择DOM元素的方法 考虑兼容性的话,js里面提供的选择DOM的方法只有两个: JavaScript选择元素的方法 ...
  • carriehaohao
  • carriehaohao
  • 2017年03月04日 15:38
  • 796

jQuery 层次选择器,属性选择器

jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")...
  • tangdou5682
  • tangdou5682
  • 2016年12月01日 10:40
  • 649

一步一步学习 JQuery (二) 选择器: 基本选择器 && 层次选择器

JQuery选择器:
  • u013497151
  • u013497151
  • 2015年02月21日 18:34
  • 1951

jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器

jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器
  • woaijianjiandandande
  • woaijianjiandandande
  • 2016年10月18日 10:18
  • 479

jQuery_层次选择器

Untitled Document div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; b...
  • fanpengfei0
  • fanpengfei0
  • 2017年01月08日 21:14
  • 240

css3选择器--层次选择器

层次选择器:通过html的dom元素间的层次关系获取元素,主要层次关系有 后代、父子、相邻兄弟和通用兄弟。 1. 后代选择器: E  F, 作用的是选择元素的后代元素。包括子元素、孙辈元素等。(常用...
  • guoyangyang123456
  • guoyangyang123456
  • 2017年06月01日 16:29
  • 434
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery层次选择器
举报原因:
原因补充:

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