XE Tips 는 제가 XE 공홈에 쓴 XE 관련 유용한 팁들입니다. 기능개선은 공홈에 안 적어둔 XE 유용 개선팁들입니다.
유용정보는 외부 검색을 통해 알아낸 소스등을 기재해둔 곳입니다.
버그 신고내역들은 XE 사용하다가 발견한 버그 패치방법들로, Core Issue 에 기록해뒀기에 XE 에 적용이 되었을 가능성이 있겠죠
제가 쓴 글들에 대해 퍼가실때는 꼭 출처를남겨주시고.. (다만 플래시뷰 기반이기에 퍼가기는조금 힘들 수 있겠죠 ^^;)
타회원의 글들도 적혀있는 출처를 같이 꼭 기재해주세요
출처 | TickTalk |
---|---|
출처URL | http://phpdev.tistory.com/entry/Jquery-%EC%85%80%EB%A0%89%ED%84%B0-%EB%B0%8F-%ED%95%A8%EC%88%98-%EC%82%AC%EC%9A%A9%EB%B2%95 |
은근히 필요한 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 방식으로 로드해서 셀렉터에 넣는다