jquery如何用$(this)选择他下面的子元素

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：indexhtml，并引入jquery，编写问题基础代码。

2、在indexhtml中的<script>标签，输入jquery代码：

$('li')hover(function () {

$(this)find('dd')css('display', 'inline');

});

3、浏览器运行indexhtml页面，此时当鼠标移动到li上时，它的字元素dd通过$(this)的方式获取被显示了出来。

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和同辈元素等，那么层次选择器是一个非常好的选择。

$(“ancestor

descendant”)：选取parent元素后所有的child元素

ancestor的中文意思是“祖先”，descendant的中文意思是“后代”‍

$(“body div”)选取body元素下所有的div元素。    

$(“ul li”)    选取ul元素下所有的li元素。    

$(“#test div”)    选取id为“test”的元素所包含的所有的div子元素    

$(“div#test div”)    选取id为“test”的div所包含的所有的div子元素    

$(“test div”)    选取class为“test”的元素所包含的所有的div子元素    

$(“divtest span”)    选取class为“test”的div所包含的所有的span子元素    

$(“spantest demo”)    选取class为“test”的span所包含的所有的class为demo的元素    

$(“test demo”)    选取class为“test”的元素所包含的所有的class为demo的元素

2 $(“parent

> child”)：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了

$(“body > div”)选取body元素下所有的第一级div元素。    

$(“ul > li”)    选取ul元素下所有的第一级li元素。    

$(“#test > div”)    选取id为“test”的元素所包含的所有的第一级div子元素    

$(“div#test > div”)    选取id为“test”的div所包含的所有的第一级div子元素    

$(“test > div”)    选取class为“test”的元素所包含的所有的第一级div子元素    

$(“divtest > span”)    选取class为“test”的div所包含的所有的第一级span子元素    

$(“spantest > demo”)    选取class为“test”的span所包含的所有的第一级class为demo的元素    

$(“test > demo”)    选取class为“test”的元素所包含的所有的第一级class为demo的元素

3

$(“prev

+ next”)：prev和next是两个同级别的元素 选中在prev元素后面的next元素

$(“#demo+img”)选在id为demo元素后面的img对象如果id为demo元素后面没有同级的img对象，那么这个$(“#demo+img”)length=0

4

$(“prev

~ siblings”):选择prev后面的根据siblings过滤的元素。注:siblings是过滤器

$(“#demo~[title]“)选择id为demo的元素后面所有带有title属性的元素，同样如果id为demo的元素后面没有一个带有title属性的元素，那么$(“#demo~[title]“)length = 0

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

$(document)ready(function(){

$("div p")first();//获取第一个<div>中的第一个<p>

$("div p")last();//获取最后一个<div>中的最后一个<p>

$("p")eq(1);//获取所有<p>中的第二个<p>

$("p")filter("demo");//返回带有demo类名的所有<p>

$("p")not("demo");//返回不带有demo类名的所有<p>

$("p")parent();//返回<p>的直接父元素；

$("p")parents();//返回<p>的所有祖先

$("p")parentsUntil("div");//返回<p>与<div>间的所有祖先

$("div")children();//返回<div>的直接子元素

$("div")find();//返回<div>的所有后代

$("h1")siblings();//返回<h1>的所有兄弟元素

$("h1")next();//返回<h1>的下一个同胞元素

$("h1")nextAll();//返回<h1>后面的所有同胞元素

$("h1")nextUntil("h6");//返回<h1>与<h6>间的所有同胞元素

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素

});

首先是自己的所有后代： $("#b")find("")

然后是自己的所有弟弟：$("#b")nextAll()

接着是弟弟们的所有后代：$("#b")nextAll()find("")

然后是自己所有祖先的弟弟（父亲的弟弟、祖父的弟弟……）：$("#b")parents()nextAll()

最后是所有祖先的弟弟们的所有后代：$("#b")parents()nextAll()find("")

"1、利用标签名获取元素

$(""标签名"")

2、通过ID获取元素

$(""#id_name"")

3、通过 类名获取元素

$(""className"")

4、一次性获取多个元素

$(""元素名, 元素名, 元素名 "")

5、通过指定层次关系获取元素

$(""祖先 子孙"")

$(""父 > 子"")

$(""前 + 后"")

$(""兄 ~ 弟"")

6、根据元素的属性值获取元素

[attribute]

[attribute = value]

[attribute != value]

[attribute ^= value]

[attribute $= value]

[attribute = value]"

以上就是关于jquery如何用$(this)选择他下面的子元素全部的内容，包括:jquery如何用$(this)选择他下面的子元素、jquery中的层次选择器都有哪些选择器、如何获取jQuery集合的某一项等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！