[수림님 Velog] jQuery 기본 지식 정리

1. jQuery 기본 지식 정리하기

jQuery란 무엇인가?

jQuery란 JavaScript의 생산성을 향상시켜주는 JavaScript 라이브러리이다.

라이브러리란?

자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들이다.

jQuery의 특징

• Element를 선택하기 쉽게 할 수 있다.
• 선택된 Element들을 효율적으로 제어할 수 있다.
• JavaScript로 만들어진 라이브러리이다.

jQuery 사용방법

jQuery를 사용하는 방법에는 아래와 같이 2가지가 있다.

1. 직접 서비스 하는 방법
   jQuery 사이트에서 jQuery 파일을 다운받고 자신의 웹 서버나 온라인 상에 존재하는 공간에 업로드 한 후 script src의 속성값으로 전달한다.

2. 구글의 자바스크립트 라이브러리를 사용하는 경우
   url을 복사해서 script src의 속성값으로 전달한다.

min 파일과 기본 파일

• min 파일 : 압축된 파일로 저사양의 컴퓨터나 네트워크가 느린 사용자한테는 압축되어 있는 파일을 사용하는 것이 좋다.
• 기본 파일 : 개발하는데에 jquery사용에 문제가 있을 경우, 완전한 코드의 형태를 필요로 할 수 있기 때문에 그런 경우에는 압축되지 않은 파일을 사용할 수 있다.

jQuery의 문법

• jquety는 $로 시작한다.
• jquery는 인자값으로 CSS selector를 줄 수 있다.

$(제어대상).method1().method2(); 주어.서술어

jQuery는 jQuery의 특성한 문법 체계를 가지고 있기 때문에 JavaScript가 아닌 느낌이 들긴 하지만 사실은 JavaScript에서 허용하는 범위 안에서의 문법이다.

jQuery를 사용하게 될 경우, JavaScript를 사용했을 때보다 생산성이 드라마틱하게 높아진다.

jQery Wrapper

Wrapper란 jQuery라는 이름을 가지고 있는 함수를 호출하는 것이다.

그 인자로 Element Object를 전달하거나 문자열로 된 CSS Style Selector를 전달한다.

Element Object (엘리먼트 오브젝트)

document.getElementById로 인자를 전달하면 어떤 값을 return 해주는데 그 return한 객체가 엘리먼트 오브젝트 이다.

CSS Style Selector (CSS 스타일 선택자)

• ID Selector : #
• Class Selector : .
• Element Selector : 아무것도 붙어있지 않음

Wrapper의 안전한 사용

$와 jQuery는 같은 의미이지만 $를 사용하는 다른 라이브러리들과의 충돌 때문에 아래와 같은 방법을 사용한다.

• jQuery라는 이름 쓰기
• 함수를 만들어 사용하기

(function($){ $('body').html('hello World!'); })(jQuery);

위와 같이 함수를 만들어 인자로 jQuery객체를 전달하여 충돌을 방지할 수 있다.

jQuery를 이용해서 제어 대상을 지정하는 방법

• jQuery(selector, [context])
  - selector : CSS와 같은 형태를 가진 문자열
  - context : 두번째 인자로 어떤 값이 전달이 되면 그 값은 컨텍스트라는 이름을 가진 인자가 되며 생략이 가능하다.
• jQuery(element) : jQuery의 인자로 Element Object가 들어간다.

jQuery Chain

jQuery의 메소드들은 반환값으로 자기 자신(Wrapper의 오브젝트, 메소드가 제어했던 대상)을 반환해야 한다는 규칙을 가지고 있다. 이를 이용하면 한번 선택한 대상에 대해서 연속적인 제어를 할 수 있다. 이를 Chain이라 한다.

Chain의 장점

• 코드가 간결해진다.
• 인간의 언어와 유사해서 자연스러운 과정과 일치한다.

jQuery Traversing

Traversing이란, Chain Context를 유지하면서 제어의 대상이 되는 Element를 변경하는 기법이다.

Traversing을 이용하게 되면 하나의 context에서 필요에 따라 제어하고자 하는 대상을 변경할 수 있기 때문에 계속해서 해당 chain context를 유지하면서 코딩 할 수 있게 됨으로 경제적이고 작업 흐름도 연속적으로 이어질 수 있다.

