바닐라 자바스크립트란 플러그인이나 라이브러리를 사용하지 않은 순수 자바스크립트를 말합니다.
(I like it)
selecter(선택자)
① id로 접근 (한개만 가능)
let select = document.getElementByld("id").innerHTML.trim() = "안녕";
② class로 접근 (여러개 가능)
let select2 = document.getElementsByClassName("class")[0].innerText;
③ name으로 접근 (여러개 가능)
let select3 = document.getElementsByName("name")[0].value;
④ tagname으로 접근 (여러개 가능)
let select4 = document.getElementsByTagName("div");
⑤ css 선택자를 기준으로 1번째 요소
let select5 = document.querySelector();
⑥ css 선택자에 맞는 모든 요소를 nodelist로 변환
let select6 = document.querySelectorAll();
자식, 후손, 부모 선택하는 방법
<div class="parent">
<div class="child1">
자식1
</div>
<div clas="child2">
자식2
</div>
<div>
① 자식 선택
let children = documentsByClassName("parent ")[0].children
② 후손 선택
let children2 = documentsByClassName("parent")[0].children[0].children;
③ 부모 선택
let parent = document.getElementsByClassName("child1")[0].parentElement;
HTML의 DOM 조작과 이벤트 제어, 애니메이션 그리고 Ajax까지 웹 화면을 다루는 자바스크립트 라이브러리를 말합니다.
(i don't like it)
selecter(선택자)
① 아이디로 접근
let select = $('#id');
② 클래스로 접근
let select = $('.class');
③ 태그로 접근
let select = $('p');
④ 속성으로 접근
let = select1 = $('[ value ]');
let = select2 = $('[ value = 'zero' ]');
자식, 부모 선택하는 방법
<div class="parent">
<div class="child1">
자식1
</div>
<div clas="child2">
자식2
</div>
<div>
①자식 선택
let children = $(".parent").chidren();
②부모 선택
let parent = $(".childern").parent();
---------------------------------이하 추후 업데이트예정
<실습 - 제이쿼리를 이용하여 스케줄러(todo) 만들기 (추가,삭제,수정)>
javascript 에 대한 사전지식이나, 예습을 하지 못하신 교육생들은 아마 따라오기 힘든 수업이 아니였나 싶고, 수업이 좀 산만?! 했던 것 같다. (다들 동감할듯,,)
그리고 제이쿼리는 필요없다고 항상 배제하고 바닐라js, 와 리액트에만 초점을 두었었고, 단순히 부트스트랩처럼 가져다 쓰는 것으로만 알고 있었지만 이번기회에 제이쿼리로 직접 실습해보면서 js와의 차이점을 이해 하였고, 주로 누가, 어떻게 쓰는지에 대해 알게 되었다.
jquery,, js랑 자꾸 혼또니 혼돈이,,,😭