Javascript 向jQuery中的单个元素添加css样式_Javascript_Jquery_Css_Jquery Ui_Styling

Javascript 向jQuery中的单个元素添加css样式

javascript jquery css jquery-ui

Javascript 向jQuery中的单个元素添加css样式,javascript,jquery,css,jquery-ui,styling,Javascript,Jquery,Css,Jquery Ui,Styling,$（“.className”）返回所有具有class.className的元素，我只想向特定元素添加样式，即我想使用它们的索引号访问元素 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <p class="para

$（“.className”）

返回所有具有class

.className

的元素，我只想向特定元素添加样式，即我想使用它们的索引号访问元素

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head> 
<body>
    <p class="para">first paragraph </p>
    <p class="para">Second paragraph </p>
    <p class="para">Third paragraph </p>
    <script>
        console.log($(".para"));
        // console.log($(".para")[0].css({"color":"red"}));
 </script>
</body>
</html>


第一段
第二段
第三段
console.log（$（“.para”）；
//log（$（“.para”）[0].css（{“color”：“red”}）；

在这段代码中，如何将红色添加到第一段，将黄色添加到第二段

第一段
第二段
第三段
$（“.para:eq（0）”）.css（'color'，'red'）；
$（“.para:eq（1）”）.css（‘颜色’、‘黄色’）；

执行

$（“.para”）[0]

时，将得到一个dom元素，而不是jquery元素。您需要使用

$（$（“.para”）[0]）

再次将其转换为jquery元素，然后只有您可以使用jquery

css

方法更改其样式


第一段
第二段
第三段
$（$（“.para”）[0]）.css（{“颜色”：“红色”}）；
$（$（“.para”）[1]）.css（{“颜色”：“黄色”}）；

您可以使用jQuery

.eq（）

获取元素并更新此元素的任何内容


第一段
第二段
第三段
$（“.para”）.eq（0）.css（{“颜色”：“红色”}）；
$（“.para”）.eq（1）.css（{“颜色”：“黄色”}）；

如果没有触发更改的事件，则只能使用css伪选择器，如

第一个类型的&第n个子项（childIndex）


.para:第一种类型{
颜色：红色；
}
第4段：第n名儿童（2）{
颜色：黄色；
}
第4段：第n名儿童（3）{
颜色：绿色；
}
第一段
第二段
第三段
使用addClass（），使用的参数是索引和类名；检查代码段：D

函数addClass（索引，类名）{
var el=jQuery（'.para'）；
el[index].classList.add（classname）；
console.log（el[索引]）；
}
addClass（1，‘活动’）
.active{
颜色：红色
}

第一段
第二段
第三段
$（“.para”）.eq（0）.css（{“颜色”：“黄色”}）

第一段`在此处输入代码`
第二段
第三段
<p class="para">first paragraph </p>
<p class="para">Second paragraph </p>
<p class="para">Third paragraph </p>

$(".para:eq( 0 )").css('color', 'red');
$(".para:eq( 1 )").css('color', 'yellow');