button 으로 버튼을 만들어 놓으면, form 문 안에 있을 경우, 기본적으로 submit 을 하게 됩니다.


이것을 막고 따로 원하는 작업만 하도록 하는 방법이 있습니다.



event.preventDefault();





$("#del_img1").click( function(event) {
            event.preventDefault();
            alert('a');
    });

submit 되지 않고 alert 동작이 일어납니다.



'웹 개발 > jQuery' 카테고리의 다른 글

기본 동작 막기  (0) 2013.02.15
버튼으로 창 닫기 window.close()  (0) 2013.01.31
jQuery AJAX 맛보기  (0) 2013.01.28
jqueryUI datepicker 날짜 설정하기  (1) 2013.01.22
[jQuery] 2. 셀렉터  (3) 2013.01.09
[jQuery] jQuery 1. 기본 중에 기본  (0) 2013.01.08


Posted by 똑똑한 영장류




jQuery AJAX 사용법을 살펴 보겠습니다.



가장 간단한 것.


$("#div1").load(url);


url 의 파일에 접속해서 그 내용을 가져와 id="div1" 의 내용을 채웁니다.


remote.txt 의 내용은


나는 remote.txt 다.


정도로 만들어두고,


테스트 페이지를 작성합니다. 물론 jquery.js 포함하는 등 준비는 마쳐야겠죠. 아래는 핵심 내용만 표시합니다.


<button >AJAX 실행</button>

<div id="div1">AJAX load 실행전</div>


<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("remote.txt");
  });
});
</script>


를 작성해두면, button 을 클릭했을 때, remote.txt 를 읽어와서 <div id="div1">을 변경합니다.


<div id="div1">나는 remote.txt 다.</div>


이렇게 되죠.


소스보기 하면, 바뀐 후의 소스가 아니라, 처음 내용이 표시됩니다.

볼 수 있는 방법이 없을까요? 아시면, 좀 알려주세요..







'웹 개발 > jQuery' 카테고리의 다른 글

기본 동작 막기  (0) 2013.02.15
버튼으로 창 닫기 window.close()  (0) 2013.01.31
jQuery AJAX 맛보기  (0) 2013.01.28
jqueryUI datepicker 날짜 설정하기  (1) 2013.01.22
[jQuery] 2. 셀렉터  (3) 2013.01.09
[jQuery] jQuery 1. 기본 중에 기본  (0) 2013.01.08


Posted by 똑똑한 영장류



jqueryUI 에 포함되어 있는 datepicker 의 사용법을 알아봅니다.



<input type="text" id="datepicker1" /> 으로 자리잡아주고, 스크립트에서 초기화를 해 주면 끝입니다.


<script> 
    $(function() {   
        $( "#datepicker1" ).datepicker();
    }); 
</script>


이렇게만 하면, 데이트피커 사용할 수 있습니다.


기본 날짜 표시 포맷이 우리나라와 맞지 않아 아래처럼 옵션을 줄 수 있습니다.


$( "#datepicker1" ).datepicker( "option", "dateFormat", "yy-m-d" );



input 박스에 클릭하면, 달력이 뜨고, 날짜를 선택하면, input 박스에 값이 입력됩니다.


그럼, 데이터피커로 잡혀있는 input 에 날짜값을 입력하려면 어떻게 해야할까요?

스크립트로 설정을 해 줄 수 있습니다.

페이지 로딩이 끝난 후, #datepicker1 의 값을 2013년 1월 22일 로 설정하고 있습니다.


<script> 
    $(function() {   
        var x = new Date(2013, 1, 22, 0, 0, 0, 0);
        $( "#datepicker1" ).datepicker( "setDate", x );
    }); 
</script>


자바스크립트의 Date object를 만들어 setDate 옵션에다 인자로 넣어줍니다.


끝...


'웹 개발 > jQuery' 카테고리의 다른 글

