![In javascript
var x = document.getElementsByTagName("p");
for (var i = 0; i < x.length; i++) {
x[i].onclick = function() {
this.style.display = "none";
}
}](https://image.slidesharecdn.com/11-200112021518/85/JQuery-2-320.jpg)
![Selectors
[attribute] $("[href]") All elements with a href attribute
[attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to "default.htm"
[attribute!=value] $("[href!='default.htm']") All elements with a href attribute value not equal to "default.htm"
[attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with ".jpg"
[attribute|=value] $("[title|='Tomorrow']") All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a
hyphen
[attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with "Tom"
[attribute*=value] $("[title*='hello']") All elements with a title attribute value containing the word "hello"](https://image.slidesharecdn.com/11-200112021518/85/JQuery-15-320.jpg)
JQuery
- 1. JQuery
- 2. In javascript var x = document.getElementsByTagName("p"); for (var i = 0; i < x.length; i++) { x[i].onclick = function() { this.style.display = "none"; } }
- 4. Why Query takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
- 5. What HTML/DOM manipulation CSS manipulation HTML event methods Effects and animations AJAX Utilities
- 6. How; 2 options Download the jquery file from http://jquery.com/download/ Include it on your document <head> <script src="jquery-3.3.1.min.js"></script> </head> Directly include it from a Google or Microsoft CDN (Content Delivery Network) <head> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery. min.js"></script> </head>
- 7. Syntax All jQuery code goes into $(document).ready(function(){ // jQuery methods go here... }); prevent any jQuery code from running before the document is finished loading (is ready). $(function(){ // jQuery methods go here same as above... });
- 9. Selectors Selector Example Selects * $("*") All elements #id $("#lastname") The element with id="lastname" .class $(".intro") All elements with class="intro" .class,.class $(".intro,.demo") All elements with the class "intro" or "demo" element $("p") All <p> elements el1,el2,el3 $("h1,div,p") All <h1>, <div> and <p> elements :first $("p:first") The first <p> element :last $("p:last") The last <p> element :even $("tr:even") All even <tr> elements :odd $("tr:odd") All odd <tr> elements
- 10. Selectors :first-child $("p:first-child") All <p> elements that are the first child of their parent :first-of-type $("p:first-of-type") All <p> elements that are the first <p> element of their parent :last-child $("p:last-child") All <p> elements that are the last child of their parent :last-of-type $("p:last-of-type") All <p> elements that are the last <p> element of their parent :nth-child(n) $("p:nth-child(2)") All <p> elements that are the 2nd child of their parent :nth-last-child(n) $("p:nth-last-child(2)") All <p> elements that are the 2nd child of their parent, counting from the last child :nth-of-type(n) $("p:nth-of-type(2)") All <p> elements that are the 2nd <p> element of their parent
- 11. Selectors :nth-last-of-type(n) $("p:nth-last-f-type(2)") All <p> elements that are the 2nd <p> element of their parent, counting from the last child :only-child $("p:only-child") All <p> elements that are the only child of their parent :only-of-type $("p:only-of-type") All <p> elements that are the only child, of its type, of their parent parent > child $("div > p") All <p> elements that are a direct child of a <div> element parent descendant $("div p") All <p> elements that are descendants of a <div> element element + next $("div + p") The <p> element that are next to each <div> elements element ~ siblings $("div ~ p") All <p> elements that are siblings of a <div> element
- 12. Selectors :eq(index) $("ul li:eq(3)") The fourth element in a list (index starts at 0) :gt(no) $("ul li:gt(3)") List elements with an index greater than 3 :lt(no) $("ul li:lt(3)") List elements with an index less than 3 :not(selector) $("input:not(:empty)") All input elements that are not empty
- 13. Selectors :header $(":header") All header elements <h1>, <h2> ... :animated $(":animated") All animated elements :focus $(":focus") The element that currently has focus :contains(text) $(":contains('Hello')") All elements which contains the text "Hello" :has(selector) $("div:has(p)") All <div> elements that have a <p> element :empty $(":empty") All elements that are empty :parent $(":parent") All elements that are a parent of another element
- 14. Selectors :hidden $("p:hidden") All hidden <p> elements :visible $("table:visible") All visible tables :root $(":root") The document's root element :lang(language) $("p:lang(de)") All <p> elements with a lang attribute value starting with "de"
- 15. Selectors [attribute] $("[href]") All elements with a href attribute [attribute=value] $("[href='default.htm']") All elements with a href attribute value equal to "default.htm" [attribute!=value] $("[href!='default.htm']") All elements with a href attribute value not equal to "default.htm" [attribute$=value] $("[href$='.jpg']") All elements with a href attribute value ending with ".jpg" [attribute|=value] $("[title|='Tomorrow']") All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen [attribute^=value] $("[title^='Tom']") All elements with a title attribute value starting with "Tom" [attribute*=value] $("[title*='hello']") All elements with a title attribute value containing the word "hello"
- 16. Selectors :input $(":input") All input elements :text $(":text") All input elements with type="text" :password $(":password") All input elements with type="password" :radio $(":radio") All input elements with type="radio" :checkbox $(":checkbox") All input elements with type="checkbox" :submit $(":submit") All input elements with type="submit" :reset $(":reset") All input elements with type="reset" :button $(":button") All input elements with type="button" :image $(":image") All input elements with type="image" :file $(":file") All input elements with type="file"
- 17. Selectors :enabled $(":enabled") All enabled input elements :disabled $(":disabled") All disabled input elements :selected $(":selected") All selected input elements :checked $(":checked") All checked input elements
- 18. Events $("p").click(function(){ $(this).hide(); }); $("#p1").mouseleave(function(){ alert("Bye! You now leave p1!"); }); $("input").keydown(function(event){ $("div").html("Key: " + event.which); });
- 19. Events $("p").on({ mouseenter: function(){ $(this).css("background-color", "lightgray"); }, mouseleave: function(){ $(this).css("background-color", "lightblue"); }, click: function(){ $(this).css("background-color", "yellow"); } });
- 22. Events $("input").one("select", function(){ $("input").after(" Text marked!"); }); $("button").click(function(){ $("input").trigger("select"); });
- 23. Events Method / Property Description blur() Attaches/Triggers the blur event change() Attaches/Triggers the change event click() Attaches/Triggers the click event dblclick() Attaches/Triggers the double click event
- 24. Events focus() Attaches/Triggers the focus event focusin() Attaches an event handler to the focusin event focusout() Attaches an event handler to the focusout event hover() Attaches two event handlers to the hover event keydown() Attaches/Triggers the keydown event keypress() Attaches/Triggers the keypress event keyup() Attaches/Triggers the keyup event
- 25. Events mousedown() Attaches/Triggers the mousedown event mouseenter() Attaches/Triggers the mouseenter event mouseleave() Attaches/Triggers the mouseleave event mousemove() Attaches/Triggers the mousemove event mouseout() Attaches/Triggers the mouseout event mouseover() Attaches/Triggers the mouseover event mouseup() Attaches/Triggers the mouseup event
- 26. Events ready() Specifies a function to execute when the DOM is fully loaded resize() Attaches/Triggers the resize event scroll() Attaches/Triggers the scroll event select() Attaches/Triggers the select event submit() Attaches/Triggers the submit event
- 27. Effects hide(), show(), toggle() fadeIn(), fadeOut(), fadeToggle(), fadeTo() slideUp(),slideDown(),slideToggle() animate()
- 29. Show and hide $(selector).hide(speed,callback); $(selector).show(speed,callback); $(selector).toggle(speed,callback); The optional speed parameter can take the following values: "slow", "fast", or milliseconds. The optional callback parameter is a function to be executed after the effect completes.
- 30. Fading $(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback); The required opacity parameter in the fadeTo() method specifies fading to a given opacity (value between 0 and 1).
- 32. Animation $(selector).animate({params},speed,callback); The required params parameter defines the CSS properties to be animated.
- 33. Animation $("button").click(function(){ $("div").animate({ left: '250px', opacity: '0.5', height: '150px', width: '150px' }); });
- 34. stop() $(selector).stop(stopAll,goToEnd); The optional stopAll parameter specifies whether also the animation queue should be cleared or not. Default is false The optional goToEnd parameter specifies whether or not to complete the current animation immediately. Default is false.
- 36. DOM Content text() - Sets or returns the text content of selected elements html() - Sets or returns the content of selected elements (including HTML markup) val() - Sets or returns the value of form fields Attributes attr() method is used to set attributes or get attribute values
- 37. Getting $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $("#btn3").click(function(){ alert("Value: " + $("#fname").val()); }); $("button").click(function(){ alert($("#w3s").attr("href")); });
- 39. setting $("button").click(function(){ $("#w3s").attr("href", "https://www.w3schools.com/jquery/"); }); $("button").click(function(){ $("#w3s").attr({ "href" : "https://www.w3schools.com/jquery/", "title" : "W3Schools jQuery Tutorial" }); });
- 40. Adding HTML content append() - Inserts content at the end of the selected elements prepend() - Inserts content at the beginning of the selected elements after() - Inserts content after the selected elements before() - Inserts content before the selected elements
- 41. example function appendText() { var txt1 = "<p>Text.</p>"; var txt2 = $("<p></p>").text("Text."); var txt3 = document.createElement("p"); txt3.innerHTML = "Text."; $("body").append(txt1, txt2, txt3);}
- 42. example function afterText() { var txt1 = "<b>I </b>"; var txt2 = $("<i></i>").text("love "); var txt3 = document.createElement("b"); txt3.innerHTML = "jQuery!"; // Insert new elements after <img> $("img").after(txt1, txt2, txt3); }
- 43. removing remove() - Removes the selected element (and its child elements) empty() - Removes the child elements from the selected element
- 45. css addClass() - Adds one or more classes to the selected elements removeClass() - Removes one or more classes from the selected elements toggleClass() - Toggles between adding/removing classes from the selected elements css() - Sets or returns the style attribute
- 46. example $("button").click(function(){ $("h1, h2, p").addClass("blue"); $("div").addClass("important"); }); $("button").click(function(){ $("#div1").addClass("important blue"); }); $("button").click(function(){ $("h1, h2, p").removeClass("blue"); });
- 47. css Get the css property value: css("propertyname"); $("p").css("background-color"); Set the css property and value: css("propertyname","value"); $("p").css("background-color", "yellow"); $("p").css({"background-color": "yellow", "font-size": "200%"});
- 48. Traversing ancestors parent() returns the direct parent element of the selected element. parents() returns all ancestor elements of the selected element, all the way up to the document's root element (<html>). parentsUntil() returns all ancestor elements between two given arguments.
- 50. Descendants children() returns all direct children of the selected element. find() returns descendant elements of the selected element, all the way down to the last descendant.
- 52. Siblings siblings() returns all sibling elements of the selected element. next() returns the next sibling element of the selected element. nextAll() eturns all next sibling elements of the selected element. nextUntil() returns all next sibling elements between two given arguments. prev(), prevAll(), prevUntil()
- 54. Filtering first() returns the first element of the specified elements. last() returns the last element of the specified elements. eq() returns an element with a specific index number of the selected elements. filter() lets you specify a criteria. Elements that do not match the criteria are removed from the selection, and those that match will be returned. not() returns all elements that do not match the criteria (opposite of filter()).
- 56. Dimensions
- 57. Links Jquery documentation http://jquery.com/ Selector Tester: https://www.w3schools.com/jquery/trysel.asp Jquery UI https://jqueryui.com/