What is Jquery?
- Javascript Library that will prevent our fingers from breaking.
What is good about Jquery?
- Vanilla Javascript requires so many lines of codes. Jquery shortens the lines of codes of JS
What does Jquery do?
document.querySelector("h1"); // JS
Jquery("h1"); // Jquery
$("h1"); // Jquery(shorter one)
What was the role of HTML, CSS, JS again?
- HTML : content
- CSS : styles, appearance
- JS : behavior
In conclusion, It is good to use JS only for behavior so It is not recommended to change css in JS.
Jquery functions
$("h1").css("color","red");
$("h1").css("color");
$("h1").hasClass("classname"); // return true or false
$("h1").addClass("classname"); // add a classname
$("h1").removeClass("classname"); // remove a classname
$("h1").text("text"); // change the text in a tag
$("h1").html("html tags or text"); // change the html tag or add text
$("img").attr("src"); // return src attribute of img tag
$("a").attr("src","www.google.com"); // change src attribute
EventListener in Jquery
// One element
$("button").click(function(){});
// Many element
$("button").click(function(){});
// Better way
$("button").on("click",function(){});
If I selected my h1 and I decided to add a new button before the h1, then I simply use before or after method
$("h1").before("HTML tag");
$("h1").after("HTML tag");
prepand & append & remove
- prepend : Add new HTML element into the item you selected just after the opening tag.
- append : Add new HTML element into the item you selected just before the closing tag.
- remove : we can remove all elements we selected.
$("h1").prepend("HTML tag");
$("h1").append("HTML tag");
$("h1").remove("HTML tag");
Hide & Show & Toggle
// It hides h1 element.
$("h1").hide();
// It shows this element.
$("h1").show();
// It shows or hides the element.
$("h1").toggle();
Fade In & Out and Slide Up & Down
$("h1").fadeOut();
$("h1").fadeToggle();
$("h1").SlideUp();
$("h1").SlideDown();
Custom Animation
$("h1").animate({opacity:0.5});
// We can do like this too
$("h1").slideUp().slideDown().animate({opacity:0.5});