학습한 내용

Form 태그 선택자

Form태그 내부의 입력에 관련된 태그들에 대한 선택자

:input : 모든 입력에 관련된 태그들을 선택
:text : type 속성이 text인i nput 태그를 선택
:password : type 속성이 password 인input 태그를 선택
:radio : type 속성이 radio인 input 태그를 선택
:checkbox : type 속성이 submit인 input 태그를 선택
:submit : type 속성이 submit인 input 태그를 선택
:reset : type 속성이 rese 인 input 태그를 선택
:button : type 속성이 button인 input 태그를 선택
:image : type 속성이 image인 input 태그를 선택
:file : type 속성이 file인 input 태그를 선택
:enabled : 활성 상태인 input 태그가 선택
:disabled : 비활성 상태인 input 태그가 선택
:selected : select 태그 내의 option 태그 중 현재 선택되어 있는 태그를 선택
:checked : checked나 radio에서 현재 check 되어있는 태그를 선택

1
text input은 노란색으로 지정하고, password input은 빨간색으로 지정한 모습

2

활성 상태의 입력창은 노란색으로 지정하고, 비활성 상태의 입력창은 빨간색으로 지정한 모습
활성 상태의 입력창은 입력이 가능하고, 비활성 상태의 입력창은 입력이 불가능하다

jQuery 이벤트함수

jQuery는 여러 이벤트에 대해 이벤트 처리를 할 수 있는 함수를 제공한다
각 함수는 해당 이벤트가 발생됐을 때 등록된 함수를 자동으로 호출한다
여기서 이벤트 함수에 대해 자세히 알아볼 수 있다

click : 클릭
Dblclick : 더블클릭
Mouseenter : 마우스 커서가 들어왔을 때
Mouseleave : 마우스 커서가 나갔을 때
Mousedown : 마우스 키를 눌렀을 때
Mouseup : 마우스 키를 떼었을 때
Hover : 마우스 커서가 들어왔을 때와 나갔을 때
focus: 포커스가 주어졌을 때
Blur :포커스를 잃었을 때
on : 이벤트를 설정하는 함수
off :설정된 이벤트를 제거하는 함수
one :이벤트를 설정하고 이벤트가 발생했을 때 자동으로 제거

body
클릭했을때 어떤 동작을 하도록 이중 함수 구조로 만들어야 한다
클릭했을 때의 모습
더블 클릭했을 때의 모습
마우스를 위로 올렸을 때 모습
다시 밖으로 빼면 되돌아온다
마우스로 클릭하고 있을 때의 모습
클릭을 떼면 되돌아온다
hover 함수를 이용하면 마우스를 올렸을 때와 밖으로 뺐을 때를 같이 작성할 수 있다

DOM

Document Object Model

text : 태그 사이의 문자열을 제어
html : 태그 내부의 html을 제어
val: 입력 도구들의 value 속성값을 제어
attr: 태그의 속성을 제어

1
a1 문자열 가져오기 버튼을 클릭하면 id=a1의 문자열( 'a1 문자열' )을 알람창으로 띄워준다
a2 문자열 가져오기 버튼을 클릭하면 id=a2의 문자열( 'google' )을 알림창으로 띄워준다

a3 문자열 설정하기 버튼을 누르면 '문자열 설정' 문구가 출력된다
a3 HTML 설정하기 버튼을 누르면 스크립트에서 링크를 걸어놓은 'apple'을 가져오도록 코드를 작성했지만,
text에서는 링크형식이 아닌 문자열 그대로를 가져온다

2
text 대신 html로 세팅해본다
html 가져오기를 클릭하면 id=a1의 내용이 그대로 알림창으로 뜬다
html 세팅하기를 클릭하면 문자열 대신 링크를 가져오게 된다
value값 가져오기를 클릭하면 입력값 가져와 알림창으로 띄워준다
value값 설정하기를 클릭하면 입력값을 자동으로 1234로 설정해준다

attr

html이 들어있는 폴더에 image폴더를 새로 만들고 구글 로고 이미지를 넣는다
body에서 불러오는 이미지 링크와 이미지의 이름이 같아야한다
속성 읽어오기 버튼을 클릭하면 코드로 작성해놓은 이미지의 속성 불러오게 된다
속성 설정하기 버튼을 클릭하면 로고가 2배로 커지고, 속성 읽어오기 버튼을 클릭하면 커진 로고의 이미지 속성을 불러온다

append, prepend

append : html 코드나 태그를 태그 내부의 뒤에 추가
prepend : html 코드나 태그를 태그 내부의 앞에 추가
after : html 코드나 태그를 태그 다음에 배치
before : html 코드나 태그를 태그 앞에 배치

1
scc로 div태그 영역에 테두리를 쳐준다
함수 안에서 바로 태그를 추가할 수도 있고, 변수를 지정한 p태그 객체 형태에서 태그를 추가할 수도 있다
append와 prepend는 지정한 태그 영역( id="a1"영역 ) 안에서 앞, 뒤로 태그를 추가한다

2
이번에는 append, prepend 대신 after, before를 사용해본다
after와 before는 지정한 태그 영역( id="a1"영역 )의 앞, 뒤 영역에 태그를 추가한다

remove, empty

remove : 태그를 제거
empty : 태그 내의 모든 태그를 제거

1
remove와 empty를 사용해본다
remove는 지정한 태그( id="a2" )만 제거한다
empty는 지정한 태그( id="a1" ) 내의 모든 태그 ( p, p id="a2" )를 제거한다

어려운 내용

해결방법

학습소감

이전 시간에는 선택자를 주로 배웠고, 이번 시간에는 이벤트 함수를 배웠다
처음에 불편했던 eclipse도 점점 익숙해져 가는 느낌이다
아직 코드가 제대로 실행되지 않을때 오류가 있는 부분( 오타 등 )을 찾기는 익숙하지 않지만,
계속 사용하다보면 오타도 줄어들고 함수 사용도 능숙해지지 않을까