jQuery 기본 #3 (예제 및 결과)

---

Note

// click(자동 호출 함수) : 마우스 왼쪽 버튼 클릭 (모든 요소 사용가능)
// change(자동 호출 함수) : 값에 변화가 일어 났을 때 (주로 <select> )
// keyup(자동 호출 함수) : 키보드가 눌렀다 떼지면
// keydown(자동 호출 함수) : 키보드가 눌려지면
// mouseover(자동 호출 함수) : 해당 요소에 마우스 커서가 올라가면 (모든 요소 사용가능)
// mouseout(자동 호출 함수): 해당 요소로부터 마우스 커서가 빠져 나가면 (모든 요소 사용가능)
// hover() : mouseover()와 mouseout() 기능을 포함 (모든 요소 사용가능)
// bind('이벤트명', 자동 호출 함수) : 이벤트를 동적으로 부여 (모든 요소 사용가능)
// unbind('이벤트명') : 이벤트 제거 (내일 사용예정)
// one('이벤트명', 자동 호출 함수) : 해당 이벤트 1회 가능 (모든 요소 사용가능)
// toggle(자동 호출 함수, 자동 호출 함수) : 한개의 요소에 두가지 기능 실행(ON/OFF)..​

 

---

 

텍스트 값 가져오기 및 설정

text(): <b>text</b> -> <b>text</b>
html(): <b>text</b> -> text

위와같은 형식으로 글자들은 표시된다.

 

See the Pen LYWryqe by lsj5634 (@zinisang) on CodePen.

 

 

 

 

 

이 창이 먼저 나오고

그다음 이창이 나온 후 페이지가 보여진다

---

폼 요소의 값 가져오기 및 설정

텍스트 입력값, 라디오 버튼 / 셀렉트 태그 선택값을 추출한다.

 

See the Pen jQuery-var by lsj5634 (@zinisang) on CodePen.

선택된 값들이 출력된다.

---

요소만큼 반복해서 속성 설정 및 가져오기

 

See the Pen jQuery-each by lsj5634 (@zinisang) on CodePen.

설정한 값이 자동으로 p 태그 id 들에 부여된다.

요청한 para-0에 해당하는 값이 버튼을 누르면 출력된다.

---

텍스트박스(textbox)의 값 복사

 

See the Pen jQuery-text2 by lsj5634 (@zinisang) on CodePen.

이렇게 위에 내용을 적고 복사를 누르면,

이렇게 그 내용을 바로 가져온다.

---

암호확인 기능 구현하기

 

See the Pen jQuery-PasswordConfirm by lsj5634 (@zinisang) on CodePen.

비밀번호가 완전히 같을 때까지 암호가 다르다고 표기를 해주고,

암호가 같아지면 맞다고 바로 표현해준다.

---

드롭다운리스트 선택한 값 가져오기

 

See the Pen jQuery-selected by lsj5634 (@zinisang) on CodePen.

초기에는 아무것도 없다가,

내용을 하나 클릭하면 자동으로 밑에칸에 그 내용을 출력한다.

---