: mouseenter + mouseleave
$("선택자").hover(function(){
마우스를 올렸을 때의 명령문;
}, function(){
마우스를 땠을 때의 명령문; //(*if else문과 비슷)
});
: 기본기능(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 / mouseOut
: 지정된 태그 요소(혹은 자신)는 물론이며, 자식 요소가 있다면 해당 자식 요소의 영역까지 포함됨
mouseenter / mouseleave ✨
: 지정된 태그 요소(혹은 자신)의 영역에만 해당되며, 만약 자식요소가 있다면 해당 자식요소의 영역은 제외됨
: 선택한 요소에 입력요소의 값이 변경되었을 때 이벤트 발생
$("#rel_site").change(function(){
$("#txt3").text($(this).val());
});
: 스크롤바가 이동될 때마다 이벤트 발생
✨ 스크롤바가 이동할 때마다 스크롤 탑위치값 나타내기
$(window).scroll(function(){
$("#txt2").text($(this).scrollTop());
});
: 인덱스(순서)를 매겨주는 기능(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가 가리키는 것은 최상위 부모를 말한다!
$("#menu li").mouseenter(function(){
$("#menu li").css("background","none"); // 기존에 선택이 되어 있는 것을 말함(새로 mouseenter되기 바로 직전 것)
$(this).css("background","yellow"); // $(this)->"#menu li"를 말하며, 현재 선택된 li를 말함(새로 선택한 것)
});
this는 처리시점을 나누기 위해 사용한다!
즉, 마우스를 올릴 때(새로 선택된 것)와 올리기 전(기존에 선택되어 있는 것)을 나누기 위함이다
: 국비지원 수업