append()
와 appendChild()
공통점append()
와 appendChild()
차이점append()
,
를 찍으면 여러 가지 값을 한번에 붙일 수 있다. appendChild()
appendChild(document.createTextNode("텍스트")
;클릭 된 요소를 제거하는 방법 중 첫번째 입니다!
Onclick 에서 넘어온 this 를 매개변수로 하는 함수 선언
This 의 값을 출력해서 확인
This 의 부모 요소를 삭제하면 완료!
function deleteTask(t) {
t.parentNode.remove();
}
클릭 된 요소를 제거하는 방법 중 두번째 입니다!
부모 요소에 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();
}
})
자바스립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리
프레임 워크란?
라이브러리란?
$(선택자).동작함수();
$( 선택자 ).val();
var value = $("input").val();
->document.querySelector(“선택자”).value;
$(선택자).val(“설정할 값“);
$("input").val("설정완료!");
-> document.querySelector(“선택자”).value = “원하는 값“;![]
$(선택자).text("글자");
$( 선택자 ).attr( “속성”, “속성값” );
CSS 변경하기
$( 선택자 ).css( “속성” , “속성값” );
HTML 자식요소 추가하기
$( 선택자 ).html( html );
-$( 선택자 ).append( 요소 );
$( 선택자 ).remove();
$( 선택자 ). empty();
( 선택자 ).prev()
선택된 요소 바로 이전에 위치한 형제 요소 선택
JS 에서는 (요소).previousSibling
( 선택자 ).removeClass(“클래스명”)
선택된 요소에 클래스 삭제
$( 선택자 ).hasClass(“클래스명”)
선택된 요소에 클래스가 있는지 여부 확인
Return 값은 true 와 false 로 나온다.