*JQuery란?
: HTML요소를 조작하는 편리한 Javascript를 미리 작성해 모아둔 것, 라이브러리 역할
JQuery는 Javascript의 코드보다 훨씬 심플하다.
JQuery를 사용하기 위해서는 첨부된 링크에서 코드를 찾아 입력해야한다.
- JQuery링크찾기: https://www.w3schools.com/jquery/jquery_get_started.asp
jQuery Get Started
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
- JQuery코드: <script src="jquery-3.5.1.min.js"></script>
JQuery를 사용할 수 있는 코드를 <head></head>사이에 붙여넣으면 JQuery라는 라이브러리를 불러와 사용할 수 있다.
이제 JQuery를 불러와 사용할 준비 끝!!
*JQuery 값 가져오기: $(#'~')
CSS에서는 class라는 이름의 값을 사용하지만, JQuery에서는 id라는 이름의 값을 사용한다.
예를들어 id="아이디" 의 경우 JQuery에서는 '아이디'라는 값을 불러와 사용한다.
기본적으로 JQuery에서는 $('#id').명령어(); 라는 수식을 사용한다.
*JQuery로 input 박스 값 가져오기: .val();
: id가 'url' 인 input박스에서 JQuery를 적용하여 value값을 얻고 싶을 때,
| $('#url').val( ); 결과물: 정해진 value값이 나온다 |
-id가 'url'인 input박스에서 JQuery를 적용하여 Value값을 입력 하고 싶을 때,
| $('#url').val( '여기에 입력합니다'); 결과물: '여기에 입력합니다' |
*박스 숨기기/보이기: .hide();, .show();
-id가 'post-box'인 곳을 가르키고, .hide( )로 안보이게 한다.
| $('#post-box').hide( ); |
-id가 'post-box'인 곳을 가르키고, .show( )로 보이게 한다.
| $('#post-box').show( ); |
*태그에 html 입력하기: let temp_html (`~`);
: 태그안에 html을 입력하기 위한 명령어이다.
괄호안에 html화 시킬 값을 넣어주고, 이 값이 들어갈 html에 $('#')명령어를 사용하여 넣어주면 그 자리에는 html화 시킨 값으로 자동변환되어 명령어를 실행한다. 괄호안에는 따옴표가 아닌 백틱(back tick)사용을 잊지말것!
변수를 미리 선언하면 temp_html에서 $()로 미리 선언된 변수를 자동으로 불러올 수 있다.
| let title = '내가 타이틀이다' let temp_html(`<button>$(title)</button>`) $('#~').append(temp_html) $('#~').append(temp_html) $('#~').append(temp_html) |
결과물에서는 '내가 타이틀이다' 가 자동으로 넣어진 버튼이 3개가 생성된다.
다음으로는 명령어들을 알아보자
*.append(~)
추가시키는 명령
*.split(~)
끊어내는/분리하는 명령
'💻 개발블로그 > 웹개발' 카테고리의 다른 글
| 2주차(3) 웹개발 강의: Ajax (0) | 2021.12.17 |
|---|---|
| 2주차(2) 웹개발 강의: JQuery연습예제 (0) | 2021.12.17 |
| 1주차(4) 웹개발 강의: 자바스크립트(javascript) (0) | 2021.12.17 |
| 1주차(3) 웹개발 강의: 부트스트랩 (0) | 2021.12.16 |
| 1주차(2) 웹개발 강의: 구글웹폰트/주석달기/CSS파일분리 (0) | 2021.12.16 |