기본 동작 막기  (0) 2013.02.15
버튼으로 창 닫기 window.close()  (0) 2013.01.31
jQuery AJAX 맛보기  (0) 2013.01.28
jqueryUI datepicker 날짜 설정하기  (1) 2013.01.22
[jQuery] 2. 셀렉터  (3) 2013.01.09
[jQuery] jQuery 1. 기본 중에 기본  (0) 2013.01.08


Posted by 똑똑한 영장류

 jQuery 2. 요소 선택 방법 - 셀렉터


 jQuery는 뭐?

선택하고 조작하고, 선택하고 조작하고...


그러니, 우선 선택하는 방법을 정리해봅니다.


셀렉터를 이용해서 HTML 태그 요소를 선택하는겁니다.


1. 태그 셀렉터

$("h1").

html 문서내의 <h1>...</h1> 을 선택합니다.


<h1>헤드라인</h1>


2. id 셀렉터

$("#title").

html 태그요소중에 id="title" 인 요소를 선택합니다.


<h1 id="title">헤드라인</h1>


만약 h1 태그중에 id가 title 인 요소를 선택하려면, 아래와 같이 셀렉터를 작성할 수 있습니다.


$("h1#title").


3. class 셀렉터

$(".title").

html 태그요소중에 class="title" 인 요소를 선택합니다.


<h1 class="title">헤드라인</h1>


만약 h1 태그중에 class가 title 인 요소를 선택하려면, 아래와 같이 셀렉터를 작성할 수 있습니다.


$("h1.title").


4. 자손 셀렉터

자손이라고 하는 것은 특정 태그 내에 포함되어 있는 모든 태그 요소를 의미합니다.


<ul id="grand">

    <li>아들 1</li>

    <li>딸 1</li>

    <li>

            <ul id="parent">

                  <li>손자1</li>

                  <li>손녀1</li>

            <ul>

    </li>

</ul>


위 구조에서 아들1, 딸1, 손자1, 손녀1 모두 최상위 ul의 자손인거죠..ㅡ.ㅡ

위의 모든 li 요소들을 선택하기 위한 셀렉터는 아래와 같이 작성할 수 있습니다.


$("ul#grand li").


아이디가 grand 인 ul 의 하위에 있는 모든 li 요소를 선택한다는 의미입니다.


5. 자식 셀렉터

자식은 바로 아래에 있는 요소들을 의미합니다.


$("ul#parent > li").


이렇게 셀렉터를 작성하면, 바로 아래 단계의 손자1, 손녀1만 선택할 수 있습니다.

이건 예가 그닥 좋지는 않군요..ㅡ.ㅡ



5. 그룹 셀렉터

그룹은 여러개를 묶어놓으면 그룹인거죠.

쉽게 콤마(,)를 이용해서 나열해 주는 방법으로 선택할 수 있습니다.


$("h1, h2").


7. 유니버설 셀렉터

특정 요소 하위의 모든 요소를 선택할 수 있는 방법입니다.


$("ul#grand *").


8. 인접 셀렉터

인접은 바로 옆이라는 의미죠. 가장 가까이 있는 요소를 말합니다.


$("#first + li").


위와 같이 작성하면, id가 first 인 요소 다음에 가장 먼저 오는 li 요소를 선택할 수 있습니다.


9. first-child 셀렉터

말그대로 첫번째 자식을 선택할 수 있습니다.


$("li:first-child").


li는 ul의 자식요소인데, li가 여러개 있을 경우, 첫번째 li 요소를 선택합니다.



10. 간접셀렉터

특정 요소 뒤에 나타나는 모든 요소를 선택할 수 있습니다.


$("#second ~ li").


11. only-child 유사클래스 셀렉터

$("li span:only-child")


예)

<li><span>제이쿼리</span></li>

li 요소 안에 span 요소가 온리 하나뿐이면 선택됩니다. 자식이라곤 span 밖에 없는 li요소..


