211008 TIL

OVERVIEW

현재 자바스크립트, 제이쿼리 기초를 공부한 이후 UI를 하나씩 만들어보는
시간을 갖고있다. 중간에 Library도 사용해보면서 프로젝트를 하나씩 만들어보아야지😉

TIL - JS

e.stopPropagation() & e.preventDefault()의 차이

◾ e.stopPropagation()
propagation은 전파, 전달의 의미를 갖고 있는데 이벤트위임에서 버블링이 되지 않도록 막는, 즉 상위 엘리먼트에 이벤트가 전파되는 것을 막는다.
◾ e.preventDefault()
prevent 역시 막다라는 의미를 갖고 있다. 여기서 Default의 의미는 디폴트(기본값)를 갖고 있는데, 디폴트를 막는다는 뜻은 기존에 가지고 있는 값을 막는다는 의미로 해석된다.
예시) 체크박스의 '체크'가 되지 않는다.

.removeAttribute() - attribute를 삭제 할 수 있음

element.removeAttribute(attrName);

TIL - JQuery

.not() - 선택한 요소 중 특정 선택자를 제외한 요소를 선택.

$('.item').not($(this)).addClass('open');

.siblings() - 선택한 요소 중 형제요소 (선택요소 제외)

e.target.addClass('hide').siblings().removeClass('hide')

• 선택한 요소에 클래스를 넣고 형제요소에겐 클래스를 삭제할 수 있는 스크립트가 완성된다

.is() / .hasClass() - 선택한 요소에 주어진 선택자(클래스)가 있는지 판별

• boolean을 반환한다.
• .is(selector | function | selection | elements)
• .hasClass(className)
• 둘의 차이는 .is()가 선택할수 있는 선택자가 더 넓다는 것

Event

• 제이쿼리에서는 해당하는 엘리먼트에 함께 이벤트를 주기 위해 상위 엘리먼트에 이벤트를 주고,
  하위 엘리먼트의 태그를 적을 수 있다
  A selector string to filter the descendants of the selected elements that trigger the event.

$( "#dataTable tbody" ).on( "click", "tr", function() {
  console.log( $( this ).text() );
});