jQuery

jQuery

(많은 사람들이 더 이상 쓰지않는다고 배울필요가 없다고했지만, 지금 듣는 udemy강의를 순서대로 듣기 위해 강의를 듣고 정리해 보려 함. jQuery는 라이브러리임)

예를 들어

document.querySelector("h1")// 이런 기본의 자바스크립트 코드를
jQuery("h1") //라고 부를수도 있고 혹은 just 
$("h1") // simply $ 로 앞에 붙이면 똑같은 효과이다! 

jQuery의 사용

• 제일 유명한 것은 google cdn을 이용하는 것 !
  -최신의 link를 index.html의 기존 script tag 위에 위치하게 해야함.(위치중요!!! closing body 태그 위(기존script tag 위!!)

<script src="https://ajax.googleapis.com/ajax/
             libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>

Selecting elements with jQuery

document.querySelectorAll("button")// 이부분을 적용 한다면?

$("button"); //모든버튼이거나 하나의 버튼이거나 같이 표시함 

Manipulating styles with jQuery

$("h1").css("color", "green");//css를적용한다면? 이렇게 표시함
$("h1").css("color")//이렇게 컬러만 있다면, 어떤컬러인지 알려줌 

$("h1").addClass("big-title"); //big-title이란 클래스로 적용된 css 적용하려면 
$("h1").removeClass("big-title"); // 있는 클래스 없애기 
$("h1").addClass("big-title margin"); // 클래스두개 적용하기 space sjgrl 
$("h1").hasClass("margin"); //이 클래스가있는지 물어보면? true/false로 출력됨 

Manipulating texts with jQuery

$("h1").text("bye"); //h1 이 bye로 바뀜
$("button").text("Don't Click Me"); // 모든 버튼의 text 가 Don't Click Me로 바뀜 

Manipulating Attributes with jQuery

$("a").attr("href","https://www.google.com"); //모든 <a>의 링크를 google로 바꾸는 것 

$("h1").attr("class"); //이렇게 하면 h1의 class값이 무엇인지 나옴 

Adding EventListener with jQuery

$("h1").click(function() {
  $("h1").css("color","purple");}); // 클릭하면 h1을보라색으로 바꿔줌

$("button").click(function () {
  $("h1").css("color","purple");}); //버튼을 클릭하면 h1의 색을 보라색으로 바꿈

$("input").keyup(function (event) { //누르는 키가 어떤키인지 h1에 보여줌
$("h1").text(event.key);});

$("h1").on("mouseover", function () { // mouse 가져다대면 보라색으로 바뀜 
  $("h1").css("color", "purple");});

Adding and Removing Elements with jQuery

$("h1").before("<button>new</button>"); //이렇게 하면 h1 element 앞에 버튼이 들어감 
$("h1").after("<button>new</button>"); //이렇게 하면 h1 element 뒤에 버튼이 들어감 

$("h1").prepend("<button>new</button>"); //이렇게 하면 h1 element 오프닝 태그 뒤 컨텐츠 앞에 위치하게 됨 which means like below

<h1><button>new</button>hello</h1>

$("h1").append("<button>new</button>");
//이렇게 하면 h1 element 컨텐츠 뒤 클로징 태그 뒤 컨텐츠 앞에 위치하게 됨 which means like below

<h1>hello<button>new</button></h1>

$("button").remove();
//모든 웹사이트의 button elements를 다 없앨 수 있다. 

Website Animations with jQuery

$("button").on("click", function () {
  $("h1").hide();
}); //버튼 누르면 h1  사라짐 

$("button").on("click", function () {
  $("h1").toggle();
}); //버튼 누르면 h1 사라지고 다시누르면 생김 

  $("button").on("click", function () {
  $("h1").fadeToggle(); //버튼 누르면 h1 사라지고 다시누르면 생김(페이딩하면서) 
});


  $("button").on("click", function () {
  $("h1").slideToggle(); //버튼 누르면 h1 올라갔다 내려갔다 함 ( 메뉴에 잘 사용할수 있을 것 ) 
});

Detailed Animation

• numeric value 숫자로서 어떤 효과를 줄지 적용할수 있음

  $("button").on("click", function () {
  $("h1").animate({opacity : 0.5}); //버튼 누르면 h1 올라갔다 내려갔다 함 ( 메뉴에 잘 사용할수 있을 것 ) 
});

• 동시에 두가지 효과도 적용 가능 함

  $("button").on("click", function () {
  $("h1").slideUp().slideDown().animate({opacity : 0.5}); //버튼 누르면 h1 올라갔다 내려갔다 함 ( 메뉴에 잘 사용할수 있을 것 ) 
});

• 개발은 open book 테스트랑 같음! 적용하고 싶으면 찾아서 적용하면됨 구글링이 답임 !!