달력

07

« 2010/07 »

  •  
  •  
  •  
  •  
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
2010/07/28 03:00

jQuery - .hasClass() General Web2010/07/28 03:00

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" language="javascript" src="jquery-1.4.2.js"></script>
        <style type="text/css">
            p { margin: 8px; font-size:16px; }   
            .selected { color: red; }
            .highlight { background: yellow; }
        </style>
    </head>
    <body>
        <h4>.hasClass( className ): 엘리먼트에 하나 또는 그 이상의 클래스가 할당될 수 있다. HTML에서 표현은 아래와 같다.</h4>
        &lt;div id="mydiv" class="foo bar"&gt;</div>
        <h4>.hasClass() 메서드는 엘리먼트에 클래스가 할당되어 있으면 true를 반환한다. 다음의 예는 true를 반환한다.</h4>
        $('#mydiv').hasClass('foo')<br />
        $('#mydiv').hasClass('bar')
       
        <h4>매치된 엘리먼트에서 'selected' 클래스 찾기</h4>
        <p>Hello</p>
        <p class="selected">Goodbye</p>
        <div id="result1">First paragraph has selected class: </div>
        <div id="result2">Last paragraph has selected class: </div>
        <div id="result3">Some paragraph has selected class: </div>
       
        <script>
            $("div#result1").append($("p:first").hasClass("selected").toString());
            $("div#result2").append($("p:last").hasClass("selected").toString());
            $("div#result3").append($("p").hasClass("selected").toString());
        </script>
    </body>
</html>
저작자 표시 비영리 변경 금지

'General Web' 카테고리의 다른 글

jQuery - .hasClass()  (0) 2010/07/28
jQuery-.html()  (0) 2010/07/27
jQuery - .attr()  (0) 2010/07/27
jQuery - 엘리먼트에 클래스 추가/삭제 하기.  (0) 2010/07/26
ASP + AJAX(JSON)  (0) 2010/06/18
Javascript를 이용한 개발에서의 MVC 패턴  (2) 2009/02/11
Posted by -세티-
2010/07/27 09:15

jQuery-.html() General Web2010/07/27 09:15

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" language="javascript" src="jquery-1.4.2.js"></script>
        <style type="text/css">
            p { margin:8px; font-size:20px; color:blue; cursor:pointer; }
            b { text-decoration: underline; }
            button { cursor: pointer; }
        </style>
    </head>
    <body>
        <h4>.html(): 이것은 xml 문서에서는 이용할 수 없다. 매치된 엘리먼트 집합의 첫번째 엘리먼트가 포함하는 html을 반환</h4>
        $('div.demo-container').html();<br>
        &lt;div class="demo-container"&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="demo-box"&gt;Demonstration Box&lt;/div&gt; <= 결과값<br>
        &lt;/div&gt;<br><br>
       
        <p><b>Click</b> to change the <span id="tag">html</span></p>
        <p> to a <span id="text">text</span> node.</p>
        <p> This <button name="nada">button</button> does nothing.</p>

        <script>
            $("p").click( function() {
                var htmlStr =  $(this).html();
                $(this).text(htmlStr);
            });
        </script>

        <h4>.html( htmlString ): 매치된 엘리먼트가 포함하는 HTML을 문자열로 설정한다.</h4>
        $('div.demo-container').html();<br>
        &lt;div class="demo-container"&gt;<br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="demo-box"&gt;Demonstration Box&lt;/div&gt; <= 이 부분 교체<br>
        &lt;/div&gt;<br><br>

        <div class="demo-container">
            <div class="demo-box">Demonstration Box</div>
        </div>
        <script>
            $('div').html('<p>All new content. <em>You bet!</em></p>');
        </script>

        <h4>jQuery 1.4에서는 함수를 이용하여 값 바인딩이 가능</h4>
        <div class="demo-container1">
            <div class="demo-box">Demonstration Box</div>
        </div>
        <script>
            $('div.demo-container1').html( function() {
                var emph = '<em>' + $('p').length + ' paragraphs!</em>';
                return '<p>All new content for ' + emph + '</p>';
            });
        </script>

        <h4>각각의 div에 약간의 html을 추가</h4>
        <div></div>
        <div></div>
        <div></div>
        <script>
            $("div").html("<b>Wow!</b> Such excitement...");
            $("div b").append(document.createTextNode("!!!")).css("color", "red");
        </script>
    </body>
</html>
저작자 표시 비영리 변경 금지

'General Web' 카테고리의 다른 글

jQuery - .hasClass()  (0) 2010/07/28
jQuery-.html()  (0) 2010/07/27
jQuery - .attr()  (0) 2010/07/27
jQuery - 엘리먼트에 클래스 추가/삭제 하기.  (0) 2010/07/26
ASP + AJAX(JSON)  (0) 2010/06/18
Javascript를 이용한 개발에서의 MVC 패턴  (2) 2009/02/11
Posted by -세티-
2010/07/27 03:00

jQuery - .attr() General Web2010/07/27 03:00