12. nth-child 유사클래스 셀렉터

$("li:nth-child(2)").

ul 하위 li들 중에 2번째 li를 선택합니다.


$("li:nth-child(even)").

ul 하위 li들 중에 짝수째 li를 선택합니다.


$("li:nth-child(odd)").

ul 하위 li들 중에 홀수째 li를 선택합니다.


$("li:nth-child(3n)").

ul 하위 li들 중에 3의 배수번째 li들을 선택합니다.


13. last-child 유사클래스 셀렉터

마지막 자식, 막내를 선택합니다. 


$("li:last-child").


14. not 유사클래스 셀렉터

$("li:not(:first-child)").

not 으로 지정한 특성을 제외한 li요소들을 선택합니다.


15. empty 유사클래스 셀렉터

$("li:empty").


<li></li> 처럼 속 내용이 빈 요소를 선택합니다.

속성은 html 태그에 더해진 id, class 등을 의미합니다.


<li id="first" class="number" >블라블라</li>


id도 속성이고 해당 value는 first, class도 속성이고 해당 value 는 number 인거죠.



$("[속성]").


$("[id]").

html 태그 요소중에 id 라는 속성을 가진 요소들을 선택합니다.



$("[속성='값']").


$("[id='first']").

html 태그 요소중에 id값이 first 인 요소들을 선택합니다.


$("[속성!='값']").


$("[id=!'first']").

html 태그 요소중에 id값이 first 가 아닌 요소들을 선택합니다...만, 위와 같이 사용할 수 없고 반드시 해당 html태그를 명시해줘야합니다.


$("li[id=!'first']").


위 예는 li 요소중에 id가 first가 아닌 것들을 선택합니다.


$("[속성^='값']").

속성이 특정 문자열로 시작되는 요소들을 선택합니다.


$("[title^='f']").

태그중에 title 속성의 값이 f로 시작하는 태그 요소들을 선택합니다.

<li title='first'>블라블라</li>


$("[속성$='값']").

속성이 특정 문자열로 끝나는 요소들을 선택합니다.


$("[title$='d']").

태그중에 title 속성의 값이 d로 끝나는 태그 요소들을 선택합니다.


<li title='second'>블라블라</li>


$("[속성*='값']").

속성이 특정 문자열을 포함하는 요소들을 선택합니다.


$("[title$='u']").

태그중에 title 속성의 값이 u를 포함하는 태그 요소들을 선택합니다.


<li title='fourth'>블라블라</li>


위 속성 셀렉터를 중복으로 사용할 수 있습니다.


title속성이 f 로 시작하고, u를 포함하는 요소를 선택하고 싶으면 아래와 같이 할 수 있습니다.


$("[title^='f'][title$='u']").



여기까지 내용은 CSS 에서 요소를 선택하는 방법과 같습니다. CSS 작성할 때 위와 같은 방법으로 요소들을 지정해 줄수 있습니다. 아! CSS3까지 포함된 내용입니다.



jQuery 자체 필터


그리고, jquery 자체 필터라는게 있습니다. jquery 가 지원하는 셀렉팅 방법이지요.


- first / last  필터


$("li:first") / $("li:last")


위와 같이 첫번째 li 요소와 마지막 li 요소를 선택할 수 있습니다.

first-child, last-child 와 의미가 비슷하죠? 하지만, 같은 방법을 굳이 만들었을리가..ㅡ.ㅡ


first-child와 last-child는 공통된 부모 요소 내에서 첫번째, 마지막을 골라내주는 것이고,

first, last 필터는 부모와 관계없이 페이지내에 존재하는 모든 태그들 중에서 첫번째, 마지막을 골라내주는 것입니다.


- even, odd 필터


$("li:even") / $("li:odd")


nth-child에서 even, odd 를 사용하는 것과 비슷하지만, 이 필터 역시 공통 부모의 의미가 없이 전체 태그들을 대상으로해서 짝수번째, 홀수번째를 골라내줍니다.



