我对jQuery和JavaScript非常陌生，我想创建一个函数，在这个函数中，我可以点击页面上的任何对象，然后所选对象需要褪色或更改样式等(重点是点击需要随机指定(。
我尝试过的都不起作用，即使在使用：selected选择器时，它仍然需要特定于我想要实现的目标。此刻，我设法让一切都变淡，而不仅仅是选定的对象。
这是我的代码：
$('*').click(function() {
$(this).children().fadeOut( "slow" );
});
这是代码的其余部分，但我认为不需要。
$(document).ready(function () {
alert("Welcome to my jQuery page. The page has finished loading");
document.getElementById('mainBd').style.backgroundImage = "url('/images/SoupyBlissfulHeron-max-1mb.gif')";
});
$("#lorem").hover(function () {
$(this).css({
"background-color": "rgba(218, 243, 247, 0.5)",
"color": "rgb(240, 119, 0)",
"border-left": "5px solid #ccc",
"font-size": "2em"
});
});
$('*').click(function() {
$(this).children().fadeOut( "slow" );
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>Document</title>
</head>
<body id="mainBd">
<div class="container">
<h1 class="h1 display-3">
Welcome To My jQuery Page.
</h1>
<p>Hover over the paragraph below to change its styling.</p>
<p id="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sapiente iure, quod vitae veritatis reprehenderit expedita officia accusantium commodi delectus nihil, amet in. Fugiat aliquam veritatis eos sit esse autem!
</p>
<p>
Click on any element to let it fade out.
</p>
</div>
<script type="text/javascript" src="jQuery_Task.js"></script>
</body>
</html>jQuery事件"气泡；到DOM的顶部(如果不阻止的话(。所以你可以把监听器放在body上。
点击事件有target，显示点击的确切内容，因此使用：
$(document).ready(function () {
//alert("Welcome to my jQuery page. The page has finished loading");
$('#mainBd').css('backgroundImage', "url('/images/SoupyBlissfulHeron-max-1mb.gif')");
$("#lorem").hover(function () {
$(this).css({
"background-color": "rgba(218, 243, 247, 0.5)",
"color": "rgb(240, 119, 0)",
"border-left": "5px solid #ccc",
"font-size": "2em"
});
});
$('body').click(function(event) {
$(event.target).fadeOut( "slow" );
});
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<title>Document</title>
</head>
<body id="mainBd">
<div class="container">
<h1 class="h1 display-3">
Welcome To My jQuery Page.
</h1>
<p>Hover over the paragraph below to change its styling.</p>
<p id="lorem">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non sapiente iure, quod vitae veritatis reprehenderit expedita officia accusantium commodi delectus nihil, amet in. Fugiat aliquam veritatis eos sit esse autem!
</p>
<p>
Click on any element to let it fade out.
</p>
</div>
<script type="text/javascript" src="jQuery_Task.js"></script>
</body>
</html>