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});