#13 [jQuery] 기본, 클릭, 여러가지 함수

---

바닐라 js

DOM HTML 태그 선택 : document.querySelector("태그") :

 

jquery = js library (함수들을 묶어놓은 것 : 패키지. 함수들을 불러서 코딩하는 방법) : 링크/jq library 다운

ex) 최대값, 최소값 등등...

=> 코딩 라인이 대폭 짧아짐

=> 코딩 효율성이 높아짐

- DOM 을 조작하는 유용한 js 함수들을 제공

- 함수(메소드) 체이닝을 사용해서 편리하게 조작함

 

- 라이브러리 설치 또는 CDN 링크를 추가해야 사용가능

- $(css선택자) : jquery 로 대상을 선택하면 동일한 태그를 가진 대상이 여러개가 있으면 여러개를 선택하고,

                          1개면 1개만 선택함

- querySelector ( ), querySelectorAll ( ) 2가지 기능을 모두 가지고 있음

 

함수를 얼마나 잘 아느냐 => jquery를 잘 사용하는 개발자

 

바닐라 js 건너뛰고 jquery만 배우던 시대가 있었지만, 지금은 다시 바닐라 js로 가고 있음

(jquery 가 성능이 떨어짐. 속도가 떨어짐)

 

과거) 크롬, 익스플로러, 사파리, 파이어폭스

바닐라js -> 어디서는 동작하고, 어디서는 안됨 // jquery -> 모든 웹 브라우저에서 다 돌아감

=> jquery 추구

 

현재) 바닐라 js도 기능이 향상되어서 전부다 동작

=> 바닐라 js 추구

 

---

12_chapter_jquery

01_jq_selector.html : id선택자, css 선택자

jquery 인터넷 주소를 연결해야함 https://releases.jquery.com/

Chrome - jquery - (Download 오래걸려서) CDN으로 하기 - 클릭 후 링크 복사 - html 에 붙여넣기

 

크롬 - CDN

 

.x : 숫자 커질수록 최신버전

링크 복사

 

html

 

 

 

전부 다 함수로 호출

함수 형태 : 함수명 ()

$ 도 $() 로 되어있는 함수형태이기에 함수임

$("css선택자") === document.querySelector("css선택자")

 

// js 코딩

$ ( function () {                                         : jquery 형태

  $ ("css선택자").함수("속성", "값") ;      : jquery 코딩

} ) ;

// js 코딩

결과값

 

02_jq_selector2.html : 전체 선택자, css 선택자

 

코드가 짧아서 html 에 바로 jquery 코딩함

 

 

03_jq_css.html : 함수 체이닝 (메소드 체이닝)  $( "css선택자" ) . 함수 ( )

                                                                                                                    .함수2 ( ) ;

 

 

 

함수를 두줄로 쓰는게 아닌 하나로 연결할 수 있음! 

세미콜론은 한번만 쓰기 : $ ( "css선택자" ). 함수 ( ) . 함수2 ( ) ;

 

 

 

04_jq_exam_1.html

 

 

 

05_jq_exam_2.html

 

 

 

06_jq_css_2.html : html 태그 2개 동시에 선택해서 css 디자인하기

$(선택자,선택자2,... ). 함수("속성","값")

 

 

 

 

07_jq_exam_2.html : 자식선택자 이용하여 바로 밑 태그만 디자인 적용 (부모태그 > 자식태그)

 

 

08_jq_children.html : 부모 자식 children 태그 (부모태그 > 자식태그). children( )

 

 

jquery 는 함수형태

children도 함수형태임 (바닐라에서 가지고 있는 함수를 다 가지고 있음)

 

children 없을 때  /  children 있을 때

 

 

13_chapter_jquery

01_jq_form.html : 페이지 이동 / 속성 변경 : 태그[속성]

 

target = "_black" 없으면 그 페이지에서 이동돼서 뒤로가기 탭이 있음

 

target = "_black" 있으면 그 페이지에서 다른 새창이 열려서 뒤로가기 탭이 없음

 

 

 

css 특수선택자 : 속성선택자 : 태그[속성]

(여기에서는 "#wrap a"만 해서 red로 해도 결과는 똑같음. 여기서는 속성선택자를 이용해본것!)

 

.css ( "color","red" )  ==  .css ( {color:"red"} )

 

빨간색으로 변함

 

 

02_jq_selected.html : value 값 가져오기 / 수정 $ ( " css 선택자 " ). val ( )

 

 

1) val () : value값을 가져오는 함수 // 용대리 값을 가져옴

 

 

 

2) val ( "수정할 값" ) : value값을 수정함

$ ( " css 선택자 " ). val ( "수정할 값" )

 

 

 

 

03_jq_click.html : 버튼 클릭 시 글자색 변경 click ( function() { 실행문; } )

버튼 클릭 시 글자색 변경

 

* 바닐라 js : querySelectorAll로 배열로 한다음 반복문 돌려서 디자인 선택