- eq, gt, lt 필터

eq 는 같다, gt는 뭐보다 크다, lt는 뭐보다 작다...의미입니다.


같은 종류의 태그가 여러개 있을 경우,

eq 는 몇번째 태그를 지정해주거나,

gt 는 몇번째 태그보다 큰것들을 모두 골라내거나,

lt 는 몇번째 태그보다 작은것들을 모두 골라내줍니다.


크고 작음을 어떻게 구분할까요?

같은 태그가 여러개 있을 경우, 첫번째 태그는 0번, 그 이후 1,2,3... 등으로 인덱스가 붙습니다. 인덱스가 0번부터 시작함에 주의해야합니다.

이 필터를 사용할 때는 이 인덱스 번호를 이용합니다.


$("li:eq(2)")

여러개의 li 요소중에 3번째 li요소를 선택합니다.


$("li:gt(2)")

여러개의 li 요소중에 인덱스 번호가 2보다 큰 li요소를 선택합니다. 4번째, 5번째...등등 골라내주는거죠.


$("li:lt(2)")

여러개의 li 요소중에 인덱스 번호가 2보다 작은 li요소를 선택합니다. 1번째, 2번째 li요소를 골라내주는거죠.


이 세가지 필터 모두 역시 공통 부모와 무관하게 전체 태그요소들을 대상으로 동작합니다.


- header  필터

$(":header") 로 사용해서 h1~h6 태그를 선택할 수 있습니다.


- contains / has 필터

contains 는 특정 문자열을 포함하고 있는지를 확인해서 선택하고, has 는 특정 태그를 포함하고 있는지를 확인해서 선택합니다.


<li>제이쿼리</li>의 경우, $("li:contains("제이")") 로 선택할 수 있습니다.


<li><strong>제이쿼리</strong></li> 는 strong이라는 태그를 포함하고 있으니까, 태그를 기준으로 선택하려면, 아래와 같이 has를 사용할 수 있습니다.


$("li:has(strong)").



- parent 필터

값을 가지고 있는 자식태그를 선택해 줍니다.


$("li:parent") 라고 작성하면, li 들 중에, 값을 가지고 있고, 어떤 태그의 자식 태그인 요소를 선택해줍니다.


li는 무조건 ul 태그의 자식 태그니까, 자식 태그라는 요건은 만족하고, 값을 가지고 있느냐를 더 확인을 하겠지요.



<ul>

    <li>아들 1</li>

    <li>딸 1</li>

    <li></li>

</ul>


위 예에서는 아들1을 포함한 li 태그와 딸1을 포함한 li태그만이 선택됩니다.


이상! jqury 의 셀렉터에 대해 정리해봤습니다.

표로 아름답게 정리는 못 했지만, 필요할때 찾아볼 수 있는 용도로 포스팅합니다.


휴...




'웹 개발 > jQuery' 카테고리의 다른 글

기본 동작 막기  (0) 2013.02.15
버튼으로 창 닫기 window.close()  (0) 2013.01.31
jQuery AJAX 맛보기  (0) 2013.01.28
jqueryUI datepicker 날짜 설정하기  (1) 2013.01.22
[jQuery] 2. 셀렉터  (3) 2013.01.09
[jQuery] jQuery 1. 기본 중에 기본  (0) 2013.01.08


Posted by 똑똑한 영장류

jQury 기본 중에 기본



jQuery는 javascript 로 작성하는 것보다 좀 더 쉬운 방법으로 코드를 작성할 수 있게 해 주는 javascript 라이브러리입니다.


본부는 http://jquery.com 입니다.


jquery를 다운받아서 작성하고자 하는 html 페이지의 head 태그 내에 아래와 같이 포함시켜주면 이후, jquery 사용이 가능합니다.



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



