标签: children

我想知道,JavaScript提供了各种方法来从任何元素中获取第一个子元素,但哪个是最好的？最好的,我的意思是:大多数跨浏览器兼容,最快,最全面和可预测的行为.我用作别名的方法/属性列表:

var elem = document.getElementById('container');
var child = elem.children[0];
var child = elem.firstElementChild; // == children[0]

这适用于两种情况:

var child = elem.childNodes[0]; // or childNodes[1], see below

这是形式或<div>迭代的情况.如果我可能遇到文本元素:

var child = elem.childNodes; // treat as NodeList
var child = elem.firstChild;

据我所知,firstChild使用NodeList childNodes,并firstElementChild使用children.我将这个假设建立在MDN参考上:

childNode是对元素节点的第一个子元素的引用,或者null如果没有元素节点的引用.

我猜测,就速度而言,差异(如果有的话)几乎没有,因为firstElementChild它实际上是一个引用children[0],并且children对象已经在内存中了.

扔我的是childNodes对象.我用它来查看表格元素中的表单.虽然children列出了所有表单元素,但childNodes似乎也包含HTML代码中的空格:

console.log(elem.childNodes[0]);
console.log(elem.firstChild);

两个日志 <TextNode textContent="\n ">

console.log(elem.childNodes[1]);
console.log(elem.children[0]);
console.log(elem.firstElementChild);

所有日志<input type="text" …

这个条件if是给我带来麻烦的:

if (div id=myfav has children) {
   do something
} else {
   do something else 
}

我尝试了以下所有方法:

if ( $('#myfav:hasChildren') ) { do something }
if ( $('#myfav').children() ) { do something }
if ( $('#myfav:empty') ) { do something }
if ( $('#myfav:not(:has(*))') ) { do something }

原始问题

我被邀请到我大女儿的幼儿园小组谈话并回答孩子们关于我职业的问题.该组有26名4-6岁的孩子,另外还有3名教师,他们对编程和IT本身有任何相关的恐惧,但他们大胆地学习新的技巧.我会有大约20-30分钟,没有投影仪或任何东西.他们有一台旧电脑,看起来可能是486,我甚至不确定它是否正常运行(更新:它不是).

我的研究发现了很好的早期线程,有很多好的提示:

• 您如何向5岁的孩子解释您的工作？
• 职业日:如何让8岁的"计算机程序员"听起来很酷？
• 我可以在一天内教给一群孩子一些关于编程的东西吗？

我的情况与上述情况不同:后者与年龄较大的儿童有关,而第一种情况则是与单个孩子(或老年人)交谈 - 一组20人是完全不同的挑战.

我怎样才能以有趣的方式教孩子们和他们的老师有关编程的知识？

基于答案的计划

感谢所有惊人的答案,伙计:-)我认为接受单一答案并不合理,但我最喜欢Jim,就像大多数SOers显然那样.然而,许多其他答案包含有用的提示和想法(其中一些我肯定会在未来的职业生涯中用于学校......).

我整理了一个粗略的计划:

1. 简要解释一下编程是什么,就像在这个答案中一样.
2. 告诉计算机无处不在,并与孩子们一起收集示例(如下面的几个答案所示).
3. 吉姆和三明治一起做演讲.
4. 如果时间允许,进一步构建:
   • 解释说,计算机的优势在于它们能够准确地记住它们曾经被教过的东西(并通过准备第二个三明治,重复第一次尝试的所有错误来证明它)
   • 第二轮尝试修复过程中的错误
   • 解释循环的概念:你可以让计算机n用一条指令准备三明治

这是我的计划 - 我很确定它会变得非常不同,所以我会根据情况即兴发挥.演讲安排在大约2周的时间内 - 我将在事后更新帖子,并告诉它实际上是怎么回事......

结果

最后演示的那一天到了......简而言之,一切都很顺利,这是一个巨大的成功:-)

这一次,这群人变得非常焦躁和精力充沛,所以谈话偶尔会变得有些混乱.我不得不缩短它并进入Big Sandwich Maker Show.正如吉姆所说,孩子们喜欢它.

