jQuery 정리

jQuery 정리

정리 방법

1. 다른 소스를 보고 이해할 수 있도록 기본적인 selector 사용법, ajax를 정리한다.

2. 잘 정리되어 있는 jQuery 함수를 정리한다.

3. 유용한 플러그인을 정리한다.

브자우저에서 동작하는 클라이언트 오픈소스 라이브러리

장점

- 크로스-브라우저를 지원한다.

많은 장점이 있겠지만 크로스-브라우저를 지원한다라는 이유 하나만으로도 당연히 사용해야 하겠다.

HTML 문서는 다양한 태그들로 구성되어 있고, 태그들은 class를 연결로 CSS를 사용한다. 이러한 HTML 문서를 좀 더 간편하게 분석하고, 변경하기 편하게 하는 툴정도로 이해하자.

물런 ajax 처럼 비동기 통신을 위한 기능도 포함하고있고, 더 많은 기능을 갖고 있지만 말이다.

간단한 예로

어떤 한 다양한 태그들로 구성된 HTML 문서내에 어떤 조건에서 처리해야 할 부분은 아래 링크의 주소 부분만 변경하고 싶다는 것이다.

javascript의 getElementById 나 getElementByTags로 찾아 href 속성을 변경해야 할 것이다.

jQuery는 이런 작업을 좀 더 쉽게 좀 더 편하게 처리 할 수 있는 함수들의 묶음 이라고 볼 수 있겠다.

$('#box a').attribute('href') = "http://www.naver.com";

.....

....

</div>

.....

...

HTML 문서 내에서 원하는 태그를 찾아 낼 수 있는 기능을 하는 것을 selector라로 말하는데 selector를 사용하는 기본적인 방법은 아래와 같다.

$('*') : 전체 선택자로 HTML 페이지 모든 문서 객체

$('태그 이름') : 태그 이름과 동일한 객체

$('#id 이름') : id 이름과 동일한 객체

$('.클래스 이름') : css의 클래스 이름과 동일한 객체

$('태그이름','태그이름',....) : 다중 태그 선택으로 주어진 태그 이름과 동일한 모든 객체

$('태그이름.클래스 이름') : 특정 태그 내에 클래스 이름과 동일한 객체

$('태그이름#id 이름') : 특정 태그 내에 id 이름과 동일한 객체

$('요소1 요소2') : 요소1의 자식 요소 가운데 태그 이름이 요소2인 모든 요소 선택

자식의 자식도 찾는다.

$('요소1 > 요소2') : 요소1의 자식 요소 가운데 다음에 위치하는 모든 요소2 선택

자식만 찾는다.

요소라는 뜻이 책에는 좀 모호하게 표현되어 있는데 태그가 될 수 도 있고 태그에 있는 속성이 될 수 도 있다.

예를 들자면

$('ol>li') 라고 selector라고 했다면 태그가 되겠고

$('input[type]') 라고 selector 했다면 input tag 내의 type 속성이 되겠다.

정리해보니 요소라는것도 html tag라고 생각하면 되겠다.

태그의 속성에 접근할 때는 []를 사용한다.

요소[속성] : []안에 주어진 속성을 포함한 모든 요소를 선택

요소[속성=값] : 속성의 값이 주어진 값과 동일한 모든 요스를 선택

요소[속성*=값] : 속성의 값이 주어진 값을 포함하는 모든 요소를 선택

요소[속성^=값] : 속성의 값이 주어진 값으로 시작하는 모든 요소를 선택

