JQuery allows users to select elements, manipulate HTML/CSS, handle events, and perform animations with simple and concise code. It takes common tasks that require many lines of JavaScript code and wraps them into single line methods. JQuery selectors allow selection of elements by ID, class, tag name, attribute values, and more. Methods then perform actions on the selected elements like adding/removing classes, showing/hiding, animating properties, and handling events. Overall, JQuery simplifies JavaScript development by reducing complexity and code length.
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.
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
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
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
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
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()).