'Development > JavaScript | jQuery' 카테고리의 다른 글

jQuery PlugIn - 커스텀 스크롤 라이브러리  (0) 2016.06.19
jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
Plug In - TableDnD (테이블 드래그 앤 드롭)  (0) 2014.03.14

Navtive

$(this)[0].hasAttribute('name');

jQuery

$(this).is('[name]');//boolean
$(this).filter('[name="jkun"]');

개인적으로는 is 메소드를 더 선호

'Development > JavaScript | jQuery' 카테고리의 다른 글

jQuery PlugIn - 커스텀 스크롤 라이브러리  (0) 2016.06.19
jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
Plug In - TableDnD (테이블 드래그 앤 드롭)  (0) 2014.03.14

http://api.jquery.com/jQuery.when/


jQuery 에서 특정액션을 취하고 성공과 실패여부에 따라 기능을 수행해야 하는 경우가 있다.

이 경우에는 when() 메소드를 이용하면 보다 간편하고 명시적인 코드로 처리할 수 있다.

쿼리에서 CASE WHEN ... THEN 절과 비슷한 느낌이 든다.


사용은 다음과 같다.


$.when( alert('밥 먹고난 다음에 ') ).done(function() {
alert('커피한잔 허자');
});

그리고 추가적인 절차가 필요할때도 다음과 같다.

function work1() { /* action */ }
function work2() { /* action */ }
$.when( work1, work2 ).done(function() {
alert('End!');
});

그리고 done() 과 then() 의 차이가 있다.

처리후 콜백이 "성공" 과 ("성공","실패") 로 나누어 진다고 생각하면 된다.

function work() { /* action */ }
function trueWork() { /* action */ }
function falseWork() { /* action */ }
$.when ( work ).then( trueWork, falseWork );


'Development > JavaScript | jQuery' 카테고리의 다른 글

jQuery PlugIn - 커스텀 스크롤 라이브러리  (0) 2016.06.19
jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
Plug In - TableDnD (테이블 드래그 앤 드롭)  (0) 2014.03.14

출처 : http://egloos.zum.com/survival/v/464374


1. 노드 찾기

 - 태그 이름으로 노드 찾기 :  $("태그이름"),   $("선택자")

 - 클래스 이름으로 노드 찾기 : $(".클래스이름")

 - ID로 노드 찾기 : $("선택자")

 - 속성으로 노드 찾기 : $("[속성이름=값]")

 - 찾은 요소 개수 구하기 :  .size()    ,     .length

 - 찾은 요소 n번째 접근하기 : .eq(index)    ,    .each(function(index){});

 - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

 - 찾은 요소에서 특정 자식요소만 찾기 :  .find("선택자")

2. 자식 노드 찾기 

 - 전체 자식 노드 찾기
    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()
    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

 - n번째 자식 노드 접근
    -- $("선택자").children().eq(N)
    -- $("선택자").children(":eq(N)")

 - 첫번째 자식 노드 접근
    -- $("선택자").children().first()
    -- $("선택자").children(":first")
    -- $("선택자").children().eq(0)
    -- $("선택자").children(":eq(0)")

 - 마지막 자식 노드 접근
    -- $("선택자").children().last()
    -- $("선택자").children(":last")
 
3. 부모 노드 찾기
 
 - 바로 위의 부모 : $("선택자").parent()

 - 모든 부모 찾기
    -- $("선택자").parents()  모든 부모
 - 모든 부모 중 선택자에 해당하는 부모 찾기
    -- $("선택자").parents("선택자")

4. 형제 노드 찾기

 - 이전 형제 노드 찾기
    -- $("선택자").prev()
    -- $("선택자").prevAll("선택자");

 - 다음 형제 노드 찾기
    -- $("선택자").next()
    -- $("선택자").nextAll("선택자");

5. 노드 생성,추가,이동,삭제

 - 생성
    -- $("노드")
    -- $("선택자").html("<노드>...")
    -- $("노드").clone()

 - 추가
    -- $기준노드.append($추가노드)
    -- $추가노드.appendTo($기준노드)
    -- $기준노드.prepend($추가노드)  
    -- $추가노드.prependTo($기준노드)
    -- $추가노드.insertBefore($기준노드)
    -- $기준노드.before($추가노드)
    -- $추가노드.insertAfter($기준노드)
    -- $기준노드.after($추가노드)

 - 삭제
    -- $("선택자").remove()

 - 이동
    -- $기준노드.append($이동노드)  
    -- $이동노드.appendTo($기준노드)
    -- $이동노드.insertBefore($기준노드)
    -- $기준노드.before($이동노드)
    -- $이동노드.insertAfter($기준노드)   
    -- $기준노드.after($이동노드)