.end() : 마지막의 Traversing을 취소하는 메소드 ( 이전의 context로 돌아간다.)

jQuery의 Event

• 크로스브라우징의 문제를 해결해준다.
  브라우저마다 이벤트를 설치하는 api의 차이점으로 인해 어떤 브라우저인지 체크해야하던 불편함을 개선
• bind로 이벤트 핸들러를 설치하고 unbind로 제거한다.
• trigger로 이벤트 핸들러를 강제로 실행한다.
  마치 이벤트가 발생한 것 처럼 어떤 이벤트 핸들러를 호출할 수 있게 된다.
• click, ready와 같이 다양한 이벤트 헬퍼를 제공한다.
• live를 이용하면 현재 존재하지 않는 엘리먼트에 이벤트 핸들러를 설치할 수 있다.

jQuery Animation

• JavaScript와 CSS를 이용해서 HTML Element에 동적인 효과를 줄 수 있다.
• jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다.

출처 : velog.io/@surim014/jQuery-%EA%B8%B0%EB%B3%B8-%EC%A7%80%EC%8B%9D-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-v0k5wl6ck9

jQuery 기본 지식 정리하기

2. jQuery 기초 지식 정리 -  # 1. 태그 선택, 값 가져오고 변경하기 

1. 태그 선택하기 - $('selector')

const h1Elem1 = document.querySelector('h1');	// JavaScript로 태그 선택
const h1Elem2 = $('h1');						 // jQuery로 태그 선택

h1Elem1 === h1Elem2

 

jQuery에서는 $('selecto')로 선택자를 지정할 수 있다.

2. 태그 속성과 HTML 값을 확인하고 변경하기

attr() - 태그 속성의 값을 가져오고 변경하기

attr() 사용방법

$('selector').attr('태그의 속성 key명', '세팅할 value')

attr()를 이용해서 값 가져오기

$('div1').attr('style')

attr()를 이용해서 값 변경하기

$('div1').attr('style', 'color : red')

html(), text() - 태그 내부의 텍스트 값을 가져오고 변경하기

• .html() : 해당 태그 내부의 html 태그가 반영된 텍스트 값이며 html 영역의 html 값을 알기 위한 함수이다. 화면에 html이 적용된다.
• .text() : 해당 태그 내부의 텍스트 값이며 html 코드 자체를 화면에 출력한다.

val() - 입력 태그의 값을 가져오고 변경하기

jQuery의 .val()는 JavaScript의 .value와 역할이 비슷하다. 주로 select와 input의 값을 얻기 위해 사용된다.

val() 사용방법

$('selector').val('변경할 값');

val()를 이용해서 값 가져오기

let txt1 = document.getElementById('txt1').value;	  // JavaScript로 값 가져오기
let txt2 = $('#txt1').val();						   // jQuery로 값 가져오기 

 

val()를 이용해서 값 변경하기

txt1.value = 'text2';			// JavaScript로 값 변경하기
$('#txt1').val('text2');		 // jQuery로 값을 가져옴과 동시에 변경하기

 

출처 : velog.io/@surim014/jQuery-%EA%B8%B0%EC%B4%88-%EC%A7%80%EC%8B%9D-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-1-GET-SET

[jQuery] 기초 지식 정리하기 #1 - 태그 선택, 값 가져오고 변경하기

 

3. jQuery 기초 지식 정리 - # 2. 삽입 위치 / 선택자/ 스타일 제어 /Traversing / Each()

 

1. HTML 삽입하기

• before() : 지정한 태그 바로 직전에 태그가 삽입된다. ```const txt = <div><h1>삽입된 레이아웃</h1></div>; $('selector').before(txt);
• after() : 지정한 태그 바로 직후에 태그가 삽입된다. ```const txt = <div><h1>삽입된 레이아웃</h1></div>; $('selector').after(txt);
• prepend() : 지정한 태그의 자식 노드 중 제일 첫번째에 삽입된다. ```const txt = <div><h1>삽입된 레이아웃</h1></div>; $('selector').prepend(txt);
• append() : 지정한 태그의 자식 노드 중 제일 마지막에 삽입된다. ```const txt = <div><h1>삽입된 레이아웃</h1></div>; $('selector').append(txt);

2. Selector(선택자) 알아보기

