🔖 CSS 선택자 태그 문법
-
div.a:div태그 안에서a클래스를 가진 것만 출력한다. -
div .a:div태그 안의 후손들 중에서a클래스를 가진 친구만 고른다 -
div > .a:div태그 바로 아래 자식 중a클래스만 가져옴
📢 Javascript 선택자
var select = document.getElementById("b1").innerHTML;
: 'b1' 아이디 속성을 가진 요소를 찾고 이를 나타내는 Element 객제 반환
var select = document.getElementsByClassName("s")[0].innerText;
: ClassName을 불러올 때는 단수 단위를 가져오는 것이 아니기 때문에 Elements라고 표현해준다.
: 문서객체 중 지정된 클래스(Class)값을 가져오는데 사용되는 함수 이다
var select = document.getElementByName("name")[0].value;
: 문서객체 중 name 값을 가져오는데 사용되는 함수 이다.
: val("코딩온")처럼 인자를 넣어주면 자체적으로 value 값을 바꿀 수 있다
var select = document.getElementsByTagName("div").innerHTML;
: 문서객체 중 지정된 태그(Tag)값을 가져오는데 사용되는 함수 이다.
var select = document.querySelector(".a").innerHTML.trim();
: 클래스가 a인 친구를 select하겠다.
var select = document.querySelectorAll(".a")[1].innerHTML;
: 배열을 불러올 수 있음
: 아까는 id값만을 가져왔다면 지금은 특정 클래스를 가진 id 값들을 갖고 오겠다는 뜻이다
var children = document.getElementByClassName('parent')[0].children.children;
children는 뒤에 자식 태그를 확인하기 위해 써주는 메소드
var parent = document.getElementsByClassName('child1')[0].parentElement;
parentElement는 부모 태그를 확인하기 위해 써주는 메소드
var sibling = document.getElementsByClassName("child1")[0].nextElementSibling;
nextElementSibling은 형제 태그를 확인하기 위한 메소드
!! id는 요소 하나만 잇으면 된다
!! classname은 여러개 사용할 수 잇기 때문에 배열을 불러올 수 있다.
!! name은 name값으로 불러올 수 있다. ex) `name=test`면 name말고 test로!
!! tagname으로 선택자 불러올 수 있다.
!! trim()은 양쪽 공백을 지워줌.📡 JQuery 선택자
🥾 JQuery는 Javascript의 라이브러리 중 하나의 종류이다.
Javascript는 웹페이지의 동적 구현을 가능하게 해주기 때문에 매우 편리한 언어지만 메소드가 너무 길어서 사용하다보면 복잡하다고 느낄 때가 많을 것이다. 하지만! 15년 전 즈음 어느 천재 개발자가 이를 간편하게 해주는 라이브러리를 만들었다!! 그것은 바로 JQuery다.
-
어떤 요소를 선택하는 것을 간단하게 해주고 Javascript에 없는 함수들도 구현하게 해준다.
-
document.getElementID("aa").innerHTML;➡$("aa").html(); -
JQuery는 parent는 부모 태그 하나만 불러오지만 parents는 조상 태그까지도 가져온다.
-
JQuery는 인자에 있는 태그
<'name'>를 인식할 수 있음
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
: JQuery를 사용하기 위해서는 해당 라이브러리를 불러와야지 사용할 수 있다.
var num = $("aa").html();
: `var num = document.getElementID("aa").innerHTML;` 와 같은 뜻이다!
$($(".parent")[0]).html();
: jQuery안에 배열[]을 사용하면 문법을 인식하지 못하게 된다. 따라서 $()로 한 번 더 감싸줌
var select_test = $("input[name=test]").val("");
: JQuery로 name을 불러올 때 사용
$($(".parent").children()[0]).html()
: JQuery에서 첫 번째 자식 태그 선택하는 방법
$($(".parent").children()[1]).html()
: JQuery에서 두 번째 자식 태그 선택하는 방법
$(".child1").parent().html()
: JQuery에서 부모 태그 선택하기
function button_event() {
$( ".child2" ).html( "코딩온" );
}
: JQuery에서 button_event()라는 함수 기능을 구현하는 방법
-
.append() : 선택자 안에서 맨 앞에 추가하기
-
.prepend() : 선택자 안에서 맨 뒤에 추가하기
-
.before() : 윗 태그 선택자 바로 앞에 추가됨
-
.after() : 윗 태그 선택자 바로 뒤에 추가됨
-
.remove() : 선택자 속성을 제거해준다.
.html("")로 대신 사용해도 됨
★ 사용 예제 : $("선택자").after("<div>2</div>");
-
removeClass() : 특정한 클래스를 요소에서 제거
-
addClass() : 특정한 클래스를 요소에 추가
-
hasClass() : 특정한 클래스가 존재하는 지 찾는 메소드
★ 사용 예제 :
function button_event() {
if $("#name").hasClass("d-none") {
$("#name").removeClass("d-none"); // 버튼을 누르면 안보이던 것을 보이게 만들어 줌
}
else {
$("#name").addClass("d-none"); // 이 상태에서 버튼을 누르면 d-none기능이 추가
}
}
// 'name'ID에 'd-none'이 있다면 'd-none'을 지우기 위해 'removeClass()'를 주고 'd-none'이 없다면 'd-none'를 추가하기 위해 'addClass()'를 준다.-
CSS 기능을JQuery안에 주입해보기$(".abc").css({"display" : "block", "background-color" : "blue"});
✅ 실습 과제
😫 복습해도 이해가 안되서 시간 소모가 매우 많았던 이번 수업
아직도 이해가 안되는 게 너무 많다. 어느 타이밍에 전역 변수를 써야 하고, 특히! 실습 과제를 풀면서 edit() 함수를 짜는 데 로직이 이해가 안되서 며칠 째 밤을 샜다....🤣 확실히 수업 녹화했던 걸 복습하니 아예 모르는 걸 해결한 것도 많았지만 아직 내겐 너무 부족하다! 다른 수강생들은 정말 잘 따라오고 과제도 척척 해내는 것을 보면서 좌절한 적이 너무 많다. 개발자의 길은 정말 험난하다고 듣긴 했지만 앞으로도 잘 따라갈 수 있을 지 걱정이 된다😂😂
