JQuery Quiz II
1. Which, if any, of the following 3 code fragments are equivalent? Explain why they are different, if they are. Explain why they can have different parameters and be equivalent, if they are equivalent. //code fragment 1 $("li").each(function(idx, e) { $(e).css(“color”, “yellow”); }); //code fragment 2 $("li").each(function() { $(this).css(“color”, “yellow”); }); //code fragment 3 $("li").each(function(idx) { $(this).css(“color”, “yellow”); });
Solution:- All the above 3 codes are equivalent and work the same. The only difference is arguments. 1st has 2 arguments 'e' is the element and 'idx' is the index of the element. 2nd have 0 arguments, and 'this' represents the current element. 3rd has 1 argument 'idx' is the index of the element and 'this' represents the current element.
2. Write a jQuery expression to find all divs on a page that include an unordered list in them, and make their text color be blue. <div>no ul here </div> <div> This does contain a ul. <ul> <li>the first item</li> <li>the second item</li> </ul> </div> <script> <!—INSERT YOUR JQUERY CODE HERE - - > </script> </body>
Solution:- $(document).ready(() => $("div ul").css('color','blue'));
3. Write jQuery code to append the following div element (and all of its contents) dynamically to the body element. <div><h1>JQuery Core</h1></div> HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> </body> </html>
Solution:- $(document).ready(() => $("body").append("<div><h1>JQuery Core</h1></div>"));