jQuery层级选择器用法分析

在HTML文档中，每个元素总是处于DOM节点树上的某个位置，文档层次结构中元素之间总是存在于某种层级关系，如父级和子级的关系等。

1. 子元素选择器

用于查找在给定的父元素下查找 这个父元素下的所有子元素，语法格式：

代码如下:

$("parent->chilid");

2. 后代元素选择器

用于在给定的祖先元素下匹配所有的后代元素，语法格式:

代码如下:

$("ancestor descendant");

3. 紧邻同辈元素选择器

用于匹配所有紧邻在prev元素后的next元素，语法格式:

代码如下:

$("prev + next")

4. 相邻同辈元素选择器

用于选择某元素后面的所有同辈元素，语法格式如下：

代码如下:

$("prev~siblings")

综合实例：

代码如下:

<!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" /> 
<script type="text/javascript" src="jquery-1.7.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){   
    $("form input").css("color", "red");  //给form元素的后代input元素设置字体颜色 
    $("div>div").css("background", "#FCF");  //给maindiv下的子元素div1和div2设置背景颜色 
    $("div~input").css("border", "2px solid blue");  //给div元素后面的所有input元素设置边框 
    $("div+input").css("border", "2px solid red");  //给紧跟在div元素后的input元素设置边框 
 });
</script> 
<title>层级选择器</title> 
</head> 
<body> 
   <form id="form1"> 
       <label>form元素的后代input元素为:input1, input2, input3</label> 
       <input type="text" id="input1" value="文本框1" /> 
       <div id="maindiv"> 
          <div id="div1">maindiv的子元素:id为div1</div> 
          <div id="div2">maindiv的子元素:id为div2</div> 
       </div>  
       <input type="text" id="input2" value="文本框2" /> 
       <input type="text" id="input3" value="文本框3" /><br /> 
       <label>maindiv的所有子元素为:div1, div2</label> 
   </form> 
</body> 
</html>

