jquery 셀렉터 및 함수 사용법

Jquery 셀렉터 및 함수 사용법

 

jquery 의 기본 사용법
$(선택기).메서드(인자);

jquery 셀렉터 예제
$('input:type=text') 
input 타입 text 인것을 가져온다.

$(':text') 
모든 input 타입 text를 가져온다

$('#아이디 option:selected').text();
selectbox 값 가져오기

선택기에서 정규식과 같은 형식으로 사용할 수 있다
$("a[href*='dotnet']") == a 테그 안에서 href 속성에 dotnet 이란 단어가 있다면
$("a[href$='aspx']) == aspx로 끝나는거에 대()해서/..
* 포함
$ 마지막에
^ 시작하는

샐랙터 even
$('tr:odd') tr 테그중 홀수
$('tr:even') tr 테그중 짝수

테그안에 포함된 내용을 검색
$("td:contains('redplus')").  == contains('검색어')  테그안의 텍스트를 검색한다.


jquery 함수들

.siblings
같은 dom위치에 있는 형제 테그들을 선택한다.*자신을 뺀 형제 노드)(tr 라인안에 있는 td의 여러개들이 형제이다.

.parent() 
부모 노드로 이동

.find(eq(숫자)) 
노드를 찾는다.(eq(숫자) 는 자식의 숫자번째 노드를 찾는다~)
예제) .find('img') // 자식 노드중에 img 테그를 찾는다

.ready()
HTML을 모두 로딩하고 실행한다.
$().ready(function() { //실행내용 }); 
$(document).ready == $().ready() == $()   // 모두 같다.

.get()
$('셀렉터').get(0) //셀렉트에 해당하는 0번째 object를 선택한다.

.filter()
filter('[title]*=닷넷]') --> title에 닷넷이라고 있는것을 선택
(and 와 같이 사용을 가능하다 .filter().filter().filter() 의 형식으로 필터링 하고 또 하고또하고가 가능)

.end()
 처음 선택작$('선택자') 로 이동한다.

.size() 
length와 같다 . $('input').size() --> 몇개의 input 테그가 있는지 반환 한다.

.slice()
 매체를 지정한다. $('input').slice(1,3) --> input 테그 1번째와 3번째껄 선택한다.
"1234".silce(-2) --> 오른쪽에서 2글자를 가져온다.(3/4)

.toggle(fn1,fn2)
fn1 과 fn2의 기능을 반복 적용 한다.(빈칸일경우 걍 show/hide 반복)

.toggleClass('클래스명')
클래스를 주었다가 뺐다가

.hover(fn1,fn2)
마우스 오버 아웃 기능  (fn1 오버 했을때 fn2 아웃했을때)

.one()
 한번만 실행할때 사용한다. .one('click',fn1); --> 처음 클릭했을때 fn1을 실행해라

.css()
.css('style','값')  스타일에 값을 적용한다.
.css('style') 해당 스타일의 값을 가져온다.

유틸리티 함수
JQuery.browser.version  --> 웹브라우져의 버젼을 출력한다.
JQuery.browser --> 브라우져를 출력하나;

 .next()
 다음 DOM을 선택한다.

.slideDown('slow',fn1)
blind와 같은 형태처럼 보여준다.(fn1은 생략가능)

.slideUp('slow',fn1)
slideDown의 반대(fn1은 생략가능)

.slideToggle
 slideup 상태일때는 down을 down 상태일때는 up을 한다. 

each
each(function(index) { });  --> index는 반복되는 + 값이 된다.
ex) $('p').each(function(i) { $(this).attr({'id':"id_"+index}); }); --> 모든 p테그에 id_순서 의 아이디값을 적용한다.
 
.text() 메소드
값을 가져오거나 text 값을 넣는다.html 테그가 들어가있으면 테그처리를 시키지 않고 그냥 출력한다.(변환)

.attr('src','값') 메소드
셀렉터의 src 속성 값을 변환한다. 

jquery 의 맵이란?
{속성:'값',속성:'값',....} 의 형식으로 입력이 가능한것을 맵이라고 한다.

removeAttr("속성")
속성값을 삭제 한다.

.val()
해당 셀렉터의 value 값을 반환한다.

.is("선택자")
선택자가 있는지 없는지를 체크 한다.
// is("p") --> p테그가 있는지 체크하고 있다면 true 반환 없다면 false 반환
// 예제 if($('body').children().is('form')) alert('폼테그 존재');  --> 바디안에 폼테그가 존재한다면 true

.not(셀렉터)
셀렉터를 제외한것을 가져온다.

$(셀렉터).empty()
셀렉터 안의 내용을 초기화 한다.

.append()
$('셀렉터').append(돔요소)  -->  셀렉터에 돔요소를 추가한다.
$(셀렉터1).appendTo('셀렉터2') 셀렉터 1의 dom을 셀렉터2에 넣는다.
예제) var dom = $("<p>새로운 문장</p>"); $('body').append(dom);

.insertAfter()
뒤에 dom 요소를 추가한다.
예제) $('<hr />').insertAfter('셀렉터')  셀렉터 뒤에 hr 테그를 추가해라

$(셀렉터).before()
셀렉터 전에 dom 을 추가한다.

$(셀렉터).wrap(dom or html)
셀렉터를 감싼다.
예제) $('h3').wrap('<u></u>'); --> h3 테그를 u 테그로 묶는다.

.clone() 
복사 한다.
$('#menu').clone().insertBefore("#submenu");  아이디 menu를 복사해서 submenu 앞에다가 붙인다. (유사 prependTo)
insertAfter(셀렉터) --> 셀렉터 뒤에 붙인다 (유사 appendTo)

remove() 
돔을 삭제한다.
$('셀렉터').replaceWith("변환값"); (셀렉터를 변환값으로 변환한다)

.height(), .width()  
셀렉터의 높이 넓이 값 구하이

.outerHeight(인자)  .outerWidth(인자)
인자는 true / false 로 true일 경우 마진을 포함한 크기를 가져온다.

.unbind()
bind 된것을 취소한다

.animate(애니메이션 속성)
애니메이션 속성을 준다.
.animate({속성:'값',...},속도);

.stop() 
현재 진행중인 effects 를 멈춘다.

ajax의 간편 방식
$('셀렉터').load('페이지url');  // ajax의 html 방식으로 로드해서 셀렉터에 넣는다