但是有一种不可预见的副作用:在第一片面包最终准备好之后,每个人都想吃!所以有一段时间 - 我试图跟上对话并解释更多关于节目的问题 - 我们不得不与幼儿园老师安装一种紧急服务线来制作大量的果酱面包并喂饱饥饿的人群(这只是一半)早餐后一小时,记录:-).然后我们用完了面包,这显然意味着演示的结束.孩子们注意到可怜的电脑踩到了一块破坏了袜子的橘子酱后,最大的一阵笑声爆发了:-)

老师们自己也给人留下了非常深刻的印象 - 从反馈来看,这是迄今为止这个小组中最好,最有趣的职业日.再次感谢大家的好主意!

可以改进的事情(下次):

• 当我问"你觉得电脑是聪明的吗？"时,我很惊讶大多数人回答"不".然后我问谁认为电脑很聪明,为什么.然而,我忽略了问谁认为计算机是愚蠢的,为什么 - 因此我认为我错过了一些可能有趣的答案.
• 邀请孩子们围着桌子让他们积极参与......但有时可能有点过于积极.面包切片开始从餐桌上消失,一些观众模仿电脑,就像将自己的手指浸入黄油和橘子酱中一样:-)所以最好保持一定的距离.
• 为了控制饥肠辘辘的人群,应该事先清楚地告诉孩子:"你可以吃掉所有的面包,但只能在示威之后!"

但总的来说,我对结果非常满意.而且我相信孩子们得到了核心信息:作为一名程序员,如果你避免造成混乱,你可以制作你的面包(即使是橘子酱:-)

我在页面上使用它:

jQuery('.class1 a').click( function() {
  if ($(".class2").is(":hidden")) {
    $(".class2").slideDown("slow");
  } else {
    $(".class2").slideUp();
  }
});

稍后页面中的结构如下所示:

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

这个工作正常,除非你有multipule class1/class2这样的集合:

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

如何更改初始jquery代码,使其仅影响当前单击的class1下的class2？我尝试过本页推荐的变体:如何获取$(this)选择器的子节点？但还没有让它工作

我正在尝试像这样循环遍历childNodes:

var children = element.childNodes;
children.forEach(function(item){
    console.log(item);
});

但是,它Uncaught TypeError: undefined is not a function由于forEach功能而输出.我也尝试使用children而不是childNodes改变.

有人知道发生了什么吗？

假设您有一个嵌套的元素结构,例如带有MenuItems的ContextMenu:

<ContextMenu Style="{StaticResource FooMenuStyle}">
    <MenuItem Style="{StaticResource FooMenuItemStyle}"/>
    ...
</ContextMenu>

您可以轻松地将样式或模板应用于ContextMenu或MenuItem元素.但是如果MenuItem样式属于Menu样式,则将它添加到每个MenuItem元素是非常麻烦和冗余的.

有没有办法自动将这些应用于子元素？所以你可以简单地写这个:

<ContextMenu Style="{StaticResource FooMenuStyle}">
    <MenuItem/>
    ...
</ContextMenu>

如果FooMenuStyle可以包含包含MenuItem元素的样式,那将是很好的,但这似乎是不可能的.

编辑:菜单示例可能会产生误导,因为我不知道ItemContainerStyle,并且意图是一般解决方案.基于这两个答案,我提出了两个解决方案:一个常规变体和一个ItemContainerStyle等:

<Style x:Key="FooMenuItem" TargetType="{x:Type MenuItem}">
    ...
</Style>

<Style x:Key="FooMenu" TargetType="{x:Type ContextMenu}">
    <!-- Variant for specific style attribute -->
    <Setter Property="ItemContainerStyle"
            Value="{StaticResource FooMenuItem}"/>

    <!-- General variant -->
    <Style.Resources>
        <Style TargetType="{x:Type MenuItem}"
               BasedOn="{StaticResource FooMenuItem}"/>
    </Style.Resources>
