Create your jQuery le. Please create your jQuery le, name it as meme.js. Please
ID: 3851395 • Letter: C
Question
Create your jQuery le. Please create your jQuery le, name it as meme.js. Please remember the extension should be .js. And then add the following parts to your jQuery le.
2.1 Create a $(document).ready(function(){});
$(document).ready(function(){ });
2.2 Create a keyup event handler for #top-text element inside the function of $document.
• attach a keyup() event handler to the #top-text input so that it can respond to when a user types a key.
• Inside the keyup event handler, get the text entered into the #top-text input using .val().
• Then set it as the text of using .text().
2 2.3 Create a keyup event handler for #bottom-text element inside the function of $document.
• attach a keyup() event handler to the #bottom-text input so that it can respond to when a user types a key.
• Inside the keyup event handler, get the text entered into the #bottom-text input using .val().
• Then set it as the text of using .text().
2.4 Create a keyup event handler for #image-url element inside the function of $document.
• attach a keyup() event handler to the #image-url input so that it can respond to when a user types a key.
• Inside the keyup event handler, get the text entered into the #image-url input using .val().
• Then set it as the src attribute of the element using .attr().
2.5 Create a fadeTo action for element inside the function of $document.
• attach a hover() event handler to the image.
• Inside the hover event handler, please add two functions as the input arguments.
• The rst function fade the image slowly to opacity 0.2 when the mouse hover over the image.
• The second function fade the image slowly back to opacity 1 when the mouse hover away from the image.
Explanation / Answer
This file name is called meme.js as you like
1. answer:-
DECLARE variable outside of ready(), but then define variable inside of ready()
2nd answer:-
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "yellow");
});
$("input").keyup(function(){
$("input").css("background-color", "pink");
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p>Enter your name in the input field above. It will change background color on keydown and keyup.</p>
3 .answer:-
keyup and keydown:-
<script>
$(document).ready(function(){
$("input").keydown(function(){
$("input").css("background-color", "lightblue");
});
$("input").keyup(function(){
$("input").css("background-color", "lavender");
});
$("#btn1").click(function(){
$("input").keydown();
});
$("#btn2").click(function(){
$("input").keyup();
});
});
</script>
</head>
<body>
<input type="text">
<p><button id="btn1">Trigger keydown event for input field</button></p>
<p><button id="btn2">Trigger keyup event for input field</button></p>
2.5 Hover() event :-
<html lang="en">
<head>
<meta charset="utf-8">
<title>hover demo</title>
<style>
ul {
margin-left: 20px;
color: blue;
}
li {
cursor: default;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<ul>
<li>Milk</li>
<li>Bread</li>
<li class="fade">Chips</li>
<li class="fade">Socks</li>
</ul>
<script>
$( "li" ).hover(
function() {
$( this ).append( $( "<span> ***</span>" ) );
}, function() {
$( this ).find( "span:last" ).remove();
}
);
$( "li.fade" ).hover(function() {
$( this ).fadeOut( 100 );
$( this ).fadeIn( 500 );
});
</script>
</body>
</html>
2.5 mouseover in element Like this
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.