배운 것
외부 software 적용
help-install new software-add-archive
알집 안풀고 진행해야됨
함수
jQuery(객체) 형태로 작성해야되지만 $(객체)로 대체 할 수 있다.
Ready 함수
JS의 windoww.onload와 흡사함
window.onload : 태그 객체가 모두 생성되면 발생하는 이벤트 = 웹 하면이 처음 나타날 떄 필요한 작업이 있다면 여기서 구현
Ready도 동일한 시점에 동작
차이:
jQuery선택자
기본
전체(*), 태그이름(태그이름), 아이디(#), 클래스(.) 선택자
기본 조합
$("#a1, a2").css("color","red");)
•선택자1, 선택자2 : 동시에 여러태그를 선택할때 사용
•선택자1 > 선택자2 : 태그의 바로하위의태그들을 선택할때 사용
•선택자1 선택자2 : 태그 내부의 모든태그들을 선택할때 사용
•선택자1.선택자2 : 정확히 그 선택자를 만족하는 태그를 선택
•선택자1 + 선택자2 : 선택자1 태그 바로 다음에 있는 선택자2 태그를 선택
- 바로 다음에 선택자2가 없으면 적용되지 않음 (ex. #a1 + p) 인데 #a1 다음에 div가 올경우 적용 X
•선택자1 ~ 선택자2 : 선택자1 태그 다음에 있는 모든 선택자2 태그를 선택
- 바로 다음에 없더라도 상관없이 모두 적용
순서 필터
태그의 상태에 따라서 선택
•:first(last) : 선택자에 해당하는 태그 중 가장 처음(마지막) 태그
•:first(last)-child : 선택자에 해당하는 태그 중 각 영역 별 첫 번째(마지막) 태그가 선택.
-----☆ 처음(마지막) 태그가 선택자에 해당 하지 않으면 선택되지 않음
•:first(last)-of-type : 선택자에 해당하는 태그 중 각 영역 별 처음(마지막) 태그가 선택
•:odd : 인덱스번호(0부터시작)가 홀수인 태그 선택
•:even : 인덱스번호(1부터시작)가 짝수인 태그 선택
•:only-child : 영역(대체로 div) 내에서 선택자에 해당하는 태그가 하나 일 경우선택.
-----☆동일하지 않은 다른 태그가 있으면 선택되지 않음
•:only-of-type : 영역 내에 선택자에 해당하는 태그가 하나 일 경우 선택, 동일하지 않은 태그가 있으면 선택됨
(인덱스) 번째 태그 선택
•:ep(인덱스) : 인덱스(0부터시작)번때 해당하는 태그를 선택
•:nth-child(인덱스) : 각 영역의 인덱스(1부터시작)번째 해당하는 태그를 선택.
인덱스번째 태그가 선택자에 해당하지 않으면 선택되지 않음
•:nth-of-type(인덱스) : 각 영역의 인덱스(1부터시작)번째 해당하는 태그를 선택
•:gt(인덱스) : 선택자에 해당하는 태그 중 인덱스(0부터시작)번째 태그 이후의 태그들이 선택
•:lt(인덱스) : 선택자에 해당하는 태그 중 인덱스(0부터시작)번째 태그 이전의 태그들이 선택
•:nth-last-child(인덱스) : 뒤에서 인덱스(1부터시작)번째태그가 선택.
인덱스번째 태그가 선택자와 다르면 선택되지 않음
•:nth-last-of-type(인덱스) : 뒤에서 인덱스(1부터시작)번째 태그가 선택
•:not : 선택자에 해당하지않는 태그들이 선택
속성 선택자
•태그에설정되어있는속성을통해선택하는선택자
•[속성] : 속성을 가지고있는 태그를 선택 p[title]
•[속성= 값] : 속성의값이 지정된 값과 일치 하는 태그를 선택 p[title='aaa1']
•[속성!= 값] : 속성의값이 지정된 값과 일치 하지않는 태그를 선택p[title!=aaa2]
•[속성$= 값] : 속성의값이 지정된값으로 끝나는 태그를 선택
•[속성|= 값] : 속성의값이 지정된속성의 값과 일치하거나 지정된 속성으로 시작하고 하이픈으로 연결된 태그를 선택
•[속성^= 값] : 속성의값이 지정된값으로 시작하는 태그를 선택
•[속성~= 값] : 속성의값이 지정된값을 단어로 가지고있는 태그를 선택
•[속성*= 값] : 속성의값이 지정된값을 포함하는 태그를 선택
상대 선택자
(":focus").css("background-color","green");
focus가 주어진 (autofocus) 태그 적용
("div:has(p)").css("font-style","italic");
p태그를 가지고 있는 div태그에 적용
소감
JS나 CSS를 사용할때 사용하던 태그들, 속성들을 동일하게 쓴다는점에서 좀 편하게 수업을 들었던 것 같다.