* jquery : 선택만 하면 내부적으로 반복문 돌려서 전부 다 적용해줌 -> 반복문 필요가 없음

 

 

 

04_jq_quiz_1.html

 

1. 버튼 클릭

2. value 값을 alert로 출력(실행)

 

 

05_jq_html.html : 선택한 태그 가져오는 함수 / 수정하기  $ ( " 태그 선택자 " ). html ( )

(바닐라 js 의 innerHTML을 jquery로 구현한것. 태그 사이의 문자 가져오기)

 

 

예제 1) 버튼 클릭하면 html 태그 사이의 문자열 가져오기

 

 

예제 2) 버튼 클릭하면 h3 태그의 문자열 수정하기 $ ( " 태그 선택자 " ). html ( "수정 할 문자" )

 

h3 문자열 수정

 

06_jq_attrGet.html : 선택자의 속성값 가져오기  $ ( " 태그 선택자 " ). attr( "속성명" )

 

07_jq_attrSet.html : 선택자의 속성값 바꾸기  $ ( " 태그 선택자 " ). attr( "속성명", "값" )

 

08_quiz_2.html

하나씩 잘라서 차근차근 문제 풀어야 나중에 복잡한 문제도 풀 수 있음

 

 

innerHTML 안에도 태그를 넣을수 있듯,

html ( ) 안에도 태그 넣을 수 있음

 

 

09_jq_hover.html : 마우스가 위로 올라갔을때, 나갔을 때

$ ( " 태그 선택자 " ).hover(function () {}, function (), {} )

마우스가 위에 있을 때 / 밖에 나갔을 때

 

10_jq_classList.html : class태그 추가/삭제

$("태그선택") addClass(class명)   /   $("태그선택")removeClass(class명)

 

여러개의 class가 적용될 수 있음

html의 box class + hover class 가 중첩됨

여백을 기준으로 box hover 

 

 

11_jq_fade.html : 서서히 나타났다/서서히 사라짐  $("태그 선택") .fadeToggle("상태값");

 

 

toggle : 계속 왔다갔다 거림

상태값 : slow, fast 등 애니메이션 속도

서서히 사라짐 / 서서히 나타남

 

 

12_jq_show_hide.html : 나타내기 / 숨기기 $( "태그 선택" ) show ( ) / $( "태그 선택" ) hide ( )

 

표시 클릭하면 나타남 / 숨김 클릭하면 사라짐

 

13_jq_find.html : 부모 태그 밑에 특정 자식태그 찾아서 디자인 하기

$( "부모 선택자" ).find( "자식 선택자" )

 

 

 

선택한 자식태그 배경 바뀜

 

---

12. chapter. jquery

1. id선택자 :  $( " #id명 "). 함수 ( )

2. 전체 선택자 :  $( " * " ). 함수 ( )

3. 함수 연결 : 함수 체이닝 : $( "css선택자" ). 함수 ( ) . 함수2 ( )

4. html 태그 동시 선택 : $( 선택자, 선택자2,... ). 함수("속성","값")

5. 바로 밑 자식태그만 선택 : $( 부모태그 > 자식태그 ). 함수 ( )

6. 아래 자식 태그들 선택 : $( 부모태그 > 자식태그 ). children( ). 함수 ( )

 

13. chatper. jquery

1. 속성 선택자 : $( 태그[속성] ). 함수 ( )

2. 선택한 value 값 가져오기 : $ ( " css 선택자 " ). val ( )

3. 클릭 시 : click ( function() { 실행문; } ) ★ ★ ★

4. 선택한 태그 가져오기 : $ ( " 태그 선택자 " ). html ( )

5. 선택한 태그 수정하기 : $ ( " 태그 선택자 " ). html ( "수정 할 문자" )

6. 선택한 속성 가져오기 : $ ( " 태그 선택자 " ). attr( "속성명" )

7. 선택한 속성 수정하기 : $ ( " 태그 선택자 " ). attr( "수정 할 값" )

8. 속성명 바꾸기 : $ ( " 태그 선택자 " ). attr( "속성명", "값" )

9. 마우스 위/바깥 : $ ( " 태그 선택자 " ) .hover( function () {} , function () {} ) ;

10. 클래스 추가/삭제 : $ ( " 태그 선택자 " ) .addClass(class명) / removeClass(class명)

11. 서서히 나타났다/서서히 사라짐 : $ ( " 태그 선택자 " ). fadeToggle( "상태값" )

12. 나타내기 / 숨기기 : $( "태그 선택자" ) show ( ) / $("태그 선택") hide ( )

13.부모 태그 밑에 특정 자식태그 찾아서 디자인 하기 : $( "부모 선택자" ) . find( "자식 선택자" )

★ 쉬워서 인기가 많음 ★

---

 

여기까지가 jQuery !

다양한 함수가 더 많지만 그때그때 구글링 하기

jQuery가 고전 기술이긴 하지만 그래도 쓰고는 있음