jquery中如何获取当前dom对象里的子元素?

author author     2023-04-12     249

关键词:

HTML代码:

<div class="aaa">
<div class="bbb"></div>
</div>
<div class="aaa">
<div class="bbb"></div>
</div>

JS 代码:
$(".aaa").bind("mouseover",function()
// 此时如何获取鼠标悬停的aaa节点下的bbb节点

);

操作步骤:
页面上有两个或者多个clasName为aaa的div节点,用jquery统一绑定mouseover事件,然后操作鼠标悬停在其中一个aaa节点
提问:
此时,我想获取当前这个aaa节点下的bbb节点应该如何写法?请给出详细的代码,谢谢。

jquery中获取当前dom元素的子元素的方法有很多,常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素,find()方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

工具原料:jQuery、编辑器、浏览器

一、使用children()方法获得子元素

1、使用该方法获取子元素并设置子元素的字体为蓝色,代码如下:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
  body  font-size:16px; font-weight:bolder; 
  p  margin:5px 0; 
</style>
</head>
<body>
  <div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>

    <p>And One Last Time</p>
  </div>
<script>$("div").children(".selected").css("color", "blue");</script>
</body>
</html>

2、运行的效果如下图:

二、使用find()方法获取子元素

1、使用fand()方法获取子元素并且进行选择器的筛选,代码如下图:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
  <p><span>Hello</span>, how are you?</p>
  <p>Me? I\'m <span>good</span>.</p>

