[DAY44] jQuery

NA YE SOM·2023년 9월 5일

jQuery









-> 프로젝트마다 다운로드 받은걸 어디에 두는냐에 따라 경로 문제 생길 수 있지만 네트워크 잘 되면 CDN은 어디에나 있을 수 있음








-> javascript객체와 jQuery객체를 구분해야함








02_document.object.html




uncompressed version : 파일의 크기가 크니가 시간 오래걸림
mini version :



-> document.object로 j.query를 만드는 연습하기




-> 태그로 썼다는 것 (인식했다는것): getelementsbytagname

부모-자식 관계 보기




*자식을 가져오는 방법
(1) 자식선택자 이용
(2) jquery 메소드 : find 메소드 이용


ott.wrap은 자식 1개 -> ul 태그

(후손이 아니라 자식이다!)



후손






형제





next 반대 previous

prevAll




셋째 이전에 있는애, 셋째 다음에 있는애(netlfex 기준 시 : 셋째)


-> 부모에 대해서는 선택자 x


-> 여러 부모가 있을 가능성이 높은것 : div태그
-> 가장 가까운 부모




-> parents는 잘 사용 x -> closets많이 씀

삭제하겠다 시작 : 누구를 삭제할 것인가?

-> 누구의 정보가 tag에 포함되어있어야 삭제가능(뭘 지울지 모르니까)


5번째 상황 : button의 다음자리에 input을 집어넣어서 번호를 넣어둠

-> 각 태그 밑에 스크립트 하나씩 추가해서

data-post 속성이 있는 태그를 찾아서 console에 출력하기(5번 연습하기)

★★★ '삭제기능'의 시작 : 꼭 할 줄 알아야 함(삭제 기능명령을 내리지 못함)






-> 최종 data.post 값을 뺴는 것이 목적


-> 해당 삭제할 번호를 임의의 장소에 여러개 배치하고
해당 요소를 찾는 연습만 해봤음

-> ★★★우리가 이런 구조를 직접 만들어야 함

-> 직접 구조를 보고 만들어야 함

(5가지 방법 중 한가지 방법 써서 목록만들기 해야함)

-> event까지 가지고 갈 것(임시로 여기다 둠)

-(속성선택자) 속성으로 알아내는 선택자 :


-> 기억안나면 선택자로 하면됨(다만, 이전은 선택 x -> jquery로 하기)


-> input 하나 찾음








is(':focus') 메소드 : 포커스를 가졌다면 true반환

is(':checked') 메소드 : 체크되었다면 true반환

is(':selected') 메소드 : 선택되었다면 true반환








안녕하세요 ,반갑습니다로 바꾸는 과정




-아무것도 전달 x : html요소 수행 : getter역할

  • 전달 : getter역할


-> 내부 요소 수정하려고 html메소드 사용가능

attribute 메소드 제공

removeAttribute -> 요소.removeAttr('속성')


-> 휠씬 커야하는데 그림이 작게 들어옴

-> attribute 값 가져오는법, 바꾸는법, 지우는법


-> 이름이 달라질수도 값이 달라질 수도 있다
(대부분은 이름과 값이 같음 : 개체 속성)





-> 태그들이 가진 property 지우면 안됨
(checked property 지우면 안됨 -> set property 쓰면됨)


-> console.log(radio.prop('id')) ;
-> console.log(radio.prop('class'));
-> console.log(radio.prop('checked'));

->

radio 지정 변경하기 (#p4 > :radio:checekd)



-> prop쓸 일이 별로 없음( remove class .. )

상태 확인 메소드 : radio.is(':checked')

-> 둘다 true나옴 (if문에서 사용할 수 있는 코드가 2개임)
-> if문에서 주로 발견 : is 메소드()

property 값 가져다가 setting하는 방법

개체 속성 다룰때 : radio 태그 ->





-> data속성을 쓰는건 : data저장을 위해서


-> 남자 클릭해도 선택 가능



-> 복사해서 바꾸기

css 바꾸는게 좋지만 원하면 가져올 수 있고 설정할 수 있음

-> 삭제는 없음



카멜케이스로 바꾸지 않고 원래 이름 그대로 씀





서버프로그램 : cdn쓰기

최종 : 경로 잡는 방법도 달라짐



-> relative 와 top은 같이 줘야함








-> color는 opacity와 동일함

Relative : 요소를 일반적인 문서 흐름에 따라 배치한다
요소 자기 자신의 원래 위치(static때의 위치)를 기준으로 배치한다.

  • 원래 위치를 기준으로 왼쪽(top), 아래쪽(bottom), 왼쪽(left),오른쪽(right)에 얼마만큼 떨어질지 결정한다
    링크텍스트









-> event에서 쓰면 편함
-> 클릭할때마다 상태가 바뀜




★★★ 이벤트 대상 확인방법(중요!)


-> 사용자가 클릭한 버튼의 삭제를 진행해야 함

*이벤트 대상 확인방법
1. 이벤트 객체의 target 속성

-> jquery에서는 jquery객체 필요함 !!




이벤트 대상을 가지고 있는 부모에서 시작하는것






등록하는 방법







클릭한 버튼의 text 알아내기

클래스 구성 -> 배열 먼저


for문안에 집어넣으니까 event 3번 달아야 함

javascript, jquery 적절하게 섞어쓰는것
전부다 바꿔쓰는게 답은 아님

★★ event는 전부다 jquery로 바꾸는것이 좋다

event의 모든 상세 정보를 가지고 있는 객체




-> a태그는 클릭하면 무조건 이동하게 되어있는데 막을 것













-> 위쪽에 들어갈 수 있는건 부모면 다 된다

profile
개발자 velog

0개의 댓글