jquery中子元素和后代元素的区别示例介绍

今天学习jQuery的选择器：

jQuery选择器分为基本选择器、层次选择器、过滤选择器、表单选择器。

基本选择器：id,class,标签名，*，元素组合(div,span,p.myClass)

层次选择器：

难点： jquery中子元素和后代元素的区别
后代，就是当前元素的所有后代，都算，
子元素，就是当前元素的子集，再往下走就不算了。

具体的分析可以参考：


代码如下:

<div>This is <strong>very</strong> important.</div>
<div>This is <em>really <strong>very</strong></em> important.</div>

以上是html。运行后在浏览器里是看到

This is very important.
This is really very important.

这样的样式，为了容易看到效果，我们不妨就尝试用添加css颜色来试一下

如果运行$("div strong").css("color","red");就是把div的后代元素strong变为红色。运行后是

This is very important.
This is really very important.

如果运行$("div>strong").css("color","blue");就是把div的子元素strong变为蓝色。运行后是

This is very important.
This is really very important.

可以通俗的这样理解，例如有一家人三代同堂，爷爷，父亲和你，这样话爷爷的子元素就是你父亲，同时你父亲也是爷爷的后代元素，而你只是爷爷的后代元素。

赞 (0)

相关推荐

  • JQuery遍历元素的后代和同胞实现方法

    JQuery遍历元素的后代和同胞实现方法

    1.遍历后代 children() children() 方法返回被选元素的所有直接子元素. <!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">

  • jQuery遍历DOM元素与节点方法详解

    本文实例讲述了jQuery遍历DOM元素与节点方法.分享给大家供大家参考,具体如下: 一.向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素. ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点. 备注:parent与parents的区别,

  • 举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历

    一.jQuery的向下遍历 <script src="../JS/Extend.js"></script> <script src="../JS/my.js"></script> <link type="text/css" rel="stylesheet" href="../CSS3/my.css"> </head> <body&

  • jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

    jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

    如下图,显示了HTML中的结构树,通过 JQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞).这种移动被称为对 DOM 进行遍历. 遍历 - 父级(祖先) 向上遍历DOM数. 通过如下三个方法,我们可以获取父级元素: parent() parents() parentsUntil() 1.JQuery parent() parent() 方法返回被选元素的直接父元素. 该方法只会向上一级对 DOM 树进行遍历. <section

  • jQuery学习之prop和attr的区别示例介绍

    jQuery学习之prop和attr的区别示例介绍

    1..prop( propertyName ) 获取匹配集合中第一个元素的Property的值 2. .prop( propertyName, value ) .prop( map ) .prop( propertyName, function(index, oldPropertyValue) ) 给匹配元素集合设定一个或多个属性 .prop()和 .attr()区别 下面是关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使

  • jquery中子元素和后代元素的区别示例介绍

    今天学习jQuery的选择器: jQuery选择器分为基本选择器.层次选择器.过滤选择器.表单选择器. 基本选择器:id,class,标签名,*,元素组合(div,span,p.myClass) 层次选择器: 难点: jquery中子元素和后代元素的区别 后代,就是当前元素的所有后代,都算, 子元素,就是当前元素的子集,再往下走就不算了. 具体的分析可以参考: 复制代码 代码如下: <div>This is <strong>very</strong> important

  • jQuery中delegate与on的用法与区别示例介绍

    在jQuery1.7中 .delegate()已被.on()取代.对于早期版本,它仍然使用事件委托的最有效手段. 在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的. .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 复制代码 代码如下: // jQuery 1.4.3+ $( elements ).delegate( selector, events, data, handler ); // jQ

  • jquery的trigger和triggerHandler的区别示例介绍

    trigger 和triggerHandler都是模拟事件发生的 用具体的案例来描述一下区别 复制代码 代码如下: <html lang="en"> <head> <meta charset="utf-8"> <title>test</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></scrip

  • JQuery中的html()、text()、val()区别示例介绍

    1.HTML html():取得第一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档 html(val):设置每一个匹配元素的html内容.这个函数不能用于XML文档.但可以用于XHTML文档. 2.TEXT text():取得所有匹配元素的内容. 结果是由所有匹配元素包含的文本内容组合起来的文本.这个方法对HTML和XML文档都有效. text(val):设置所有匹配元素的文本内容 与 html() 类似, 但将编码 HTML (将 "<" 和 &

  • Jquery AJAX POST与GET之间的区别详细介绍

    1:GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配] 所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的) 防止 GET 的 等幂 访问 就在URL后面加上 ?+new Date();,[总之就是使每次访问的URL字符串不一样的] 设计WEB页面的时候 也应该遵守这个原则 2:一.谈Ajax的Get和Post的区

  • JQuery与JS里submit()的区别示例介绍

    ASP.NET 的服务器控件回发是使用这一段JS代码: 复制代码 代码如下: var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTAR

  • Jquery中的层次选择器与find()的区别示例介绍

    复制代码 代码如下: $("#anaylseBody tr").find("td:eq(" + $("#analyse th:contains(" + $(this).val() + ")").index() + ")").hide(); ("#anaylseBody tr") find作为根基 复制代码 代码如下: $("#anaylseBody tr td") 以

  • jquery获取颜色在ie和ff下的区别示例介绍

    在使用$("#id").attr("color") 获取颜色的时候,ie和ff是不同的.举个简单的例子: 复制代码 代码如下: <font id="id" color="green"> 使用$("#id").attr("color") 在ff,chrome中获取到的值是"green",在ie中获取到的值是"#008000". 所以说,如

  • jQuery中的height innerHeight outerHeight区别示例介绍

    标准浏览器下: height:高度 innerHeight:高度+补白 outerHeight:高度+补白+边框,参数为true时:高度+补白+边框+边距 html代码: 复制代码 代码如下: <div class="width: 150px;height:20px;float: left;border: 2px solid red;margin: 10px;margin: 10px;padding: 10px;" id="test">jjjjj<

随机推荐