效果图如下图所示：

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery 中多条件选择器,相对选择器,层次选择器的区别

    一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足"选择器"条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素

  • jquery层级选择器(匹配父元素下的子元素实现代码)

    实例如下: <!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> <title>层级 </title&g

  • jquery层级选择器的实现(匹配后代元素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> <title>层级 </title&g

  • jQuery层级选择器实例代码

    本文实例为大家分享了jQuery层级选择器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <link rel="stylesheet" href=&q

  • 使用jquery选择器如何获取父级元素、同级元素、子元素

    一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 复制代码 代码如下: <div id="par_div"><a id="href_fir" href="#">href_fir</a> <a id="href_sec" href="#">href_sec</a> <a id="href_thr&qu

  • JQuery中$之选择器用法介绍

    1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素.下面举个例子来说明一下: HTML代码 <input name="newsletter" /> <input name="milkman" /&g

  • jQuery层级选择器_动力节点节点Java学院整理

    因为DOM的结构就是层级结构,所以我们经常要根据层级关系进行选择. 层级选择器(Descendant Selector) 如果两个DOM元素具有层级关系,就可以用$('ancestor descendant')来选择,层级之间用空格隔开.例如: <!-- HTML结构 --> <div class="testing"> <ul class="lang"> <li class="lang-javascript&quo

  • JQuery 选择器、过滤器介绍

    JQuery 选择器、过滤器介绍

    今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts

  • jQuery Selector选择器小结

    //jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 // $("*"); // 表示页面所有元素标签 // $("th, td") // 表示所有<th><td>元素标签 // $("a") // 表示所有<a>元素标签 // $("div#

  • jQuery层级选择器用法分析

    jQuery层级选择器用法分析

    在HTML文档中,每个元素总是处于DOM节点树上的某个位置,文档层次结构中元素之间总是存在于某种层级关系,如父级和子级的关系等. 1. 子元素选择器 用于查找在给定的父元素下查找 这个父元素下的所有子元素,语法格式: 复制代码 代码如下: $("parent->chilid"); 2. 后代元素选择器 用于在给定的祖先元素下匹配所有的后代元素,语法格式: 复制代码 代码如下: $("ancestor descendant"); 3. 紧邻同辈元素选择器 用于匹

  • jQuery过滤选择器用法分析

    jQuery过滤选择器用法分析

    本文实例讲述了jQuery过滤选择器用法.分享给大家供大家参考.具体分析如下: 在实践中,可以在基本选择器的基础上添加过滤选择器来完成查询任务,根据具体情况,在过滤选择器中可以使用元素的索引值.内容.属性.子元素位置.表单 域属性以及可见性作为筛选条件 1. :first选择器 格式: 复制代码 代码如下: $("selector: first") 用于对当前jQuery集合进行过滤并选择出第一个匹配元素 实例: 复制代码 代码如下: $("td:first").c

  • jQuery属性选择器用法实例分析

    本文实例讲述了jQuery属性选择器用法.分享给大家供大家参考,具体如下: 属性选择器 在HTML文档中,元素的开始标记中通常包含有多个属性(attribute) <input id="txtUsername" type="text" value="qiyisoft" name="email" style="display:block" /> 在jQuery中,除了直接使用id和class属性作

  • jQuery位置选择器用法实例分析

    本文实例讲述了jQuery位置选择器用法.分享给大家供大家参考,具体如下: 位置选择器 jQuery同样也允许我们利用元素所在位置来获取所需组件 位置选择器语法如下: "$基本选择器:位置选择器" 位置选择器种类 常用位置选择器的用法 选择第一个 格式:$("selector:first"); 选择最后一个 格式:$("selector:last") 选择奇数 格式:$("selector:odd") 偶数行 格式:$(&qu

  • jQuery层叠选择器用法实例分析

    本文实例讲述了jQuery层叠选择器用法.分享给大家供大家参考,具体如下: 层叠选择器 如果想通过DOM元素之间的层次关系来获取特定的元素,例如后代元素,子元素,相邻元素和兄弟元素等,那么层叠选择器是一个非常好的选择. 位置选择器语法如下: "基准元素 层叠符号 目标元素" 层叠选择器的用法 后代选择器 格式:$("ancestor descendant") 子选择器 格式:$("parent>child") 相邻选择器 格式:$(&quo

  • jQuery类选择器用法实例

    本文实例讲述了jQuery类选择器用法.分享给大家供大家参考.具体分析如下: 类选择的器匹配具有指定类名的所有元素. 例子: 复制代码 代码如下: $(".mydiv") 以上代码选取类名为mydiv的所有元素. 注意:在mydiv前面有一点(.). 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=

  • jQuery元素选择器用法实例

    本文实例讲述了jQuery元素选择器用法.分享给大家供大家参考.具体分析如下: 元素选择器根据元素名称匹配所有的元素. 实例代码: 复制代码 代码如下: $("div") 以上代码匹配所有的div元素. 实例代码: 复制代码 代码如下: <!DOCTYPE html>   <html>   <head>   <meta charset=" utf-8">   <meta name="author&quo

  • jQuery后代选择器用法实例

    本文实例讲述了jQuery后代选择器用法.分享给大家供大家参考.具体分析如下: 后代选择器匹配给定的祖先元素下用以匹配的所有后代元素. 点击选择器可以查阅参考手册中所有jQuery选择器. 代码实例如下: 复制代码 代码如下: $(".mydiv span") 以上代码匹配类名mydiv元素包含的span元素.两个选择器之间要用空格分隔. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta

  • jQuery分组选择器用法实例

    本文实例讲述了jQuery分组选择器用法.分享给大家供大家参考.具体分析如下: 分组选择器将每一个选择器匹配到的元素合并后一起返回,能够对它们进行相同的操作. 实例代码: 复制代码 代码如下: $(".mydiv ,span") 以上代码能够匹配类名为mydiv的元素和所有的span元素.两个选择器之间要用逗号分割. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset=&qu

随机推荐