• ID Selector : $('#xxx') ``` const id = $('#idText').val() ```
• Class Selector : $('.xxx') ```const class = $('.classText').val()
• Tag Property Selector : $('tag[prorperty key = property value]') ``` const name = $('input[name=nameText]').val() const radioCheck = $('input[name=checkedRadio]:checked').val() ```
• Index Selector : $('div:eq(0)') / $('div').eq(0) ```const eqRadio1 = $('input[name=checkedRadio]:eq(0)').val()
  const eqRadio2 = $('input[name=checkedRadio]').eq(1).val()

3. Style (CSS) 제어하기

• .css() : $('slector').css('스타일key', '적용하고자 하는 값') ``` $('div:eq(0)').css('color','red');$('div:eq(0)').css('border','1px solid black'); ```
• .attr() ```$('div:eq(1)').attr('style','color:red; border:1px solid black');
• .addClass() : $('slector').removeClass('클래스명'), 클래스 추가 ```$('div:eq(0)').addClass('sample1'); ```
• .removeClass() : $('slector').removeClass('클래스명'), 클래스 제거 ```$('div:eq(0)').removeClass('sample1');
• .hasClass() : $('slector').hasClass('클래스명'), 클래스 존재 여부 판단 ```$('div:eq(0)').hasClass('sample1');

4. 내가 추적하고자 하는 태그 알아내기 - Traversing

Traversing이란, 어떠한 특정 태그를 기준으로 내가 찾고자하는 태그들을 추적을하는 기능을 하는 함수이다.

• find() : 자식값들을 찾고자 할 경우 사용한다. ```const idTxt = $('table').find('#txt').val();
• parent() : 현재 지정된 selector에서 바로 상위의 태그를 찾는다. ```const txt = $('#txt').parent().val() ;
• prev() : 동일 레벨의 태그들의 직전의 태그를 찾는다. ```const txt = $('#txt').prev().val() ;
• next() : 동일 레벨의 태그들의 직후의 태그를 찾는다. ```const txt = $('#txt').next().val() ;

5. 반복문 알아보기 - each()

여러개의 동일한 selector일 경우, each()를 이용하여 반복문처럼 사용할 수 있다. 중간에 break를 하고 싶은 경우, return false를 주면 된다. (return 아님)

each() 사용방법

$('selector').each(function(index){
	$(this)
});

 

• index : Selector의 index 값
• $(this) : each문이 돌때마다 각각의 div영역을 가리킨다. ```$(this) === $('selector').eq(index) ```

each() 사용예시

$('div').each(function(index){
	// txt1 === txt2
	const txt1 = $('div').eq(index).find('input[type=text]').val();
	const txt2 = $(this).find('input[type=text]').val();
    
	const txtTag = `임시값${index}`
            $(this).find('input[type=text]').attr('value', txtTag);
 })

출처 : velog.io/@surim014/jQuery-%EA%B8%B0%EC%B4%88-%EC%A7%80%EC%8B%9D-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-2-%EC%82%BD%EC%9E%85%EC%9C%84%EC%B9%98-%EC%84%A0%ED%83%9D%EC%9E%90-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%A0%9C%EC%96%B4-Traversing-Each

[jQuery] 기초 지식 정리하기 #2 - 삽입위치/ 선택자/ 스타일 제어/ Traversing/ Each()

 

4. jQuery 기초 지식 정리 - #3 - 이벤트/ Ajax / 다양한 함수

 

1. 이벤트 이해하기

• click : 클릭 이벤트 ```('input[type=button]').click(function(){ console.log(('select').val(), $('input[type=text]').val());
  });
• dblclick : 더블클릭 이벤트 ```('input[type=button]').dblclick(function(){ console.log(('select').val(), $('input[type=text]').val());
  });
• keypress : 키보드 누르면 발생하는 이벤트 ```('input[type=text]').keypress(function(e){ if(e.keyCode === 13){ console.log(('select').val(), $('input[type=text]').val());
  }
  });

이벤트 사용 시 주의 사항

