개발자 끄적끄적
jQuery 본문
jquery + mybatis
jquery > 1) selector(선택자), 2)ajax( $.post(), $.get, $load() )
mybatis > sql문장 -> xml 코드에 삽입, sql과 관련된 문장의 90%가 사라진다
<jQuery 다운>
www.jquery.com>download>
Download the uncompressed, development jQuery 3.6.0 -(1)
Download the compressed, production jQuery 3.6.0 -(2)
*(1), (2)는 용량차이이며, '클릭'이 다운하는게X
>버튼 우클릭>다른이름으로 링크 저장>Using jQuery with a CDN에서
https://code.jquery.com 클릭> jQuery 3.x의 minified>복사
webapp>jquery 폴더 생성>webapp>jquery>selector.jsp
<CND없이 라이브러리를 offline에서 사용하는 방법>
- 라이브러리 다운로드
- webapp/lib 폴더를 생성한 후 복사
(※주의※ : webapp/WEB-INF/lib 폴더가 아님)
webapp/lib 폴더를 생성>lib폴더안에 jquery-3.6.0.min.js복사>
복사한 라이브러리 파일명은 단순하게 변경해도 무방>
<script src='라이브러리명'></script>
<jQuery의 특징>
- CSS셀렉터
- html의 구조를 명료하고 읽기 쉬운 형태로 사용 및 표현 가능
- 크로스 브라우저
- 브라우저별로 처리 방법이 다른 이벤트 처리나 함수들의 문장을 하나의
표현으로 사용 가능
<문장 구조>
- 따옴표는 작은따옴표, 큰따옴표를 구분X
- '요소명>요소명'과 같이 특정 지역을 한정하여 Selector를 사용하는 것이
속도 향상에 도움이 된다
<jQuery메서드>
- jQuery()메서드는 jQuery라이브러리의 근간을 이루는 메서드이다
- $() 이란 별칭으로 사용되고 있다
• $(selector[, context])
• $(element)
• $(elementArray)
• $(object)
• $(html)
-> 특정 DOM 엘리먼트에 해당하는 새로운 jQuery 객체를 생성한다
<작성 방법> - 1,2,3모두 같은 의미
방법 1
• jQuery('div').hide();
• jQuery('div').text('hi...');
방법 2
• jQuery('div').hide().text('hi...');
방법 3
• jQuery('div')
.hide()
.text('hi...'):
<접근 방법>
- HTML DOM을 통한 접근
- DOM 계층구조를 통한 접근
- 속성(id 또는 class, 기타)을 통한 접근
<jQuery API구조>
• jQuery CORE
• Selectors
• Attributes
• Traversing
• Manipulation
• CSS
• Events
• Effects
• Ajax
-> $.get(), $.post(), $.load()/ajax(비동기 방식으로 서버와 통신하는 기술)
<DOM이란?>
- DOM(Document Object Model)의 약자로 HTML의 구조를 트리 구조로
조직하여 클라이언트 영역에서 재조합 기능을 제공하고,
사용자와 상호 작용을 통해 트리 구조 내에서 개별 객체에 접근이
가능하도록 만든 구조
<Selector>
<Selector란?>
- jQuery를 사용하려면 대상이 필요한데, 그 대상을 찾는 기능을 Selector라고 한다
<Selector의 종류>
- CSS Selector
- Attribute Selector
- Form Selector
<사용방법>
• $(selector) | jQuery(selector)
• jQuery()보다 표현상 간단한 $()를 더 많이 사용
• selector : 태그 또는 id, class 명을 뜻한다
<CSS 셀렉터의 종류>
$(this)
• 자기 자신을 나타냄
$("*")
• 모든 엘리먼트를 선택한다
• $('*') : 모든 엘리먼트 선택
• $('p>*') : p 엘리먼트안의 모든 자식 엘리먼트를 선택한다
$("#id")
• $('#center_div') : id 가 center_div 인 엘리먼트를 선택한다
$(".class name")
• $('.subject') : class 가 subject 인 모든 엘리먼트를 선택한다
$("element name")
• $('div') : 문서안의 모든 div 엘리먼트를 선택한다
• $('font') : 문서안의 모든 font 엘리먼트를 선택한다
$("element#id")
• $('p#body') : p 엘리먼트중에 아이디가 body 인 엘리먼트를 선택한다
$("element.class")
• $('p.body') : p 엘리먼트중에 클래스명이 body 인 엘리먼트를 선택한다
$("s1, s2, s3, ...")
• $('div, p, span') : 엘리먼트 종류중 div, p, span 인 모든 엘리먼트를 선택한다
$('#container element')
• $('#center div') : 아이디가 center 인 엘리먼트안에 있는
자식 엘리먼트 중 div 인 엘리먼트를 선택한다
$('.container element')
• $('.center div') : 클래스명이 center 인 엘리먼트안에 있는
자식 엘리먼트 중 div 인 엘리먼트를 선택한다
<HTML DOM을 이용한 접근>
- $("태그명") 처럼 사용하여 HTML요소를 직접 접근한다
[기본 예]
• jQuery 라이브러리는 /lib/폴더에 설치되어 있다고 가정
• 파일의 유형은 html 타입이여도 상관 없음
<속성값을 사용한 Selector>
• 요소안에 정의된 특정 속성값을 사용하여 요소를 선택할 수 있다.
• Selector 가 생략되면 모든 엘리먼트가 선택 대상이 된다.
$(Selector[attr])
• attr 속성을 갖는 엘리먼트를 선택한다.
• $('[rel]') : rel 속성을 갖는 모든 엘리먼트를 선택한다.
• $('[.myclass[style]') : 클래스명이 myclass 이고 style 속성이 있는 모든 엘리먼트를 선택한다.
$(Selector[attr='value'])
• attr 의 값이 value 인 엘리먼트(요소)를 선택한다.
• $('[name=myname]') : name 속성의 값이 myname 인 모든 엘리먼트를 선택한다.
$(Selector[attr != 'value'])
• att 속성이 없거나 attr 의 값이 value 가 아닌 요소를 선택한다.
• $('a[rel !=jobtc]') : a 엘리먼트중에 rel 속성이 없거나 rel 값이 jobtc 가 아닌 모든 a 엘리먼트를
선택한다.
• $("input[name != 'myname']") : input 엘리먼트중에 name 속성이 없거나 name 값이 myname 이
아닌 모든 input 엘리먼트를 선택한다.
$(Selector[attr ^='value'])
• attr 의 값이 value 로 시작하는 요소
• $("id^='hello'") : id 속성값이 hello 로 시작하는 모든 엘리먼트를 선택한다.
$(Selector[attr $= 'value'])
• attr 의 값이 value 로 끝나는 요소
• $("input[name $='kr']") : input 엘리먼트의 name 속성값이 kr 로 끝나는 모든 엘리먼트를 선택한다.
$(Selector[attr *= 'value'])
• attr 의 값에 value 를 포함하는 요소
• $("[style *='background']") : style 속성에 background 속성값이 포함된 모든 엘리먼트를 선택한다.
• $("a[href *='.com']") : a 엘리먼트들에서 href 속성 값에 .com 값이 포함된 모든 엘리먼트를
선택한다.
$(Selector[attr ~= 'value'])
• attr 의 값에 공백과 value 를 포함하는 요소. 검색될 value 값은 공백으로 분리된 단어이여야 된다.
• $("a[rel ~='jobtc']") : a 엘리먼트들 중에 rel 속성값이 jobtc 단어가 포함된 모든 엘리먼트를
선택한다.
$(Selector[attr |= 'value'])
• attr 의 값이 value 이거나 value- 로 시작되는 요소
• 이 셀렉터는 다국어 지원을 위해 CSS 규격에 도입됨.
• $("div[id |= 'bar']") : div 엘리먼트들 중에 id 속성이 bar 이거나 bar- 로 시작하는 엘리먼트를
선택한다.
<DOM 구조를 이용한 Selector>
$('parent > child')
• 부모 요소 바로 아래 자식인(1 단계까지만) 요소만을 반환함.
$('ancerstor descendant')
• 조상/후손의 관계. 단계와 상관없이 모든 후손 요소을 반환함.
$('prev + next')
• prev 다음에 next 요소가 오는 동일한 패턴의 항목을 반환함.
$('prev~siblings')
• prev 다음 오는 요소중 siblings 와 동일한 형제 요소를 모두 반환함.
<Filter>
- 선택된 요소 중 필요한 요소만을 걸러내는 방법
- 접두문자 ":" 붙여서 사용한다
- 필터와 필터를 연결하여 사용할 수 있다
<필터의 종류>
- 기본필터
- 폼필터
- 자식필터
- traverse
<기본필터>
animated
• 애니메이션이 동작중인 요소들과 일치하는 요소들을 반환
eq(index)
• index 에 해당하는 요소 반환. (zero base)
even
• 짝수 요소들만 반환(0 base)
odd
• 홀수 요소들만 반환
first
• 첫번째 요소만 반환
last
• 마지막 요소만 반환
gt(index)
• index 보다 큰 index 에 해당하는 요소들만 반환
lt(index)
• index 보다 작은 index 에 해당하는 요소들을 반환
header
• 모든 헤더(h1~h6)들을 반환
not(selector)
• selector 요소가 아닌 요소들만 반환
focus
• 현재 포커스가 위치한 요소를 반환(1.6 이상에서 지원)
parent
• 텍스트 노드를 비롯해 다른 엘리먼트의 부모에 해당하는 엘리먼트 선택
empty
• 자식 노드가 없는 엘리먼트 선택
contains(text)
• 지정된 text 를 포함하는 엘리먼트 선택
has(E)
• E 에 해당하는 엘리먼트가 포함된 엘리먼트를 선택
visible
• 현재 보이는 모든 엘리먼트를 선택
• jquery 내부에서는 넓이와 높이를 검사해서 엘리먼트가 보이는지를 판단함.
• 감춤 상태인 경우
◦ display = 'none'
◦ 폼 엘리먼트 속성이 type='hidden'인 경우
◦ 높이와 넓이가 0 인 경우
◦ 부모 엘리먼트가 감추인 경우 등
hidden
• 현재 감추어진 모든 엘리먼트를 선택
<폼필터>
- 폼 요소를 선택할 때 사용되는 필터
- 기본 필터 사용방법과 동일
:button
:checkbox
:checked
:disalbed
:enabled
:file
:focus
:image
:input
:password
:radio
:reset
:selected
:submit
:text
:hidden
<자식 필터>
- 대부분의 자식 필터는 지정된 자식 요소들을 모두 반환한다
- 헤더태그(h1~h6)을 사용한 이후에는 <div/>등을 사용하여
영역을 구분해야 한다
first-child
• 엘리먼트에서 첫번째 자식에 해당하는 엘리먼트를 모두 선택 한다
• $('li:first-child') : 모든 첫 번째 자식 li 엘리먼트를 선택한다
• $('.myclass:first-child') : 모든 첫번째 자식 엘리먼트 가운데 클래스명이 myclass 인 엘리먼트를
선택한다
last-child
• 엘리먼트에서 마지막 자식 엘리먼트를 선택한다
• $('li:last-child') : 부모 엘리먼트에서 마지막으로 위치하는 li 엘리먼트를 모두 선택한다
• $('.myclass:last-child') : 부모 엘리먼트에서 마지막 자식 엘리먼트중에 클래스명이 myclass 인
엘리먼트를 선택한다
nth-child(index | odd | even | equation)
• 1 base 를 기준으로 하며 자식 엘리먼트의 종류와 상관없이 지정된 위치의 엘리먼트를 선택한다
• $('li:nth-child(2)') : 부모 엘리먼트에서 두번째 li 요소를 선택한다
• $('p:nth-child(odd)') : p 엘리먼트중에 홀수번째 요소들만 선택한다
• $('p:nth-child(even)') : p 엘리먼트들중에 짝수번째 요소들만 선택한다
• $('p:nth-child(3n+1) : 0, 4,7,10... 번째 요소들만 선택한다
only-child
• 엘리먼트중에 형제 엘리먼트가 없는 엘리먼트를 선택한다
• $(':only-child') : 페이지내에서 형제 엘리먼트가 없는 자식 엘리먼트를 모두 선택한다
• $('p:only-child') : 페이지 내에서 형제 엘리먼트가 없는 자식 엘리먼트중 p 엘리먼트를 선택한다
not(E) :
• E 셀렉터 표현식에 해당하지 않는 엘리먼트를 모두 반환한다
• $(':not(.myclass)') : 클래스명이 myclass 가 아닌 모든 엘리먼트를 선택한다
• $('li:not(:last-child)') : li 엘리먼트중에 부모 엘리먼트에 마지막 자식 엘리먼트를 제외한 나머지
엘리먼트를 모두 선택한다.
empty
• 텍스트 노드를 포함해서 자식 엘리먼트가 없는 엘리먼트를 모두 선택한다
• $('p:empty') : p 엘리먼트중에 자식 노드가 없는 엘리먼트를 모두 선택한다
<Traverse>
- 기존 selector를 사용하여 필요한 요소를 가져올 수 있으나,
traverse를 사용하면 1차로 선택된 항목들을 대상으로 2,3차 작업을 할 수 있다
<종류>
• Filtering Method
• Miscellaneous traverse
• Tree traverse
<Filtering Method>
eq(index)
• index 위치의 요소 선택(zero base)
• index 값이 음수인 경우는 뒤에서 부터 계산하여 선택
• $('li).eq(1) : li 엘리먼트중에 두번째 li 엘리먼트를 선택한다
filter(expr)
• 표현식과 일치하는 요소의 집합
• $('li').filter(':even') : li 엘리먼트중 짝수번째만 선택한다(zero base)
• $('li').filter(function(index){ return index; }) : index 번째를 반환
first()
• 매개변수는 없으며 첫번째 엘리먼트를 선택한다
has(selector)
• 표현식에 해당하는 자손 엘리먼트를 지닌 엘리먼트만 선택
• $('ul').has('li') : ul 엘리먼트안에 li 엘리먼트를 선택한다
is(expr)
• 어떤 요소의 현재 상태값을 검사하여 boolean 타입으로 반환한다
last()
• 매개변수는 없으면 마지막 엘리먼트를 선택한다
map(callback)
• 함수를 호출하여 처리하여 그 결과를 반환하여 jQuery 객체를 생성 한다
• $(':checkbox').map(function(){ return this.checked=true; }); : 모든 체크박스의 체크한다
not(expr)
• 엘리먼트들중에 조건에 맞지 않는 엘리먼트를 선택 반환
• $('li').not(':even') : li 엘리먼트에서 짝수번째가 아닌 엘리먼트를 반환
slice(start [, end])
• start <script/>= N <script/> end 위치에 해당하는 요소 반환
• zero base
• end 값이 생략되면 마지막까지 선택함
<Tree traverse Method>
- DOM의 Tree구조를 기준으로 요소를 반환한다
children( [selector] )
• 선택된 객체의 자식중 selector 와 동일한 요소를 반환
closeset( [selector] )
• 선택된 객체의 가장 가까운 조상 요소를 가져옴(DOM Tree 구조상)
find( [selector] )
• 선택된 객체에서 selector 와 동일한 요소를 반환
next( [selector] )
• selector 와 일치하는 형제 요소를 가져옴. 만약 일치하는 요소가 없다면 다음 항목으로 이동하여 요
소를 찾음
parent( [selector] )
• selector 와 일치하는 부모 요소를 반환
prev( [selector] )
• selector 와 일치하는 앞 형제 요소를 반환
siblings( [selector] )
• selector 와 일치하는 형제 요소를 반환
<기타 Traverse>
add(selectror) | .add(element) | .add(html)
• 일치하는 요소의 집합에 요소를 더한다
addSelf()
• 현재 설정 스택에 요소의 이전 설정을 추가한다
is([selector])
• 엘리먼트들에서 selector 와 일치하는 엘리먼트가 있는지 여부를 반환 한다.
• 반환값 : boolean
• 새로운 객체를 생성하지 않는다.
contents()
• 텍스트 및 주석 노드를 포함아혀 일치하는 요소 집합의 자식 집합을 반환
end()
• 메서드 체인에서 가장 마지막 DOM 처리 메서드가 실행되기 이전 상태의 jQuery 객체를 반환 한다
<Manipulation>
- 지정된 요소의 전후 안팎에 요소를 추가하는 일반적인 기능
• 종류
◦ wrap(html) | wrap(elem)
◦ append(content) | appendTo(expr)
◦ prepend(content) | prependTo(expr)
◦ before(content) | after(content)
◦ clone()
◦ insertBefore(expr) | insertAfter(expr)
◦ remove(expr)
◦ empty()
wrap(html) | wrap(elem)
지정된 요소의 html 이나 elem 을 씌운다.
[Example 1]
var wrap = "<div class='wrap_class'></div>";
$('div').wrap(wrap);
[Before]
<div>Test wrap</div>
[After]
<div class='wrap_class'><div>Test wrap</div></div>
[Example 2]
$('p').wrap($('#wrap_cont'));
[Before]
<p>Test wrap(elem)</p><div id='wrap_cont'>wrap</div>
[After]
<div id='wrap_cont'>wrap<p>Test wrap(elem)</p></div>
append(content) | appendTo(expr)
특정 요소안의 뒤쪽에 content 를 삽입한다
• content : 삽입할 요소
• expr : jquery 를 문자열로 표현한 요소
->before <div> prepared ABC append </div> after
[Example 1]
$('#append_div').append("<font color=red>JOBTC.KR</font>");
[Before]
<div id='append_div'>Append</div>
[After]
<div id='append_div'>Append<font color=red>JOBTC.KR</font></div>
[Example 2]
$('#append_target').append($('#append_p'));
[Before]
<p id='append_p'>Append Object</p>
<p id='append_target'>Append!!!</p>
[After]
<p id='append_target'>Append!!!<p id='append_p'>Append Object</p></p>
prepend(content) | prependTo(expr)
지정된 요소 안의 앞족에 content 나 expr 를 추가 한다.
before(content) | after(content)
지정된 요소 바같의 앞쪽(before())나 뒤쪽(after())에 요소를 추가한다.
clone()
지정된 요소를 복사한다.
insertBefore(expr) | insertAfter(expr)
• insertBefore() == .before()와 동일
• insertAfter() == .after()와 동일
remove(expr)
지정된 요소를 제거 한다.
empty()
지정된 요소를 비운다.
<Core>
$( expr, context)
Parameter
• expr : 찾는 표현식
• context : Element | jQuery
Example
• $('div') : <script/>div> 선택
• $('div > p') : <script/>div>안에 <script/>p> 선택
• $('input:radio', document.forms[0]) : 첫번째 폼의 라디오 버튼 선택
$(html) | $(elements)
Html 를 추가하거나 선택할 수 있다.
$(fn)
$(document).ready(function(){})을 짧게 표현
length | size()
지정된 요소의 개수를 구한다
*version때문에 size()는 사용하지 않는다
get() | get(n)
해당되는 모든 요소들을 배열로 가져오거나 n 번째 요소를 가져옴
each(fn)
지정된 항목을 순환 검색하여 fn 를 수행한다
• fn : function
index(subject) | find()
index() : 지정된 요소를 검색하여 위치값을 반환함. 0 base 이며 찾지 못하면 -1 을 반환.
find() : 저정된 요소를 검색하여 배열 타입으로 반환
• subject : 찾고자 하는 요소. element
$( function(){ ... } )
eq(pos) | lt(pos) | gt(pos)
같거나 작거나 큰 요소들을 찾는다.
• pos : Number
<Attribute 함수>
- HTML 요소에서 name 속성을 제외한 나머지 부분을 제어할 수 있다
- 정의되지 않은 속성을 임의로 지정할 수는 있으나,
브라우저별 호환성이 없음으로 주의해야 한다
.attr()
• 엘리먼트 집합에 속한 첫 번째 엘리먼트의 속성을 가져온다.
• .attr 메서드의 장점
◦ 편리성 : jQuery 객체나 jQuery 메서드 체인 코드에서 바로 활용할 수 있다.
◦ 크로스 브라우징 지원 : 브라우저의 종류에 따라 속성 이름이 다르거나 속성값을 다르게 표현
할 때가 있다
이러한 크로스 브라우징의 이슈들을 최소화 할 수 있다
• 사용 패턴
◦ .attr(attributeName)
◦ .attr(attributeName, value)
◦ .attr(map)
◦ .attr(attributeName, function)
.removeAttr()
.val()
• value 값을 가져옴.
.text() | .html()
• 해당 형식으로 값을 가져오거나 대입함
<Event>
<종류>
◦ load(fn) | unload(fn)
◦ blur(fn) | blur() | focus(fn) | focus()
◦ hover(over, out)
◦ change(fn) | scroll(fn)
◦ click() | click(fn) | dbclick(fn)
◦ keydown(fn) | keypress(fn) | keyup(fn)
◦ mousedown(fn) | mouseenter(fn) | mouseleave(fn) | mouseout(fn) | mouseup(fn) |
mousemove(fn) | mouseover(fn)
◦ ready(fn)
◦ resize(fn)
◦ select(fn) | select()
◦ submit(fn) | submit()
◦ bind(type, data, fn) | unbind(type, fn)
◦ one(type, data, fn)
◦ error(fn)
◦ trigger(type)
◦ toggle(even, odd)
<직렬화 관련 메서드>
◦ serialize() : 폼의 값을 get type 으로 뱐환한다
◦ serializeArray() : 폼의 값을 jQuery 배열 객체로 반환 한다
keykeydown(fn) | keypress(fn) | keyup(fn)
• event.keyCode 값에 의해 이벤트가 발생한 키 코드값을 가져 올 수 있음
• event.type 에 의해 키보드의 상수값을 얻을 수 있다
trigger(fn)
이벤트를 자동으로 발생 시킨다
• 절차
◦ 이벤트를 처리할 함수를 지정
◦ 이벤트 추가
◦ trigger() 수행
toggle(even, odd)
• even : toggle 이 짝수번째 발생했을 경우
• odd : toggle 이 홀수번째 발생했을 경우
• 1.9.X 버전에서는 even, odd 기능이 사라짐
bind(event, data, fn) | bind(event, fn)
이벤트들을 map 형태로 묶어서 지정할 수 있다
one(type, data, fn)
지정된 이벤트를 한번만 실행한다
<Effect>
• Animation Speed
◦ slow : 600/1000 초
◦ fast : 200/1000 초
◦ default : 400/1000 초
◦ 속도는 n/1000 초 단위로 설정할 수 있음(효과가 시작되고 끝날때 까지 걸리는 시간을 의미)
• callback : 효과가 끝나면 호출되는 함수를 의미
<종류>
• show() | show( speed [, callback] )
• hide() | hide( speed [, callback] )
• toggle() | toggle( speed [ , callback] )
• slideDown( [speed] [, callback] ) | slideUp( [speed] [ , callback] )
• slideToggle( [speed] [.callback] )
• fadeIn( [speed] [.callback] ) | fadeOut( [speed] [.callback] )
• faseTo( [speed] , opacity [.callback] )
• animate(params [,speed] [, easing] [, callback] )
<현재 상태값 체크>
• 요소명.is(":visible") : 현재 상태가 보여져 있는 상태
• 요소명.is("hidden") : 현재 상태가 감추어져 있는 상태
<show>
• 요소를 보이게 함.
• show()
• show( speed [, callback] )
<hide>
• 요소를 숨김
• hide()
• hide( speed [, callback] )
<toggle>
• show() 와 hide()의 기능을 반복함
• toggle()
• toggle( speed [ , callback] )
slideDown | slideUp | slideToggle
• slideDown( [speed] [, callback] )
• slideUp( [speed] [ , callback] )
• slideToggle( [speed] [.callback] )
• slideDown : 숨겨진 속성이여야 효과를 볼 수 있다. 숨겨진 요소들을 위에서 부터 아래로 차차
보여짐
• slideUp : 이미 보여진 요소를 아래에서 부터 위로 차차 숨겨짐
fadeIn( [speed] [.callback] ) | fadeOut( [speed] [.callback] )
- 지정된 요소를 서서히 보이게 하거나 감춘다.
fadeTo( [speed] , opacity [.callback] )
opacity : 투명도 (0~1) 1:불투명, 0:투명
요소의 투명도를 지정된 opactity 까지 서서 진행시킨다
animate(params [, speed] [, easing] [, callback] )
params : 효과를 표현할 스타일 셋. map 형태로 지정할 수 있음
easing : 플러그인을 지정하여 외부 효과를 지정할 때