출처: http://api.jquery.com/attr/

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" language="javascript" src="jquery-1.4.2.js"></script>
        <style type="text/css">
            em { color:blue; font-weight:boid; }
            div { color:red; }
        </style>
    </head>
    <body>
        <h4>.attr(attributeName): 애트리뷰트의 이름 가져오기</h4>
        <p>Once there was a <em title="huge, gigantic">large</em> dinosaur...</p>
        The title of the emphasis is: <div></div>

        <script type="text/javascript" language="javascript">
            var title = $("em").attr("title");
            $("div").text("title");
        </script>

        <h4>.attr(attributeName, value)</h4>
        <img id="greatphoto" src="http://www.dcollect.co.kr/data/rental/goods/small/DM2ST98_500.jpg" alt="brush seller">
        <script>
            /* 하나씩 애트리뷰트에 값 추가하기 */
            $('#greatphoto').attr('alt', 'Beijing Brush Seller');
            $('#greatphoto').attr('title', 'Photo by Kelly Clark');
        </script>

        <h4>.attr(map): 애트리뷰트-값 쌍의 맵</h4>
        <img id="greatphoto" src="http://www.dcollect.co.kr/data/rental/goods/small/DM2ST98_500.jpg" alt="brush seller">
        <script>
            /* 한번에 추가하기 */
            $('#greatphoto').attr({
                alt: 'Beijing Brush Seller',
                title: 'Photo by Kelly Clark'
            });
        </script>

        <h4>greatphoto ID값을 가지는 img 앨리먼트의 alt에 title을 결합하여 출력</h4>
        <img id="greatphotoA" src="http://www.dcollect.co.kr/data/rental/goods/small/DM2ST98_500.jpg" alt="brush seller">
        <script>
            /* 한번에 추가하기 */
            $('#greatphotoA').attr('title', function(){
                return this.alt + '- photo by kelly clark'
            });
        </script>

        <h4>모든 img 테그의 속성값 교체(소스내 주석 삭제)</h4>
        <img />
        <img />
        <img />
        <div><b>Attribute of Ajax</b></div>
        <script>
        /*
            $('img').attr({
                src: "http://www.dcollect.co.kr/data/rental/goods/small/7(1).jpg",
                title: "jQuery",
                alt: "jQuery Logo"
            });

            $("div").text($("img").attr("alt"));
        */
        </script>

        <h4>페이내의 div에 id 설정</h4>
        <div>Zero-th<span></span></div>
        <div>first<span></span></div>
        <div>second<span></span></div>
        <script>
            $('div').attr('id', function(arr){
                return "div-id" + arr;
            })
            .each(function() {
                $("span", this).html("(ID = '<b>" + this.id + "</b>')")
            });
        </script>
    </body>
</html>
저작자 표시 비영리 변경 금지

'General Web' 카테고리의 다른 글

jQuery - .hasClass()  (0) 2010/07/28
jQuery-.html()  (0) 2010/07/27
jQuery - .attr()  (0) 2010/07/27
jQuery - 엘리먼트에 클래스 추가/삭제 하기.  (0) 2010/07/26
ASP + AJAX(JSON)  (0) 2010/06/18
Javascript를 이용한 개발에서의 MVC 패턴  (2) 2009/02/11
TAG jquery
Posted by -세티-
<html>
    <head>
        <title></title>
        <script type="text/javascript" language="javascript" src="jquery-1.4.2.js"></script>
        <style type="text/css">
            p { margin:0; }
            .pStyle { color:red; }
            .pStyleb { color:blue; }
            .highlight { background:yellow; }
            .item-1 { color:green }
            .item-2 { color:maroon }
        </style>
    </head>
    <body>

        <h2>jQuery - .addClass(): 클래스 추가/삭제</h3>
        <h3>단일 엘리먼트의 클래스 추가/삭제</h3>
        <p>1234</p>
        <p>5678</p>
        <p>9012</p>

        <script language="javascript">
            $('p').addClass('pStyle');    //클래스 추가하기
            $('p').removeClass('pStyle').addClass('pStyleb');    //추가한 클래스 제거하고 다른 클래스 추가하기.
            $('p:last').removeClass('pStyleb').addClass('pStyle');    //마지막 p 엘리먼트의 클래스를 제거하고 다른 클래스 추가.
            $("p:last").addClass("highlight");
        </script>
   
        <h3>리스트형 엘리먼트에 클래스 추가/삭제</h3>
        <ul>
            <li>가나다</li>
            <li>라마바</li>
            <li>사아자</li>
        </ul>

        <script type="text/javascript" language="javascript">
        $('ul li').addClass ( function() {
            return 'item-' + $(this).index();
        });
        </script>

        <script type="text/javascript" language="javascript">
        $('ul li:last').removeClass( function(){
            return 'item-' + $(this).index();
        })
        $('ul li:last').addClass ( function() {
            return 'item-' + $(this).index();
        });
        </script>
    </body>
</html>
저작자 표시 비영리 변경 금지

'General Web' 카테고리의 다른 글

jQuery-.html()  (0) 2010/07/27
jQuery - .attr()  (0) 2010/07/27
jQuery - 엘리먼트에 클래스 추가/삭제 하기.  (0) 2010/07/26
ASP + AJAX(JSON)  (0) 2010/06/18
Javascript를 이용한 개발에서의 MVC 패턴  (2) 2009/02/11
26. 레코드 사이 이동하기  (0) 2008/12/22
TAG jquery
Posted by -세티-

저작자 표시 비영리 변경 금지
Posted by -세티-

저작자 표시 비영리 변경 금지
Posted by -세티-
2010/07/02 22:18

불행이 반복된다면... Thinking2010/07/02 22:18

그건 지니고 있는 내 마음속 어떤 것이 현실이 되기 때문이라고 봅니다.

불행한 사람에게 있어 행복이란 어색하고 불편하고 자신을 불안하게 만드는 존재니까요.

어색한 것 보다는 편한 것이 낫기 때문에 불행이 반복됩니다.

결국 행복해지려고 노력할수록 어색함은 강해지게 되고 결국 불행해 집니다.

단순하지만 불행이 반복된다면 어색한 무언가를 편하게 대하려는 노력을 해야 하고 그것을 내것으로 만들어야 합니다.

그래야 행복해 지니까요.

저작자 표시 비영리 변경 금지
Posted by -세티-