# Jquery Summary

**What is Jquery?**
- Javascript Library that will prevent our fingers from breaking.

<br>

**What is good about Jquery?**
- Vanilla Javascript requires so many lines of codes. Jquery shortens the lines of codes of JS

<br>

**What does Jquery do?**
```js
document.querySelector("h1"); // JS

Jquery("h1"); // Jquery

$("h1"); // Jquery(shorter one)
```

<br>

**What was the role of HTML, CSS, JS again?**
- HTML : content
- CSS : styles, appearance
- JS : behavior

&nbsp;In conclusion, It is good to use JS only for behavior so It is not recommended to change css in JS.

<br>

**Jquery functions**
```js
$("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
```

<br>

**EventListener in Jquery**
```js
// One element
$("button").click(function(){});

// Many element
$("button").click(function(){});

// Better way
$("button").on("click",function(){});
```

<br>

**If I selected my h1 and I decided to add a new button before the h1, then I simply use before or after method**
```js
$("h1").before("HTML tag");
$("h1").after("HTML tag");
```
<br>

**prepand & append & remove**<br>
- 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.


```js
$("h1").prepend("HTML tag");
$("h1").append("HTML tag");
$("h1").remove("HTML tag");
```

<br>

**Hide & Show & Toggle**
```js
// It hides h1 element.
$("h1").hide();

// It shows this element.
$("h1").show();

// It shows or hides the element.
$("h1").toggle();
```

<br>

**Fade In & Out and Slide Up & Down**
```js
$("h1").fadeOut();
$("h1").fadeToggle();

$("h1").SlideUp();
$("h1").SlideDown();
```

<br>

**Custom Animation**
```js
$("h1").animate({opacity:0.5});

// We can do like this too
$("h1").slideUp().slideDown().animate({opacity:0.5});
```