블로그 이미지
Magic_kit
study 관련자료를 한곳으로 자기 개발 목적으로 재태크 재무 관리 목적으로 일상생활의 팁을 공유 하기 위하여 블로그를 개설 하였습니다.

calendar

 «  » 2025.1
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

Category

Recent Post

Recent Comment

Archive

2009. 11. 11. 11:01 .Net Project/Jquery 1.3.2

42장 JQueryManipulation 검색된 요소 복사 (Clone)

반응형
 

Clone.htm 
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> 검색된 요소 복사하기  </title>

    <style type="text/css">

        #menu { background-color:Blue; color:White;}

        #submenu { background-color:Silver; }

        #content { height:100px;}

       

    </style>

    <script src="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //[!] 상단 메뉴 복사(Clone)해서 하단메뉴 추가 (Append)

            $('#menu').clone().insertBefore('#submenu');

            $('#menu').clone().insertAfter('#submenu');

            //원래하단 메뉴가 있는 위치
            $('#menu').clone().appendTo('#submenu');

            $('#menu').clone().prependTo('#submenu');

 

        });

       

    </script>

</head>

<body>

    <h3>jQuery UI provides abstractions</h3>

    <div id="menu">

        Home About

    </div>

   

    <div id="content">

        상단 메뉴를 아래 하단에 메뉴 복사

    </div>

   

    <div id="submenu">

        여기는 하단 메뉴 들어 오는 곳

    </div>

   

</body>

</html> 

WebJQuery.rar




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

44장 JQueryManipulation 검색된 요소 완전제거 (Remove)  (0) 2009.11.11
43장 JQueryManipulation 검색된 요소 변경하기 (ReplaceWith)  (0) 2009.11.11
41장 JQueryManipulation 검색 요소 특정 태그로 감싸기 (Wrap)  (0) 2009.11.11
40장 JQueryManipulation 특정 용어 번호 추가 (Append)  (0) 2009.11.11
39장 JQueryManipulation 앞 뒤 요소 추가 (Insert After)  (0) 2009.11.11
posted by Magic_kit
2009. 11. 11. 10:34 .Net Project/Jquery 1.3.2

41장 JQueryManipulation 검색 요소 특정 태그로 감싸기 (Wrap)

반응형


 
 Wrap.htm
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> 검색요소를 특정 태그로 감싸기 </title>

       

    <script src="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //[1] <h3> ...</h3>을 태그로 묶자 <u> </u>

            $('h3').wrap("<u></u>");

 

            //[2] 모든 태그를 <li> 묶자
            //[a] 첫번째 링그 앞에 동적으로 삽입

            $('<ol type="1" id="Community"></ol>').insertBefore('a:eq(0)');

            //[b] 모든 링크로 감싸고 태그 추가

            $('a').each(function () {

                $(this).appendTo('#community').wrap('<li></li>');

            }); 

        });       

    </script>

</head>

<body>

    <h3>jQuery UI provides abstractions</h3>

    <a href="http://www.asp.net /">ASP.NET</a>

    <a href="http://www.silverlight.net /">Silverlight</a>

    <a href="http://www.windowsclient.net /">WPF</a>

    <a href="http://www.dotnetkorea.com /">DotNetKorea</a>

</body>

</html> 

WebJQuery.rar




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

43장 JQueryManipulation 검색된 요소 변경하기 (ReplaceWith)  (0) 2009.11.11
42장 JQueryManipulation 검색된 요소 복사 (Clone)  (0) 2009.11.11
40장 JQueryManipulation 특정 용어 번호 추가 (Append)  (0) 2009.11.11
39장 JQueryManipulation 앞 뒤 요소 추가 (Insert After)  (0) 2009.11.11
38장 JQueryManipulation Append메서드 (Append)  (0) 2009.11.11
posted by Magic_kit
2009. 11. 11. 10:10 .Net Project/Jquery 1.3.2

40장 JQueryManipulation 특정 용어 번호 추가 (Append)

반응형
 

 Append.htm
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title> 특정용어에 대해서 번호 붙히기 </title>

    <style type="text/css">

        .Chapter { background-color:Silver;}

        .Content { height:100px ;}

       

    </style>

    <script src="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //[1] term CSS 클래스에 배경색 붙이기

            $('.term').not(":odd").css("backgroundColor", "Yellow")

            .end()

            .filter(":odd").css("background-color", "LightBlue");

 

            //[2]각각의 용어 뒤에 번호 붙이기
            $('.term').each(function (i) {

                $(this).append("<sup>" + (i + 1) + "</sup>");

            });

 

        });

       

    </script>

</head>

<body>

<h3>

jQuery UI provides abstractions

</h3>

<div>

<span class="term"> jQuery </span> UI provides abstractions for low-level<span class="term"> JavaScript </span> interaction and animation,

advanced effects and high-level,<span class="term"> HTML </span> themeable widgets, built on top of the

jQuery JavaScript Library, that<span class="term"> SilverLight </span> you can use to build highly

interactive web applications

</div>

 

</body>

</html> 

WebJQuery.rar




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

42장 JQueryManipulation 검색된 요소 복사 (Clone)  (0) 2009.11.11
41장 JQueryManipulation 검색 요소 특정 태그로 감싸기 (Wrap)  (0) 2009.11.11
39장 JQueryManipulation 앞 뒤 요소 추가 (Insert After)  (0) 2009.11.11
38장 JQueryManipulation Append메서드 (Append)  (0) 2009.11.11
37장 JQueryTraversing End (End)  (0) 2009.11.10
posted by Magic_kit
2009. 11. 11. 09:56 .Net Project/Jquery 1.3.2

39장 JQueryManipulation 앞 뒤 요소 추가 (Insert After)

반응형

 
 InsertAfter.htm
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>DOM 요¯a소ùO 앞úO/뒤ìU에¯¢® 요¯a소ùO 추©¬가Æ¢®</title>

    <style type="text/css">

        .Chapter { background-color:Silver;}

        .Content { height:100px ;}

       

    </style>

    <script src="../../jquery-1[1].3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            //[1] 내용 뒤에 삽입

            $('<hr />').insertAfter(".Content");

 

            //[2] Top 링그를 Chapter 앞에 추가

            $('p.Chapter:gt(0)').before("<a href='#'>TOP</a>");

 

        });

    </script>

</head>

<body>

    <p class="Chapter">1장</p>

    <div class="Content">

    내용

    </div>

   

    <p class="Chapter">2장</p>

    <div class="Content">

    내용
    </div>

   

    <p class="Chapter">3장</p>

    <div class="Content">

    내용

    </div>

</body>

</html> 

WebJQuery.rar




반응형

'.Net Project > Jquery 1.3.2' 카테고리의 다른 글

41장 JQueryManipulation 검색 요소 특정 태그로 감싸기 (Wrap)  (0) 2009.11.11
40장 JQueryManipulation 특정 용어 번호 추가 (Append)  (0) 2009.11.11
38장 JQueryManipulation Append메서드 (Append)  (0) 2009.11.11
37장 JQueryTraversing End (End)  (0) 2009.11.10
36장 JQueryTraversing Not (not)  (0) 2009.11.10
posted by Magic_kit

티스토리툴바