Manipulation - DOM 요소의 앞/뒤에 요소 추가

.NET프로그래밍/jQuery 1.3.2 2009. 11. 11. 09:49 |

 

[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 요소의 앞/뒤에 요소 추가</title>

    <style type="text/css">

        .Chapter { background-color:Silver; }

        .Content { height:100px; border:1px solid red; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] 내용 뒤에 구분선(<hr />) 삽입

            $('<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>

 



-------------------------------------------------------------------------------------

 


[실행결과]

--> 아래그림에서 '링크'가 걸린 "TOP"텍스트를 마우스로 클릭하면 '웹 페이지'의 맨 위로 이동한다.
  

 


 

저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Manipulation - Wrap()메서드 (검색된 요소를 특정 태그로 감싸기)  (0) 2009.11.11
Manipulation - 특정 용어에 대해서 번호 붙이기  (0) 2009.11.11
Manipulation - Append() 메서드 (DOM 요소 생성 후 원하는 요소에 추가)  (0) 2009.11.11
Traversing - 방금 실행한 집합 이전으로 되돌리기  (0) 2009.11.10
Traversing - 지정된 표현식을 제외한 집합 가져오기  (0) 2009.11.10
Posted by holland14
:

Manipulation - Append() 메서드 (DOM 요소 생성 후 원하는 요소에 추가)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 11. 09:36 |



[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>DOM 요소 생성 후 원하는 요소에 추가</title>

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

    <script type="text/javascript">

        $(document).ready(function() {

            //[1] 태그안의 내용 초기화

            $('#lblDisplay').empty();

 

            //[2] 동적으로 태그 추가

            var strHtml = $("<a href='#'>닷넷코리아</a><hr />");

            $('#lblDisplay').append(strHtml);

 

            //[3] 버튼 클릭시 테이블 생성

            $('#btnCreate').click(function () {

                $('#lblTable').empty(); // 클리어

                var row = $('#row').val();

                var col = $('#col').val();

                var strTable = "<table border='1'>";

                for (var i = 0; i < row; i++) {

                    strTable += "<tr>";

                    for (var j = 0; j < col; j++) {

                        strTable += "<td>" + (i + 1) + "행, " + (j + 1) + "열" + "</td>";

                    }

                    strTable += "</tr>";

                }

                strTable += "</table>";

                $('#lblTable').append(strTable);

            });

        });

    </script>

</head>

<body>

 

<!--[1] 동적으로 태그 추가 -->

<span id="lblDisplay"><b>여기에 태그 추가</b></span>

 

<!--[1] 동적으로 테이블 추가 -->

<input type="text" id="row" />행

<input type="text" id="col" />열

<input type="button" id="btnCreate" value="테이블 동적 생성" />

<div id="lblTable"></div>

 

</body>

</html>

 




-------------------------------------------------------------------------------------




[실행결과]






저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Manipulation - 특정 용어에 대해서 번호 붙이기  (0) 2009.11.11
Manipulation - DOM 요소의 앞/뒤에 요소 추가  (0) 2009.11.11
Traversing - 방금 실행한 집합 이전으로 되돌리기  (0) 2009.11.10
Traversing - 지정된 표현식을 제외한 집합 가져오기  (0) 2009.11.10
Traversing - 지정된 표현식이 있는지 없는지 검사  (0) 2009.11.10
Posted by holland14
:

Traversing - 방금 실행한 집합 이전으로 되돌리기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 13:11 |



[End.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">

        .Yellow { background-color:Yellow; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function () {

            //[1] JavaScript 텍스트 찾아가기

            alert($('div').find('p').html());

 

            //[2] JavaScript 텍스트로 찾아가기

            var result = $('div').find('p:last').find('b').html();

            alert(result); // jQuery

 

            //[3] 방금 탐색한 기능 이전으로 돌리기

            var html = $('div').find('p:last').find('b').end().html();

            alert(html); // jQuery -> end() -> <b>jQuery</b>

        });

    </script>

</head>

<body>

<div id="myForm">

    <p>

        <b>JavaScript</b>

    </p>

    <p>

        <b>jQuery</b>

    </p>

</div>

</body>

</html>

 



-------------------------------------------------------------------------------------




[실행결과]


--> 첫 화면.
.






--> 위의그림에서 메시지박스의 '확인'버튼을 누른 후의 화면.




--> 바로위의 그림에서 메시지박스의 '확인'버튼을 누른 후의 화면.(위의 [End.htm]소스코드에서 [3] 방금 탐색한 기능 이전으로 돌리기( jQuery -> end() -> <b>jQuery</b> 의 과정으로 아래그림과 같이 출력된 것이다. )




--> 바로위의 그림에서 메시지박스의 '확인'버튼을 누른 후의 화면.(마지막 화면.)












저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Manipulation - DOM 요소의 앞/뒤에 요소 추가  (0) 2009.11.11
Manipulation - Append() 메서드 (DOM 요소 생성 후 원하는 요소에 추가)  (0) 2009.11.11
Traversing - 지정된 표현식을 제외한 집합 가져오기  (0) 2009.11.10
Traversing - 지정된 표현식이 있는지 없는지 검사  (0) 2009.11.10
Traversing - n번째 요소 가져오기  (0) 2009.11.10
Posted by holland14
:

Traversing - 지정된 표현식을 제외한 집합 가져오기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 12:07 |



[Not.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">

        .Yellow { background-color:Yellow; }

    </style>

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

    <script type="text/javascript">

        $(document).ready(function () {

            // 라디오버튼을 제외한 input 태그에 배경색을 Yellow로 설정

            $('input').not("input[type=radio]").each(function () {

                $(this).addClass("Yellow").css("border", "1px solid red");

            });

        });

    </script>

</head>

<body>

 

<div id="myForm">

    <input type="text" />

    <input type="password" />

    <input type="radio" />

</div>

 

</body>

</html>

 



-------------------------------------------------------------------------------------




[실행결과]


--> 아래그림에서 "라디오버튼을 제외한 input 태그"에 '배경색이 Yellow로, 테두리는 red'로 설정되었다.







저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Manipulation - Append() 메서드 (DOM 요소 생성 후 원하는 요소에 추가)  (0) 2009.11.11
Traversing - 방금 실행한 집합 이전으로 되돌리기  (0) 2009.11.10
Traversing - 지정된 표현식이 있는지 없는지 검사  (0) 2009.11.10
Traversing - n번째 요소 가져오기  (0) 2009.11.10
Attributes - 폼 요소의 값 가져오기 및 설정  (0) 2009.11.10
Posted by holland14
:

Traversing - 지정된 표현식이 있는지 없는지 검사

.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 11:54 |



[Is.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="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            // myForm 영역에 submit 버튼이 있는지 검사

            if ($('#myForm').children().is("input[type=submit]")) {

                alert("있다.");

            }

            else {

                alert("없다.");

            }

        });

    </script>

</head>

<body>

 

<div id="myForm">

    <input type="text" />

</div>

 

</body>

</html>

 



-------------------------------------------------------------------------------------




[실행결과]

--> 위의 [Is.htm]소스코드에서 <div>태그 내에서는 <input type="text" />로 입력하였지만, 위의 is("input[type=submit]")에서 "type=submit"는 [Is.htm]소스코드 내에 존재하지 않으므로 아래그림과 같이 메시지박스가 출력되었다.







저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Traversing - 방금 실행한 집합 이전으로 되돌리기  (0) 2009.11.10
Traversing - 지정된 표현식을 제외한 집합 가져오기  (0) 2009.11.10
Traversing - n번째 요소 가져오기  (0) 2009.11.10
Attributes - 폼 요소의 값 가져오기 및 설정  (0) 2009.11.10
Attributes - 텍스트 값 가져오기 및 설정  (0) 2009.11.10
Posted by holland14
:

Traversing - n번째 요소 가져오기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 11:29 |



[Eq.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>n번째 요소 가져오기</title>

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

    <script type="text/javascript">

        $(document).ready(function() {

            alert($('p:eq(2)').text()); // 선택기 필터

            alert($('p').eq(2).html()); // 메서드

        });

    </script>

</head>

<body>

 

<p>C#</p>

<p>ASP.NET</p>

<p>jQuery</p>

 

</body>

</html>

 



-------------------------------------------------------------------------------------




[실행결과]


--> 바로 아래 2개의 그림은, 위의 [Eq.htm]소스코드에서 한번은 "선택기 필터"를 사용해서, 또 한번은 "Traversing 메서드"를 사용해서 같은 결과를 2번 출력해 본 결과이다.










--> 바로 위의 그림에서 메시지박스의 '확인'버튼을 누른 후의 화면.(마지막 화면)







저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Traversing - 지정된 표현식을 제외한 집합 가져오기  (0) 2009.11.10
Traversing - 지정된 표현식이 있는지 없는지 검사  (0) 2009.11.10
Attributes - 폼 요소의 값 가져오기 및 설정  (0) 2009.11.10
Attributes - 텍스트 값 가져오기 및 설정  (0) 2009.11.10
Attributes - 특정 속성을 지우기  (0) 2009.11.10
Posted by holland14
:

Attributes - 폼 요소의 값 가져오기 및 설정

.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 10:40 |



[Val.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="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            // Initialize(-> 값(value)을 초기화)

            $('#txtName').val("RedPlus"); // 단일값

            $('input:radio').val(['F']); // 다중값 : []

            $('#lstFavorites').val(['0', '2']); // 다중값 : [,]

 

            $('#btnOK').click(function() {

                var msg = "";

                //[1] 반드시 폼 요소의 value 속성을 가져온다. <> 에러

                msg += $('#txtName').val() + '\n';

 

                //[2] 라디오버튼의 체크된 value 속성을 가져옴 <> undefined

                msg += $('input:radio[name=Gender]:checked').val() + '\n';

 

                //[3] 리스트박스에서 여러개 값 가져오기

                msg += $('#lstFavorites').val().join(" | ") + '\n';

 

                //[!]

                alert(msg);

            });

        });

    </script>

</head>

<body>

    텍스트박스 : <input type="text" id="txtName" /><br />

    라디오버튼 :

        <input type="radio" id="optGender1" name="Gender" value="M" />남

        <input type="radio" id="optGender2" name="Gender" value="F" />여<br />

    드롭다운리스트 :

        <select id="lstFavorites" multiple="multiple" size="3">

            <option value="0">JavaScript</option>

            <option value="1">jQuery</option>

            <option value="2">Prototype</option>

        </select><br />

    <input type="button" value="확인" id="btnOK" />

</body>

</html>

 



-------------------------------------------------------------------------------------




[실행결과]

--> 첫 화면. 아래그림에서 '텍스트박스'와 '라디오버튼'과 '드롭다운리스트'가 [Val.htm]소스코드에서 설정한 값(Value)으로 초기화(Initialize)되어있는 것을 볼 수 있다.





--> '텍스트박스', '라디오버튼', '드롭다운리스트'에 각각 값(Value)을 재입력한 후 '확인'버튼을 누르면, 아래그림과 같이 메시지박스에 입력한 값(Value)이 출력되는 것을 볼 수 있다.





저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Traversing - 지정된 표현식이 있는지 없는지 검사  (0) 2009.11.10
Traversing - n번째 요소 가져오기  (0) 2009.11.10
Attributes - 텍스트 값 가져오기 및 설정  (0) 2009.11.10
Attributes - 특정 속성을 지우기  (0) 2009.11.10
Attributes - 맵(컬렉션)으로 다중 속성 지정  (0) 2009.11.10
Posted by holland14
:

Attributes - 텍스트 값 가져오기 및 설정

.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 10:28 |



[Text.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="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            // get

            var text = $('b').text();

            alert(text);

 

            // set

            $('p:first').text("<b>낼</b> 봐요.");

            $('p:last').html("<b>낼</b> 봐요.");

 

            // get

            alert($('p:last').html());

        });

    </script>

</head>

<body>

    <div>

        안녕하세요. <b>jQuery</b><br />

        반갑습니다. <b>JavaScript</b><br />

        <p>또 만나요.</p>

        <p>언제요?</p>

    </div>   

</body>

</html>

 



-------------------------------------------------------------------------------------




[실행결과]

--> 첫 화면.





--> 위의 그림에서  메시지박스의 '확인'버튼 클릭 후의 화면.




--> 바로위의 그림에서  메시지박스의 '확인'버튼 클릭 후의 화면.





저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Traversing - n번째 요소 가져오기  (0) 2009.11.10
Attributes - 폼 요소의 값 가져오기 및 설정  (0) 2009.11.10
Attributes - 특정 속성을 지우기  (0) 2009.11.10
Attributes - 맵(컬렉션)으로 다중 속성 지정  (0) 2009.11.10
Attributes - 마우스 오버시 큰 이미지 보여주기  (1) 2009.11.10
Posted by holland14
:

Attributes - 특정 속성을 지우기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 10:01 |



[RemoveAttr.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="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            // 버튼 클릭시 특성/속성/attribute/어트리뷰트/애트리뷰트 제거

            $('#btnRemove').click(function() {

                $('img:first').removeAttr("src"); // src 속성 삭제

            });

        });

    </script>

</head>

<body>

    <input type="button" id="btnRemove" value="src삭제" />

    <img src="../ProductImages/thumbs/HARDWARE-01.jpg" alt="하드웨어" />

    <img src="../ProductImages/thumbs/HARDWARE-01.jpg" alt="하드웨어" />

</body>

</html>

 



-------------------------------------------------------------------------------------




[실행결과]

--> 첫 화면.






--> 위의 그림에서 'src삭제'버튼을 클릭하면 버튼 바로 옆에 있는 첫번째 이미지가 삭제되면서 ,"하드웨어"라는 대체 텍스트로 아래그림과 같이 출력된다.









저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Attributes - 폼 요소의 값 가져오기 및 설정  (0) 2009.11.10
Attributes - 텍스트 값 가져오기 및 설정  (0) 2009.11.10
Attributes - 맵(컬렉션)으로 다중 속성 지정  (0) 2009.11.10
Attributes - 마우스 오버시 큰 이미지 보여주기  (1) 2009.11.10
Attributes - DOM요소의 attribute 읽어오기  (0) 2009.11.09
Posted by holland14
:

Attributes - 맵(컬렉션)으로 다중 속성 지정

.NET프로그래밍/jQuery 1.3.2 2009. 11. 10. 09:56 |



[MapCollection.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="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#com").attr({

                src: "../ProductImages/COM-01.jpg",

                alt: "컴퓨터",

                title: "좋은컴퓨터"

            });

        });

    </script>

</head>

<body>

 

    <img id="com" />

 

</body>

</html>

 



-------------------------------------------------------------------------------------




[실행결과]









저작자표시

'.NET프로그래밍 > jQuery 1.3.2' 카테고리의 다른 글

Attributes - 텍스트 값 가져오기 및 설정  (0) 2009.11.10
Attributes - 특정 속성을 지우기  (0) 2009.11.10
Attributes - 마우스 오버시 큰 이미지 보여주기  (1) 2009.11.10
Attributes - DOM요소의 attribute 읽어오기  (0) 2009.11.09
Form관련 jQuery 선택기 명령어 - :selected (드롭다운리스트에서 선택한 값 가져오기)  (0) 2009.11.09
Posted by holland14
:

티스토리툴바