JQuery는 오픈소스 기반의 Javascript의 library이다. 모든 browser에서 동작하므로 브라우저 별로 다르게 코드를 작성하는 파편화가 없다. 또 AJAX처리를 직관적으로 할 수 있다.
jQuery를 사용하기 위해서는 라이브러리를 불러오는 것이 필요한데,
CDN방식을 이용할 수 있다.
CDN이란 content delivery networ, 콘텐츠 전송 네트워크로 html태그를 이용해서 라이브러리를 동적으로 다운로드해서 사용하는 방식이다.
CDN
- 지리적 제약 없이 전 세계 사용자에게 빠르고 안전하게 콘텐츠를 전송할 수 있는 콘텐츠 전송 기술
- 서버와 사용자 사이의 물리적인 거리를 줄여 콘텐츠 로딩에 소요되는 시간을 최소화
(출처 : https://library.gabia.com/contents/infrahosting/8985/)
장점
- 웹사이트 로딩속도 개선
- 인터넷 회선 비용 절감
- 컨텐츠 제공의 안정성
- 웹사이트 보안 개선
(출처 : https://goddaehee.tistory.com/173)
jQuery CDN을 이용하는 방법
jQuery CDN
The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr
releases.jquery.com
위의 사이트에서 원하는 버전을 눌러서 복사한 후 자바스크립트 파일을 링크하는 태그 위에 붙여넣기하면 된다!
매우 간단하다.
<head>
<meta charset="UTF-8">
<title>jQuery01</title>
<!--CDN방식으로 jQuery library library를 loading-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="js/jQuery01.js"></script>
<link rel="stylesheet" href="css/jQuery01.css">
</head>
기본 구문
jQuery의 식별자는 $이다.
식별자와 선택자(selector), method로 구성되어있다.
$(선택자).method()선택자자리에는 선택자 또는 document object가 들어간다.
그렇게 되면 '$(선택자)'이 부분은 jQuery객체를 생성한다.
브라우저의 componet를 javascript로 가져와 객체화하는데 이를 문서객체(document object)라고한다.
선택자 Selector
- 전체 선택자 : 현재 html안에 있는 모든 element를 모두 선택한다.
기호 * - 태그 선택자 : 태그명을 이용해서 선택한다.
$('div') //->html내 모든 div태그 선택 - id 선택자 : 아이디 속성을 이용해서 선택한다.
기호 #
id는 중복이 불가능하다! - class 선택자 : 클래스 속성을 이용해서 선택한다.
기호 .
class는 원래 css를 위한 속성이다. - 구조 선택자
- 기호 + : 바로 다음에 오는 형제 요소 한 개를 선택
- 기호 ~ : 바로 다음에 오는 모든 형제 요소들을 선택
- 속성 선택자 : 지정한 속성을 가지는 것을 모두 찾는다.
기호 []
속성의 값을 지정하는 것도 가능하다.$('[value]') - 필터 선택자
기호 :
기본 선택자 뒤에 사용하고, 다양한 선택을 가능하게한다.- :first
첫 번째 요소를 선택 - :last
마지막 요소를 선택 - :eq(idx)
idx번째의 요소를 선택. index는 0부터 시작한다. - :selected
select박스에서 선택된 요소 선택
- :first
console.log($('ol > li:first').text());
console.log($('ol > li:last').text());
console.log($('ol > li:eq(1)').text());
let op = $('select > option:selected').text();더 많은 필터선택자 알아보기>>>>
[jquery] 필터 선택자 - :을 포함한 선택자
1. 필터 선택자 - 역할 기본 선택자 뒤에서 사용 세부적으로 좀 더 섬세하게 선택자를 선택 2. 필터 선택자 - 입력양식 선택자 예제 ◈ 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25..
devjhs.tistory.com
Method
- css('속성이름', '속성값') : css속성을 바꿈
$('*').css('color', 'red') $('#seoul').css({ 'background':'url(https://english.seoul.go.kr/wp-content/uploads/2013/10/img_about_01.jpg)', 'background-repeat' : 'no-repeat', 'height':'100px' }); - addClass('클래스이름') : 클래스 속성을 더함
html에 연결된 css파일에있는 클래스이름을 사용하면 된다.
css method를 이용하면 여러가지 css속성을 바꾸는 상황에 적합하지 않으므로 주로 이 방법을 사용한다.
$('ul > li:eq(1)').addClass('myStyle') - text() : 인자가 없으면 태그 사이의 문자열을 리턴.
alert($('div').text()); - test(’text’) : 인자가 있으면 태그 사이의 문자열을 변경
$('div').text('test method in jQuery'); - val() : 사용자가 입력한 값을 알아옴.
let txt = $('[type = text]').val(); alert(txt); - val(’문자열’) : 입력상자에 내용 변경
$('[type = text]').val('Hello'); - attr(’속성이름’) : 속성이 가지는 값 리턴
- attr(’속성이름’, ‘속성값’) : 해당 속성의 값을 변경
- removeAttr('속성이름') : 해당 속성 삭제
- each() : 선택된 element가 여러 개이면 그 각각에 대해서 each안에 들어있는 람다함수를 호출.
$('[type = checkbox]:checked+span').each( function (idx,item){ console.log($(item).text()); } ) - remove() : 자기자신과 후손 모두 삭제
- empty() : 자기자신은 남기고 후손 삭제
새로운 html element 추가
- 선택자
$(’<태그></태그>’)
$(’<태그 />’) : 닫는태그가 없는 태그의 경우
$('<div></div>').text('Hello jQuery'); $(’<img />’).attr('src', 'img/robot.svg'); - method
- append() : 맨 마지막 자식 요소로 추가
- prepend() : 맨 처음 자식 요소로 추가
- after() : 바로 뒤의 형제 요소로 추가
- before() : 바로 앞의 형제 요소로 추가
'Programming > javascript' 카테고리의 다른 글
| [jQuery] AJAX 사용법 (0) | 2022.02.08 |
|---|---|
| [Javascript] Javascript 기초 (1) | 2022.02.04 |