jquery는 기본적으로 특정 html 요소를 선택하고, 그 선택된 요소를 조작하는 방법으로 사용이 됩니다.


<H1>헤드라인</H1>


H1이라는 요소를 찾아서 글씨 색깔을 바꾸는 작업을 jQuery로 한다면, 아래와 같이 할 수 있습니다.


먼저 html 코드중에서 H1 태그를 선택합니다.


$("H1")


맨 앞의 $ 는 '나는 jQuery임'을 나타내는 것입니다.


그리고, 선택한 요소의 색깔을 바꿉니다.


$("H1").css("color","red");


jQuey의 대부분은 이런 모습을 하게 됩니다. 선택하고, 조작하고...


선택하고, 조작하고...


선택하는 방법과 조작하는 방법을 알면, jQuery의 거의 대부분을 마스터하게 되는거지요.



예로, 간단한 소스를 아래와 같이 작성을 해 봅니다.



 <!DOCTYPE html>
<html>

<head>

<title>연습</title>

<meta charset="utf-8" />

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

</head>

<body>

<h1>헤드라인</h1>

</body>

</html>


그럼, jQuery 코드는 어디에다가 둬야할까요?


jQuery도 기본 자바스크립트(javascript)이기 때문에 <script>태그로 둘러싼 곳에 코드를 위치시키면 됩니다.


<script>

jquery 코드들......

</script>


그럼, 이 script 태그 블럭을 어디에 둬야할까요?


script 태그 블럭은 주로 head 태그 내에 둡니다만, body 태그 내의 아무곳에 둬도 상관이 없습니다.



<!DOCTYPE html>
<html>

<head>

<title>연습</title>

<meta charset="utf-8" />

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


<script type="text/javascript">

$("h1").css("color","red");

</script>


</head>

<body>

<h1>헤드라인</h1>

</body>

</html>


head 태그에 주로 둔다니, 위와 같이 작성을 해 봤습니다.


테스트 결과는??? 헤드라인 이라는 글씨의 색이 바뀌지 않았습니다!!!


왜 일까요??


웹 브라우저는 위 소스를 읽어들여서 위에서부터 처리를 합니다.

브라우저 입장에서 보면, title을 연습으로 설정하고, 문자셋을 utf-8로 설정을 하고, jquery.js를 사용가능하도록 포함시키고, jquery로 작성된 파란색 코드를 실행을 하게 됩니다.

jquery 코드에 따르면, h1 태그를 찾아서 선택한 후, 글씨색을 빨간색으로 바꿔야되는데, 브라우저는 h1 태그를 발견을 못하게 됩니다. 아직 아래쪽에 있는 <h1>헤드라인</h1>을 읽지 않았기 때문입니다.


위 파란색 코드 부분을 <h1>헤드라인</h1>다음 줄로 옮기고 테스트를 해 보면, 헤드라인이라는 글씨가 빨간색으로 바뀝니다.


jquery....이런식이면 곤란한데...무슨 방법이 없냐?


이런 문제를 해결하기 위해서 웹페이지 전체를 다 읽어들이고 나서 jquery 스크립트가 실행되도록 할 필요가 있습니다.


문서가 다 읽혀졌는지 확인하고, 준비가 되면, 실행을 시키도록 해....라고 jquery에게 방법을 알려줍시다.




<!DOCTYPE html>
<html>

<head>

<title>연습</title>

<meta charset="utf-8" />

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


<script type="text/javascript">
$("document").ready( function() {
   $("h1").css("color","red");
});

</script>


</head>

<body>

<h1>헤드라인</h1>

</body>

</html>



$("document").ready();


jquery 는 선택하고 조작하고 라고 했지요?

위에서는 document 를 선택했습니다. 현재의 웹페이지 문서를 의미합니다.

ready는 말그대로 준비가 되었다..는 뜻이겠네요.


페이지 소스 다 읽었냐? 준비됐냐?

준비됐다면, 내가 지정하는 이 함수를 실행하도록 해! 라고 jquery에게 일러두고 함수를 하나 만들어 줍니다.


그 이름없는 함수는


function() {
   $("h1").css("color","red");
}


입니다. ready() 안에 고스란히 들어가면 됩니다.



이렇게 최종 위 글상자 안의 빨간색 코드가 완성되었습니다.


틀을 살펴보면, 아래 틀에 서로다른 코드들이 들어가게 됩니다.


$("document").ready( function() {


....


});


이 모양을 잘 기억해 두세요.ㅎㅎ

 

추가내용: 위 document ready 코드는 아래와 같이 간단한 형태로 사용이 가능합니다.

 

$( function() {

....


});


jquery 기본 중에 기본. 여기까지 입니다.


다음에는 요소를 선택하는 방법에 대해서 정리를 해 보겠습니다.


그 다음에 조작하는 방법...그 다음에는 간단한 것들 구현해보기...

뭐 이런 순서로... 이 모든 계획은 시간이 나면...이라는 조건하에서..ㅋㅋ





'웹 개발 > jQuery' 카테고리의 다른 글

기본 동작 막기  (0) 2013.02.15
버튼으로 창 닫기 window.close()  (0) 2013.01.31
jQuery AJAX 맛보기  (0) 2013.01.28
jqueryUI datepicker 날짜 설정하기  (1) 2013.01.22
[jQuery] 2. 셀렉터  (3) 2013.01.09
[jQuery] jQuery 1. 기본 중에 기본  (0) 2013.01.08


Posted by 똑똑한 영장류

 

홈페이지를 제작하면서 jQuery 라이브러리를 사용하고 싶을 때, 두 가지 방법이 있습니다.


첫째, jquery.com 가서 원하는 버전의 jquery 라이브러리를 다운받아서 제작하는 홈페이지의 호스팅 서버로 업로드해서 아래의 코드로 직접 포함시키는 방법


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


둘째, 매번 다운받아서 서버에 올리는 번거로움에서 벗어날 수 있는 방법일수 있는데ㅛㅇ, 구글이 가지고 있는 jquery 라이브러리를 아래의 코드로 포함시키는 방법이 있습니다.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


위의 주소가 이상하죠?? //ajax.googleapis.com 으로 시작되는데요. http:를 붙여야하나..라고 생각하다가 조금 검색을 해보니, 아래 링크에서 도움되는 글을 발견했습니다.


http://encosia.com/3-reasons-why-you-should-let-google-host-jquery-for-you/#protocolless


읽으러가기 귀찮으신 분들을 위해 간단히 설명을 하자면...

리소스 캐싱 문제와 관련해서, 브라우져는 http 와 https 를 통해서 가져온 같은 리소스를 다르게 취급을 한다고 합니다. 다시말하면, 이전에 http:// 로 접속해서 파일을 읽어와서 나중을 위해 디스크에 캐싱해 두었더라도, https:// 로 같은 파일에 접근할 경우, 같은 파일임에도 불구하고 캐싱해 둔 파일을 이용하지 않는다고 하네요. http:// 일때는 src="http://...." 로 작성하고, https// 일때는 src="https://..."로 작성해야하는 비효율적인 요소가 발생하게 될거 같은데요. 위 jquery 예처럼, 앞에 http: 나 https: 를 생략하고 지정을 해주면, 현재 문서가 지정된 프로토콜이 http 인지, https 인지에 따라, 적합한 리소스를 이용하게 된다고 합니다.


더 간단히하면, http, https 두 가지 경우 모두에 대응하기 위해 // 만으로 주소 지정을 해 줄 수 있다... 정도로 이해하면 될듯합니다.




구글이 제공하는 다른 라이브러리들은 구글 개발자 사이트에서 자세히 살펴볼 수 있습니다.


https://developers.google.com/speed/libraries/devguide


이상!



Posted by 똑똑한 영장류