IT Log

jQuery Tutorial (1) 본문

JavaScript

jQuery Tutorial (1)

newly0513 2020. 6. 8. 17:58
728x90
반응형

jQuery란?

경량의 빠르고 간결한 JavaScript 라이브러리

  • DOM 조작 : DOM(Document Object Model) 요소를 쉽게 선택하고 컨텐츠를 수정
  • 이벤트 처리 : 이벤트 핸들러를 통해 사용자가 링크를 클릭하여 다양한 이벤트를 캡처
  • Animation : 많은 내장 애니메이션 효과를 제공
  • 경량 : 크기가 약 19KB인 매우 가벼운 라이브러리
  • AJAX : AJAX 기술을 사용하여 반응이 바르고 기능이 풍부한 사이트를 개발
  • 크로스 브라우저 : IE 6.0이상, FF 2.0 이상, Safari 3.0 이상, Chrome 및 Opera 9.0 이상에서 잘 작동

jQuery 호출 예시

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

jQuery 구문

기본 구문 : $(selector).작업()

  • jQuery를 정의하고 액세스하기 위한 $부호
  • HTML 요소를 찾는 selector
  • 요소에서 수행할 jQuery 작업
<script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
</script>
...
<div>
  <p class = "myclass">This is a paragraph.</p>
  <p id = "myid">This is second paragraph.</p>
  <p>This is third paragraph.</p>
</div>

문서 준비 이벤트

  • 문서로드가 완료되기 전에 모든 jQuery 코드가 실행되지 않도록하기 위한 것
$(document).ready(function(){

  // jQuery methods go here...

});

Selector

HTML 요소를 선택하고 조작할 수 있습니다.

  • jQuery 요소 선택기는 $ 기호와 괄호로 시작 : $().
  • 표현식을 사용하여 주어진 기준에 따라 DOM에서 일치하는 요소를 찾는 함수
구문 설명
$("p") Tag 이름이 p인 요소를 선택
$("#first) Tag ID가 first인 요소를 선택
$(.second) Tag Class가 second인 요소를 선택
$("*") 모든 요소를 선택
$("p>*") Tag 이름이 p인 요소의 모든 하위 요소를 선택
$(this) 현재 HTML 요소를 선택
$("p#one.two")
 Tag이름이 p인 요소 중 ID가 one이고 Class가 two인 요소를 선택
$("p:first")
 Tag이름이 p인 요소 중에 첫 번째 요소를 선택
$("ul li:first")
 첫 번째 ul의 첫 번째 li 요소를 선택
$("ul li:first-child")
 모든 ul의 첫 번째 li 요소를 선택
$("li:not(.first)")
 모든 li 요소 중 Class가 first가 아닌 모든 요소를 선택
$("[href]") href 속성을 가진 모든 요소를 ​​선택
$("p[target='_blank]")
 대상 속성 값이 "_blank"인 모든 p 요소를 선택
$("p[target!='_blank]") 대상 속성 값이 "_blank"가 아닌 모든 p 요소를 선택
$("tr:odd")
 홀수 tr 요소를 모두 선택
$("tr:even") 짝수 tr 요소를 모두 선택
$("li:eq(2)") 2번째 li 요소를 선택
$("li:lt(2)")
 2번째 li 요소까지 선택 ( <= )
$("li:gt(2)") 3번째 li 요소부터 선택 ( > )
$("input[@name=first]")
 이름이 first인 input 요소를 모두 선택
$("input[@name^=first]")
 이름이 first로 시작하는 input 요소를 모두 선택
$("input[@name$=first]")
 이름이 first로 끝나는 input 요소를 모두 선택
$("p:empty") 하위 요소가 없는 모든 p 요소를 선택
$(":input") input 요소만 선택

 

Event란?

무언가가 발생하는 정확한 순간을 나타냄

  • 마우스 클릭
  • 웹 페이지 로딩
  • 요소 위로 마우스 이동
  • HTML 양식 제출
  • 키보드의 키 입력 등
Mouse Keyboard Form Document/Wondow
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload
mousedown   select error
mousemove   on  
mouseover      
mouseup      
mouseout      
hover       
# hover
$("#p1").hover(function(){
  alert("You entered p1!");
},
function(){
  alert("Bye! You now leave p1!");
});
// mouseenter() 및 mouseleave() 두 가지 기능을 수행

# focus / blur
$("input").focus(function(){
  $(this).css("background-color", "#cccccc");
});
$("input").blur(function(){
  $(this).css("background-color", "#ffffff");
});
// 양식 필드에 focus가 있으면 focus실행, 없으면 blur 실행

# on
$("p").on({
  mouseenter: function(){
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function(){
    $(this).css("background-color", "lightblue");
  },
  click: function(){
    $(this).css("background-color", "yellow");
  }
});
// 요소하나의 여러 이벤트를 첨부할 때 사용

Binding Event Handler

  • eventType : click 또는 submit과 같은 이벤트 유형을 포함하는 문자열
  • eventData : 선택적인 매개 변수는 이벤트 핸들러로 전달될 데이터 맵
  • handler : 이벤트가 트리거 될 때마다 실행되는 함수
selector.bind( eventType[, eventData], handler)

Event Handler 제거

  • eventType : click 또는 submit과 같은 이벤트 유형을 포함하는 문자열
  • handler : 제공되는 경우 제거할 특정 리스너를 식별
selector.unbind(eventType, handler)

or 

selector.unbind(eventType)
728x90
반응형

'JavaScript' 카테고리의 다른 글

jQuery Tutorial (3)  (0) 2020.06.09
jQuery Tutorial (2)  (0) 2020.06.09
JavaScript (3)  (0) 2020.06.08
JavaScript (2)  (0) 2020.06.05
JavaScript (1)  (0) 2020.06.03
'JavaScript' Related Articles more
Comments