1. jQuery는 경량의 오픈 소스 자바스크립트 라이브러리의 이름.
2. prototype이나 ExtJs, Dojo 등과 유사한 스크립트 라이브러리, 스크립트 프레임워크라고 보면 된다.
3. 리치 웹, Ajax등... 신(新) 라이브러리 라고 보며 세계적으로 가장 많이 사용되는 라이브러리로 자리를 잡고 있다.
4. 내용 확인 : http://www.rubyrailways.com/rails-rumble-observations-part-i-jquery-on-the-heels-of-prototype/
5. 참고 확인 : http://www.quarkruby.com/2007/11/6/why-i-moved-from-prototype-to-jquery.
“Why I moved from Prototype to jQuery” 구글링 >> 번역본 블로그 확인 가능.
>>> Microsoft가 JQuery의 유용성 인정 발표 관련
차기 Visual Studio에서는 jQuery를 MIT 라이선스(http://dev.jquery.com/browser/trunk/jquery/MIT-LICENSE.txt)인
상태포함 jQuery에 대한 인텔리센스도 제공할 것이며 ASP.NET AJAX에서도 긴밀하게 사용될 것.
jQuery의 위상, 사용율 증가에 따라, 차기 웹 애플리케이션의 개발 구도도 아마 ASP.NET MVC + jQuery의 조합 형태가
될것이다.
물론, WebForm 기반의 개발이 아예 사라질 것은 아니기에, 그러한 경우에는 ASP.NET이 기본적인 UI 골격을
렌더링하는 역할을 담당하면서 jQuery와 WCF(혹은 웹 서비스)로 연동되는 아키텍처도 고려.
Ajax가 일반화되고, jQuery가 많이 사용되면서 ASP.NET 서버 컨트롤의 필요성은 갈수록 줄어들고 있다.
Case 1. jQuery + ASP.NET MVC
Case 2. jQuery + ASP.NET WebForm(UI 렌더링) + WCF(혹은 웹 서비스)
jQuery, Default Selector
# 1 . jQuery란?
jQuery : 가볍고 빠르며, 간결한 오픈소스 스크립트 라이브러리
HTML 문서 트래버스, 이벤트 처리, 애니메이션, Ajax 상호 작용 등을 지원
>> 빠르고 견고한 리치 웹 애플리케이션 개발 지원(Rich 웹 UI를 개발).
# 2. jQuery의 기능적인 특징
A. 막강한 CSS 셀렉터
B. 크로스 브라우저 지원
C. 메서드 체인
D. Ajax 지원
E. 풍부한 플러그 인 지원
# 3. 개발 준비사항
jQuery 라이브러리 >> 모든 라이브러리를 반드시 다운로드, 준비.
Download URL >> http://jquery.com/
# 4. jQuery 셀렉터 : 기본
jQuery의 스페셜 리스트
>> HTML DOM의 자유로운 트래버스(순회 탐색) 가능. CSS 셀렉터를 사용 원하는 개체를 탐색.
=========== CSS Selector ===========
div p {
font-color:red;
}
#uid {
font-weight:bold;
background:yellow;
}
.colum {
padding:10px;
background:white;
}
====================================
" div p " CSS Selector : div 요소의 자식으로 존재하는 모든 p 요소들에 적용
" #uid " CSS Selector : uid라는 id 값을 가진 요소들에 적용
" .colum " CSS Selector : class 어트리뷰트 값으로 .colum을 가진 요소들에 적용.
# 5. jQuery에서 원하는 DOM 요소의 그룹을 찾기 위해
>> $(selector) 혹은 jQuery(selector)과 같은 표현식을 사용
div p : $("div p") or jQuery("div p")
#uid : $("#uid") or jQuery("#uid")
.colum : $(".colum") or jQuery(".colum")
각각의 표현식은 각 DOM 요소의 확장 개체인 jQuery 개체 집합을 반환.
DOM 요소 직접 반환이 아닌 래퍼(Wrapper)인 jQuery 개체로 반환.
직접 DOM 요소 제어시보다 편하고 쉽게 개체 제어의 장점이 있음.
EX) $("div p").hide()
>> div 요소 자식의 모든 p 태그를 숨기게 됨. hide()명령은 jQuery 개체가 지원하는 명령
jQuery Selector에 의해 반환되는 개체가 일반 DOM 개체라면 이러한 명령은 사용불가,
하지만 jQuery 개체 집합으로 반환되기에 사용할 수 있게 됨.
##### 모든 요소 선택시는 $ (" * ") 와 같은 표현을 사용할 수 있음. #####
# 6. 고급 CSS Selector 지원
※ 계층 셀렉터, ※ 일반 필터 셀렉터, ※ 어트리뷰트 필터 셀렉터
====================== 계층 셀렉터 ======================
p > a : p 바로 아래 자식인 a 요소(하이퍼링크)와 일치.
div + p : div 바로 다음에 나오는 형제 p 요소와 일치.
div ~ p : div 다음에 나오는 모든 형제 p 요소와 일치.
$("p a") : p 하위에 존재하는 모든 a 요소를 선택
$("p > a") : p 바로아래 자식의 a 요소만을 선택.
<p>
<span><a href="1.aspx">1.aspx</a></span>
<br />
<a href="2.aspx">2.aspx</a>
</p>
>> $("p a") : 1.aspx 링크와 2.aspx 링크 모두 선택.
>> $("p > a") : 2.aspx 링크만 선택.
div + p 와 div ~ p 의 경우 자식이 아니라 형제 요소와 연관이 있습니다.
<div>스키장 - 슬로프</div>
<p>하이원리조트</p>
<span>빅토리아</span>
<span>헤라</span>
<p>용평리조트</p>
<span>레인보우</span>
<span>레드</span>
<p>휘닉스파크</p>
<span>펭귄</span>
<span>호크</span>
$("div + p") 는 div 바로 다음에 나오는 형제 p 요소, 즉, "하이원리조트"를 선택하게 되고,
$("div ~ p") 는 div 요소 다음에 나오는 형제 중 모든 p 요소, 즉, "하이원리조트", "용평리조트", "휘닉스파크"과 일치됨.
또한, a[title] 나 a[href^="mailto:"] 와 같은 어트리뷰트 기반 필터링도 가능
특정 어트리뷰트가 존재하거나, 그 어트리뷰트 값이 특정 값으로 시작 혹은 끝나거나, 특정 값을 포함하거나 하는 부분까지
비교해서 선택할 수 있음.
====================== 어트리뷰트 필러 ======================
| a[title] | title 어트리뷰트를 갖는 HiperLink와 일치 |
| a[href^="mailto:"] | href 값이 mailto로 시작하는 HiperLink와 일치 |
| a[href$=".pdf"] | pdf 파일에 링크가 걸린 모든 HiperLink와 일치 |
| a[href*="tistory.com"] | tistory.com이라는 값이 포함되어 있는 모든 HiperLink와 일치 |
| input[type="text"] | text 형식의 입력 컨트롤과 일치 |
이러한 선택이 가능한 것은 시작부분(^) 혹은 끝부분($)을 가리키는 정규 표현식을 jQuery가 지원하기 때문입니다.
그러면, 우선 지금까지 알아본 셀렉터들, 가장 기본이 되는 이러한 셀렉터들을 한번 정리해보고 넘어가도록 하겠습니다.
# 7. jQuery가 지원하는 CSS 셀렉터들
| * | 모든 요소와 일치 |
| E1 | E1(태그명)인 모든 요소와 일치 |
| E1.class | E1(태그명) 요소의 클래스가 class와 동일한 요소와 일치 |
| E1.#id | E1(태그명) 요소의 id 어트리뷰트 값이 id와 동일한 요소와 일치 |
| E1 E2 | E1 요소의 자식인 모든 E2(태그명) 요소와 일치 |
| E1 > E2 | E1 요소 바로 아래 자식인 E2 요소와 일치 |
| E1 + E2 | E1 요소의 바로 다음에 나오는 형제요소 E2와 일치 |
| E1 ~ E2 | E1 요소의 다음에 나오는 모든 형제 E2와 일치 |
| E1[attr] | attr 어트리뷰트를 갖는 E1 요소와 일치 |
| E1[attr=val] | attr 어트리뷰트의 값이 val을 갖는 E1 요소와 일치 |
| E1[attr^=val] | attr 어트리뷰트의 값이 val 값으로 시작하는 E1 요소와 일치 |
| E1[attr$=val] | attr 어트리뷰트의 값이 val 값으로 끝나는 E1 요소와 일치 |
| E1[attr*=val] | attr 어트리뷰트의 값이 val 값을 포함하는 E1 요소와 일치 |
가상 디렉토리 하나 만든후, 다음과 같은 htm 파일을 하나 작성.
물론, 동일 폴더에 다운 받은 jQuery 자바스크립트 파일 이 있어야 함.
Default.htm
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(
function(){
$("#resort").css("border", "solid 1px silver");
$("a[href^='mailto:']").css("background", "lightblue");
$("input[type='button']").css("background", "yellow");
$("div ~ b").css("background", "#efefef");
$("div > b").css("border", "1px");
});
</script>
<style type="text/css">
* { font-size:12px; font-family:돋움 }
</style>
</head>
<body>
<div>
<span><a href="http://arch95.tistory.com">arch95의 티스토리 블로그</a></span>
<br />
<a href="mailto:arch95@naver.com">내 메일주소</a>
<p>
<input type="button" value="클릭~" />
<input type="checkbox" />
<input type="radio" />
</p>
<div id="resort">스키장 - 슬로프</div><br />
<b>하이원리조트</b>
<span>빅토리아</span>
<span>헤라</span><br />
<b>용평리조트</b>
<span>레인보우</span>
<span>레드</span><br />
<b>휘닉스파크</b>
<span>펭귄</span>
<span>호크</span><br />
</div>
</body>
</html>
################# 상단 코드 설명 #################
- jQuery Selector 를 사용 DOM 요소의 스타일을 변경.
>> $(document).ready();
jQuery가 제공하는 이벤트 메서드 중 하나.
문서의 DOM 요소들을 조작 가능한 시점이 되면 자동으로 호출이 되는 이벤트 메서드.
(window.onload 이벤트와 유사).
메서드의 인자로 델리게이트 함수명을 기입 또는 익명 함수 작성.
jQuery를 사용하는 경우에는 일반적으로 별도의 델리게이트 함수를 작성하지 않고, 익명함수를 그대로 작성.
익명 함수 내에 여러 jQuery Selector 들을 볼 수 가 있는데, Selector 로 원하는 DOM 요소를 찾고, css() 라고 하는 jQuery의 메서드 사용하여 스타일을 작성한다.
DOM 요소는 css() 라는 메서드는 가지고 있지 않지만, jQuery Selector 가 반환하는 개체는 jQuery 확장 개체이기에,
이 메서드 사용 용이한 스타일을 작성 할 수가 있다.
# 8. 스크립트 라이브러리
팀 개발 경우나 유사 프로젝트 반복시 간략하게 본인의 라이브러리 (function묶음 js 파일) 를 제작해 사용할 것이다.
그러면서도, 더 좋고 믿고 사용할만한 라이브러리를 찾는 경우가 있을 것이다.
>> 일반적으로 웹 프로젝트에서 공개, 또는 상용 스크립트 라이브러리를 사용하는 이유.
A. 크로스 브라우징 지원하는 자바스크립트 작성의 불편함.
B. 유사 기능의 이유로 반복적 스크립트 코드 작성.
C. 많고 다양한 자바스크립트로 사이트의 유지보수 불편.
>> 스크립트 라이브러리 사용시 개발및 관리가 용이하며 비용과 시간을 줄이고, 균일한 코드 작성이 가능하기 때문임.
'# JQuery' 카테고리의 다른 글
| 폼 유효성을 확인하는 방법 (0) | 2015.08.29 |
|---|---|
| 이벤트 처리 2 (0) | 2015.08.23 |
| 이벤트 처리 1 (0) | 2015.08.23 |
| 배열 관련 (0) | 2015.08.20 |