6. 텍스트 노드 다루기

 - 텍스트 노드 생성 : $("텍스트")
 
 - 텍스트 노드 추가 : $기준노드.append("텍스트")

 - 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")

'Development > JavaScript | jQuery' 카테고리의 다른 글

jquery attribute (속성 존재여부)  (0) 2016.01.21
$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
Plug In - TableDnD (테이블 드래그 앤 드롭)  (0) 2014.03.14
PlugIn - jQuery UserAgent 플러그인  (0) 2013.11.27

에이 너무 까먹어서 포스팅한다. 짜증나네;;


jQuery Form Reset


$('#formID')[0].reset(); //ㅅㅂ


나도 구글링하다 여기[http://mytory.net/archives/365] 보고 찾음; 감사합니다.^^;

'Development > JavaScript | jQuery' 카테고리의 다른 글

$.when()  (0) 2015.04.13
노드 다루기  (0) 2014.12.29
jQuery Form Reset  (0) 2014.05.13
Plug In - TableDnD (테이블 드래그 앤 드롭)  (0) 2014.03.14
PlugIn - jQuery UserAgent 플러그인  (0) 2013.11.27
PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15

테이블 관련 플러그인 심플하고 그리 무겁지도 않은편입니다.

저도 현재 아주 유용하게 잘쓰고 있습니다.

아래 코드는 기본적으로 구현하는 코드입니다.

$(document).ready(function() { // Initialise the table $('셀렉터').tableDnD(); });


링크 : jQuery 테이블 드래그앤드롭 플러그인

브라우저 IE10 이상부터는 유저에이전트 문자열에서 MSIE 문자열을 반환하지 않는다.

해서 이로 인해 브라우저의 버젼별 분기하여 수행할 작업이 있을때 문제가 발생할 수 있다.

이전 포스팅했던 jquery-ua 플러그인을 조금 수정했다. 10이상부터는 브라우저 엔진으로 분기를 하여

인터넷 익스플로러 버전을 감별해 내는 것이다.

허접한 함수라도 이해부탁드립니다. 사용하실때는 댓글을 다는 센수~!

jquery-ua.zip


(function ($) {
 
    $.ua = $.ua || {
        platform: {},
        browser: {},
        engine: {}
    };
 
    var ua = navigator.userAgent.toLowerCase(),
        p = $.ua.platform,
        b = $.ua.browser,
        e = $.ua.engine,
        u = 'unknown';

    //alert(navigator.userAgent);
 
    // detect platform
    p.name = (/(win|mac|linux|iphone|ipod|android)/.exec(ua) || [, u])[1];
    p[p.name] = true;
 
    // detect browser
    b.name = (/(msie|firefox|chrome|safari|opera)/.exec(ua) || [, u])[1]; // chrome must be tested before safari
    b[b.name] = true;
    b.version = (b.unknown)? 0: /(?:msie |firefox\/|chrome\/|version\/)(\d+(\.\d+)*)/.exec(ua)[1];
 
    // detect engine
    e.name = (/(trident|webkit|gecko|presto)/.exec(ua) || [, u])[1]; // webkit must be tested before gecko
    e[e.name] = true;
    e.version = (e.unknown)? 0: /(?:trident\/|rv:|webkit\/|presto\/)(\d+(\.\d+)*)/.exec(ua)[1];
 
    // add classes to html element
    $('html').addClass([
        p.name,
        b.name,
        b.name + parseInt(b.version, 10),
        e.name,
        e.name + parseInt(e.version, 10)
    ].join(' '));
 
})(jQuery);

function CastUserAgent(AgentCase) {
	var c = [], i, j;
	var d = 0;
	for (i in $.ua) {
		if (i === 'data' || i === 'init') {
			continue;
		}
		for (j in $.ua[i]) {
			d = 0;
			if (i === AgentCase) {
				if (d != 0) {
					c[c.length] = ',';
				}
				c[c.length] = '\'' + j + '\'' + ':\'' + $.ua[i][j] + '\'';
				d++;
			}
		}
	}
	c.join();
	return eval('({' + c.toString() + '})');
}

아래 CastUserAgent 함수를 추가하였다. 파라메터를 문자열 형태로 'platform, browser, engine'

로 넘겨주면 name, version 을 반환한다.

아래와 같이 호출하여 사용하면 된다.

var bw = CastUserAgent ('browser').name;
alert(bw);



window.open 메소드를 통해서 팝업을 띄우면서 크로스 브라우징 하다보니;;

여간 짜증나는게 아니다;

그리고 인터넷 익스플로러 11부터는 msie 문자열도 뱉어내지 않게 되다보니.. 별것도 아닌거에 공수를

들이는 엿같은 상황이..


해서 jQuery 를 인용해서 유저에이전트 플러그인을 좀 커스터마이징해서 살짝 함수 두어개 얹었다.

해서 테스트를 하다보니.. 잘된다..ㅋㅋㅋ


		$(document).ready(function () {
			window.moveTo(0, 0);
			
			var w = $(document).width();
			var h = $(document).height();
			window.resizeTo(w, h);

			var mw = window.outerWidth - window.innerWidth;
			var mh = window.outerHeight - window.innerHeight;
			window.resizeBy(mw, mh);

			if (isIEVer() < 9) {				
				mw = $(document).outerWidth() - $(window).width();
				mh = $(document).outerHeight() - $(window).height();				
				window.resizeBy(mw, mh);
			}
		});

테스트브라우저 : 인터넷 익스플로러 7,8,9,10,11

OS : XP , Windows 7, Windows 8

'Development > JavaScript | jQuery' 카테고리의 다른 글

PlugIn - jQuery UserAgent 플러그인  (0) 2013.11.27
PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29

<iframe id="TargetFrame"></iframe>


1. 속성변경

$('#TargetFrame').attr('src', 'http://www.jkun.net');

$('#TargetFrame').attr({

  'src' : 'http://www.jkun.net',

  'width' : '100',

  'height' : '100',

  'scrolling' : 'no'

});


2. 프레임내 문서객체 요소 접근

$('#TargetFrame').contents().find('div.target-panel');


3. 부모 요소에 접근

- $('#TargetFrame', parent.document);

- parent.$('#TargetFrame');

'Development > JavaScript | jQuery' 카테고리의 다른 글

PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29
유용한 jQuery 플러그인  (0) 2010.07.29

jQuery 로 스크롤을 제어할 수 있는 플러그 인이다.

보여줄 화면이 작거나 사용자 편의 제공에서의 UI 구성시에 도움이 되겠다.


<script type="text/javascript" src="jquery-1.7.2.min.js" comment="왠만하면 최신버전으로~^^"></script>

<script type="text/javascript" src="jquery.scrollTo-min.js" ></script>

<script type="text/javascript">

    $('대상').scrollTo( {top:'-=100px', left:'+=100'}, 800 );

</script>


참고 : http://demos.flesler.com/jquery/scrollTo/


jquery.scrollTo-min.js.zip


'Development > JavaScript | jQuery' 카테고리의 다른 글

PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29
유용한 jQuery 플러그인  (0) 2010.07.29

jQuery 쿠키를 사용예제다.

jQuery 1.0.x 기준으로 제공된다. 참고 URL 은 http://archive.plugins.jquery.com/project/Cookie

자꾸 까먹어버릇해서 쓸데마다 찾는것도 짜증나니,

포스팅을 해놓다가 느낀건데.. jQuery 를 주 라이브러리로 선택했으면 수시로 플러그인을 살펴봐야겠다는

생각과.. 제대로 사용하려면 HTML과 CSS 를 보다 더 자세하게 알아야 하며,

기본인 네이티브가 좋은 바탕이 되주어야 겠단 생각이 더욱든다

$.cookie('Key'); /* 쿠키 로드 */
$.cookie('Key','Value'); /* 쿠키 생성 */
$.cookie('Key','Value', { expires : 7 }); /* 쿠키의 유효기간 7일*/
$.cookie('Key', null, { expires : -1 }); /* 쿠키제거 */

'Development > JavaScript | jQuery' 카테고리의 다른 글

PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29
유용한 jQuery 플러그인  (0) 2010.07.29
출처 : http://blog.naver.com/loudon23/30084204939

jQuery 플러그인(http://plugins.jquery.com/)은 등록된것만 4,500개에 이른다.

다 어디에 쓰이는 플러그인인지 써보지 않고서는 알 방법이 없지 않나. 나도 뭐가 있는지 모르는 상태에서 list 플러그인 찾다가 누군가 올려 놓은 유용한 jQuery 플러그(http://marcgrabanski.com/article/list-of-useful-jquery-plugins)리스트라는 글을 발견하고 옮겨 놨다.

'Development > JavaScript | jQuery' 카테고리의 다른 글

PlugIn - jquery-user-agent (유저에이전트)  (0) 2013.11.15
window.resize 크로스 브라우징  (0) 2013.11.15
jQuery 아이프레임, iframe  (0) 2013.08.20
jQueryPlugIn - jQueryScroll  (0) 2013.01.22
jQuery Cookie  (0) 2012.07.29
유용한 jQuery 플러그인  (0) 2010.07.29

+ Recent posts