[20220926] jQuery

kangsun·2022년 9월 26일

jquery

jQuery

목록 보기

1/3

📌 jQuery

목차
- jQuery 기본, 이벤트
- text, css, each반복문
- 요소생성
- moment.js
- 예제(날짜생성, 아날로그시계)

[jQuery] - JavaScript Library
↳ 자바스크립트를 압축시켜놓은 것.
↳ 자바스크립트는 하나하나 모두 작성해야하지만 제이쿼리를 사용하면 자바스크립트를 라이브러리화하여 사용하기 쉽게 도와주는 도구이다. 자바스크립트를 압축시켜놓은 것.

[jQuery 오픈소스 사용방법]

1) jQuery라이브러리를 제공하는 해당사이트 직접 링크

2) jQuery라이브러리를 직접 다운 받아서 사용(추천)
https://jquery.com/download/
→ Download the compressed, production jQuery 3.6.1
→ 우클릭 → 다른이름으로 링크 저장
→ jquery-3.6.1.min.js 다운

[자바스크립트기반 오픈소스 (.js)]
- jQuery, Bootstrap, moment, AJAX, AngularJS, react등
- 시각화 : chart.js, d3.js 등등

[참조 사이트]
https://www.w3schools.com/jquery/default.asp

1. 작업폴더 생성

↳ I:\java202207\frontend\jQuery

자바 오픈소스 다운 팁

↳ min이라는 단어 들어가있는 파일로 다운받는게 편함.

↳ min은 엔터와 스페이스를 최소화 시켜 용량을 최대한 작게 만들어 놓은 것.

2. jQuery 라이브러리 다운

↳ 우클릭 후 다른이름으로 링크 저장

↳ jQuery폴더에 저장하기

3. jQuery에 임포트하기

↳ <script src="임포트"> 임포트 안에 jquery-3.6.1.min.js 파일 임포트 시키기

🔍 임포트 완료되었는지 확인하기

1) jQuery() 축약형 → $ 확인 방법

↳ 이렇게 나오면 임포트가 정상적으로 완료된 것이다.

2) 확인방법

↳ 이렇게 나오면 임포트가 정상적으로 완료된 것이다.

3) 2번을 축약한 확인방법

02_jquery 이벤트

1. form 영역 제작

2. script 영역 작성

✳️ textbox 접근하기

1) JavaScript 접근

↳ 아이디 안에있는 텍스트박스의 ITWILL에 접근할 것이다.

↳ alert를 사용해서 ITWILL 출력되도록 코딩

↳ 결과 확인

2) jQuery 접근

↳ alert를 사용해서 ITWILL 출력되도록 코딩
↳ javascript보다 더 간결하다.

↳ 결과 확인

✳️ jQuery 이벤트와 함수

$("선택자").clik(funtion함수명(){}) : 이걸 많이 사용
$("선택자").on(click, funtion(){})

↳ 둘다 맞는 표현
↳ 클릭되었을 때만 이벤트가 발생하도록 만드는 것.

id="btn_idcheck"에 클릭이벤트와 함수 연결하기

↳ id=btn_idcheck 이 부분에 접근할 것이다.

↳ id=btn_idcheck를 클릭했을 때 팝업창 띄우기

↳ ID 중복확인(btn_idcheck) 버튼을 누르면

↳ 새창이 띄워진다.

id="btn_join" "회원가입"에 클릭이벤트와 함수 연결하기

↳ id="btn_join" 이 부분에 접근할 것이다.

↳ #btn_join 을 클릭하면
↳ uid.trim() uid의 공백을 잘라주고
↳ !(uid.length>=8 && uid.length<=12) 만약 uid의 길이가 8자~12자 사이가 아니라면
↳ alert("아이디 8~12글자 이내 입력해주세요~"); 이 입력창이 나오고
↳ $("#uid").focus(); 커서가 아이디 입력칸에 자동으로 가도록 설정된다
↳ return false; 잘못된 정보이므로 서버에 전송되지 않도록 false값을 준다.

↳ 회원가입 (btn_join 버튼을 누르면

↳ 새창이 띄워진다.

id="btn_reset" "다시쓰기"에 클릭이벤트와 함수 연결하기

↳ id="btn_reset" 이 부분에 접근할 것이다.

↳ $("#memfrm").reset();

↳ <form id=memfrm></from>를 원래대로 되돌리는 함수.

[참조]
https://www.w3schools.com/jquery/jquery_events.asp

* Getter = 가져와
* Setter = 전송, 보낸당, 다른 쪽으로 갖다줘

03_text_html

✳️ text()와 html() 함수

1. 버튼 생성 후 페이지 확인

2. `<botton>`요소 접근

1) javascript로 접근하기

↳ 입력을 누르면

↳ 페이지에서 결과 확인

2) jQuery로 접근하기

↳ 입력을 누르면

↳ 페이지에서 결과 확인
↳ 마크업된다.

🤔 '마크업되었다'는 의미 ?

