问基本javascript jquery

EN

让我来解释一下

$("div p").css("background-color" , "red");

上面的代码将为background-color标记内的所有p标记设置div红色。

现在,

$("p").css("background-color" , "yellow");

上面的代码将为所有p标记设置background-color黄色，无论是在div标记内部还是外部。

现在，当你做相反的过程时，

$("p").css("background-color" , "yellow");

设置所有p标签的background-color黄色，首先是div标签内部和外部。

接下来，执行以下操作

$("div p").css("background-color" , "red");

为background-color标记内的所有p标记设置div红色，但不为div外的p标记设置div红色。因此，这一种方法有效，但不是第一种方法。

原因是：每条JavaScript语句都是按照它们被写成的顺序执行的。

因此，在本例中，第一条语句将中所有p标记的背景颜色改为红色。但第二个语句会将所有p标记的背景颜色更改为黄色。因此，第二条语句覆盖了第一条语句所做的更改。

这也解释了为什么，当你改变这些行时，它会像预期的那样工作。因为在这种情况下，第一个语句会将p标记的背景颜色更改为黄色。然后，第二个语句将div标记中那些p标记的背景颜色更改为红色。

更新：您也可以使用如下所示：

$('p').each(function(){
    var clr = ('DIV' === $(this).parent()[0].nodeName) ? 'red' : 'yellow';
    $(this).css('background-color', clr);
});

这段代码循环遍历所有p标签，并根据其父元素的标签名称设置背景颜色。如果它是一个div，它将使用红色，否则使用黄色。这是一个演示：jsfiddle.net/3dL7r

你思考这个问题的方式是错误的。如果这些样式方向都在CSS文件中，则div p方向将胜过p方向，因此内部<p>将是红色的，外部<p>将是黄色的。

然而，这不是我们在这里做的事情。jQuery在最初加载CSS之后运行，并不关心(或需要关心)页面范围内的CSS样式规则；我们使用jQuery所做的所有样式更改都将覆盖预设的样式。

让我们看看你写了些什么。你的第一个命令，

$("div p").css("background-color" , "#FF0000");

翻译成英文是“获取<div>标记中存在的所有<p>标记，并将其背景颜色设置为红色”。你的第二个命令，

$("p").css("background-color" , "yellow");

获取所有<p>标记(包括我们刚刚变为红色的标记)并将它们变为黄色。