Section 1
Preview this deck
All <p> elements that are the only child, of its type, of their parent
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 14, 2020
Cards (107)
Section 1
(50 cards)
All <p> elements that are the only child, of its type, of their parent
$("p:only-of-type")
The last <p> element
$("p:last")
The document's root element
$(":root")
All elements which contains the text "Hello
$(":contains('Hello')")
All elements with a href attribute value ending with ".jpg"
$("[href!='default.htm']")
All input elements with type="text"
$(":text")
The fourth element in a list (index starts at 0)
$("ul li:eq(3)")
All input elements that are not empty
$("input:not(:empty)")
List elements with an index greater than 3
$("ul li:gt(3)")
All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
$("[title|='Tomorrow']")
All input elements with type="password"
$(":password")
All <p> elements
$("p")
All <p> elements that are the only child of their parent
$("p:only-child")
All <p> elements that are descendants of a <div> element
$("div p")
All elements with the class "intro" or "demo"
All elements with the class "intro" or "demo"
All <p> elements that are siblings of a <div> element
$("div ~ p")
All elements with a href attribute value not equal to "default.htm"
$("[href!='default.htm']")
All animated elements
$(":animated")
All <p> elements with a lang attribute value starting with "de"
$("p:lang(de)")
All <p> elements that are the 2nd child of their parent
$("p:nth-child(2)")
All even <tr> elements
$("tr:even")
The first <p> element
$("p:first")
All <p> elements that are the last <p> element of their parent
$("p:last-of-type")
All elements with a href attribute
$("[href]")
The element with id="lastname"
$("#lastname")
All hidden <p> elements
$("p:hidden")
All <div> elements that have a <p> element
$("div:has(p)")
All odd <tr> elements
$("tr:odd")
All elements that are empty
$(":empty")
All input elements
$(":input")
All elements with a href attribute value equal to "default.htm"
$("[href='default.htm']")
elements that are the first child of their parent
$("p:first-child")
All <p> elements that are the first <p> element of their parent
$("p:first-of-type")
All visible tables
$("table:visible")
All header elements <h1>, <h2> ...
$(":header")
The <p> element that are next to each <div> elements
$("div + p")
All <p> elements that are a direct child of a <div> element
$("div > p")
All <p> elements that are the last child of their parent
$("p:last-child")
All elements with a title attribute value containing the word "hello"
$("[title*='hello']")
The element that currently has focus
$(":focus")
All <p> elements that are the 2nd <p> element of their parent
$("p:nth-of-type(2)")
All <p> elements that are the 2nd child of their parent, counting from the last child
$("p:nth-last-child(2)")
All elements with a title attribute value containing the specific word "hello"
$("[title~='hello']")
All <p> elements that are the 2nd <p> element of their parent, counting from the last child
$("p:nth-last-of-type(2)")
All elements that are a parent of another element
$(":parent")
All <h1>, <div> and <p> elements
$("h1,div,p")
All elements with a title attribute value starting with "Tom"
$("[title^='Tom']")
Selects All elements
$("*")
Selects All elements with class="intro"
$(".intro")
List elements with an index less than 3
$("ul li:lt(3)")
Section 2
(50 cards)
When the "button" element is clicked set the background-color css value for "p" elements to "yellow"
$("button").click(function(){ $("p").css("background-color", "yellow"); });
The function is executed when the form field loses focus:
$("xxx").blur(function(){ $xxx; });
When "button" element is clicked, 3 diffrent animations are activated on the "div" element simultaneously.
$("button").click(function(){ $("div").animate({ xxx: 'xxx', xxx: 'xxx', xxx: 'xxx', }); });
On click, fade in "p" elements, slowly.
$("xxx").click(function(){ $("p").fadeIn("slow") });
All disabled input elements
$(":disabled")
The hover() method takes two functions SEPERATED BY A COMMA and is a combination of the mouseenter() and mouseleave() methods. The first function is an alert saying "You entered" is executed when the mouse enters the HTML element The second function is an alert saying "You now leave" is executed when the mouse leaves the HTML element:
$("xxx").hover(function(){ alert("You entered"); }, function(){ alert("You now leave"); });
Attach multiple (3) event handlers to a <p> element
$("p").on({ xxx: function(){ $xxx; }, xxx: function(){ $xxx; }, xxx: function(){ $xxx; } });
All checked input elements
$(":checked")
On Click, hide "p" elements in 1000 milliseconds
$("xxx").click(function(){ $("p").hide(1000); });
When the "button" element is clicked change 2 attributes of an element with an id of "xxx": First, change "href" attribute to "abc.com". Then, change the "title" attribute to "new title"
$("button").click(function(){ $("#xxx").attr({ "href" : "abc.com", "title" : "new title" }); });
When the "button" element is clicked run a function chaining 3 actions: First change text color to red. Second, make element slide up in 2000 ms. Third, make the element slide down in 2000 ms.
$("button").click(function(){ $("p").css("color", "red").slideUp(2000).slideDown(2000); });
An alert saying "You now leave" is executed when the mouse pointer leaves the HTML element
$("xxx").mouseleave(function(){ alert("You now leave"); });
Removes all <p> elements with class="test" and class="demo"
("p").remove(".test, .demo");
An alert saying "Mouse up over" is executed, when the left mouse button is released, while the mouse is over the HTML element
$("xxx").mouseup(function(){ alert("Mouse up over"); });
When the "button" element, run a function that hides the "p" element slowly and has a callback function that is an alert that says "hidden".
$("button").click(function(){ $("p").hide("slow", function(){ alert("hidden"); }); });
When a double click event fires on a <p> element; hide the current <p> element
$("p").dblclick(function(){ $(this).hide(); });
All input elements with type="file"
$(":file")
Prepend some text saying "xxx" to a "p" element
$("p").prepend("xxx");
when creating a variable that is assigned to a jQuery Selector, what should the name of the variable be
$target = $('tjhing that your trying to get')
Remove an element with an id of "xxx"
$("#xxx").remove();
All input elements with type="radio"
$(":radio")
On Click, show "p" elements in 1000 milliseconds
$("xxx").click(function(){ $("p").show(1000); });
When the "button" element is clicked set the background-color css value for "p" elements to "yellow" and the font-size css value to "200%"
$("button").click(function(){ $("p").css({"background-color": "yellow", "font-size": "200%"}); });
When the "button" element is clicked toggle the css class of "blue" in the "p" element
$("button").click(function(){ $("p").toggleClass("blue"); });
All selected input elements
$(":selected")
The function is executed when the form field gets focus
$("xxx").focus(function(){ $xxx; });
All input elements with type="checkbox"
$(":checkbox")
All input elements with type="reset"
$(":reset")
Remove child elements of an parent element with an id of "xxx"
$("#xxx").empty();
All input elements with type="button"
$(":button")
When the "button" element is clicked sets the width and height of an element with an id of "xxx" to 500px
$("button").click(function(){ $("#xxx").width(500).height(500); });
When the "button" element is clicked remove a css class of "blue" to the "p" element
$("button").click(function(){ $("p").removeClass("blue"); });
When the "button" element is clicked change the "href" attribute of an element with the id of "xxx" to "abc.com"
$("button").click(function(){ $("#xxx").attr("href", "abc.com"); });
On click, fade "p" elements to an opacity of 50%, slowly.
$("xxx").click(function(){ $("p").fadeTo("slow", 0.5); });
When the "button" element is clicked add a css class of "blue" and "hidden" to the "p" element
$("button").click(function(){ $("p").addClass("blue hidden"); });
When a click event fires on a <p> element; hide the current <p> element
$("p").click(function(){ $(this).hide(); })
When the "button" element is clicked, it moves the <div> element to the right, until it has reached a left property of 250px:
$("button").click(function(){ $("div").animate({left: '250px'}); });
All input elements with type="image"
$(":image")
When the "button" element is clicked run a function that is an alert saying whatever the value of the "href" attribute that is connected to an element with the id of "xxx"
$("button").click(function(){ alert($("#xxx").attr("href")); });
On Click, toggle fade of "p" elements
$("xxx").click(function(){ $("p").fadeToggle(); });
An alert saying "enter" is executed when the mouse pointer enters the HTML element
$("xxx").mouseenter(function(){ alert("enter"); });
An alert saying "Mouse down over" is executed, when the left mouse button is pressed down, while the mouse is over the HTML element
$("xxx").mousedown(function(){ alert("Mouse down over"); });
When "button" element is clicked, "div" element slides down
$("button").click(function(){ $("div").slideDown(); });
All input elements with type="submit"
$(":submit")
Append some text saying "xxx" to a "p" element
$("p").append("Some appended text.");
All enabled input elements
$(":enabled")
Remove all <p> elements with class="test":
$("p").remove(".test");
When the "button" element is clicked run a function that is an alert saying whatever text is in an element with the id of "xxx"
$("button").click(function(){ alert($("#xxx").text()); });
On Click, toggle visibility of "p" elements
$("xxx").click(function(){ $("p").toggle(); });
The example below has a callback parameter that is a function that will be executed after the hide effect is completed:
$("button").click(function(){ $("p").hide("slow", function(){ alert("The paragraph is now hidden"); }); });
Section 3
(7 cards)