JavaScript library
Downloading jQuery / jQuery CDN Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
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".2 methonds
$(document).ready(function(){
// jQuery methods go here...
});$(function(){
// jQuery methods go here...
});jQuery selectors 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.
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});https://www.w3schools.com/jquery/jquery_selectors.asp
$("p").click(function(){
// action goes here!!
});switch between hide/show
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
- slideDown()
- slideUp()
- slideToggle()
$("button").click(function(){
$("p").hide("slow", function(){
alert("The paragraph is now hidden");
});
});$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
or
$("#p1").css("color", "red")
.slideUp(2000)
.slideDown(2000);- 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
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});the content of .html returns include HTML tag
$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});$("button").click(function(){
alert($("#w3s").attr("href"));
});We will use the same three methods from the previous page to set 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
A Callback Function for text(), html(), and val() ???
Set Attributes - attr()
$("button").click(function(){
$("#w3s").attr("href", "https://www.w3schools.com/jquery");
});or
$("button").click(function(){
$("#w3s").attr({
"href" : "https://www.w3schools.com/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});A Callback Function for attr() ???
We will look at four jQuery methods that are used to add new 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
jQuery has several methods for CSS manipulation. We will look at the following methods:
- 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
jQuery has several important methods for working with dimensions:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
What is AJAX? AJAX = Asynchronous JavaScript and XML.
In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.