</Style>

<ContextMenu Style="{StaticResource FooMenu}">
    <MenuItem/>
</ContextMenu>

我不知道是否有问题,但我想知道为什么overflow:hidden它不能在fixed父/子元素上起作用.

这是一个例子:

CSS和HTML:

.parent{
  position:fixed;
  overflow:hidden;
  width:300px;
  height:300px;
  background:#555;
}
.children{
  position:fixed;
  top:200px;
  left:200px;
  width:150px;
  height:150px;
  background:#333;
}

<div class="parent">
  <div class="children">
  </div>
</div>

现场演示:jsFiddle

您认为年轻人从编程开始应该使用哪些语言和工具？

我们很多人都开始使用专有的Basics,他们并没有对我们所有人造成长期的伤害:)但是考虑到你从那时起的经验以及你对域名的了解,现在有更好的选择吗？

有一个相关的问题,如" 教授初学者编程的最佳方法？ "和"关于开始成人编程的" 一条建议 ",我提交了答案,但孩子可能需要不同的工具.

披露:很难选择这样一个问题的"正确"答案,所以在几天内获得最高分的人将根据社区选择获得"最佳答案"标记.

我7岁想学习,如何编程？(他的想法不是我的,而且他在外面做事.所以,从这个角度来看,我并不是太担心.他已经把我的办公室里的游戏编程书带到了睡觉时间. )前几天我们坐下来写了一个非常简单的数字猜谜游戏(你选8,这是​​正确的,其他任何错误).

它没问题,但他根据语言的语法提出了许多问题.(我碰巧选择了Java,因为我当时打开了IDE.)我教授高等教育入门编程课程,所以这对我来说有点大开眼界(大多数高中毕业生都不愿意提问)我真的不得不弄清楚,如何解释一个7岁的语法？

显然,任何C类型的语言都会遇到同样的问题,就像大多数"语言"一样.我看着吱吱声,但决定不再使用它.我看了Alice的环境,但也不喜欢它.

从物理角度来看,他对键盘/鼠标感到舒服,并且可以相对轻松地将乐高套装放在一起(因此,按照有趣的结果跟随方向可以为他工作).我可以访问Lego NXT,但他仍然有点年轻(即使使用提供的图形环境,也需要很长时间才能看到工作结果).

理想情况下,我希望有这样的经验来帮助他建立对数学和逻辑的信心(如果一个7岁的孩子有逻辑:-).

我记得小时候使用龟图形/徽标.我倾向于此,但想知道是否有任何其他想法,或者是否有人可以推荐一个良好的徽标环境？

编辑1:

徽标效果很好.我需要教他角度的概念(90度,180度).不幸的是,他们并没有真正在学校做分工,所以角度可能很有趣......

首先画一个正方形:

FORWARD 50
RIGHT 90
FORWARD 50
RIGHT 90
FORWARD 50
RIGHT 90
FORWARD 50
RIGHT 90

稍后我会进入循环:

REPEAT 4 
[
    FORWARD 50
    RIGHT 90
]

然后是变量:

make "length 50

REPEAT 4 
[
    FORWARD :length
    RIGHT 90
]

这非常好.几乎没有语法,一个7岁的孩子很容易记住词汇,并立即反馈.

编辑2:

嗯,这是成功的,因为当我离开房间时,他能够编写一个简单的程序(没有循环).它实际上效果非常好 - 我们出去拿到了方格纸和量角器,我们将90度角度弄出来,然后他制作了一堆正方形,将一个正方形变成了一个矩形,并且看到了他出错的地方.如何调试它.对于对编程感兴趣的7岁的人,我推荐这种方法.我想我也会推荐给我的大专学生(!)

我有一个XML,我必须从中选择其中一个节点的子名称.我是一个初学者,所以我没有找到Xpath表达式来做到这一点.我知道节点的级别

例

姓名来自 /Employee/Department/

但是部门有儿童名字不明的节点.我必须选择Department节点的第一个子节点.我怎样才能做到这一点？