JavaScript, jQuery

과제리뷰: Todo list

append()와 appendChild() 공통점

• 붙여 넣는 공간은 동일-> 부모 노드의 제일 마지막 자식 요소로 추가

append()와 appendChild() 차이점

• append()

  • append() 는 Node 와 String 을 전부 추가 할 수 있다.
  • append() 는 ,를 찍으면 여러 가지 값을 한번에 붙일 수 있다.
  • append() 는 반환(리턴) 값이 없다. 특정요소를 붙혔을 때 무엇인지 console.log 확인할 경우 undif 나옴
  • 자식 요소로 추가

• appendChild()

  • appendChild() 는 Node 만(=요소들만/ 텍스트 안 들어감) 추가할 수 있다.
  • appendChild() 는 한 번에 하나만 추가할 수 있다.
  • appendChild() 는 추가한 Node 를 반환(리턴)한다!
  • 반환값을 받아야 할 경우 appednChild를 가져와야한다.
  • 반환값도 받아야하고, 텍스트도 출력시켜야 할 경우는 node로 불러오긔~
    appendChild(document.createTextNode("텍스트");

• prepend()
  • prepend() 는 append() 와는 반대로 부모 노드의 첫번째 요소로 추가한다.
  • 단, prependChild() 는 존재 하지 않음.

삭제기능 구현

• onclick + this

클릭 된 요소를 제거하는 방법 중 첫번째 입니다!
Onclick 에서 넘어온 this 를 매개변수로 하는 함수 선언
This 의 값을 출력해서 확인
This 의 부모 요소를 삭제하면 완료!

function deleteTask(t) {
  t.parentNode.remove();
}

• e.target

클릭 된 요소를 제거하는 방법 중 두번째 입니다!
부모 요소에 click 으로 addEventListener 를 걸고 익명 함수의 매개 변수로 e(event)를 전달하는 방법
E.target 으로 this 와 같은 효과를 냅니다!
단, 해당 target 의 부모 요소를 지워버리면 글자 또는 check 박스를 클릭해소 삭제 되므로 처리 필요
TagName / 속성 값 확인 후 제거

// ul 태그 내에서 특정 클릭이 발생하면 모든 정보를 전달해준다. 
/* 삭제 방법2: 부모요소 전체에 addEvent 
E매개변수로 전달해서 
E target이 뭔지 체크하고 if로 걸어서 삭제시키는 것 
*/
todoList.addEventListener("click",function(e){
    console.log(e.target.tagName);
    if(e.target.tagName === "INPUT"&& e.target.getAttribute("type")=== "button"){
        e.target.parentNode.remove();
    }
})

jQuery

• 자바스립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리

• 프레임 워크란?

  • 특정 프로그램 개발의 시작부터 끝까지 필요한 모든 기능을 제공하는 도구 및 자원들의 묶음

• 라이브러리란?

  • 자주 사용하는 기능들을 모아두었다가 필요할 때 가져다 쓸 수 있도록 한 자원들의 묶음 사실, JS가 DOM 관련 기능이 구릴 때 정말 압도적으로 편리 했었다!
    대부분의 브라우저에서 지원 가능
    HTML DOM를 손쉽게 조작 가능
    CSS 스타일도 간단히 적용 가능
    애니매이션 효과나 대화형 처리를 간단하게 적용
    같은 동작을 더욱 짧은 코드로 구현 가능
    오픈 라이선스를 적용해 누구나 자유롭게 이용 가능
    js

jQuery 기초

$(선택자).동작함수();

• 값 가져오기 & 설정하기
  • $( 선택자 ).val();
  • Input 과 같은 value 값을 가져올 수 있다.
  • var value = $("input").val(); ->document.querySelector(“선택자”).value;

• $(선택자).val(“설정할 값“);
• Input 과 같은 곳에 value 값을 설정할 수 있다.
• jQuery는 JS의 querySeletorAll과 같게 한번에 다 변경된다.
• `$("input").val("설정완료!"); -> document.querySelector(“선택자”).value = “원하는 값“;![]
• Text 변경하기
  • $(선택자).text("글자");
  • 
  • 

• 속성 변경하기
  • $( 선택자 ).attr( “속성”, “속성값” );
  • 
    -> document.querySelector(“선택자”).setAttribute(“속성”, “값“);

• CSS 변경하기

  • $( 선택자 ).css( “속성” , “속성값” );
  • 
  • 

• HTML 자식요소 추가하기

  • $( 선택자 ).html( html );
  • 부모요소는 유지하고 자식태그로 html 구문을 삽입한다.
  • 문자열을 받는게 아니라 html 구문 자체를 넣어줄 수 있는 것이 textContet와 다르다.
  • 
  • 

  요소 추가

-$( 선택자 ).append( 요소 );

• 선택된 요소의 자식 요소 제일 마지막 요소로 추가
• JS의 append 와 동일
• $( 선택자 ).prepend( 요소 );
  • 선택된 요소의 자식 요소 중 첫번째로 추가
  • JS의 prepend 와 동일
• $( 선택자 ).before( 요소 );
  • 선택된 요소의 이전 형제 요소로 추가
  • JS 에는 없음
• $( 선택자 ).after( 요소 );
  • 선택된 요소의 다음 형제 요소로 추가
  • JS 에는 없음

요소 삭제

• $( 선택자 ).remove();

  • 선택한 요소를 DOM 트리에서 삭제
  • 인자로 선택자를 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제  JS 에서는 지원하지 않는 기능

• $( 선택자 ). empty();

  • 선택한 요소의 자식 요소를 모두 삭제
  • 선택된 요소는 남아 있고 그 안이 다 비워진다
  • JS 에는 없는 기능
    - 단, (요소).innerHTML = “” / (요소).textContent = “”; 로 동일하게 처리 가능
    = append요소들이 초기화된다.

요소 탐색

• $( 선택자 ).parent()
  • 바로 위에 존재하는 하나의 부모 요소 선택
  • JS 에서는 (요소).parentNode
• $( 선택자 ).parents()
  • 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택
  • JS 에서는 없음, closest(“선택자”) 로 가까운 조상 찾기는 가능
• $( 선택자 ).children()
  • 선택된 요소의 자식 요소 모두 선택
  • JS 에서는 (요소).childNodes -> 비 노드 요소 포함(
  • JS 에서는 (요소).children -> 비 노드 요소 제외

$( 선택자 ).next() 선택된 요소 바로 다음에 위치한 형제 요소 선택 JS 에서는 (요소).nextSibling$( 선택자 ).prev()
선택된 요소 바로 이전에 위치한 형제 요소 선택
JS 에서는 (요소).previousSibling

클래스 추가,삭제, 확인

$( 선택자 ).addClass(“클래스명”) 선택된 요소에 클래스 추가$( 선택자 ).removeClass(“클래스명”)
선택된 요소에 클래스 삭제
$( 선택자 ).hasClass(“클래스명”)
선택된 요소에 클래스가 있는지 여부 확인
Return 값은 true 와 false 로 나온다.