Javascript-选择一个元素的所有子元素并使用jQuery将它们淡出?
作者:互联网
我正在使用以下HTML代码:
<!DOCTYPE html>
<html>
<head>
<title>Project Quiz</title>
<link rel="stylesheet" type="text/css" href="z/baseCss.CSS">
<script src="/jquery-1.9.1.min.js"></script>
<script src="/baseJS.js"></script>
</head>
<body>
<div id=header></div>
<div id=contain>
<h1>Welcome to my web application</br>
Please enter your name, click 'continue' and have fun</h1>
<form>
<input type="text" id="name" value="John Doe"/>
</form>
<div class="awesome">Continue</div><br/>
</div>
<div id=footer></div>
</body>
</html>
和jQuery的代码:
$(document).ready(function(){
$("input")
.focus(function(){
$(this).css('outline-color','#559FFF');
$(this).blur(function(){
$(this).css("outline-color","#FF0000");
});
});
$("input").click(function(){
var value = $(this).val(function(){
$(this).html("");
});
});
$(".awesome").click(function(){
b._slide(1000);
});
var b = $("div:nth-child(2)");
alert(b);
});
我的问题是我无法弄清楚如何选择< div id =“ contain”>的所有子项.然后单击“ div”按钮(具有“ awesome”类的按钮),使它们淡出.
到目前为止,这是我尝试过的:
$(".contain").each(function(){
$(this).fadeOut(1000);
});
but it didnt work also i tried:
$(".contain").children(function(){
$(this).fadeOut(1000);
});
同样的结果在这里.
我究竟做错了什么?我只需要淡出< div id =“ contain”>并保持其他所有内容不变.
解决方法:
您需要使用:
$("#contain").children().fadeOut(1000);
> $(this)是您的选择器
> .children()
选择一个元素的所有子元素
> .fadeOut(1000)
淡出当前选择
您的尝试是错误的,因为:
$(".contain").each(function(){ $(this).fadeOut(1000); });
选择类为.contain的所有元素并将其隐藏
$(".contain").children(function(){ $(this).fadeOut(1000); });
选择类为.contain的元素,然后将函数传递给它不处理的.children().
请注意,在您的情况下,contain是一个ID,而不是一个类.
标签:children,fadeout,javascript,jquery 来源: https://codeday.me/bug/20191031/1972703.html