↳ 웹문서에 태그로 생성되었다는 의미이다.
↳ 컴퓨터가 이해할 수 있도록 태그로 문서를 작성하는것을 '마크업 개발'이라고 한다.

04_css메소드

✳️ css() 함수

[getter와 setter 함수]
- jQuery는 대부분 getter와 setter함수 이름을 같이 사용한다.

Javascript에서 스타일 접근
document.getElementById("").style
jQuery에서 스타일 접근 함수
css()함수

1) css(속성명) : getter개념
2) css(속성명, 속성값) : setter개념
3) css({속성명:속성값, 속성명:속성값, 속성명:속성값, ~~~})
: 여러개의 속성을 한꺼번에 세팅

버튼과 네모칸 생성

click 이벤트 함수

↳ id값을 주지않고 버튼이름이 똑같으면 배열이다 => index값으로 접근하면 된다.

<body>에 있는 <button>요소들 중에서 0번째 접근하기 (setter 함수 사용: 네모 박스 재설정)

↳ 이부분에 접근을 한 것이다.

↳ 색상입력을 클릭하면 박스가 빨간색으로 변경된다.

<body>에 있는 <button>요소들 중에서 1번째 접근하기

↳ 배열의 1번째 부분인 높이얻기 버튼에 접근

↳ 클릭을 하면 박스의 넓이와 높이를 알람으로 보여준다.

↳ 결과확인

<body>에 있는 <button>요소들 중에서 2번째 접근하기

↳ 배열의 2번째 부분인 여러개의 속성을 한번에 변경하는 버튼에 접근

↳ 넓이를 800으로 바꾸고 박스의 디자인을 { } 안에 있는 코드로 변경해준다.

↳ 결과확인

참조
https://www.w3schools.com/jquery/jquery_dom_get.asp https://www.w3schools.com/jquery/jquery_dom_set.asp

05_속성관련메소드

<img> : 요소, element
src, alt, title : 속성, property, attribute
text(), html(), css()
prop(). attr() 요소의 속성 접근 함수
ajax() 웹서버와 문자단위 통신할 때(비동기식) 시용하는 함수

번외

- jQuery를 사용하지 않으면 자바스크립트에서 ajax를 (빨간 네모칸) 이런식으로 사용하는데, jQuery를 사용하면 ajax()만 입력하면 사용할 수 있다.

1. 0번째 버튼 'title얻기' 접근하기

↳ button의 0번째 title얻기

↳ 이미지 요소에 있는 속성값 중에 타이틀 속성을 가져와서 타이틀 변수에 넣기

↳ 이미지 요소의 타이틀 속성은 ryan

↳ title 얻기를 클릭하면

↳ ryan 이라는 문구가 뜬다.

2. 1번째 버튼 'src변경' 접근하기

↳ 이미지 요소에서 src속성의 이미지 파일을 바꿔주세요

↳ "../images/k6.png" 이 이미지 파일로 바뀐다.

3. 2번째 버튼 '여러개의 속성을 변경' 접근하기

↳ 2번째 버튼 '여러개의 속성을 변경' 버튼 확인

↳ 이미지 요소에있는 이미지의 너비, 높이, 이미지 주소, alt, title 을 모두 변경하기

↳ 이미지 크기와 이미지 파일, 이름이 변경됐다.

06_each반복문

1. 준비

2. 구구단 7단 네모박스에 출력하기 ( for반복문 사용)

↳ 7단 버튼을 클릭하면 <li> li요소를 생성해서 text(구구단 7단을 생성)하고, appendTo(디스플레이리스트를 추가해라)

🚨 주의사항

$("li") 와 $(<li>) 이 두개는 완전 다른 값이 나온다.
- $("li") : <body>에 있는 요소들 중에서 <li>요소에 접근
기존에 있는 요소에 접근
- $(<li>) : <body>에 새로운 <li>요소를 생성
기존에 없는 요소를 생성

3. 구구단 7단 네모박스에 출력하기 jQuery의 each반복문

형식) $.each(배열, function(){})
형식) $(배열).each(function(){})

↳ for문의 형식처럼 오른쪽에 있는 덩어리가 하나씩 왼쪽에 들어가게되는 방식이다.

↳ 여기의 this는 위에 2번에서 만들어진 <li> 태그에 접근한 것이다. (거기서 <li>새로 생성했음)

↳ 그 <li>에 접근하여 <li> 안에 들어가있는 내용이 alert로 나온다.

참조 https://www.w3schools.com/jquery/misc_each.asp

07_this_index

클릭한 요소의 인덱스 얻기(index)

1. 준비

this 연습 준비
- this 차이점
  - $(this) jQuery에서 this객체 접근
  - $("this") 본문에서 <this>요소에 접근 및 선택
  - $("<this>") 본문에 <this>요소 생성

1) JavaSCript

↳ 여기서 this는 선택한 요소 자기자신을 가리킨다.
↳ 핑크를 누를 땐 핑크자신, 파랑을 누르면 파랑 자기자신, 녹색도 마찬가지로 누르면 모두 this로 자기자신을 가리키므로 모두 적용이 된다.