요소[속성$=값] : 속성의 값이 주어진 값으로 끝나는 모든 요소를 선택

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Test</title>
<script type="text/javascript" src="jQuery-2.1.4.min.js"></script>
<style>
.input{boarder:red double 5px; font-size:25px; color:blue}
</style>
<script>
$(document).ready(function() {
	//1. 속성 type을 찾아서 바탕색을 pink로 변경
	$('input[type]').css('backgroundColor','Pink');
	
	// 2. 속성 type 중 password츨 찾아서 글자 생상을 red, 크기 30px로 변경
	$('input[type=password]').css({'color':'red', 'fontSize':'30px'});
	
	// 3. 2번을 다음과 같은 메소드 체인 방식으로 변경
	$('input[type=password]').css('color','Red').css('fontSize','30px');
	
	// 4. vale값이 홍이 인 값을 찾아서 클래스를 input으로 변경
	$('input[value=홍이]').addClass("input");
	
	// 5. select 태그의 하위 option의 value 속송의 값이 '회'로 시작하는 요소를 찾아서
	//    글자색을 blue로 변경
	$('select option[value^=회]').css('color','Blue');
	
	// 6. select 태그의 하위 option의 value 속성의 값이 '사'로 끝나는 요소를 
	//    찾아서 글자 색상을 green으로 변경
	$('select option[value$=사]').css('color','Green');
});
</script>
</head>

<h1>속성 selector</h1>
<form>
이름 <input type="text" name="name" value="홍이"><p/>
ID <input type="text" name="id"><p/>
비번 <input type="password" ><p/>
취미 :
<input type="checkbox" name="hobby" value="등산">등산
<input type="checkbox" name="hobby" value="낚시">낚시
<input type="checkbox" name="hobby" value="수영">수영
<p/>
<select name="job">
	<option value="회사원">회사원</option>
	<option value="개발자">개발자</option>
	<option value="전문직">전문직</option>
</select>
</form>

요소:odd : 요소중 홀수 번째에 위치한 요소 선택

요소:even : 요수종 짝수 번째에 위치한 요소 선택

요소:first : 요소중 첫번째에 위치한 요소 선택

요소:last : 요소중 마지막 번째에 위치한 요소 선택

요소:checked : 요소중 체크된 요소 선택(radio, checkbox checked)

요소:slected : 요소중 선택된 요소 선택(select 박스의 option selected)

요소:disabled : 요소중 비활성화된 입력 양식요소 선택

요소:enabled : 요소중 활성화된 입력 양식 요소 선택

요소:focus : 요소중 커서가 놓여진 입력 양식 요소 선택

요소:button : 요소중 button 요소 선택

요소:password

요소:checkbox

요소:radio

요소:text

요소:reset : 요소 중 reset인 요소 선택

요소:submit

요소:image

요소:file

요소:eq(n) : 요소중 n번째 위치한 요소 선택

요소:not(선택자) : 요소중 선택자와 일치하지 않는 요소 선택

요소:lt(n) : 요소중 n번째 미만에 위치한 요소 선택

요소:gt(n) : 요소중 n번째 초과에 위치한 요소 선택

요소:has(선택자) : 요소중 선택자를 가지고 있는 요소 선택

요소:nth-child(숫자 n) : 요소중 숫자의 배수에 위치한 요소 선택

nth-child(3n) : 0,3,6,9.....

요소:nth-child(숫자 n+1) : 요소중 숫자의 배수 +1dp 위치한 요소 선택

nth-child(3n+1) : 1,4,7.10.....

