Question

我是jQuery的新手，还在学习。我的问题是我不知道如何将以下javascript代码转换为jQuery。

Javacript：

document.getElementsByClassName('p-bg')[0].style.backgroundColor = '#'+this.color

先谢谢你们。

顺便说一下这是完整的代码：

<input class="color" onchange="document.getElementsByClassName('p-bg')[0].style.backgroundColor = '#'+this.color">

再次感谢

Answer 1

$(".color") jQuery class selector

.change .change() form events

.eq() .eq() filter elements

.css() .css() manipulation

$(".color").change(function(){
    $(".p-bg").eq(0).css("background-color", $(this).css("color"));
})

注意 jQuery中的document.getElementsByClassName('p-bg')[0]等同于$(".p-bg").eq(0)

请记住，在jQuery中，必须加载DOM才能开始工作，例如：

$(document).ready(function(){
    //You jQuery code here...
})

Answer 2

$('.p-bg:first').css('backgroundColor','"#"+this.color');

Answer 3

$(this)函数绑定一个函数，该函数将执行选择集的更改，在我们的例子中，所有元素都具有class =＆＃39; color＆＃39;。

函数中的

$('.p-bg:first')将引用选择中的当前DOM元素onchange，因此我们以这种方式捕获它的颜色属性。

css，这里我们选择所有带有类p-bg的元素，并获取我们使用的第一个元素：第一个伪类选择器，然后使用'backgroundColor' jquery函数，我们是使用当前元素$(this).css("color")的另一个css属性（颜色）定义第一个参数$(".color").change(function(){ $('.p-bg:first').css('backgroundColor', $(this).css("color")); });中的css属性和第二个参数中的属性值。

当我们使用带有一个参数的css函数时它将返回值，使用2参数我们将设置值。

以下代码将是jquery中的更改。

CROSS

Answer 4

如果你真的想看起来很像你在你的html中使用了Js，这对你有用（只有一行代码）：

<input class="color" onchange="$(this).css('background-color',$(this).css('color'))">

但我会建议你创建一个改变功能，然后再进行处理。

HTML：

<input class="color">

脚本：

<script>
$('.color').on('change',function(){
    $(this).css('background-color',$(this).css('color'));
});
</script>

说明：

$(this)将为您获取此元素。然后使用.css('background-color',$(this).css('color'))将其颜色分配给它的背景。

将改变DOM元素背景颜色的Javascript代码转换为JQuery

4 个答案: