잊지 않겠습니다.

wrong javascript in jquery
<div id="mylinks">
    <a href="#" onclick="if(confirm('Follow the link?')) location.href='/someUrl1';">Link1</a>
    <a href="#" onclick="if(confirm('Follow the link?')) location.href='/someUrl2';">Link1</a>
</div>

good javascript in jquery
<div id="mylinks">
    <a href="/someUrl1">Link1</a>
    <a href="/someUrl2">Link2</a>
</div>

<script type="text/javascript">
    $("mylinks a").click(function() {
        return confirm('Floow the links?');
    });
</script>

Javascript를 사용할 때 '튀지 않는' Javascript를 만드는 방법
  * Javascript를 전혀 사용하지 않으면서 응용프로그램이나 기능을 구축해얒 한다. 실행 가능한 기능들을 채택하고 일반적인 HTML/CSS의 한계를 받아드린다.
  * 원 markup을 건드리지 않는 범의 한에서 Javascript를 사용한다. 그리고, 되도록 Javascript를 별도의 파일로 분리하자. 개별적으로 인식이 가능하고, 관리할 수 있는 방법을 제시해야지 된다.

저작자 표시 비영리 변경 금지
신고
Posted by xyzlast Y2K
TAG html, jquery
http://www.okjsp.pe.kr/seq/140133

jQuery의 경우 내가 이번년도에 본 내용중에서 가장 쇼킹한 녀석이였는데...
강의마저 나를 쇼킹하게 만들고 있다. -_-
저작자 표시 비영리 변경 금지
신고
Posted by xyzlast Y2K
TAG jquery, WEB
소스보면서 역시 긁적긁적.

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
  <script type="text/javascript">
  /*
  $(document).ready(function(){
    $("#dialog1").dialog({
        modal:true,
        open:function() {
            $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").remove();           
        }
    });   
  }); 
  */
  $(function() {
      $("#clickMe").click(
          function(){
          $("#dialog1").dialog({modal:true,
              open:function() {
                $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar-close").hide();// .remove();           
              },
              width:300
          });
          });   
  });
 
 
 
  </script>
</head>
<body style="font-size:62.5%;">

<div id="button">
    <a href="#" id="clickMe">Click Me</a>
</div>

<div id="dialog1" title="SYNCmail" style="display:none;text-align:center">   
    <img src="ajax-loader.gif"/><br/>
    잠시만 기다려주세요.
</div>

</body>
</html>

신기한 내용이 너무나 많음.;
저작자 표시 비영리
신고
Posted by xyzlast Y2K
TAG html, jquery, WEB
회사에서 디자이너분이 필요하다고 해서 예제 간단히 뚝딱뚝딱.

<html>
<head>
<script src="jquery-1.2.6.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('#clickMe1').click(function(){
$('#info').load('load.html #movie', function() {
$(this).hide().appendTo('context').slideDown();
});
$(this).attr("src", 'images\\00buy_05.gif');
$('#clickMe2').attr("src", "images\\00buy_19.gif");
});
$('#clickMe2').click(function() {
$('#info').load('load.html #music', function() {
$(this).hide().appendTo('context').slideDown();
});
$(this).attr("src", 'images\\00buy_21.gif');
$('#clickMe1').attr("src", "images\\00buy_03.gif");
});
$('#clickMe3').click(function(){
$('#info').load('load.html #poem', function() {
$(this).hide().appendTo('context').slideDown();
});
$(this).html("Changed Text");
});
});
</script>
<script type="text/javascript" language="javascript">
function show_alert(){
alert('show');
}
</script>
</head>

<body>
<img id="clickMe1" src="images\00buy_03.gif" onclick="javascript:show_alert();"/>
<img id="clickMe2" src="images\00buy_19.gif"/>
<a href="#" id="clickMe3">Click Me3</a>
<div id="info">
<div id="context">
</div>
</div>
</body>
</html>

재미있기도 하고, 너무나 동작하는 것이 신기한 jquery. ^^
저작자 표시 비영리
신고
Posted by xyzlast Y2K
집에와서 와이프가 근무나간사이에 간만에 버닝되어서 다보면서 따라해보기 한 4시간정도. 
따라해보면서 내가 해보고 싶은 내용들을 하나둘씩 넣어보는 것으로 무엇을 어떻게 할 수 있을지에 대한 생각들이 많이 들게 되는 것 같다. 

좀더 UI 적으로 사용자에게 편하게 하는 방법은 무엇일까.. 라는 생각도 들고 무엇보다도 나도 이런 것을 할 수 있다는 생각이 들면서 왠지 너무 기쁘다는 생각이 드는 이유가 무엇일까. ^^

그리고, 오늘 꽤나 괜찮은 툴을 하나 발견. 
Mac에서의 Killer S/W인 TextMate의 windows 버젼인 E-TextEditor 인데. 이거 사용법도 쉬우면서 너무나 간편한 인터페이스를 많이 가지고 있는 것 같다. Multi Select 변경이 가장 인상적인데. 좀더 사용을 해봐야지 될듯. 

오늘 한 내용들 간단하게 정리. 

1. toggleClass(), toggle() 
: 오늘 회사에서 잠시 사용해서 그전까지 조금 어색했던 UI를 해결한 방법. css단까지 toggle로 보낼 수 있는 jQuery의 다양한 확장성에 정말 놀랄수밖에 없었다.;
<script type="text/javascript">
$(function() {
$('a').click(function() {
//$('#box').toggle(4000);
$('#box').toggleClass('border');
});
$('p').click(function() {
$(this).toggleClass('highlight');
})
});
</script>

2. animate 기능
: 단순히 style의 변경이 아닌, style의 점진적인 변경이 이루어지기 때문에 animation이 나타나게 된다. 화려한 UI를 꾸밀때에 도움이 될 것 같고, 무엇보다 menu같은 것에서 menu를 선택하고 menu를 확장하는데에 도움을 줄 수 있다. 

<script type="text/javascript">
$(function() { 
$('#container img').animate({
"opacity" : .5
})
$('#container img').hover(function() {
$(this).stop().animate({ "opacity" : 1 });
console.log("message");
}, function(){
$(this).stop().animate({"opacity" : .5})
});
$('#container img').click(function() {
$(this).animate( { "opacity" : 1 } );
console.log("click") ;
});
});
</script>

3. mouse event 기능
: 기본적으로 hover() 함수를 이용해서 mouse 에 대한 over를 잡아서 선택 가능하다. event를 function으로 잡아서 mouse의 좌표를 얻어서 작업하는 것은 windows application에서 동작하는 것과 거의 유사하게 움직이게 된다.

<script type="text/javascript">
$(function() { 
var offsetX = 20;
var offsetY = 10;
$('a').hover(function(e) {
var href = $(this).attr('href');
$('<img id="largeImage" src="' + href + '" alt="image"/>')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX)
.appendTo('body');
}, function(){
$('#largeImage').remove();
});
$('a').mousemove(function(e) {
$('#largeImgae')
.css('top', e.pageY + offsetY)
.css('left', e.pageX + offsetX);
});
});
</script>

4. ajax 기능
: 오늘 본 내용들은 다른 html을 읽어서 그 안에 있는 내용을 긁어서 보여주는 것으로 매우 단순하긴 했지만, 다른 파일에 있는 항목을 긁어오는 것은 하나의 파일에서 너무나 많은 내용을 담고 있을때, 나눠주는 기능으로도 사용 가능해보인다. 조금 만 더 응용을 한다면 web service에서 얻어오는 결과를 다시 보내주는 것도 가능해보인다. 

<script type="text/javascript">
$(function() {
$('a').click(function() {
$('#info').load('index7.html #movies', function() {
$(this).hide()
.appendTo('#container')
.slideDown(1000);
alert($(this).id);
});
});
});
</script>


보면 볼 수록 내용들이 많아지고 재미있는 기능들이 많아진다는 느낌이 든다. 
좀 더 해보고 싶고, 조금만 더 공부를 해서 javascript가 지원되는 tistory에서 한번 사용해볼까.. 하는 욕심도 생기고. 여러모로 공부하면 할수록 즐겁다는 느낌이 드는 framework이다. 

구조도 한번 봐봐야지 될 것 같은데... 
아직은 너무나 방대해서 구조까지는 볼 생각도 못하고 훝어보는 기분이 드는 것이 조금은 아쉽기만 하다.;
저작자 표시 비영리
신고
Posted by xyzlast Y2K
TAG jquery, WEB

jQuery 기본

기타 자료들 2009.01.29 18:06

자료를 뒤지다가 jQuery에 대해서 잘 정리된 자료가 있어서 업어온 정보. 

(원본 : http://funnygangstar.tistory.com/category/jQuery)


1. jQuery를 잘(?) 사용하기 위한 기본 환경 셋팅

- 아래의 사이트에서 
jQuery 라이브러리(jquery-1.2.6.js)를 다운로드 받는다.

  http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.js&can=1&q=


- VisualStudio
에서 jQuery의 인텔리전스 기능을 사용하기 위해서는 아래의 순서대로 실행한다.

  1) VisualStudio 2008 SP1을 설치한다.

  2) VisualStudio의 패치를 실시한다.

      http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736

  3) jQuery-vsdoc.js 파일을 다운로드한다. ( ~vsdoc.js 파일은 js 파일의 인텔리전스를 위한 도움말 파일임)

      http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6-vsdoc.js&can=1&q=



2. jQuery
의 시작
  
jQuery를 사용하기 위해서는 로 시작하거나 jQuery로 시작하면 된다.

  ) $(“div”)   or    jQuery(“div”)

페이지가 로드 되었을때 특정한 jQuery를 실행시키기 위해서는 아래의 세가지 방법이 있을 수 있으며 마지막 방법이

 일반적으로 가장 많이 사용된다.

  1) window.onload = function() {

            alert('aaa');

            }

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

            alert('aaaa');

            });

  3) $(function(){

            alert('aaaa');

            });

일반적인 HTML 페이지의 로딩이벤트에서는 첫번째 방법처럼 사용하게되고 단점은 단 한번밖에는 사용할 수 없다는 단점이 있습니다만두번쨰나 세번째 처럼 jQuery를 사용하게 되면 페이지 로드 이벤트시 여러 개의 함수를 호출할 수 있다는 장점이 있습니다.



3. jQuery
로 엘리먼트 선택하기
3-1 알아두어야할 기본 사항
  조작하려는 
HTML 엘리먼트 선택하는 방법

  1) a => <a> 태그로 시작하는 모든 엘리먼트를 선택한다.

    ) $(“a”)

  2) #ID => ID에 지정한 id를 가지는 모든 엘리먼트를 선택한다.

    ) $(“div#myID)

  3) .CLASS => CLASS에 지정한 class를 가지는 모든 엘리먼트를 선택한다.

    ) $(“tr.myClass)

3-2 
기본형 선택방식
  
1) 엘리먼트 사이에 스페이스를 두면 하위의 엘리먼트를 선택하게 된다.

    ) $(“ul li a”)  è ul 태그 하위에 li 태그 하위에 있는 태그를 선택한다.

     주의할 것은 첫번째 나오는 엘리먼트(위에서는 ul 태그)라고 해서 전체 HTML에서 최상위에 있는 엘리먼트를 지칭하지는

       않는다는 것이며또한 스페이스는 하위 엘리먼트를 선택하는 것이지 바로 아래의 엘리먼트를 선택하는 것이 아니다

    )

        <body>

          <div id="all">

            <a href="http://www.naver.com">네이버링크</a>

            <div>

              <div><b><a href="http://www.daum.net">5-2</a></b></div>

            </div>

          </div>

        </body>

      와 같은 HTML이 있을 경우 $(“div a”)라고 한다면 위에서 두가지 <a> 태그 모두를 선택하게 된다.

2) 자주 쓰이는 셀렉터

   - *  => 모든 엘리먼트 => $("ul li *")

   - E  => 태그명이 E인 모든 엘리먼트  => $(“div”)

   - E F  => E 엘리먼트의 자손이면서 태그명이 F인 모든 엘리먼트  => $(“div a”)

   - E > F  => E의 바로 아래 자식이면서 태그명이 F인 모든 엘리먼트  => $(“div > a”)

   - E:has(F)  => 태그명이 F인 엘리먼트를 하나 이상 가지는 모든 엘리먼트  =>  $(“ul li ul:has(li)”)

   - E.C  =>  클래스명 C를 가지는 모든 엘리먼트, E를 생략하면 *.C와 동일  =>  $(“ul:myList”)

   - E#I  =>  아이디가 I인 엘리먼트 엘리먼트, E를 생략하면 *#I와 동일  =>  $(“div#someID”)

   - E[A]  =>  어트리뷰트 A를 가지는 엘리먼트 E  => $(“img[src”)

   - E[A=V]  =>  값이 V인 어트리뷰트 A를 가지는 엘리먼트E  =>  $(“table[id=languages]”)

   - E[A^=V]  =>  값이 V로 시작하는 어트리뷰트 A를가지는 엘리먼트  => $(“table[id^=lan])

   - E[A$=V]  =>  값이 V로 끝나는 어트리뷰트 A를 가지는 엘리먼트  =>  $(“table[id$=ges])

   - E[A*=V]  =>  값에 V가 들어있는 어트리뷰트 A를가지는엘리먼트  => $(“table[id*=g])

3) 하나의 $()에 콤마(,)를 사용하여 여러 요소를 접근할 수 있습니다.

   div와 p요소를 선택하고자 한다면

   $('div,p')



3-3 
위치 기반 선택 방식

  - B:first  => 페이지에서 첫번째 B요소와 매칭

  - B:last  =>  페이지에서 마지막 B요소와 매칭

  - B:first-child  =>  첫번째 B요소와 매칭

  - B:last-child  =>  마지막 B요소와 매칭

  - B:only-child  =>  B요소가 하나일 경우 B요소와 매칭

  - B:nth-child(n)  =>  n번째 B요소와 매칭(n:one-based)

  - B:nth-child(odd|even)  =>  /짝수 B요소와 매칭

  - B:nth-child(Xn+Y)  =>  X배수 + Y인 B요소와 매칭(n:zero-based)

  - B:even  =>  짝수 B요소와 매칭

  - B:odd  =>  홀수 B요소와 매칭

  - B:eq(n)  =>  n번째 B요소와 매칭(n:zeno-based)

  - B:gt(n)  =>  n번째 초과 B요소와 매칭

  - B:lt(n)  =>  n이하 B요소와 매칭


* :nth-child 
선택자는 1부터 시작되는 반면에 :eq, :gt, :lt 선택자는 0부터 시작됩니다.



3-4 
사용자 정의형 선택 방식

  - B:animated  =>  jQuery 애니메이션 메서드로 애니메이션이 활성화된 B요소와 매칭

  - B:button  => 버튼 형태(button, input[@type=submit], input[@type=reset], input[@type=button])의 B요소와 매칭

  - B:checkbox  =>  input[@type=checkbox]인 B요소와 매칭

  - B:enabled  =>  활성화 상태인 B요소와 매칭

  - B:file  =>  input[@type=file]인 B요소와 매칭

  - B:header  =>  h1~h6인 B요소와 매칭

  - B:hidden  =>  비가시 상태 또는 input[@type=hidden]인 B요소와 매칭

  - B:image  =>  input[@type=image]인 B요소와 매칭

  - B:input  =>  입력 요소(input, select, textarea)인 B요소와 매칭

  - B:not(f)  =>  :(콜론)으로 시작하는 f를 제외한 B요소와 매칭

  - B:parent  =>  자식요소가 있는 B요소와 매칭

  - B:password  =>  input[@type=password]인 B요소와 매칭

  - B:radio  =>  input[@type=radio]인 B요소와 매칭

  - B:reset  =>  input[@type=reset]인 B요소와 매칭

  - B:selected  =>  option요소 중 현재 선택된 B인요소와 매칭

  - B:submit  =>  input[@type=submit]인 B요소와 매칭

  - B:text  =>  input[@type=text]인 B요소와 매칭

  - B:visible  =>  가시 상태인 B요소와 매칭



4. jQuery의 몇가지 특색
  
1) 체이닝 호출

  - jQuery는 메소드를 연속으로 호출 할 수 있다.

   ) $(‘#div’).slideup(2000).css("background-color", "#fff0ff").click(function(){ alert(‘completed’); });

2) 유틸리티 함수 지원

  - $. 을 사용하면  jQuery에서 지원하는 유틸리티 함수를 사용할 수 있다.

   ) $.get(),    $.ajax() …….

3) 엘리먼트 추가/삭제

  - jQuery를 사용하면 손쉽게 HTML 엘리먼트를 추가 삭제할 수 있다. appent(), appentTo(), insertAfter()등의 메소드 사용

   ) $('#chk').append('<input id=Checkbox6 type=checkbox checked=true />');

4) HTML 어트리뷰트 변경

  - HTML 엘리먼트의 어트리뷰트를 변경할 수 있다.

   ) $('#Img1').attr('width', '200');

 5) value 값과 text 

  - HTML 엘리먼트의 value 어트리뷰트를 조작하기 위해서는 val()/val(메소드를 사용하며,

    엘리먼트 사이에 있는 Text값 (: <label>텍스트값</label>)을 조작하기 위해서는  text(), text(메소드를 사용한다

저작자 표시 비영리
신고
Posted by xyzlast Y2K
jQuery에서는 다양한 방법으로 DOM 객체를 선택할 수 있다. Tag Name, Class, Name, Id 와 같이 document. 으로 선택할 수 있는 모든 객체를 선택 가능하다. 

I. Tag Name을 이용한 객체 선택 방법

1. $('TAG NAME') 을 이용한 전체 선택

2. $('TAG NAME:(POSITION)')을 이용한 first, last 객체 선택
$('li:first')
$('li:last')
$('li:even')
$('li:odd')

3. nth-child(index) 를 이용한 array와 비슷한 방법으로 객체 선택
$('li:nth-child(3)')

4. attribute를 이용한 객체 선택
$('li a[title=title]')

$(function() {
    $('a').css('color', 'Black');
    $('li a[title=title]').css('color', 'Red');
    $('li:nth-child(3)').css('color', 'Green');
    $('li:first').css('color', 'Yellow');
});



II. DOM 객체의 추가 및 삭제

appendTo, remove 를 통해서 새로운 object의 추가가 가능하다. 각 객체에 대한 선택이 매우 자유로운 편이다.

$(function() {
    var i = $('#nav li').size() + 1;
    console.log(i);

    $('a#add').click(function() {
        $('<li>' + i + '</li>').appendTo('#nav');
        i++;
        console.log(i);
    });

    $('a#remove').click(function() {
        $("#nav li:last").remove();
        i--;
        console.log(i);
    });
});

저작자 표시 비영리
신고
Posted by xyzlast Y2K
TAG jquery, WEB

jQuery를 이용한 css 변경

선택된 DOM object에서 .css(attribute, value) 로 변경이 가능하다.
신기하고 재미있는 기능들이 많은 것 같다. 여러모로.

<html>
    <head>
    <title>This is my first web file</title>
    <script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>   
    <script type="text/javascript" language="javascript">
        function append_table_context() {
            $("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
        }       
    </script>
    <style type="text/css">
        #box
        {
            background : red;
            width : 300px;
            height : 400px;
        }
        p a
        {
            color:Red;
        }
    </style>   
    <script type="text/javascript" language="javascript">
        $(function() {
            $('a').click(function() {
                $('#box').slideDown();
                $('p a').css('color', 'blue');
            });
        });  
    </script>       
    </head>
    <body>      
        <div id="box" style="display:none"></div>
        <a href="#">Click Me!</a>
       
        <br/>
       
        <p>
         * Sizzle CSS Selector <a href="#">Engine</a> - v0.9.3Copyright 2009, The Dojo Foundation*  Released under the MIT, BSD, and GPL Licenses.*
           More information: http://sizzlejs.com/
        </p>
       
        <input id="btnInput" type="button" value="click me" onclick="javascript:append_table_context();"/>       
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tbody id="tableContext">
            </tbody>
        </table>
    </body>
</html>

Day 3까지 보니. 코드를 어떻게 적어야지 될지 약간의 감이 오는 것 같다. ^^
<html>
    <head>
    <title>This is my first web file</title>
    <script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>   
    <script type="text/javascript" language="javascript">
        function append_table_context() {
            $("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
        }       
    </script>
    <style type="text/css">
        #box
        {
            background : red;
            width : 300px;
            height : 300px;
            position : relative;
        }
        p a
        {
            color:Red;
        }
    </style>   
    <script type="text/javascript" language="javascript">
        $(function() {
            $('#box').click(function() {
                $(this).animate({
                    "left" : "300px"
                    }, 4000);      
            $(this).animate( { "width" : "50px" } );
            });
        });
    </script>       
    </head>
    <body>      
        <div id="box"></div>
        <a href="#">Click Me!</a>
    </body>
</html>

일단, jQuery에 대한 기본적인 function 사용법을 제대로 익히는 것이 가장 필요한 일인듯.

저작자 표시 비영리
신고
Posted by xyzlast Y2K

http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-video-series/

에서 재미있는 비디오 강습을 해서 짬짬히 살펴보고 있는 중이다.
가장 많이 사용되고 있는 javascript framework 중 하나이고, asp.net과 가장 같이 잘 사용될 수 있는 javascript framework이기 때문에 더욱더 관심이 가는 내용.

<html>
    <head>
    <title>This is my first web file</title>
    <script type="text/javascript" language="javascript" src="jquery-1.3.1.min.js"></script>   
    <script type="text/javascript" language="javascript">
        function append_table_context() {
            $("#tableContext").append("<tr><td>F.Name</td><td>L.Name</td></tr>");
        }       
    </script>
    <style type="text/css">
        #box
        {
            background : red;
            width : 300px;
            height : 400px;
        }
    </style>   
    <script type="text/javascript" language="javascript">
        $(function() {
            $('a').click(function() {
                $('#box').fadeOut('fast');
            });
        });  
    </script>       
    </head>
    <body>      
        <div id="box">
        <a href="#">Click Me!</a>
        </div>
        <br/>
               
        <input id="btnInput" type="button" value="click me" onclick="javascript:append_table_context();"/>       
        <table>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
            </tr>
            <tbody id="tableContext">
            </tbody>
        </table>
    </body>
</html>

하나의 박스가 사라지는 내용과 table에 하나씩 추가하는 내용이 있는 소스.
저작자 표시 비영리
신고
Posted by xyzlast Y2K


티스토리 툴바