$('td:nth-child(2n)); : 테이블의 두번째 모드 td, 만약 테이블 header를 <th>요솔 해놓으면 header의 th는 선택되지 않는다.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery Test</title>
<script type="text/javascript" src="jQuery-2.1.4.min.js"></script>
<style>
.input{boarder:red double 5px; font-size:25px; color:blue}
</style>
<script>
$(document).ready(function(){
	// 1. tbl01이라 id의 tr요소의 홀수행 찾아서 배경색을 gray로 변경
	$('#tbl01 tr:odd').css('backgroundColor','gray');
	
	// 2. tbl02라는 클래스의 tr요소의 짝수행을 찾아서 배경색을 green으로 변경
	// class는 반드시 css를 연결해야 한다고 생각했지만 css에 없는 거라도 상관없다.
	$('.tbl02 tr:even').css('backgroundColor','green');
	
	// 3. 첫번째 행 background, fontSize 설정
	// 'tr:first' 이렇게 하면 두개의 테이블의 tr을 전부 합한걸로 판단 첫번째 tr만 적용된다.
	$('tr:first').css({'backgroundColor':'pink','fontSize':'20px'});
	
	// 4. tr의 5번째 찾기 0부터 시작한다.
	$('tr:eq(5)').css('color','red');
	
	// 5. tr의 0을 제외하고 요소찾기, 즉 0을 초과한 요소 찾기
	$('.tbl02 tr:gt(0)').css('backgroundColor','orange');
	
	// 6. tr으 0을 초과한 요소가 아닌것 즉 0인것
	$('.tbl02 tr:not(tr:gt(0))').css('backgroundColor','white');
});

</script>
</head>

<h1>selector Filter 적용예제</h1>
<table id="tbl01">
	<tr><th>이름</th><th>나이</th><th>주소</th>	</tr>
	<tr><td>홍이2</td><td>4</td><td>서울</td></tr>
	<tr><td>홍이3</td><td>4</td><td>서울</td></tr>
	<tr><td>홍이4</td><td>4</td><td>서울</td></tr>
	<tr><td>홍이5</td><td>4</td><td>서울</td></tr>
	<tr><td>홍이6</td><td>4</td><td>서울</td></tr>
	<tr><td>홍이7</td><td>4</td><td>서울</td></tr>
	<tr><td>홍이8</td><td>4</td><td>서울</td></tr>
	<tr><td>홍이9</td><td>4</td><td>서울</td></tr>
	<tr><td>홍이10</td><td>4</td><td>서울</td></tr>
</table>

참고)

