jquery中子元素和后代元素的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jquery中子元素和后代元素的区别相关的知识,希望对你有一定的参考价值。

本文转载,原网站地址:http://blog.sina.com.cn/s/blog_775da6710100vzbr.html

 

对于刚学jquery的朋友来说,有时候会对jquery的层选择器$("ancestor descendant")和$("parent>child")产生一点理解上的问题。其实很简单,看完下面的例子你就会完完全全明白了。

 

<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.
 

看到这里我想应该都明白了吧,如果再不懂的话,可以通俗的这样理解,例如有一家人三代同堂,爷爷,父亲和你,这样话爷爷的子元素就是你父亲,同时你父亲也是爷爷的后代元素,而你只是爷爷的后代元素。

以上是关于jquery中子元素和后代元素的区别的主要内容,如果未能解决你的问题,请参考以下文章

后代选择器和子元素选择器的区别

jquery 子元素 后代元素 兄弟元素 相邻元素

使用 jQuery 获取不是具有特定 CSS 类的容器的子元素的元素的后代

css后代选择器和子选择器的区别

转载JQuery 中empty, remove 和 detach的区别

jQuery 查找后代元素