revision:
It simplifies JavaScript programming. The purpose of jQuery is to make it much easier to use JavaScript on websites.
It takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that can be called with a single line of code. It simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
<div>
<a class="trial" style="margin-left: 3vw;">If you click on me, I will disappear.</a><br>
<a class="trial" style="margin-left: 3vw;">Click me away!</a><br>
<a class="trial" style="margin-left: 3vw;">Click me too!</a><br>
</div>
<script>
$(document).ready(function(){
$(".trial").click(function(){
$(this).hide();
});
});
</script>
HTML/DOM manipulation,
CSS manipulation,
HTML event methods,
effects and animations,
AJAX,
utilities
If the website contains a lot of pages, and jQuery functions should be easy to maintain, then jQuery functions can be put in a separate .js file.
The jQuery library is a single JavaScript file, which can be referenced with the HTML "script" tag, which should be inside the "head" section. It's best to place the downloaded file in the same directory as the pages where you wish to use it.
A $ sign to define/access jQuery.
A (selector) to "query (or find)" HTML element(s).
A jQuery action() to be performed on the element(s).
Examples
$(this).hide() - hides the current element.
$("p").hide() - hides all "p" elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
$(this).hide() - hides the current element.
This prevents any jQuery code from running before the document is finished loading (is ready). It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows to have JavaScript code before the body of the document, in the head section.
Some examples of actions that can fail if methods are run before the document is fully loaded: trying to hide an element that is not created yet, trying to get the size of an image that is not loaded yet.
The jQuery team has also created an even shorter method for the document ready event:$(function(){// jQuery methods go here...});
They are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes, and much more.
It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.
All selectors in jQuery start with the dollar sign and parentheses: $().
The jQuery element selector selects elements based on the element name. You can select all "p" elements on a page like this:$("p")
When a user clicks on a button, all "p" elements will be hidden:
This is a paragraph.
This is another paragraph.
<div>
<p>When a user clicks on a button, all "p" elements will be hidden:</p>
<h4">This is a heading</h4>
<p class="hide">This is a paragraph.</p>
<p class="hide">This is another paragraph.</p>
<button id="btn">Click me to hide paragraphs</button>
</div>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$(".hide").hide();
});
});
</script>
</pre>
An id should be unique within a page, so the #id selector should be used when you want to find a single, unique element. To find an element with a specific id, write a hash character (#), followed by the id of the HTML element: $("#test").
When a user clicks on a button, the element with id="test" will be hidden:
This is a paragraph.
This is another paragraph.
<div>
<p>When a user clicks on a button, the element with id="test" will be hidden:</p>
<h4>This is a heading</h4>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button id="btn-1">Click me</button>
</div>
<script>
$(document).ready(function(){
$("#btn-1").click(function(){
$("#test").hide();
});
});
</script>
To find elements with a specific class, write a period character (.), followed by the name of the class: $(".test").
When a user clicks on a button, the element with class="test" will be hidden:
This is a paragraph.
This is another paragraph.
<div>
<p>When a user clicks on a button, the element with class="test" will be hidden:</p>
<h4>This is a heading</h4>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button id="btn-2">Click me</button>
</div>
<script>
$(document).ready(function(){
$("#btn-2").click(function(){
$(".test").hide();
});
});
</script>
$("*") - selects all elements
$(this) - selects the current HTML element
$("p.intro") - selects all "p" elements with class="intro"
$("p:first") - selects the first "p" element
$("ul li:first") - selects the first "li" element of the first "ul"
$("ul li:first-child") - selects the first "li" element of every "ul""/ul"
$("[href]") - selects all elements with an href attribute
$("a[target='_blank']") - selects all "a" elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") - selects all "a" elements with a target attribute value NOT equal to "_blank"
$(":button") - selects all "button" elements and "input" elements of type="button"
$("tr:even") - selects all even "tr" elements
$("tr:odd") - selects all odd "tr" elements
All the different visitors' actions that a web page can respond to are called events. An event represents the precise moment when something happens.
Examples: moving a mouse over an element, selecting a radio button, clicking on an element.
in jQuery, most DOM events have an equivalent jQuery method. To assign a click event to all paragraphs on a page, you can do this: $("p").click().
The next step is to define what should happen when the event fires. You must pass a function to the event: $("p").click(function(){ // action goes here!! });
the $(document).ready() method allows us to execute a function when the document is fully loaded.
the click() method attaches an event handler function to an HTML element.The function is executed when the user clicks on the HTML element.
If you click on me, I will disappear.
Click me away!
Click me too!
<div>
<p class="sngl">If you click on me, I will disappear.</p>
<p class="sngl">Click me away!</p>
<p class="sngl">Click me too!</p>
</div>
<script>
$(document).ready(function(){
$(".sngl").click(function(){
$(this).hide();
});
});
</script>
the dblclick() method attaches an event handler function to an HTML element.The function is executed when the user double-clicks on the HTML element.
Click me away!
Click me too!
<div>
<p class="dbl">If you double-click on me, I will disappear.</p>
<p class="dbl">Click me away!</p>
<p class="dbl">Click me too!</p>
</div>
<script>
$(document).ready(function(){
$(".dbl").dblclick(function(){
$(this).hide();
});
});
</script>
the mouseenter() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer enters the HTML element.
Enter this paragraph.
<div>
<p id="pa">Enter this paragraph.</p>
<p style="color: red;" id="pa_1"></p>
</div>
<script>
$(document).ready(function(){
$("#pa").mouseenter(function(){
document.getElementById("pa_1").innerText = "You entered pa!";
});
});
</script>
the mouseleave() method attaches an event handler function to an HTML element. The function is executed when the mouse pointer leaves the HTML element.
Enter this paragraph.
<div>
<p id="pb">Enter this paragraph.</p>
<p style="color: red;" id="pb_1"></p>
</div>
<script>
$(document).ready(function(){
$("#pb").mouseleave(function(){
document.getElementById("pb_1").innerHTML = "Bye ! You leave now pb!";
});
});
</script>
the mousedown() method attaches an event handler function to an HTML element. The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:
This is a paragraph.
<div>
<p id="pc">This is a paragraph.</p>
<p style="color: red;" id="pc_1"></p>
</div>
<script>
$(document).ready(function(){
$("#pc").mousedown(function(){
document.getElementById("pc_1").innerHTML = "Mouse down over pc!";
});
});
</script>
the mouseup() method attaches an event handler function to an HTML element. The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element:
This is a paragraph.
<div>
<p id="pd">This is a paragraph.</p>
<p style="color: red;" id="pd_1"></p>
</div>
<script>
$(document).ready(function(){
$("#pd").mouseup(function(){
document.getElementById("pd_1").innerHTML = "Mouse up over pd!";
});
});
</script>
the hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods. The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element.
This is a paragraph.
<div>
<p id="pe">This is a paragraph.</p>
<p style="color: red;" id="pe_1"></p>
<p style="color: blue;" id="pe_2"></p>
</div>
<script>
$(document).ready(function(){
$("#pe").hover(function(){
document.getElementById("pe_1").innerText = "You entered p1!";
},
function(){
document.getElementById("pe_2").innerText = "Bye! You now leave p1!";
});
});
</script>
the focus() method attaches an event handler function to an HTML form field. The function is executed when the form field gets focus.
Name:
Email:
<div>
<p>Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email"></p>
</div>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
the blur() method attaches an event handler function to an HTML form field. The function is executed when the form field loses focus:
Name:
Email:
<div>
<p>Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email"></p>
</div>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("input").blur(function(){
$(this).css("background-color", "green");
});
});
</script>
The on() method attaches one or more event handlers for the selected elements and child elements.
Click this paragraph
<div>
<p id="pp">Click this paragraph</p>
</div>
<script>
$(document).ready(function(){
$("#pp").on("click", function(){
document.getElementById("pp").innerHTML = "The paragraph was clicked.";
});
});
</script>