• 로그인 함 해보끄나?

  • Sarangnamu.net June 17, 2003
    Home Login Profile Study Open Project Q&A Google Code
    jquery
    Last Modify : 27 January, 2011(02:38)
    - LINKS > 이벤트 : http://api.jquery.com/category/events/ > 이펙트 : http://api.jquery.com/category/effects/ > 표현들 : http://docs.jquery.com/Selectors > XPath : http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors > XPath 1.0 tutorial : http://zvon.org/comp/r/tut-XPath_1.html#Pages~ListQ20XofQ20XXPaths - 한글자료 > jQuery 스프링 노트 : http://countryman.springnote.com/pages/1957700 > jQuery example : http://www2.infoplace.co.kr/bbs/list.php?id=inside3&category=3 > mobile java & jQuery cafe : http://cafe.naver.com/specialj.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=1614 > jQuery cafe : http://cafe.naver.com/javamaker.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=236 > jQuery Tutorial by Taeyo.NET : http://taeyo.net/Columns/List.aspx?SEQ=29&IDX=1 - jquery를 이용하기 위해서는 다음과 같이 script 를 추가해야 한다.
    <script type="text/javascript" src="jquery.js"></script>
    
    - jquery를 이용하기 위해서는 다음과 같이 ready 을 기점으로 시작된다. 여기서 ready는 onload 와 동일하다. 즉 페이지를 다운받은 후 로드가 완료된 시점을 이야기 한다. 추가적으로 이벤트에 대한 설명은 이곳을(http://api.jquery.com/category/events/#ready.28_fn_.29) 확인한다.
    $(document).ready(function(){
    	// Your code here
    });
    
    - 자 이제는 ready 이벤트 내에 a tag에 클릭 이벤트를 추가해 보도록 한다.
    $(document).ready(function(){
    	$("a").click(function(event){
    		alert("As you can see, the link no longer took you to jquery.com");
    		event.preventDefault();
    	});
    });
    
    - 완성된 코드를 확인해보도록 하자.
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    	$("a").click(function(event){
    		alert("As you can see, the link no longer took you to jquery.com");
    		event.preventDefault();
    	});
    });
    </script>
    </head>
    <body>
    	<a href="http://jquery.com/">jQuery</a>
    </body>
    </html>
    
    - HTML 코드 추가/삭제하기 > 먼저 CSS 를 추가하거나 삭제하는 방법을 알아 보도록 하자. 아래의 css 는 a.test 를 bold 처리하는 역할이며 이를 동적으로 추가하거나 삭제하는 방법이다.
    <style type="text/css">
    	a.test { font-weight: bold; }
    </style>
    
    $("a").addClass("test");
    
    $("a").removeClass("test");
    
    - 이펙트 처리 > jquery 에서는 이펙트 효과를 제공하는데 다음과 같이 형식으로 이용하면 된다. 이펙트에 대한 정보는 다음의 경로에서 얻을 수 있다.http://api.jquery.com/category/effects/
    $("a").click(function(event){
    	event.preventDefault();
    	$(this).hide("slow");
    });
    
    - callback and functions 콜백 함수를 이용할수 있는 방법을 설명 하겠다 먼저 인자없이 호출하는 방법은 아래와 같고
    $.get('myhtmlpage.html', myCallBack);
    
    인자 있이 호출하는 방법은 아래와 같다.
    $.get('myhtmlpage.html', function(){
    	myCallBack(param1, param2);
    });
    
    - jquery 는 XPath selector 를 지원한다. 예를 들자면 div > ui a 식은 div 테그 내에 ui 나 a를 말한다. 자세한 정보는 http://docs.jquery.com/DOM/Traversing/Selectors#XPath_Selectors 에서 확인할 수 있다. > 기본적인 css exression 을 확인 해보도록 하자. * 모든 형태의 엘레먼트 E 해당 형태의 엘레먼트 E:nth-child(n) 배열 형태의 엘레먼트 중 n 번째 위치한 엘레먼트 E:first-child 지정한 부모를 가지는 첫 번째 자식 엘레먼트 E:last-child 지정한 부모를 가지는 마지막 자식 엘레먼트 E:only-child 지정한 부모를 가지는 유일한 자식 엘레먼트 E:empty 자식을 가지지않는 엘레먼트 E:enabled disabled 되지 않은 엘레먼트 E:disabled disabled 된 엘레먼트 E:checked chekced 된 엘리먼트 E:selected selected 된 엘리먼트 E.warning class 값이 'warning' 인 엘리먼트 E#myid id 값이 'myid' 인 엘리먼트 E:not(s) s 와 일치하지 않는 엘레먼트 E F e 엘레먼트 내부에 f 엘레먼트 E > F e 엘레먼트 의 자식 엘레먼트 인 f E + F e 엘레먼트 바로 앞에 f 엘레먼트 E ~ F e 엘레먼트 앞에 f 엘레먼트 E,F,G e, f, g 모두 선택 E[@foo] e 엘레먼트 내 어트리뷰트 foo 를 가질때 E[@foo=bar] e 엘레먼트 내 어트리뷰트 foo 가 bar 값을 가질때 E[@foo^=bar] e 엘레먼트 내 어트리뷰트 foo 에 값이 bar 로 시작할 때 E[@foo$=bar] e 엘레먼트 내 어트리뷰트 foo 에 값이 bar 로 끝날 때 E[@foo*=bar] e 엘레먼트 내 어트리뷰트 foo 에 값 중 bar 가 있을 때 E[@foo=bar][@baz=bop] e 엘레먼트 내 어트리뷰트 foo 값이 bar 고 어트리뷰트 baz 값이 bop 일 때 > 이번에는 xpath 를 이용해서 직접 html 에 엘레먼트들을 선택 해보도록 하자.
    $("/html/body//p")			// html 내 body 내에 모든 p 엘레먼트
    $("body//p")				// body 내 모든 p 엘레먼트
    $("p/../div")				// p 내에 div 들
    
    $("//input[@checked]")		// 모든 input 테그 중 checked 된 엘레먼트
    $("//a[@ref='nofollow']")	// 모든 a 테그 중 ref 어트리뷰트 가 'nofollow' 인 것
    
    $("//div[p]")				// p를 가지고 있는 div 들
    $("//div[p/a]")				// p내에 a 를 가지고 있는 div 들
    
    $("p:last")					// 마지막 위치에 p
    
    $("p:first")				// 첫번째 위치에 p
    $("p:eq(0)")				// 첫번째 위치에 p
    
    $("p:lt(5)")				// 현재 위치가 5 번째 보다 클 때 lt ==> < 임 < 는 < 임
    
    $("p:gt(2)")				// 현재 위치가 2 번째 보다 작을 때 gt 는 > 임 > 는 > 임
    
    > 이번에는 custom 형태의 선택 방법이다. :even Selects every other (even) element from the matched element set. :odd Selects every other (odd) element from the matched element set. :eq(0) and :nth(0) 위에 있음 :gt(N) 위에 있음 :lt(N) 위에 있음 :first eq(0) 과 동일 :last 선택할 엘레먼트에 마지막 위치 :parent 선택한 엘레먼트를 자식으로 가지는 모든 엘리먼트 :contains('test') 입력된 값을 담고 있는 모든 엘리먼트 :visible 모든 visible 되고 있는 엘레먼트 :hidden 모든 hidden 되고 있는 엘레먼트 예)
    $("p:first").css("fontWeight","bold");
    $("div:hidden").show();
    $("/div:contains('test')", this).hide();
    
    > 이번에는 form 요소를 선택하는 방법이다. :input Selects all form elements (input, select, textarea, button). :text Selects all text fields (type="text"). :password Selects all password fields (type="password"). :radio Selects all radio fields (type="radio"). :checkbox Selects all checkbox fields (type="checkbox"). :submit Selects all submit buttons (type="submit"). :image Selects all form images (type="image"). :reset Selects all reset buttons (type="reset"). :button Selects all other buttons (type="button"). :file Selects all <input type="file">. - 자 이제 실제로 사용하는 방법에 대해서 알아보도록 하자. 먼저 예를 위해서 간단한 폼내에 요소를 모두 초기화 하는 코드를 만들어 보도록 한다. 아래 해당 코드는 먼저 #reset 에 해당하는 div 의 id 가 reset 인 element 를 선택시(click) form 내에 모든 데이터를 초기화 하도록 작성된 코드이다.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> New Document </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    
    	$("#reset").click(function() {
    		$("form").each(function() {
    			this.reset();				// 폼에 모든 데이터를 초기화 한다.
    		});
    	});
    });
    </script>
    
    </head>
    <body>
    
    <form>
    	<input type="text" name="hello" value="" />
    	<input type="text" name="hello2" value="" />
    	<input type="text" name="hello3" value="" />
    </form>
    
    <div id="reset" style="cursor:pointer">reset</div>
    
    </body>
    </html>
    
    이런식으로 jquery 를 이용하여 동적인 코딩이 가능해진다. - 이번에 ajax 을 혼용해서 사용해보도록 하자. 아래의 코드는rating 아이디를 가진 엘레먼트에 "Please rate : " 문자열을 입력 한 뒤 a 테그를 가진 숫자 1 부터 5까지를 입력 한다. 이후 a 테그를 click 하게 되면 ajax 를 통해 데이터를 가져온 뒤 rating 의 id를 가진 테그에 데이터를 입력하게 된다. 이때 데이터는 xml 로 구성 되어 있고 function(xml) 식으로 받은 xml 데이터를 dom/xpath 형태로 "average" 와 "count" 에 텍스트 데이터를 읽어 오게 된다. - rate.php 는 http://jquery.bassistance.de/rate.phps 에서 받을 수 있다.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> Using Ajax </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javascript" src="./jquery.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
    	// generate markup
    	$("#rating").append("Please rate: ");
    
    	for ( var i = 1; i <= 5; i++ )
    	$("#rating").append("<a href='#'>" + i + "</a> ");
    
    	// add markup to container and apply click handlers to anchors
    	$("#rating a").click(function(e) {
    		// stop normal link click
    		e.preventDefault();
    
    		// send request
    		$.post("rate.php", {rating: $(this).html()}, function(xml) {
    			// rate.php 에 데이터를 요청한 뒤 데이터를 xml이라는 인자명으로 가져온다.
    			// format and output result
    
    			$("#rating").html(
    				"Thanks for rating, current average: " +
    				$("average", xml).text() +	// 받아온 데이터는 DOM + XPath 형태로 가져오게 된다. ajax 이므로 refresh 는 일어나지 않는다.
    				", number of votes: " +
    				$("count", xml).text()
    			);
    		});
    	});
    });
    </script>
    
    </head>
    <body>
    	<div id="rating"></div>
    </body>
    </html>
    
    - 이번에는 애니메이션 효과에 대해서 설명 하겠다. a 테그에 click 이벤트를 toggle 하는데 이 때 hide, show 를 시켜 준다. 타겟이 되는 대상은 스타일 시트 정보인 class 가 stuff 인 클래스를 찾아서 적용 시킨다.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title> Using Animation </title>
    <meta name="Generator" content="EditPlus">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    	$("a").toggle(function(){
    		$(".stuff").hide('slow');
    	},function(){
    		$(".stuff").show('fast');
    	});
    });
    </script>
    <style type="text/css">
    .stuff{border:1px solid #ececec; height:100px;}
    </style>
    </head>
    <body>
    	<a href="#">animate</a>
    	<div class="stuff">show me the money</div>
    
    </body>
    </html>
    

    Comment


    입력하3 1503256849



    Locations of visitors to this page