Basic javascript jquery

Basic javascript jquery

本文关键字：jquery javascript Basic      更新时间：2023-09-26

我正在尝试使用Jquery库自学JavaScript的基本html。使用下面的代码，我正在尝试更改div 红色中的 p 标签和div 黄色之外的其他 p 标签。下面的代码将所有 p 标签更改为黄色，但当我放置 4 时。以上3.它有效。只需要一个简单的解释为什么，这也是html代码 http://imageshack.us/photo/my-images/29/k9do.jpg/

$(document).ready(function() {
    $("#testbutton").click(function() {
        $("div  p").css("background-color" , "red");
        $("p").css("background-color" , "yellow");
    });
});

让我解释一下

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

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

现在

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

上面的代码会将background-color设置为div标签内部和外部的所有p标签的黄色。

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

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

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

接下来，执行此操作

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

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

原因是：每个 JavaScript 语句都按照编写的顺序/顺序执行。

因此，在您的情况下，第一个语句将首先将 div 中所有 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>标签(包括我们刚刚变成红色的标签(并将它们变为黄色。

4 ( "div p" ( 比 3 ( "div p" ( 更通用，所以如果你把 4 放在 3 之后，你将首先将嵌套在div 中的每个 p 都涂成红色，但紧接着你会用黄色着色，因为这就是你在 4

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

上面的代码行更改了嵌套在div 下的 p(找到(。它是 css 的语法。

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

上面的代码行更改了在 HTML 的 DOM 中找到的所有 p 标记

第 3 行的

$("div p")针对div 内的所有 p 标签(这是级联选择器 - 第二个标签必须在第一个标签内(，而第 4 行的$("p")针对所有段落标签。拥有不同颜色的最好方法确实是将 4 移动到 3 - 3 更具体。

这更多的是关于 css 特异性。在第 3 行中，您的选择器div p将div内的所有p设置为红色。在第 4 行中，您将所有p设置为黄色(无论它们是否在div中(来覆盖它。

你需要

首先在元素外部定义背景p tags，如果你在div内部p tags定义它，它将用黄色替换该div。

$("#testbutton").click(function() {
     $("p").css("background-color" , "yellow");
     $("div p").css("background-color" , "#FF0000");
});

在英语中，

首先，您将<div>标签内的<p>标签着色为红色。其次，您将所有<p>标记为黄色。所以当然都会有黄色。你必须记住，JavaScript 中的样式在优先级方面不像 CSS。JavaScript 将 CSS 样式添加到内联style=""属性中，因此唯一会覆盖样式的是你不应该使用的!important女巫。

因此，当您将 4 放在 3 以上时，它之所以有效，是因为您将所有<p>标签着色为黄色，然后专门将 <div> 标签中的标签着色为红色。

所以基本上任何添加到 JavaScript 中最后一个元素的样式都会覆盖前一个，除非使用!important

相关文章：