[jQuery] 이벤트들, index(), $(this) 정리

dygreen·2022년 4월 12일
1

jQuery

목록 보기
2/3
post-thumbnail

📌 hover

: mouseenter + mouseleave

$("선택자").hover(function(){
    마우스를 올렸을 때의 명령문;
  }, function(){
    마우스를 땠을 때의 명령문; //(*if else문과 비슷)
});

📌 preventDefault()

: 기본기능(default)이 있는 태그에 대해서 기능을 못하게 막는다.

예를들어, a태그가 걸려있는 곳에 이벤트를 주면 a태그가 가장 우선순위에 있어서, 이벤트 명령이 작동하지 않는다. 따라서 기본기능을 작동하지 않도록 막는 것이 필요하다!

방법 1: event.preventDefault()

$(".event1 ul li a").click(function(){
  $(".event1 img").attr("src",$(this).attr("href"));
  event.preventDefault(); // <a> 태그에 링크 기능을 차단시킴✨
});

방법 2: return false;

$(".event1 ul li a").click(function(){
  $(".event1 img").attr("src",$(this).attr("href"));
  return false; // <a> 태그에 링크 기능을 차단시킴✨
});

📌 mouseover vs mouseenter 차이점

: 자식 요소들까지 영향을 주냐 안 주냐의 차이임

👉 마우스가 올라가지는 영역이 지정된 요소 혹은 자신에게만 한정되게 할 것인지, 아니면 자식요소들까지 영역을 확장할 것인지에 대한 차이라고 보면 된다.

mouseover / mouseOut
: 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식 요소의 영역까지 포함됨


mouseenter / mouseleave ✨
: 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됨


📌 .change()

: 선택한 요소에 입력요소의 값이 변경되었을 때 이벤트 발생

$("#rel_site").change(function(){
  $("#txt3").text($(this).val());
});

📌 .scroll()

: 스크롤바가 이동될 때마다 이벤트 발생

✨ 스크롤바가 이동할 때마다 스크롤 탑위치값 나타내기

$(window).scroll(function(){
  $("#txt2").text($(this).scrollTop());
});

📌 .index()

: 인덱스(순서)를 매겨주는 기능(0, 1, 2...)

👉 순서를 매기기 위해서는, 같은 서열에 있어야 한다.
하단) 같은 서열인 li끼리만 순서를 매길 수 있다 (ul li로 순위 매기기 불가능)

<ul id="menu">
  <li><a href="#">내용1</a></li>
  <li><a href="#">내용2</a></li>
  <li><a href="#">내용3</a></li>
  <li><a href="#">내용4</a></li>
</ul>

📌 $(this)

: this가 가리키는 것은 최상위 부모를 말한다!

$("#menu li").mouseenter(function(){
  $("#menu li").css("background","none"); // 기존에 선택이 되어 있는 것을 말함(새로 mouseenter되기 바로 직전 것)
  $(this).css("background","yellow"); // $(this)->"#menu li"를 말하며, 현재 선택된 li를 말함(새로 선택한 것)
});

this는 처리시점을 나누기 위해 사용한다!
즉, 마우스를 올릴 때(새로 선택된 것)와 올리기 전(기존에 선택되어 있는 것)을 나누기 위함이다


📚 Reference

: 국비지원 수업

profile
✨감명깊은 앞단을 향한 꾸준한 여정✨

0개의 댓글