$('.addBtn').click(function(){ const tag = `<input type="button" class="alertBtn" value="add">`; $('.addLayer').append(tag); }); $('alertBtn).click(function(){ alert('click!'); });

위와 같이 이벤트를 지정한 후, 나중에 동적으로 생성된 태그에는 이벤트가 걸리지 않는다. 이 경우, on을 사용해서 해결할 수 있다.

• on : $(document).on('event', 'selector', function(){}); ``` $(document).on('click', '.alertBtn', function(){ alert('click!'); }

2. jQuery로 Ajax 이해하기

Ajax로 받을 수 있는 데이터 타입

• XML
• HTML
• JavaScript
• JSON

이외에도 다양한 데이터 타입을 받을 수 있다.

Ajax 사용 방법

$.ajax({
	url : '/list_ajax.jsp',
	type : 'GET',
	dataType : 'html',.
	success : function(data){
		$('table').html(data);
	}
});

• url : form action과 같은 역할
• type : form method와 같은 역할
• dataType : 데이터를 무슨 데이터 타입으로 받을건지 지정한다. form은 알아서 input tag들을 전송하지만 Ajax는 data 속성을 따로 전송해주어야 한다.
• success : 화면에서는 보이지 않지만 Ajax를 통해 이미 호출이 되고 로직을 실행하며 결과값을 가져오는데 success에서 data라는 매개변수가 데이터를 가져오게 된다.

HTML로 Ajax 사용하기

ajaxTest.html

 

<tr>
    <td width="30%">1</td>
    <td>데이터</td>
</tr>
<tr>
    <td width="30%">1</td>
    <td>데이터</td>
</tr>
<tr>
    <td width="30%">1</td>
    <td>데이터</td>
</tr>

index.html 코드 일부분이다.

 

$.ajax({
	url : './ajaxTest.html',
	type : 'GET',
	dataType : 'html',
	success : function(data){
		$('table').html(data);
	}
});

위의 코드는 ajax가 로드됨과 동시에 ajaxTest파일 안에 있던 소스 코드들이 table안에 삽입된다.

JSON으로 Ajax 사용하기

 

{
    "title" : "안녕하세요",
    "subject" : "반갑습니다.",
    "list" : [{
        "subject" : "제목1",
        "content" : "내용1"
    }, {
        "subject" : "제목2",
        "content" : "내용2"
    }, {
        "subject" : "제목3",
        "content" : "내용3"
    }]
}

 

index.html 코드 일부분이다.

 

$('input[type=button]').click(function(){
	$.ajax({
		url : './dummy.json',
		type : 'GET',
		dataType : 'json',
		success : function(data){
			const list = data.list;
			let txt;

            $.each(list, function(index, data){
            	//data === list[i]
                txt += `<tr>
                <td>${data.subject}</td>
                <td>${data.content}</td>
                </tr>`;
            });
            
            $('table').html(txt);
		}
	});
});

 

위의 코드는 버튼을 클릭하면 반복문을 돌며 table안에 기존에 만들어둔 json 내용이 차례대로 들어가게 된다.

 

for(let i = 0; i < list.length; i++){
	txt += `<tr>
	<td>${list[i].subject}</td>
	<td>${list[i].content}</td>
	</tr>`;
}

$('table').html(txt);

 

위의 내용은 JavaScript의 for문과 jQuery를 사용한 코드이다. 결과는 each()를 쓴 위와 같다.

HTML 방식과 JSON방식의 쓰임

• HTML 방식 : 웹만 기준으로 할 경우에 사용된다.
• JSON 방식 : 웹과 앱, 모바일 등을 고려하는 경우에 자주 사용되며 동일한 데이터를 웹에서만 쓸게 아니라 앱이나 기타 모바일 등 api형식으로 지원하기 위해 규격을 만들어 사용할때 사용하는 방식이다.

Ajax 이용 시 주의사항

Ajax는 같은 도메인 안에서만 Ajax콜이 가능하다.

• api : http://www.naver.com
• html : http://www.daum.net

위와같이 api와 사이트의 도메인 영역이 다른 경우, 크로스 브라우징 규약에 위배되어 지원을 하지 않는다.

해결 방법

1. jsonp 방식

다른 도메인에서 어떠한 데이터를 조회하고자 할 때 사용한다. 단, 다른 도메인쪽에서 jsonp 통신 방식에 맞춰서 json 데이터를 내려줄 때만 가능하다.

2. cors 방식

서버에서 설정을 해주어야만 접근이 가능하다. rest관련 get, post, put 등으로 값들을 전달 가능하다.

3. 태그를 보여주고 숨기는 함수들

• .show() : 레이아웃을 보여준다. ```$('div').show();
• .hide() : 레이아웃을 숨긴다. ```$('div').hide();
• .fadeIn() : 페이드인 애니메이션 효과와 함께 레이아웃을 보여준다. ```$('div').fadeIn();
• .fadeOut() : 페이드아웃 애니메이션 효과와 함께 레이아웃을 숨긴다. ```$('div').fadeOut();
• .slideDown() : 슬라이드 애니메이션 효과와 함께 레이아웃을 보여준다. ```$('div').slideDown({
  duration : 100;
  });위와 같이 시간대 등 옵션값을 key와 value로 변경 가능하다.
• .slideUp() : 슬라이드 애니메이션 효과와 함께 레이아웃을 숨긴다. ```$('div').slideUp();

4. trim() - 문자열 공백을 사라지게 만드는 함수

.trim()은 문자열의 양옆의 공백을 사라지게 만든다. (중간의 공백은 제거가 되지 않는다.)

let txt = $('input[type=text]').val(); txt = $.trim(txt); $('input[type=text]').val(txt);

5. 태그들을 지우는 함수

• empty() : 영역 비우기, 안에 있는 모든 값들이 사라진다.

  ``` $('div').empty(); === $('div').html(""); ```

  위의 예제에서는 div태그만 남고 div태그 안에 있는 태그들만 모두 사라진다.

• remove() : 레이어 삭제 함수, 특정 영역에 있는 모든 값들이 사라진다.

  ``` $('div').remove() ```

  위의 예제에서는 div까지 모두 사라진다.

6. index() - 인덱스값을 얻는 함수

.index()는 Selector에 index()를 걸고 그 매개변수로 this를 주게 될 경우, 인덱스값을 얻을 수 있다.

 

$('input[type=button]').click(function(){
	let idx = $('input[type=button]').index(this);
    
	$('.layer').hide();
	 $('.layer').eq(idx).show();

});

위의 코드는 각 버튼을 누르면 해당되는 index의 layer를 출력시킨다. 단, 다른 영역들은 닫히고 클릭된 영역만 보여준다.

출처 : velog.io/@surim014/jQuery-%EA%B8%B0%EC%B4%88-%EC%A7%80%EC%8B%9D-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-3-%EC%9D%B4%EB%B2%A4%ED%8A%B8-Ajax-%EB%8B%A4%EC%96%91%ED%95%9C-%ED%95%A8%EC%88%98

[jQuery] 기초 지식 정리하기 #3 - 이벤트/ Ajax/ 다양한 함수

 

5. jQuery DOM Ready 방식 vs 모듈 패턴 방식 

 

1. DOM Ready 기능을 이용하여 호출하는 경우

• DOM을 불러오기 전까지 이 함수를 호출할 수 없으며 DOM을 조작할 준비가 되면 실행하기 때문에 브라우저에서 최소 한 번 DOM 분석을 기다려야 한다.

jQuery DOM Ready의 사용

기본적으로 JavaSCript가 실행이 되기 위해서는 HTML, CSS 파싱을 중간에 멈추고 JavaScript 파싱을 먼저 한다. 그렇기 때문에 DOM Element를 조작할 경우, JavaScript 파일 위치에 따라 문제점이 발생하는 경우가 있다.

이를 대비하여 jQuery DOM Ready를 사용하게 되면 DOM의 로드가 끝난 뒤 JS가 실행이 되기 때문에 위와 같이 파일 위치에 오류가 나는 상황은 발생하지 않게 만들어주는 이점이 있다.

2. 인자로 '$'를 넣어 즉시 호출 함수를 실행할 경우

• DOM이 준비될 때까지 기다리지 않고 함수가 구문 분석이 되는 직후에 즉시 실행된다.
• 매개변수로 '′를전달함으로써로컬범위를제공하여′'변수를 찾는 처리 시간을 줄이고 변수가 코드 외부로 노출되지 않게 한다.

출처 : velog.io/@surim014/jQuery-DOM-Ready-%EB%B0%A9%EC%8B%9D-vs-%EB%AA%A8%EB%93%88-%ED%8C%A8%ED%84%B4-%EB%B0%A9%EC%8B%9D

[jQuery] DOM Ready 방식 vs 모듈 패턴 방식