http://www.richstory.co.kr/category/jQuery
http://blog.naver.com/sabisung/80113636445
http://blog.naver.com/ouksoo21/130082039493
jQuery 셀렉터
기본셀렉터
* : 모든 엘리먼트와 일치
E : 태그명이 E인 모든 엘리먼트와 일치
E F : E의 자손이면서 태그명이 F인 모든 엘리먼트와 일치
E>F : E의 바로 아래 자식이면서 태그명이 F인 모든 엘러먼트와 일치
E+F : E의 형제 엘리먼트로 바로 다음에 나오는 엘리먼트 F와 일치
E~F : E의 형제 엘리먼트로 다음에 나오는 모든 엘리먼트 F와 일치
E:has(F) : 태그명이 F인 자손을 하나 이상 가지는 태그명이 E인 모든 엘리먼트와 일치
E.C : 클래스명 C를 가지는 모든 엘리먼트 E와 일치, E의 생각은 *.C와 동일함
E#I : 아이디가 I인 엘리먼트 E와 일치. E의 생략은 *#I와 동일함
E[A] : 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A=V] : 값이 V인 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A^=V] : 값이 V로 시작하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A$=V] : 값이 V로 끝나는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
E[A*=V] : 값에 V를 포함하는 어트리뷰트 A를 가지는 모든 엘리먼트 E와 일치
HTML DOCUMENT내의 모든 HTML요소(HEAD, BODY, SCRIPT) 등등의 모든 요소들을 선택하기 위함
요소의 정의되어 있는 클래스(class)를 구분자로 선택하기 위함 (.)
예) <div class=”jquery”></div> -> $(‘.jquery’);
요소의 정의되어 있는 아이디(id)를 구분자로 선택하기 위함. (#)
예) <div id=”jquery”></div> -> $(‘#jquery’)
· Element Selector (“element”)
일정 html 요소를 선택하기 위함 (해당 테그로 찾기 때문에 그다지 유용하진 않음). – 선택 범위가 넓기 때문
예) <div></div><span></span><div></div> -> $(‘div’); = 2개 반환
· Multiple Selector (“selector1, selector2, selectorN”)
다중으로 일정 html 요소를 선택하기 위함
예) <div><span></span></div><form><input type=”text” /></form,> -> $(‘div, span, form, input’)
위치기반 셀렉터
:first : 페이지에서 처음으로 일치하는 엘리먼트. li a:first는 리스트 아이템의 첫번째 링크를 반환함
:last : 페이지에서 마지막으로 일치하는 엘리먼트. li a:last는 리스트 아이템의 마지막 링크를 반환함
:first-child : 첫번째 자식 엘리먼트. li:first-child는 각 리스트의 첫번째 아이템을 반환한다.
:last-child : 마지막 자식 엘리먼트. li:last-child는 각 리스트의 마지막 아이템을 반환한다.
:only-child : 형제가 없는 모든 엘리먼트 반환
:nth-child(n) : n번째 자식 엘리먼트. li:nth-child(2)는 각 리스트의 두번째 리스트 아이템을 반환함
:nth-child(event|odd) : 짝수 또는 홀수 자식 엘리먼트. li:nth-child(event)은 각 목록의 짝수 번째 자식 엘리먼트 반환
:nth-child(Xn + Y) : 전달된 공식에 따른 n번째 자식 엘리먼트. Y는 0인경우 생략가능하다. li:nth-child(3n)은 3의 배수번째 아이템을 반환, li:nth-child(5n+1) 은 5의 배수 +1번째 아이템을 반환
:event / :odd : 페이지 전체의 짝수/홀수 번째 엘리먼트. li:even은 모든 짝수번째 아이템을 반환한다.
:eq(n) : n번째로 일치하는 엘리먼트
:gt(n) : n번째 엘리먼트(포함안됨) 이후의 엘리먼트와 일치
:lt(n) : n번째 엘리먼트(포함안됨) 이전의 엘리먼트와 일치
필터 셀렉터
:animated : 현재 애니메이션이 적용되고 있는 엘리먼트를 선택
:button : 모든 버튼을 선택함(input[type=submit], input[type=reset], input[type=button], button)
:checkbox : 체크박스 엘리먼트만 선택(input[type=checkbox])
:checked : 선택된 체크박스나 라디오 버튼만을 선택
:contains(foo) : 텍스트 foo를 포함하고 있는 엘리먼트만 선택
:disabled : 인터페이스에서 비활성화 상태인 모든 폼 엘리먼트를 선택한다.
:enabled : 인터페이스에서 활성화 상태인 모든 폼 엘리먼트를 선택한다.
:file : 모든 파일 엘리먼트를 선택함(input[type=file])
:header : 헤더 엘리먼트만 선택한다. 예를 들어 <h1>부터 <h6>엘리먼트만 선택한다.
:hidden : 감춰진 엘리먼트만 선택한다.
:image : 폼 이미지를 선택한다.(input[type=image])
:input : 폼 엘리먼트만 선택한다.(input, select, textarea, button)
:not(filter) : 필터의 값을 반대로 변경한다.
:parent : 빈 엘리먼트를 제외하고, 텍스트도 포함해서 자식 엘리먼트를 가지는 엘리먼트를 선택한다.
:password : 패스워드 엘리먼트만 선택한다. (input[type=password])
:radio : 라디오 버튼 엘리먼트만 선택한다.(input[type=radio])
:reset : 리셋 버튼을 선택(input[type=reset], button[type=reset])
:selected : 선택된 엘리먼트만 선택한다.
:submit : 전송 버튼을 선택한다.(button[type=submit], input[type=button])
:text : 텍스트 엘리먼트만 선택(input[type=text])
:visible : 보이는 (visible)엘리먼트만 선택한다.
:empty : 자식 또는 내부 텍스트를 가지지않는 요소들만 선택
:has(selector) : 지정된 셀렉터에 해당하는 요소를 갖는 모든 요소만 선택
jQuery 이벤트
e.preventDefault() - 대상을 클릭했을 때 발생하는 이벤트를 방지(링크 이동 등등 막기)
$(this) - 현재 이벤트가 적용된 개체 (DOM)
.ready(fn); - 페이지 로딩시 fn 실행
.click(fn); - 클릭 시 fn 실행
.one(fn); - 딱 한번만 이벤트가 실행되고 해제됨
.dblclick(fn) - 더블클릭시 fn실행
.blur(fn) - 포커스를 잃었을 때 fn실행
.focus(fn) - 포커스를 얻었을 때 fn실행
.toggle(fn1,fn2); - 클릭시 fn1 과 fn2을 번갈아 실행
.scroll(fn) - window 창에서 scroll 이벤트가 발생할 때마다 콜백함수 fn 을 실행
.change(fn) - 대상이 바뀌는 지 감지하여 fn을 실행
.keyUp(fn) - 키를 땔 때 fn 실행
.keydown(fn) - 키를 누를 때 fn실행
.keypress(fn) - 연속으로 빨리 keydown이 일어날 때 fn실행
.bind({click:fn(){}, mouseover:fn(){}, mouseout:fn(){}}); - 대상에 동적으로 이벤트 바인딩, 이벤트 핸들러 다중 바인딩 가능
.unbind("event") - event 해제
.focusin(fn); - 포커스가 들어왔을 때 fn 실행
.focusout(fn); - 포커스가 나갔을 때 fn 실행
.select(fn) - 텍스트 필드에서 텍스트를 선택했을 때 fn실행
.submit(fn) - 폼 전송시 fn실행
.mousedown(fn) - 마우스 버튼을 누를 때
.mouseup(fn) - 마우스 버튼을 눌렀다가 땔 때
.hover(fn1,fn2) - 마우스 오버시 fn1, 마우스 아웃시 fn2 실행
ATTRIBUTE SELECTOR
· Attribute Contains Prefix Selector [name|=value]
이 선택자는 요소에 포함 되어 있는 속성과 속성값을 비교하여 해당 요소를 선택하기 위하여 사용 된다.
속성값이 두 단어 이상일 경우에는 아이픈(-) 으로 연결하면 선택되어 질 수 있으며 스크립트에 설정된 값은 요소에 선언된 속성값에 앞부분에 나와야 한다.
예) $(‘a[wow|=you]’); -> 모든 a 테그를 검색하고 속성 이름이 wow 인것에 값에 you 가 들어 있는 해당 요소를 반환한다 ( <a href=”#” wow=”aa-you-wow”> x ), ( <a href=”#” wow=”you-wow”> o )
· Attribute Contains Selector [name*=value]
이 선택자는 요소에 포함되어 있는 속성과 속성값을 비교하여 해당 요소를 선택하기 위하여 사용 된다.
선언되어진 필요로 하는 속성값의 문자를 요소에 있는 속성값의 내용 중 아무곳에 해당 문자가 어떠한 형태로 있던 일치 하는 부분이 있다면 해당 요소를 반환하게 된다.
예) $(‘input[name*=’wow’]’); -> 우선 모든 input 테그를 검색하고 속성 name 중에 ‘wow’ 라는 문자열이 포함 되어 있다면 무조건 반환 하라.
· Attribute Contains Word Selector [name~=value]
이 선택자는 요소에 포함 되어 잇는 속성과 속성값을 비교하여 해당 요소를 선택하기 위하여 사용 된다.
선언되어진 필요로 하는 속성값(단어) 를 요소에 있는 속성과 비교하여 해당 단어가 있다면 해당 요소를 반환한다. 하지만 기존의 셀렉터와는 틀리게 이 선택자는 해당 단어가 하이픈(-) 이라든지, 단어 중간에 끼어 있다면 반환하지 않으며, 공백으로 구분되어 있는 경우나, 해당 단어 하나만 있을 경우에는 요소를 반환한다.
예) $(‘input[name~=’wow’]’) -> 모든 input 테그를 검색하고 속성에 ‘wow’ 라는 단어가 독립적으로 존재하면 반환한다.
· Attribute Ends With Selector [name$=value]
비교 html 요소 속성값 중 해당 속성값의 가장 뒤에 필요로 하는 단어가 붙어 있다면 해당 요소를 반환한다.
예) $(‘input[name$=’wow’]’); -> 요소 속성이 <input type=”text” name=”abcdwow” /> 로 되어야 반환
· Attribute Equals Selector [name=value]
기본형태로 요소 속성값과 필요로 하는 단어가 무조건 일치하여야 해당 요소를 반환한다.
예) $(‘input[name=’wow’]’); -> <input type=”text” name=”wow” /> 로 되어야 반환
· Attribute Not Equal Selector [name!=value]
요소 속성값과 필요로 하는 단어가 일치 하지 않는 요소들을 반환한다.
This selector is equivalent to :not([attr=value]);
예) $(‘input[name!=’wow’]’); -> <input type=”text” name=”wow” /> 반환안함 <,input type=”text” name=”wowya” /> 반환안함
· Attribute Starts With Selector [name^=value]
요소 속성값과 필요로 하는 단어가 일치를 해야 하는데 전체가 일치할 필요는 없고, 필요로 하는 단어가 요소에 있는 속성값에 처음에 시작 하면 해당 요소를 반환한다.
예) $(‘input[name^=’wow’]’); -> <input type=”text” name=”wowabcd” /> 반환함, <input type=”text” name=”abcdwow” /> 반환안함
· Has Attribute Selector [name]
해당 속성이 있다면 무조건 반환한다.
예) $(‘div[id]’); -> 모든 div 를 검색하고, 해당 div 에 id 속성이 있다면 값이 있던 없던 해당 요소를 반환한다.
· Multiple Attribute Selector [name=value][name2=value2]
호출 조건을 여러 가지로 설정하여 좀더 정교한 선택을 할 수 있도록 유도 한다.
예) $(‘div[id][name$=’wow’]’); -> 모든 div 를 검색하고 그중 id 속성을 가지고 있는 요소중 name 속성이 있고 그 name 속성값에 ‘wow’ 라는 값이 가장 마지막에 있다면 해당 요소 반환
<input type=”text” id=”hey” name=”whatwow” /> 반환함
FORM SELECTOR
· :button Selector
버튼과 타입버튼 요소를 모두 반환함
예) $(‘:button’); -> <button></button> 혹은 <input type=”button” /> 을 모두 반환
· :checkbox Selector
타입 체크박스 요소를 모두 반환한다.
예) $(‘:checkbox’); -> <input type=”checkbox” /> 을 모두 반환
· :checked Selector
요소중 checked=”checked” 되어 있는 요소를 모두 반환한다.
예) $(‘:checked’); - > <input type=”checkbox” checked=”checked” /> 등을 반환
· :disabled Selector
요소중 disabled=”disabled” 되어 있는 요소를 모두 반환한다.
예) $(‘:disabled’); -> <input type=”text” disabled=”disabled” /> 등을 반환
· :enabled Selector
요소중 enabled 되어 있는 요소를 모두 반환한다. -> 즉 해당 요소에서 disabled 가 되지 않은 것들을 반환
예) $(‘input:enabled’);
· :file Selector
요소중 input type=”file” 요소를 모두 반환한다
예) $(‘input:file’);
· :image Selector
요소중 input type=”image” 요소를 모두 반환한다.
예) $(‘input:image’);
· :input Selector
영역내의 모든 요소(input, textarea, select, button) 등을 모두 반환한다 ( $(‘form > *’); )
예) $(‘:input’);
· :password Selector
요소중 input type=”password” 요소를 모두 반환한다
예) $(‘input:password’);
· :radio Selector
요소중 input type=”radio” 요소를 모두 반환한다.
예) $(‘input:radio’);
· :reset Selector
요소중 input type=”reset” 요소를 모두 반환한다.
예) $(‘input:reset’);
· :selected Selector
Select 요소의 option 항목을 위한 선택자로, option 항목이 선택 되어지는 순간 해당 선택된 option 을 반환한다.
예) $(‘select’).change(function(){
$(‘select option:selected’)………..xxxxxxxx
})
· :submit Selector
요소중 input type=”sutmit” 요소를 모두 반환한다
예) $(‘input:submit’);
· :text Selector
요소중 input type=”text” 요소를 모두 반환한다.
예) $(‘input:text’);
BASIC FILTER SELECTOR
· :animated Selector
에니메이션 효과가 진행된 엘리먼트 요소를 반환한다.
예) $(’element’).slideToggle(‘slow’, anymethod); = element 에 slideToggle 에니메이션 실행 그후
$(‘button’).click(function(){
$(‘div:animated’).toggleClass(‘anyclass’);
});
· :eq() Selector
특정 엘리먼트의 :eq(index) ‘index’ 번째의 영역을 반환한다. Index 는 “0” 부터 시작한다.
예) $(‘div:eq(“2”)’).css(‘color’, ‘red’); -> 모든 div중에 2 번째 div 에 값들에 컬러를 red로 규정한다.
· :even Selector
특정 엘리먼트의 짝수번째 영역을 반환한다. 순서는 0 부터 시작한다.
예) $(‘tr:even’).css(‘background-color’, ‘#000000’); -> 테이블의 tr 중 0부터 짝수번째 영역의 배경색은 흑색.
· :first Selector
요소 중 첫번째 나오는 요소를 반환한다. 이것은 :eq(0) 과 같으며, :lt(1) 로 사용되어도 무방하다.
예) $(‘tr:first’).css(‘color’,’red’); -> tr 테그중 첫번째 나오는 영역을 반환한다.
· :gt() Selector
요소중 :gt(index), index 번째 다음의 모든 요소를 반환한다. Index 는 ‘0’ 부터 시작한다. :nth-child(n) 은 n이 1부터 시작 하는 것과는 대조된다.
예) $(‘td:gt(2)’).css(‘border’,’red’); -> 세번째 나오는 td 부터의 모든 td의 border 색상이 붉은색이다
· :header Selector
Html 요소중 header 테그 h1~h6 까지의 요소들을 반환한다.
예) $(‘:header’)
· :last Selector
요소 중 마지막에 나오는 하나의 요소를 반환한다.
예) $(‘tr:last’).css(‘color’,’red’); -> tr 테그중 마지막에 나오는 영역 내용의 컬러는 붉은색이다.
· :lt() Selector
요소중 :lt(index), index 번째 이전의 모든 요소를 반환한다. Index 는 ‘0’ 부터 시작한다. :nth-child(n) 은 n이 1부터 시작 하는 것과는 대조된다. (:gt(index) 와는 지정 영역이 대비된다.)
예) $(‘td:lt(2)’).css(‘border’,’red’); -> 세번째 나오는 td 이전의 모든 td의 border 색상이 붉은색이다
· :not() Selector
특정 요소 중 주어진 조건에 맞지 않는 요소들을 반환한다. ( :not(div a), :not(div, a) )
예) $(‘input:not(:checked)’) -> 전체 input 테그중 checked 가 되지 않는 모든 input 을 반환한다.
· :odd Selector
특정 엘리먼트의 홀수번째 영역을 반환한다. 순서는 0 부터 시작한다.
예) $(‘tr:odd’).css(‘background-color’, ‘#000000’); -> 테이블의 tr 중 0부터 홀수번째 영역의 배경색은 흑색.
CONTENTS FILTER SELECTOR
· :contains() Selector
주어진 문자열이 포함 되어 있는 모든 요소를 반환한다.
예) $(‘div(:contain(“ouksoo”)’).cass(‘text-decoration’,’underline’); -> ‘ouksoo’ 문자열 포함 모든 div 영역의 속성을 아래밑줄 로 정의
· :empty Selector
해당 요소내 child node 혹은 text 둘 중 아무것도 없는 요소를 반환한다. 즉 비어 있는 요소를 반환한다 이 선택자는 :parent 선택자와는 반대된다..
예) $(‘td:empty’).text(‘wow’); -> td 요소 중 비어 있는 td 를 찾고 그 요소안에 ‘wow’라는 문자를 넣는다.
· :has() Selector
해당 요소 내에 일정(주어진) 요소가 포함 되어 있는 요소를 반환한다. 즉 반환 받고자 하는 요소는 주어진 일정한 요소를 포함하고 있어야 한다.
예) $(‘div:has(p)’).addClass(“text”); -> 모든 div 요소중 p 테그를 포함하고 있는 div 에 ‘text’ 클레스를 적용
· :parent Selector
해당 요소내 child node 혹은 text 둘 중 어떤 것이라도 포함하고 있는 요소를 반환한다. 즉 비어 있지 않는 요소를 반환한다 이 선택자는 :empty 선택자와는 반대된다..
예) $(‘td:parent’).text(‘wow’); -> td 요소 중 비어 있는 td 를 찾고 그 요소안에 ‘wow’라는 문자로 치환한다.
CHILD FILTER SELECTOR
· :first-child Selector
해당 구역에 포함되어 있는 요소 중 가장 첫번째 요소를 반환한다. “nth-child(1)” 와 같다고 보면 된다
예) $(‘div span:first-child’) .-> div 요소중 span 이 가장 첫번째 나올 때, 그 첫번째 span 을 반환한다.
· :last-child Selector
해당 구역에 포함되어 있는 요소 중 가장 마지막 요소를 반환한다. 마지막에 선언되어진 요소가 나와야 한다.
예) $(‘div span:first-child’) .-> div 요소중 span 이 가장 마지막에 나올 때, 그 마지막 span 을 반환한다.
· :nth-child Selector
:nth-child(index) 에서 index 번째의 요소를 반환한다. 기존의 :eq(index) 등은 시작점이 0부터 시작하여 카운팅을 하였으나 이 셀렉터의 index 는 1부터 시작한다는 것에 차이가 있다.
예) $(‘ul li:nth-child(2)’) -> ul 요소중 두번째 나오는 li 를 반환 / :eq(2) 일경우에는 세번째 나오는 li 를 반환.
· :only-child Selector
부모영역 내에 child node 가 하나 밖에 없을 경우 해당 child 노드를 반환한다. Text node 는 여기에 child node에 포함 되지 않는다.
예) $(‘div button:only-child’). -> div 요소중 button 엘리먼트를 하나만 포함 하고 있을 때 그 button 엘리먼트를 반환한다.
HIERARCHY(계층) SELECTOR
· Child Selector (“parent > child”)
부모엘리먼트에 속해 있는 자식 엘리먼트를 반환한다. (순수계층 반환, 클래스나 아이디를 이용하여 원하는 값 도출
예) $(‘ul.topclass > li’) …-> 클래스명이 topclass 인 ul 에 속해 있는 li 만 반환한다. 자식중에 클래스명을 가지지 않는 ul 이 계속 포함 되어 있더라도.조건에 부합되진 않기 때문에 그 아래 li 는 비 반환
· Descendant Selector (“ancestor descendant”)
기본 계층구조로 스페이스바에 따라 구분되며, 뒤에 나올수록 앞의 엘리먼트에 부합된며, 최종조건의 엘리먼트들을 반환한다.
예) $(‘form input’) -> 폼테그 영역에 포함 되어 있는 요소 중 input 엘리먼트는 모두 반환한다.
· Next Adjacent Selector (“prev + next”)
후자(next)를 반환하는데 전자의 조건이 갖추어 져야 한다.
예) $(‘label + input’); - > input 요소를 반환하는데 그 input 요조 부모가 아닌 전에 요소가 label 요소여야 반환
· Next Siblings Selector (“prev ~ siblings”)
전자 조전이 시작 하는 데부터 후자 조건까지의 모든 해당 요소를 반환한다.
예. First) $(‘#prev ~ div) -> 요소들중 아이디가 prev 가 나온다면 거기서부터 나오는 div 요소 모두를 반환한다.
예. Second) $(‘#prev ~ div.ouksoo’) -> 요소들중 아이디가 prev 가 나온다면 거기서부터 나오는 div 요소중 클래스가 ouksoo인 요소들을 모두 반환한다.
VISIBILITY FILTER SELECTOR
· :hidden Selector
숨어 있는 요소들을 반환한다.
- Display 가 ‘none’ 인 경우
- Form element 의 type=”hidden’ 인 경우
- 넓이나 높이가 각각 ‘0’ 으로 세팅 되어 잇는 경우
- 조상 element 가 hidden 되어 있음 으로서 자기 자신도 보이지 않게 된 경우
예) $(‘div:hidden’) -> div 요소중 보이지 않는 div 요소들을 모두 반환한다. - <div></div> 여서 보이지 않는 것을 포함되지 않는다.
· :visible Selector
:hidden 과는 반대로 보여지는 모든 요소들을 반환한다.
jQuery 메소드
.show(시간);
.hide(시간);
.slideUp(시간); - 보이기
.slideDown(시간); - 숨기기
.slideToggle(시간) - 보이고 안보이게 하기
.scrollTop(); - 현재 스크롤바의 위치값
.next(); 다음대상
.prev(); 전 대상
.stop(); - 보통 animate정지에 쓰임
.animate(매개변수,진행시간); - ({"속성":"값"} ,1000) 1초동안 매개변수를 실행
매개변수 - width,height,opacity,fontsize
.attr(속성); - 속성의 값 가져오기
.attr({속성:값, 속성:값}); - 대상의 속성을 값으로 설정
.removeAttr(속성) - 대상의 속성 제거하기
.fadeOut(시간);
.fadeIn(시간);
.fadeTo(시간,투명도); - 대상을 시간동안 투명도를 적용 투명도1~100
.appendTo("대상"); - $("<div><p>Hello,World!</p></div>").appendTo("body");
.append(변수); - $("#result").append(내용); - 대상의 안에 내용추가
$('<br/>').insertAfter(".Content") - .Content 뒤에 <br/> 추가
.insertBefore(); - 앞에 추가
//서브 메뉴를 기준으로 보면 아래와 같음
$('#menu').clone().insertBefore('#submenu');
$('#menu').clone().prependTo('#submenu');
//원래 하단 메뉴가 있는 위치
$('#menu').clone().appendTo('#submenu');
$('#menu').clone().insertAfter('#submenu');
.before(내용) - 대상 앞에 내용 추가
$('h3').wrap('<u></u>') - <h3></h3> 태그를 <u></u>태그로 감쌈
.unwrap(); - 대상을 감싸고있는 부모 엘레멘트를 제거
.clone(); - 대상을 복사
.replaceWith() - 검색된 대상을 변경 ex) $(this).replaceWith("<div>" + $(this).text() + "</div>");
.each(fn) - 대상 수 많큼 반복하여 fn 실행
.size(); - 대상의 개수 알아오기
.html("<input ~>"); - 대상에 html추가
.text("아야어여"); - 대상에 text 추가
.end() - 실행취소함수 바로 전단계의 객체로 돌아감.
.data("link", "messages.jsp"); - 사용법 $(".tab").click(function(){
window.parent.frames['content'].location = $(this).data("link");
});
.eq(위치); - 대상의 위치번째 요소 셀렉트
.css("background-color","#000000"); - 대상에 스타일을 줌
.removeAttr(속성) - 대상의 속성을 제거
.delay(시간) - 시간만큼 지연
.has(엘레멘트); - 엘레멘트를 가지고 있는 대상만 반환
.contains(엘레멘트1,엘레멘트2) - 엘레멘트1이 엘레멘트2를 포함하고있는지를 boolean 형식으로 반환
.addClass(); - 스타일을 추가
.remove() - 대상 제거
.removeClass(); - 스타일을 제거
.val() - input 의 value값을 가져온다
.addClass("a") - 대상에 a클래스를 추가한다.
.removeClass("a") - 대상에 a클래스를 제거한다.
.get(0).tagName - 대상의 첫번째 요소의 태그이름을 가져옴
.filter(expr) - 지정된 표현식과 매치되지 않는 모든 요소 제거 즉, 매치되는요소만 가져옴
.filter(fn) - 지정된 함수와 매치되지 않는 요소들을 제거
.is(expr) - 대상이 표현식에 해당하면 true 여러 표현식이 있을 경우 한조건만 맞아도 true
.map(callback) - 개체안에 있는 요소들의 집합을 다른 집합으로 변경하여 옮긴다
.not(expr) - 지정된 표현식과 매치디는 모든 요소들을 제거
.slice(n,index) - 왼쪽에서 n번째 문자열 반환 ex) .slice(1,3).addClass('red'); 1번째 인덱스에서 (3-1)번째 인덱스까지
$.trim(문자열) - 양쪽 공백 제거
JQuery.browser.version - 브라우져의 버전
~~~.msie - ie사용시 true
~~~.mozilla - FireFox
~~~.safari
~~~.opera
imgSrc.substr(imgSrc.lastIndexOf("/") + 1); - 순수한 파일명 얻기
msg += $("#select").val().join("|")+'\n'; - 셀렉트박스의 값구분자로 구분하여 가져오기
.width() - 대상의 가로길이
.height() - 대상의 세로 길이
.outerWidth(true) - true 마진을 포함한 가로길이
.outerHeight(true) - true 마진을 포함한 세로길이 true제거시 마진 미포함
.trigger("event") - 해당 이벤트를 코드로 강제실행
.load('url',params,callback fn) - Ajax의 기능으로 html을 로드하여 DOM에 삽입
.getJSON('url',fn(data)) - entry[name] 형식으로 json을 읽어옴
- fn내에서 $.each(data,fn(index,entry){table += index + '<br/>'; table+= entry["name"];}; 이런식으로 사용
$.getScript('JQuery.script.js') - 동적으로 자바스크립트 로드, 보통 'JQuery.script.js'에 처리될내용기재하여 클릭이벤트시 실행
$.get('~~.xml',fn()) - XML파일 로드
$.get("~~.aspx", { 'Msg':$(this).val() } ,fn(data){ } ); - get방식의 ajax
$.post("~~.aspx", { 'Msg':'post방식으로 전송'},fn(data){ }); - post방식의 ajax
$.ajax
(
{
type:"get,post",
dataType:"json",
dataType:"script,post,get",
success:function(data){SuccessFunction(data);},
error:function(data){AlertFunction(data);}
}
);
$.ajaxSetup - 반복 사용되는 속성을 상단에 설정하여 코드를 줄인다
(
{
dataType:"json"
}
);
.live() - 동적으로 생성된 객체에 이벤트적용 예) $(".myBtn").live('click', function(){ //처리할 내용들});
.delegate() - live()와 마찬가지로 동적으로 생성된 객체에 이벤트적용. jQuery 1.4.2에서 live() 메서드를 대체하는 메서드. live() 보다 성능 우위
예) $("body").delegate('.myBtn','click', function(){//처리할 내용});
.undelegate() - 바이딩 해제
$('폼객체').serialize() - 폼안의 element 를 자동적으로 연결(element에 name 과 id속성을 같이 부여. name 필수) -> "&name=value"
$('폼객체').serializeArray() - 위와 동일하나 값의 형식을 Array 형식으로 변환 -> "{name=value}"
$('폼객체')[0].reset() - 폼리셋. jQuery에서는 reset이벤트 및 메소드가 정의되어 있지 않으므로 DOM객체의 reset()를 이용하여야 한다.
(참고, 문서내 모든 form을 리셋하려면 $('form').each(function() { this.reset(); });
jQuery 자주 쓰이는 유용한 팁
1. 커서 변경
$('body').css('cursor', 'default');
$('body').css('cursor', 'wait');
2. Select Box에서 선택된 Value 찾기
$('#search_sale_pernr_s option:selected').val();
3. Table의 타이틀 Row를 제외한 모든 Row 삭제하기
$("#data_list_table > tbody").children("tr:not(:first)").remove();
4. Table의 마지막 Row 다음에 Row 추가하기
$("#data_list_table > tbody:last").append("<tr><td>값1</td></tr>");
5. innerHTML값 Setting하기
$("#id_total_price").html("<strong>값</strong>");
6. 해당 ID로 지정된 HTML 보이기/숨기기
$("#placeholder").show();
$("#placeholder").hide();
7. ID로 지정된 Form Submit 하기
$("#csf_tab_menu_form").attr("target", "_top");
$("#csf_tab_menu_form").attr("action", "/sabisung/list.jsp");
$("#csf_tab_menu_form").submit();
8. Select Box의 Option 값 확인
$("#search_sale_unit").find("option").each(function() {
alert(this.value);
});
9. Select Box의 특정 값을 가지는 Option 삭제하기
$("#csf_menu_no").find("option").each(function() {
if(this.value == "4") {
//alert(this.selected);
$(this).remove();
}
});
10. Select Box의 특정 값 이후/이전에 Option 추가하기
$("#csf_menu_no").find("option").each(function() {
if(this.value == "3") {
$(this).after("<option value=\"4\">텍스트</option>");
//$(this).before("<option value=\"4\">텍스트</option>");
return false;
}
});
11. each Loop에서의 break/continue 방법
$("#csf_menu_no").find("option").each(function() {
if(this.value == "3") {
return false; //break 의미
return true; //continue 의미
}
});
12. Select Box의 모든 Option 삭제 후 Default Option 추가하기
$("#search_sale_pernr_s").find("option").remove().end().append("<option value=\"\">::사원 선택::</option>");
13. checkbox의 전체 갯수와 선택된 갯수 구하기
- 전체 갯수 : $("input:checkbox[name=is_check]").length
- 선택된 갯수 : $("input:checkbox[name=is_check]:checked").length
- 전체 checkbox 순회하기
$("input:checkbox[name=is_check]").each(function() {
this.checked = true;
});
14. checkbox의 체크 여부 확인
if($("input:checkbox[name=complete_yn]").is(":checked")) == true) {
; //작업
}
15. Table의 특정(ID를 가지는) TR 다음에 TR Row를 추가하기
$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).after("<tr><td>사비성</td></tr>");
return false;
}
});
16. Table의 특정(ID를 가지는) TR Row를 삭제하기
$("#table_appr_pernr > tbody").children("tr").each(function() {
if(("row_appr_pernr_" + row_no) == $(this).attr('id')) {
$(this).remove();
return false;
}
});
17. 숫자인지 체크
function is_number(v) {
var reg = /^(\s|\d)+$/;
return reg.test(v);
}
18. 숫자인지 체크 (-/+ 부호까지 체크)
function is_number(v) {
var reg = /^[-+]?\d+$/;
return reg.test(v);
}
19. 소수점 자리수에 맞는 숫자인지 체크 (소수점 2자리까지 체크)
function is_float_2(v) {
var reg = /^[-+]?\d+.?\d?\d?$/;
return reg.test(v);
}
20. 숫자에 콤마 추가하기 (금액단위)
function set_comma(n) {
var reg = /(^[+-]?\d+)(\d{3})/;
n += '';
while (reg.test(n))
n = n.replace(reg, '$1' + ',' + '$2');
return n;
}
'SugarCRM > Report' 카테고리의 다른 글
| jQuery 강좌 [출처] 기냥이 (0) | 2013.01.18 |
|---|