<script>
  $("p").find("span").css(\'color\',\'red\');
</script>

</body>
</html>

2、运行的结果如下图:

参考技术A

常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素,find()方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

jquery中获取当前dom元素的子元素的方法有很多,常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素,find()方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。

一、使用children()方法获得子元素

1、使用该方法获取子元素并设置子元素的字体为蓝色,代码如下:

2、运行的效果如下图:

二、使用find()方法获取子元素

1、使用fand()方法获取子元素并且进行选择器的筛选,代码如下图:

2、运行的结果如下图:

参考资料

博客.博客[引用时间2018-1-9]

参考技术B 一楼正解,可以使用的 参考技术C children 应该就可以了。 参考技术D $(this).find(".bbb")本回答被提问者采纳

jquery如何获取父元素的子元素

jquery如何获取父元素的子元素如<divid="divimg"><imgsrc="dsd.jpg"/><imgsrc="dsd.jpg"/><imgsrc="dsd.jpg"/></div>我想通过divID=“divimg”得到div中的第一个img标签,让他显示,其他隐藏请求各位大... 查看详情

jquery中dom操作

1.CSS-DOM操作  获取和设置元素的样式属性:css()  获取和设置元素透明度:opacity属性  获取和设置元素高度、宽度:height(),width()  获取元素在当前视窗中的相对位移:offset()其返回对象包含了两个属性:top,left。2.加载... 查看详情

如何在 jQuery 中获取屏幕上可见的元素对象? [复制]

】如何在jQuery中获取屏幕上可见的元素对象?[复制]【英文标题】:Howtogeton-screenvisibleelementobjectsinjQuery?[duplicate]【发布时间】:2013-10-3003:42:35【问题描述】:我在DOM中有一个对象列表,它比屏幕高度区域长。我只需要检测屏幕上... 查看详情

vue操控dom

参考技术A相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vu... 查看详情

jquery(代码片段)

一、jQuery对象jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:$(“#test”).html();$("#test").html()/... 查看详情

javascript24_dom编程:div的原型链

...lement->HTMLElement->Element->Node->...通过元素节点对象获取其他节点的方法element.childNodes获取当前元素的子节点(会包含空白的子节点)element.children获取当前元素的子元素element.firstElementChild获取当前元素的第一个子元素element... 查看详情

jquery与dom

先说dom和jq的区别:转载自:https://segmentfault.com/a/1190000003710344什么是jQuery对象?就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。例如:$("#test").html() 意思是指:获取ID为test的元素... 查看详情

js操作dom对象及怎么获取浏览器宽高

...访问DOM,这要归功于其一致的API。getElementById(id)(document)获取有指定惟一ID属性值文档中的元素getElementsByTagName_r(name)返回当前元素中有指定标记名的子元素的数组hasChildNodes()返回一个布尔值,指示元素是否有 查看详情

如何从 jQuery 选择器中获取 DOM 元素?

】如何从jQuery选择器中获取DOM元素?【英文标题】:HowtogetaDOMElementfromajQueryselector?【发布时间】:2010-12-1306:26:36【问题描述】:我很难从jQuery选择器中找到实际的DOMElement。示例代码:<inputtype="checkbox"id="bob"/>varcheckbox=$("#bob").... 查看详情

jquery中事件模块介绍

事件模块1、提供其他DOM方法包括:next 和 nextAll方法1.1next方法实现目标:扩展框架方法,获取当前元素的下一个元素问题:如何获取下一个元素?1.1.1提供nextSibling工具方法说明:这是一个工具型方法,用来获取指定元素... 查看详情

关于jquery对象与dom对象

学习jquery,需要对DOM对象和jquery对象进行区分。dom树dom对象jquery对象1.DOM对象DOM(DocumentObjectModel),即文档对象模型,DOM可以表示成一棵树。DOM的节点可以通过javascript中的getElementByTagName或者getElementById来获取元素节点&#x... 查看详情

vue获取当前点击元素的dom对象

参考技术A$event:当前触发的是什么事件$event.target:触发事件的元素对象(不一定是绑定事件的对象,会因为事件冒泡变化)$event.currentTarget:绑定事件的元素对象参考:vue中关于$event的通俗理解Vue点击获得父元素,子元素,兄弟元... 查看详情

jquery获取改变元素属性值

标签的属性称作元素属性,在JS里对应的DOM对象的对应属性叫DOM属性。JS里的DOM属性名有时和原元素属性名不同。12//返回元素指定属性值3vartxt1_val=$("#txt1").attr("value");4//通过元素的DOM属性名更改DOM属性值5$("#txt1").attr({value:"txt1_value... 查看详情

jquery对象转化为dom对象

代码不全:varcm=$("clickMe");//获得的是jQuery对象//jQuery对象转换为DOM对象vart=cm[0];我想问的是,这里cm后面中括号里面只能写0?我上面写的那个varcm=$("clickMe");//获得的是jQuery对象这块写的不对,应该是varcm=$("... 查看详情

jquery是如何通过class来获取元素的?

我看到源码中每个有this[0],这个是什么意思啊我说的不是jquey的用法,我说的是源代码,我现在研究源代码,我想jquery源码是怎么实现的,this[0]是指本身的第一个子元素吗?jquery通过任何选择器取得的对象都是jquery对象而不是Ja... 查看详情

Raphael JS:如何从 Dom 对象(Element.node)中获取 Raphael 元素?

】RaphaelJS:如何从Dom对象(Element.node)中获取Raphael元素?【英文标题】:RaphaelJS:HowtogetRaphaelelementfromDomobject(Element.node)?【发布时间】:2012-08-0620:39:28【问题描述】:我尝试使用Raphael的节点函数来获取一个DOM对象并为上下文菜单... 查看详情

js-jquery对象与dom对象相互转换

什么是jQuery对象?---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。比如:$("#test").html()意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法这段代码等同于用DOM实现... 查看详情

安全地解包jquery实例以获取包装的dom元素(代码片段)

使用jQuery包装两次HTML元素是一种安全的操作,因为它返回相同DOM元素的实例:var$a=$('#foo');var$b=$($a);alert($b.get(0)===$a.get(0));//true它允许灵活设置配置对象,可以包含选择器,DOM元素或jQuery实例。我不知道,所以在我的个人库中,... 查看详情