jQuery

one of the most popular javascript library. makes much shorter codes

• how to use
  • document.querySelector("h1")  //in javascript
  •  = jQuery("h1")
  •  = $("h1")

javascript 파일의 링크 위에 있어야 하며, 둘다 body 끝나기 직전에 위치시키기!

• $("h1")
•  = document.querySelectorAll("button");
• no syntax diff between plural and single property
  • single property in it: getting the value of it
    • $("h1").css("color"); 
  • two properties: setting the value 
    • $("h1").css("font-size","5rem");

$("h1").addClass("big-title margin-50");
//seperating our behavior from our styles

//can see whether an element has the particular class
$("h1").hasClass("margin-50");
//answer: true

• changing text
  • text
    • $("selected-class").text("what to change");
  • html(same as innerHTML in javascript)
    • $("selected-class").html("<em>what to change</em>");
  • 명시된 것에 해당되는 모든 텍스트/html 바뀜!
• attr : using attribute

console.log($("img").attr("src"));
//attr: attribute selecting

$("a").attr("href","https://www.naver.com");
$("h1").attr("class"); 
//returns classes applied

$("button").click(function(){
  $("h1").css("color","purple");
});
//select all class named "button"
// and it'll add click listener to those all

$("input").keypress(function(event){
  console.log(event.key);
});
//detecting keys pressed

• $("target").on("event-to-listen",callback-function()); // easy way to use eventListener

$("h1").on("mouseover",function(){
	$("h1").css("color","purple");
});

• putting html elements
  • before: before target
    • $("h1").before("<button>New</button>");
  • after : after target
    • $("h1").after("<button>New</button>");
  • prepend: adds item into your target, just after the opening tag
    • $("h1").prepend("<button>New</button>");
  • append: adds item into your target, just before the closing tag
    • $("h1").append("<button>New</button>");
  • remove  : removing all selected 
    • $("button").remove()
• animation
  • hide
  • show
  • toggle
  • fadeOut
  • fadeToggle
  • slideUp / Down / Toggle : 해당 부분 접힘/ 펼침/ 토글
  • animate : custom css
    • inside { } , can only add css rules that has numeric value - not color
    • if multiple actions are chained in one element, it'll do it in order

$("button").on("click",function(){
  $("h1").hide();
});
//hide the selected if any button is clicked

$("button").on("click",function(){
  $("h1").show();
});

$("button").on("click",function(){
  $("h1").toggle();
});

$("button").on("click",function(){
  $("h1").fadeOut();
});

$("button").on("click",function(){
  $("h1").slideUp();
});

$("button").on("click",function(){
  $("h1").animate({ opacity: 0.5 });
});