Web

[Web] 10. jQuery

빈형임 2020. 7. 30. 16:35

jQuery 공부하기 전 HTML, CSS, JavaScript를 미리 숙지하고 와야 한다!

 

What is jQuery?

jQuery is a lightweight, "write less, do more", JavaScript library.

jQuery란 코드를 적게, 효율적으로 작성하기 위한 JavaScript library이다.

 

jQuery library는 다음과 같은 것들을 포함한다.

  • HTML/DOM manipulation
  • CSS manipulation
  • HTML event methods
  • Effects and animations
  • AJAX
  • Utilities

jQuery를 왜 공부해야 하는가?

 

Google, Microsoft, IBM, Netfilx 등 거대 기업들에서 web 을 관리할 때 jQuery를 사용하고 가장 유명한 JavaScript library이기 때문이다.

 

Adding jQuery to Your Web Pages.

  • Download the jQuery library from jQuery.com
  • Include jQuery from a CDN, like Google
//Downloading jQuery
<head>
<script src="jquery-3.5.1.min.js"></script>
</head>

 

//jQuery CDN
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

 

jQuery Syntax.

Basic Syntax: $(selector).action()

  • A $ sign to define/access jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)

예시)

$(this).hide()				//hides the current element.

$("p").hide()				//hides all <p> elements.

$(".test").hide()			//hides all elements with class="test".

$("#test").hide()			//hides the element with id="test".

 

The Document Ready Event

$(document).ready(function(){

  // jQuery methods go here...

});

 

웹 페이지가 로딩이 완료된 후 동작을 처리할 수 있도록 해야한다. 그렇지 않으면 오류가 발생할 수 있다.

 

jQuery Selectors

 

jQuery selector는 HTML 요소를 선택하고 조작할 수 있도록 한다.

 

The element Selector

element selector는 말 그대로 element의 이름을 기준으로 elements를 선택한다.

 

예시: 유저가 버튼을 클릭할 시 모든 <p> element들을 숨긴다.

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

 

The #id Selector

#id selector는 tag의 id를 통해서 특정 element를 찾아낸다.

 

예시: 유저가 버튼을 클릭할 시 "test"라는 id를 가진 element를 숨긴다.

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

 

The .class Selector

.class selector는 특정 클래스를 가진 element들을 찾아낸다.

 

예시: 유저가 버튼을 클릭할 시 "test"라는 클래스를 가진 element들을 숨긴다.

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

 

More Examples of jQuery Selectors

Syntax Description
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements

 

 

jQuery Event Methods

 

Mouse Events Keyboard Events Form Events Document/Window events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload

 

jQuery Syntax For Event Methods

$("p").click(function(){
  // action goes here!!
});

 

자주 사용되는 jQuery Event Methods.

 

$(document).ready()

 

click() : 마우스 클릭 

 

dblclick() : 마우스 더블 클릭

 

mouseenter() : 마우스 포인터가 도착했을 때

 

mouseleave() : 마우스 포인터가 떠날때

 

mousedown() : 마우스 왼,중앙 or 오른쪽 버튼이 눌렸을 때

 

mouseup() : mousedown()과 반대로 버튼이 풀렸을 때

 

hover() : mouseenter()와 mouseleave()의 결합.

 

focus() : 커서에 올렸을 때.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color", "yellow");
  });
  $("input").blur(function(){
    $(this).css("background-color", "green");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>