$('selector).html() :

get : selector 태그내 존재하는 모든 자식자식을 통째로 읽어올때

set : 태그 동적 추가할 때 주로 사용

.text() :

get : selector 태그내 존재하는 자식태그들 중에 html태그는 모두 제외한 채 문자열만 출력

set : html 태그까지 모두 문자로 인식시켜 주는 함수

$('selector').val() : input 태그에 정의된 value속성의 값을 get하거나 set할 때 사용

jQuery Event

$('selector').이벤트종류(function(){ 기능구현 })

$('selector').bind('이벤트종류', function() { 기능 구현 })

$('selector').on('이벤트종류', function() { 기능 구현 })

윈도우 이벤트 종류

ready : DOM 엘리멘트가 모두 로드 되었을 때 $(document).ready(function() { })

load : 모든 객체가 로드 되었을 때 이미지나, 음악 파일까지 로드가 끝났을 때

$(window).load(function() { })

resize : 윈도우 창의 크기가 변경되었을 때

scroll : 윈도우 창의 스크롤이 움직였을 때

unload : 문서 객체를 닫을 때 발생

입력 양식 이벤트 종류

submit : submit 버튼이 눌렸을 때

reset : reset 버튼이 눌렸을 때

change : 입력 양식의 내용을 변경할 때 (주로 select 박스)

focus : 입력양식에 커서를 놓았을 때

blur : 입력양식이 커서를 잃었을 때

check 박스 전체선택

if (this.checked) {

$(":checkbox").prop('checked', true);

} else {

$(':checkbox').prop('checked', false);

}

trigger 이벤트 : 이벤트를 강제로 발생시킨다.

$('selector').trigger('이벤트종류');

$('selector').trigger('이벤트종류', '전달할 파라미터');

jQuery Collection

$.each(object , function(index, element){ }) // element.url, element.name

$('selector').each(function(index, item){ }) // $(this).text()

Dom 요소의 생성, 삽입, 삭제

삽입

text() : 일치하는 요소의 집합에 있는 문서 내부의 글자에 관련된 내용을 가져오거나 설정 , 모든 문서 객체의 글자를 가져옴.

html(): 일치하는 요소의 집합에 있는 문서 내부의 HTML에 관련된 내용을 가져오거나 설정, 모든 문서 객체중 첫번째 문서 객체 하나만 가져옴.

<h3>임의요소</h3>에 <img> 태그를 추가함에 있어서

- 태그 안으로

<h3><img>임의요소</h3> : $('h3').prepend(img), $(img).prependTo(요소)

<h3>임의요소<img></h3> : $('h3').append(img), $(img).appendTo(요소)

- 태그 밖으로

<img><h3>임의요소</h3> : $('h3').before(img), $(img).insertBefore('h3')

<h3>임의요소</h3><img> : $('h3').after(img), $(img).insertAfter('h3')

삭제

remove() : Dom에서 일치하는 요소의 객체를 삭제

empty() : Dom에서 일치하는 요소의 모든 자식 노드 제거

생성

$() : 선택자로 뿐만 아니라 문서 객체를 생성 할 때도 쓰인다.

$("<img src='img/xx.gif'>")

Dom 요소의 속성 추가 및 삭제

attr('속성이름','값)

attr({'속성이름':'값', '속성이름':'값'})

removeAttr('속성이름','값')

Dom 요소의 style 추가 및 삭제

addClass('class 이름')

removeClass('class 이름');

toggleClass('class 이름')

toggleClass('class 이름', switch) : switch는 조건식 ex) count%2 == 0

효과(Effect)

jQuery 효과는 간단히 정리하기로 한다.

Basic, Fading, Sliding , 사용자정의 효과 이렇게 존재한다.

Basic 효과 : 어떤 요소를 표시하거나 숨기는 효과를 주는것이다.

.hide()

.show()

.toggle()

공통 파라미터

duration : 효과를 진행할 속도(밀리초, slow, normal, fast)

callbak : 효과를 완료한 후 실행할 함수

easing : 애니메이션의 easing 속성(linear, swing)

.hide(duration)

.hide(duration,);

.hide(duration, callback);

.hide(duration, easing, callback);

Fading 효과

요소의 불투명도를 조절해주는 것으로, 요소를 선명하게 보이게 하거나 흐리게 하여 사라지게 하는 효과를 가지고 있다.

예전에 Flex로 이와 유사한걸 많이 만든적이 있다. Fading 효과 자체는 결과적으로는 Basic 효과의 숨기고 보이는 거에 좀 이쁘게 효과를 주는걸로만 이해해서 많이들 사용하지 않는데 의외로 사용할 곳이 많다. Flex 개발시에는 주로 테이블에 허용치 이상의 값이 들어오면 값이 있는 해당 tr을 깜빡이게 해준다거나 그와 유사한 예에 많이 사용되었다.

이치는 간단한데 허용치가 넘는 td를 검색해서 해당 td의 tr을 깜빡이게 하는 것이다.

깜빡이게끔 보이게 하는게 핵심인데 이건 더 간단하다. 보였다. 감췄다를 짧은 시간에 반복하면 된다. 물런 Fading효과 뿐만 아니라 Basic효과도 너무 남발하면 브라우저 속도에 영향을 많이 미친다. Flex로 구현할 때도 항상 이점에 유의하며서 개발했다.

아래 소스에 잠깐 구현되어 있지만 대략 10번정도 깜빡이고 멈추게끔 처리되었다.

.fadeToggle(), facdOut()은 해당 영역을 없애버리는 것이다.

fadeTo()는 해당 영역은 존재한다.

<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	button { margin : 10px;}
	div {
		clolor:blue;
		font-weight : bold;
	}
	span {
		color : red;
	}
	
	.box{
		width: 200px;
		height: 200px;
		border: 3px solid Red;
		background-color: Pink;
	}
</style>

</head>

<a href="#" id="fadeIn">fadeIn</a>
<a href="#" id="fadeOut">fadeOut</a>
<a href="#" id="fadeToggle">fadeToggle</a>
<a href="#" id="etc">깜빡이게</a>
<hr/>
<h2>Have a Nice Good Day!</h2>
<h3>난 어디에 놓일까?</h3>
<div class="box"></div>

Sliding 효과

Sliding 효과는 Flex로 작업할 때는 레프트 메뉴 말고는 별로 사용한 적이 없는것 같다.

모든 효과가 마찮가지지만 특히나 Sliding효과는 움직이는게 통상커서 메뉴 같이

어설프게 적용하면 기껏 만들어 놓은 프로그램을 상대방에게 어설퍼 보이게 할 수도 있으니 꼭 사용할 만한지 고민하고 적용해야한다.

.slideDown() : 슬라이딩 효과를 나타나게함.

.slideUp(): 슬라이딩 효과로 숨기게함

.slideToggle() : 슬라이딩 토글링

Ajax(Asynchronous Javascrip and XML) 비동기 통신

동기식 통신은 전달하고자 하는 내용을 헤데 값에 담아 웹서버로 전달해버리므로 결과를 받게되면 동일 페이지에서 받았다 치더라도 화면이 깜빡일 수 밖에 없는 구조이다.

비동기 통신은 헤더값에 내용을 담아 전달하는게 아니고 데이터만 전달하고 다시 돌려 받으므로써 화면 깜박임이 없다. 화면내 수정이 불필요한 곳까지 html을 다시 그리는 작업이 없어 좀 더 빠른 화면 구성을 할 수 있게된다.

정리방식

Ajax를 사용하는 방법을 구글링을 해보면 큰틀은 비슷해 보이지만 어떤 이유에선지 자잘한 부분을이 상당히 틀려서 얼핏보면 Ajax통신하는 방법이 이렇게나 많나 하는 생각이든다. 첫번째로 요즘은 많은 싸이트들이 RESTful을 지원하고있다. 하지만 통상적으로 사용하고 있던 데이터 전달 방식인 get, post 만으로는 RESTful을 완벽하게 지원할 수 없다. 이유는 일련의 CRUD작업을 해야 하는데 RESTful의 특징인 url 만으로 이게 삭제를 위한 url인지 수정을 위한 url인지 알 수 없다. 왜냐면 두 url은 똑 같기 때문이다. 전송방식을 달리해서 삭제와 수정을 판가름 하기 때문이다.

이를 위해서 get, post외 몇가지를 전송방식을 더 지원하는데 이 때 get, post를 override해서 지원하게 된다. put, delete 등

REST 참고 url

조대협 url : http://bcho.tistory.com/953

자주 들르는 싸이트고 매번 들릴때 마다 내용의 깊이에 다시금 놀랜다.

스포카 기술블로그 : https://spoqa.github.io/2012/02/27/rest-introduction.html

흔치 않는게도 회사에서 기술블로그를 운영중이다.

RESTful을 처음 접하고 구글링을 통해서 어느 정도 익힌 후 어디엔가 적용할라 치면 딱 막히는 부분이 있다. 도대체 입력화면, 수정화면은 RESTful을 어떻게 적용시키는가? 라는 것이다. 내가 검색한 거의 모든 문서는 이부분이 빠져있었다.

스포카에서 이글을 찾았는데 입력폼이나 수정폼 그자체도 정보로 취급해야 한다는 내용입니다.

아래 url 형태를 보자

1. http://localhost:8080/members

2. http://localhost:8080/members/member

3. http://localhost:8080/members/3

4. http://localhost:8080/members/new

5. http://localhost:8080/members/member/edit

1. http://localhost:8080/members

GET 방식 : 리스트를 출력

POST 방식 : 저장

PUT 방식 : 많이 사용하진 않겠지만 전체삭제(전체수정을 말이 안되니)

2. http://localhost:8080/members/member

GET : 멤버 상세 페이지

PATCH : 멤버 수정(DB작업)

DELETE : 멤버 삭제(DB작업)

3. http://localhost:8080/members/3

GET : 페이징 3페이지

4. http://localhost:8080/members/new

GET : 입력화면

5. http://localhost:8080/members/member/edit

GET : 수정화면

6. 만약 리스트에 검색 조건이 붙어야 한다면??

RESTful에만 집중하다보면 기본적인 사항을 연결 짓지 못하고 RESTful방식으로 어떻게 해야하나? 이런 아이러니한 상태에 빠지기도 한다. 내가 그랬다. T

http://localhost:8080/members?searchType=value&search=value

RESTful 자체가 표준이 없기 때문에 정석이냐고 묻는건 별 의미가 없을 듯 싶다. 조대협에서 피해야하는 RESTFul 세가지가 정리 되어있고 스포카 기술 블로그에는 입력화면과 수정화면을 RESTful 방식으로 어떻게 하는지에 관해서 기술 되어있다.

Ajax를 정리하다가 REST 얘기가 길어졌다. jQuery를 잘알고 정리하는게 아니라 그렇다. 이게 궁금하면 이걸 찾아보고 저게 궁금하면 저걸 찾다보고 하다 보니 뒤죽박죽 이고, 어느 정도 충족되면 대충 적어봐서 그렇다. 누군가 이글을 접해도 별 도움을 얻지는 못 할거라 생각한다. 하지만 참고한 url은 들어가 정독 하기를 권한다. 여기에 있는 모든글이 그런류다. 단지 참고하고자 한다면 여기서 정리방법에 대충 어디선까지 스터디 할려고 하는지가 대충 적혀있다. 그리고, 고민했던 내용도 간간히 있다. 프로그램 하면서 느낀점은 내가 밟은똥은 이미 누군가는 먼저 밟았던똥이고 나중에 누군가는 밟을 똥이라는 것이다. 프로그램은 밟은똥을 빠르게 깨끗이 털어내는 작업이라고 생각한다. 다음에 또 밟겠지만 더 빨리 털어내고.. 더는 안밟게 미연에 소스를 정제하고 또 정제하는 작업이라 생각된다. 능력 좋은 개발자는 어디에 똥이 있는지 훤히 알고있고, 자신이 모르는 분야임에도 불구하고 묻은똥을 어떻게 닦아 내야하는지를 아는 사람이다. 혹시 그런 사람을 만난다면 내게 묻은똥 도움 얻어 해결할 생각도 중요하겠지만 더 길게 보면 진솔하게 차한잔 하는게 낫다.

Ajax API 정리

Global Ajax Event Handler API

.ajaxComplate() : Ajax에 관련 요청이 완료(성공,실패)되면 호출되는 콜백함수

.ajaxError() : Ajax에 관련 요청이 실패되면 실행되는 콜백함수

.ajaxSend() : Ajax에 관련 요청을 보내기 전에 항상 호출되는 콜백함수

.ajaxStart() : Ajax에 관련 요청이 시작될 때 호출되는 콜백함수

.ajaxStop() : Ajax에 관련 요청에 대한 응답을 받은 직후 호출되는 콜백함수

.ajaxSuccess() : Ajax에 관련 요청이 성공하면 호출되는 콜백함수

Handler Functions API

jQuery.param() : 배열 또는 객체를 Ajax 요처에 사용할 수 있도록 직렬화 함.

.serialize() : 폼 요소에 관련된 데이터를 query string인 name=value&name=value 형태로 변환한다.

.serializeArray() : 폼 요소에 관련된 데이터를 Array형식인 [name=value, name=value] 형태로 변환한다.

Low-Level Interface API

jQuery.ajax() : 서버 요청 정보를 Map(key, value) 형태로 만들어 전송함.

jQuery.ajaxPrefilter() : Ajax 요청을 보내기 전이나 $.ajax() 함수에 의해 호출되기 전에 Ajax 옵션을 수정하거나 조작함

jQuery.ajaxSetup() : 한 페이지에 동일하게 반복되는 코드를 global로 설정함.

jQuery.ajaxTransport() : 데이터의 실제 전송을 처리하는 객체를 만듦.

Shorthand Method API

jQuery.get() : GET 방식으로 서버와 통신함.

jQuery.getJSON() : 서버에 GET방식으로 요청하고 응답은 JSON 형식으로 받음.

jQuery.getScript() : 서버에 GET방식으로 요청하고 응답은 javascript로 받음.

jQuery.post() : POST 방식으로 서버와 통신함.

.load() : 인수로 입력된 파일의 결과를 현재 element에 삽입.

저작자표시

'javascript' 카테고리의 다른 글

날짜 유효성 체크 (0)	2017.02.01
Aptana 설치 (0)	2016.09.02
javascript 정리 (0)	2016.08.31
JSON.parse, JSON.stringify (0)	2016.08.17
서버 Dara Call (0)	2016.08.17

홍이야! 순이야!

jQuery 정리

'javascript' 카테고리의 다른 글

티스토리툴바

jQuery 정리

'javascript' 카테고리의 다른 글

'javascript' Related Articles

티스토리툴바