↳ 글자색이 빨간색으로 변한다.

2) jQuery

🚨 주의사항

자바스크립트 요소 객체 this를 jQuery객체 $(this)로 변경한 후 사용한다.
this.css() 에러
↳ 클릭해도 아무런 반응 없음, 변경되지 않음.

↳ 글자색이 파란색으로 변한다.

3) 사용자가 클릭한 요소의 인덱스 가져오는 함수

🚨 주의사항

1부터 카운트 된다.

↳ 버튼을 누르면 1값이 alert로 출력되고

↳ 파란색으로 바뀐다.

🚨 주의사항

밑에 있는 멋진핑크 버튼들은 class내부에 있기때문에 다른 버튼으로 인식되어 인덱스 값이 0부터 적용된다.

4) 다른 id로 접근해보기 - `#exBox .btn`

↳ #exBox .btn 에 접근

↳ 멋진핑크, 쿨한파랑, 네온녹섹 버튼에 접근

↳ 멋진핑크를 클릭하면

↳ 배경컬러와, 멋진핑크의 텍스트가 나온다.

4) 클릭한 버튼 정보 출력하기 - #exBox .btn

08_요소생성

<table> 요소 element
border 속성 property, arrtibute

✅ 요소를 생성하는 이유
- 문자단위의 통신에 많이 사용하기 때문(비동기식) → AJAX
- 댓글 더보기 등의 무한 스크롤링하기 위해
  ↳ (댓글 '더보기'를 누르면 추가로 10개가 더 보여지는 것
✅ 요소 생성 및 추가
- append(), appendTo() 요소를 끝에 추가
- prepend(), prependTo() 요소를 앞에 추가
- 부모.append(자식)
- 자식.appendTo(부모)

1. 준비

↳ 댓글이 추가되는 곳 설정

↳ 이 부분임

2. 테이블 생성

1) table에 계속 추가하는 방법 (마크업 출력)

1-2) (순수문자열 출력)

↳ table 계속 추가하는 방법은 역동적이지 못하다.

2) 역동적인 방법

↳ 태그를 일렬로 작성해도 제이쿼리 요소로 인식한다.

↳ 테이블이 출력된다.

↳ 테이블생성 버튼을 한번 더 누르면 테이블이 밑에 추가된다.

kangsun

코딩 공부 💻

다음 포스트

[20220926] jQuery

jQuery

📌 jQuery

[jQuery] - JavaScript Library

[jQuery 오픈소스 사용방법]

[자바스크립트기반 오픈소스 (.js)]

1. 작업폴더 생성

2. jQuery 라이브러리 다운

3. jQuery에 임포트하기

🔍 임포트 완료되었는지 확인하기

1) jQuery() 축약형 → $ 확인 방법

2) 확인방법

3) 2번을 축약한 확인방법

02_jquery 이벤트

1. form 영역 제작

2. script 영역 작성

✳️ textbox 접근하기

1) JavaScript 접근

2) jQuery 접근

✳️ jQuery 이벤트와 함수

id="btn_idcheck"에 클릭이벤트와 함수 연결하기

id="btn_join" "회원가입"에 클릭이벤트와 함수 연결하기

id="btn_reset" "다시쓰기"에 클릭이벤트와 함수 연결하기

03_text_html

✳️ text()와 html() 함수

1. 버튼 생성 후 페이지 확인

2. <botton>요소 접근

🤔 '마크업되었다'는 의미 ?

04_css메소드

✳️ css() 함수

05_속성관련메소드

번외

1. 0번째 버튼 'title얻기' 접근하기

2. 1번째 버튼 'src변경' 접근하기

3. 2번째 버튼 '여러개의 속성을 변경' 접근하기

06_each반복문

1. 준비

2. 구구단 7단 네모박스에 출력하기 ( for반복문 사용)

🚨 주의사항

3. 구구단 7단 네모박스에 출력하기 jQuery의 each반복문

07_this_index

클릭한 요소의 인덱스 얻기(index)

1. 준비

this 연습 준비

1) JavaSCript

2) jQuery

3) 사용자가 클릭한 요소의 인덱스 가져오는 함수

4) 다른 id로 접근해보기 - #exBox .btn

08_요소생성

✅ 요소를 생성하는 이유

✅ 요소 생성 및 추가

1. 준비

2. 테이블 생성

1) table에 계속 추가하는 방법 (마크업 출력)

1-2) (순수문자열 출력)

2) 역동적인 방법

[20220927] jQuery

0개의 댓글

`id="btn_idcheck"`에 클릭이벤트와 함수 연결하기

`id="btn_join"` "회원가입"에 클릭이벤트와 함수 연결하기

`id="btn_reset"` "다시쓰기"에 클릭이벤트와 함수 연결하기

2. `<botton>`요소 접근

4) 다른 id로 접근해보기 - `#exBox .btn`