'.NET프로그래밍' 카테고리의 글 목록 (25 Page)

Attributes - 마우스 오버시 큰 이미지 보여주기

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

[ShowBigImg.htm]

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

<head>

$(document).ready(function() {

// 아래 코드는 모든 이미지 파일의 이미지명을 얻어,

// bigs/ 폴더에 있는 동일한 이미지를 div에 보여준다.

$('#product img').mouseover(function () {

$("#showImage").show(); // 이미지 보여줄 레이어 보이기

var imgSrc = ""; // 이미지 소스 저장 변수

imgSrc = $(this).attr("src"); // attr()로 src get하기

imgSrc = imgSrc.substr(imgSrc.lastIndexOf("/") + 1); // 순수 파일명만 얻기

imgSrc = "<img src='../ProductImages/bigs/" + imgSrc + "' />"; // 큰이미지 설정

$("#showImage").html(imgSrc); // 레이어에 HTML 추가

});

// 마우스 오버시 레이어 숨기기

$('#product img').mouseout(function() {

$("#showImage").hide(); // 레이어 숨기기

});

</script>

</head>

<body>

<div id="showImage"

style="border:1px solid red;width:400px;height:400px;">

</div>

</body>

</html>

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

[실행결과]

--> 아래그림에서, 위에 있는 작은 3개의 이미지중 하나의 이미지에 마우스오버(mouseover)하면 그 아래에 해당이미지가 큰이미지로 출력된다.

저작자표시

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

Attributes - 특정 속성을 지우기 (0)	2009.11.10
Attributes - 맵(컬렉션)으로 다중 속성 지정 (0)	2009.11.10
Attributes - DOM요소의 attribute 읽어오기 (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :selected (드롭다운리스트에서 선택한 값 가져오기) (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - 암호확인(PasswordConfirm) 기능 구현하기 (0)	2009.11.09

Posted by holland14

:

Attributes - DOM요소의 attribute 읽어오기

.NET프로그래밍/jQuery 1.3.2 2009. 11. 9. 12:27 |

[Attr.htm]

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

<head>

<title>DOM요소의 attribute 읽어오기</title>

$(document).ready(function() {

//[1] get

alert($('a').attr('href')); // get

//[2] set : img에 마우스 오버시 이미지 변경

$('img:first').mouseover(function() {

$(this).attr("src",

"http://www.dotnetkorea.com/Website/Portals/0/dotnetkorealogo.gif");

});

//[3] 마우스오버/아웃시 다른 이미지 표시

$('#copy').mouseover(function () {

$(this).attr('src', "../images/icon_copy_over.gif");

});

$('#copy').mouseout(function () {

$(this).attr('src', "../images/icon_copy.gif");

});

</script>

</head>

<body>

<a href="http://www.dotnetkorea.com/">닷넷코리아</a>

</body>

</html>

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

[실행결과]

--> 첫 화면.

--> 위의 그림에서 메시지박스의 '확인'버튼을 누른 후, 위의 그림의 "닷넷코리아로고"텍스트에 '마우스오버(mouseover)'시에 아래그림에서 해당 이미지가 출력된 화면.

--> 바로 위의 그림에서 맨 오른쪽에 있는 작은이미지에 '마우스오버(mouseover)'했을때 화면.

--> 바로 위의 그림에서 맨 오른쪽에 있는 작은이미지에서 '마우스아웃(mouseout)'했을때 화면.

저작자표시

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

Attributes - 맵(컬렉션)으로 다중 속성 지정 (0)	2009.11.10
Attributes - 마우스 오버시 큰 이미지 보여주기 (1)	2009.11.10
Form관련 jQuery 선택기 명령어 - :selected (드롭다운리스트에서 선택한 값 가져오기) (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - 암호확인(PasswordConfirm) 기능 구현하기 (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :text (텍스트박스의 값 복사) (0)	2009.11.09

Posted by holland14

:

Form관련 jQuery 선택기 명령어 - :selected (드롭다운리스트에서 선택한 값 가져오기)

.NET프로그래밍/jQuery 1.3.2 2009. 11. 9. 12:02 |

[Selected.htm]

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

<head>

<title>드롭다운리스트 선택한 값 가져오기</title>

$(document).ready(function() {

// 콤보박스가 변경될 때

$('#lstFavorites').change(function () {

// 드롭다운리스트에서 선택된 값을 텍스트박스에 출력

var selectedText = // $("#lstFavorites option:selected").text();

// $("option:selected").text();

$(":selected").text();

$('#txtFavorite').val(selectedText);

});

</script>

</head>

<body>

<option>Silverlight</option>

</select>

<hr />

</body>

</html>

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

[실행결과]

--> 아래그림에서 "드롭다운리스트"에서 선택한대로 드롭다운리스트 아래에 있는 "텍스트박스"에 드롭다운리스트와 같은 값이 출력된다.

저작자표시

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

Attributes - 마우스 오버시 큰 이미지 보여주기 (1)	2009.11.10
Attributes - DOM요소의 attribute 읽어오기 (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - 암호확인(PasswordConfirm) 기능 구현하기 (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :text (텍스트박스의 값 복사) (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :input (모든 폼 요소 읽어오기) (0)	2009.11.09

Posted by holland14

:

Form관련 jQuery 선택기 명령어 - 암호확인(PasswordConfirm) 기능 구현하기

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

[PasswordConfirm.htm]

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

<head>

$(document).ready(function() {

//[1] lblError 레이어 클리어

$('#txtPassword').keyup(function() {

//$('#lblError').remove(); // 제거

$('#lblError').text(''); // 클리어

});

//[2] 암호 확인 기능 구현

$('#txtPasswordConfirm').keyup(function() {

if ($('#txtPassword').val() != $('#txtPasswordConfirm').val()) {

$('#lblError').text(''); // 클리어

$('#lblError').html("<b>암호가 틀립니다.</b>"); // 레이어에 HTML 출력

}

else {

$('#lblError').text(''); // 클리어

$('#lblError').text("<b>암호가 맞습니다.</b>"); // 레이어에 텍스트 출력

}

});

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

<div id="lblError">암호를 입력하시오.</div>

</body>

</html>

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

[실행결과]

--> 첫 화면.

--> '암호'텍스트박스와 '암호확인'텍스트박스의 비밀번호가 다를 때의 화면.

--> '암호'텍스트박스와 '암호확인'텍스트박스의 비밀번호가 같을 때의 화면.(아래 그림에서 텍스트박스 아래에 있는 레이블에 태그가 적용되지 않은 것을 볼 수 있다.)

저작자표시

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

Attributes - DOM요소의 attribute 읽어오기 (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :selected (드롭다운리스트에서 선택한 값 가져오기) (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :text (텍스트박스의 값 복사) (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :input (모든 폼 요소 읽어오기) (0)	2009.11.09
jQuery인덱서(Indexer)를 사용하여 HTML 요소 가져오기 (0)	2009.11.09

Posted by holland14

:

Form관련 jQuery 선택기 명령어 - :text (텍스트박스의 값 복사)

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

[Text.htm]

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

<head>

<title>텍스트박스의 값 복사</title>

.silver { background-color:Silver; }

</style>

$(document).ready(function() {

// 모든 텍스트박스의 배경을 Silver로 설정

$(':text').addClass("silver");

// 첫 번쩨 텍스트박스의 값을 두번째 텍스트박스로 복사

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

$('#txtID').val($('#txtUserID:text').val());

});

</script>

</head>

<body>

<div>

아이디 : <input type="text" id="txtUserID" />

<hr />

<hr />

아이디 : <input type="text" id="txtID" />

</div>

</body>

</html>

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

[실행결과]

--> 첫 화면.

--> 위의 그림에서 위에 있는 텍스트박스에 텍스트를 입력하고 바로 아래에 있는 '복사'버튼을 클릭하면 '복사'버튼 아래에 있는 텍스트박스에 위의 텍스트박스에 입력된 텍스트가 복사되어 출력된다.

저작자표시

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

Form관련 jQuery 선택기 명령어 - :selected (드롭다운리스트에서 선택한 값 가져오기) (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - 암호확인(PasswordConfirm) 기능 구현하기 (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :input (모든 폼 요소 읽어오기) (0)	2009.11.09
jQuery인덱서(Indexer)를 사용하여 HTML 요소 가져오기 (0)	2009.11.09
jQuery Core 명령어 - Each()메서드로 반복 탐색 (요소만큼 반복해서 속성 설정 및 가져오기) (0)	2009.11.09

Posted by holland14

:

Form관련 jQuery 선택기 명령어 - :input (모든 폼 요소 읽어오기)

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

[Input.htm]

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

<head>

$(document).ready(function() {

var result = "";

// 폼 요소가 있는 만큼 반복하자.

//alert($(':input').size());

$(':input').each(function(index) {

result += "태그명 : " + $(this).get(0).tagName // this.tagName

+ ", type 속성명 : " + $(this).attr('type') + '\n';

});

alert(result);

});

</script>

</head>

<body>

<select><option>드롭다운리스트</option></select><br />

<textarea>멀티라인텍스트박스</textarea><br />

</body>

</html>

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

[실행결과]

저작자표시

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

Form관련 jQuery 선택기 명령어 - 암호확인(PasswordConfirm) 기능 구현하기 (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :text (텍스트박스의 값 복사) (0)	2009.11.09
jQuery인덱서(Indexer)를 사용하여 HTML 요소 가져오기 (0)	2009.11.09
jQuery Core 명령어 - Each()메서드로 반복 탐색 (요소만큼 반복해서 속성 설정 및 가져오기) (0)	2009.11.09
콜백(CallBack) : 매개변수로 함수를 전달 (0)	2009.11.09

Posted by holland14

:

jQuery인덱서(Indexer)를 사용하여 HTML 요소 가져오기

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

[jQueryIndexer.htm]

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

<head>

$(document).ready(function () {

// h3 요소 모두 가져오기

var headers = $('h3');

// 반복문을 써서 반복 : for문보다는 jQuery의 each문이 사용하기 편리

for (var i = 0; i < headers.length; i++) {

alert($(headers[i]).html());

}

// 위 코드를 each문으로 변경?

$('h3').each(function (index) {

alert($(this).html());

});

</script>

</head>

<body>

</body>

</html>

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

[실행결과]

--> "for"문을 사용하여 '메시지박스' 2번 출력..,

--> "each"문을 사용하여 '메시지박스' 2번 출력..,

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

저작자표시

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

Form관련 jQuery 선택기 명령어 - :text (텍스트박스의 값 복사) (0)	2009.11.09
Form관련 jQuery 선택기 명령어 - :input (모든 폼 요소 읽어오기) (0)	2009.11.09
jQuery Core 명령어 - Each()메서드로 반복 탐색 (요소만큼 반복해서 속성 설정 및 가져오기) (0)	2009.11.09
콜백(CallBack) : 매개변수로 함수를 전달 (0)	2009.11.09
브라우저 버전 나타내기 (0)	2009.11.09

Posted by holland14

:

jQuery Core 명령어 - Each()메서드로 반복 탐색 (요소만큼 반복해서 속성 설정 및 가져오기)

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

[Each.htm]

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

<head>

$(document).ready(function() {

//[1] each 메서드 설명

//$('p').each(function (index) { alert(index); });

//[2] for문처럼 반복한다. index는 0부터 자동 증가됨

$('p').each(function (index) {

$(this).attr({ // attr({어트리뷰트:값});

'id': "para-" + index

});

//[3] 0번째 요소의 텍스트 읽어오기

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

alert($('#para-0').text()); // 태그내의 텍스트 읽어오기(text() : 태그안의 값 : C#)

});

</script>

</head>

<body>

<p>Silverlight</p>

</body>

</html>

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

[실행결과]

--> 첫 화면.

--> 위의 그림에서 '동적으로 생성된 id로 개체 접근'버튼을 누른 후의 화면.

저작자표시

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

Form관련 jQuery 선택기 명령어 - :input (모든 폼 요소 읽어오기) (0)	2009.11.09
jQuery인덱서(Indexer)를 사용하여 HTML 요소 가져오기 (0)	2009.11.09
콜백(CallBack) : 매개변수로 함수를 전달 (0)	2009.11.09
브라우저 버전 나타내기 (0)	2009.11.09
css()메서드를 사용하여 폰트 늘리기 및 줄이기 (0)	2009.11.09

Posted by holland14

:

콜백(CallBack) : 매개변수로 함수를 전달

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

콜백 : 데이터가 아닌 함수를 매개변수로 전달
맵(Map) : 한번에 여러 개의 매개변수를 전달

Map은 Array 또는 Collection과 동일한 의미로 사용

[CallBack.htm]

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

<head>

<title>콜백 : 매개변수로 함수를 전달</title>

</style>

$(document).ready(function () {

$('p:eq(1)') //[1] 두번째 p 태그 영역

.css('backgroundColor', 'Yellow') //[2] 두번째 영역의 배경색 지정

.click(function () {

var $thisPara = $(this); //[3] 현재 영역을 변수에 설정

$thisPara.next()

.slideDown('slow', function () { //[4] 두번째의 다음 요소를 슬라이드 다운

$thisPara.slideUp('slow'); //[5] 현재자신(두번째)를 슬라이드 업

});

</script>

</head>

<body>

</body>

</html>

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

[실행결과]

--> 첫 화면. 아래그림에서 노란색 배경의 레이어로 칠해진 '두번째'텍스트를 클릭하면...

--> '두번째'레이어 아래에 '세번째'텍스트가 "슬라이드 다운(slideDown)"되면서 나타나면서 연이어서 바로 '두번째'텍스트가 "슬라이드업(slideUp)"되면서, '두번째'텍스트가 사라지면서 '두번째'텍스트 자리로 '세번째'텍스트가 올라간다.

저작자표시

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

jQuery인덱서(Indexer)를 사용하여 HTML 요소 가져오기 (0)	2009.11.09
jQuery Core 명령어 - Each()메서드로 반복 탐색 (요소만큼 반복해서 속성 설정 및 가져오기) (0)	2009.11.09
브라우저 버전 나타내기 (0)	2009.11.09
css()메서드를 사용하여 폰트 늘리기 및 줄이기 (0)	2009.11.09
one()메서드로 한번만 실행 (0)	2009.11.06

Posted by holland14

:

브라우저 버전 나타내기

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

[Browser.htm]

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

<head>

</style>

$(document).ready(function() {

// IE 8.0이지만, 6.0으로 나타남

alert('현재 웹 브라우저 버전은 : ' + jQuery.browser.version + '입니다.');

});

</script>

</head>

<body>

</body>

</html>

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

[실행결과]

저작자표시

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

jQuery Core 명령어 - Each()메서드로 반복 탐색 (요소만큼 반복해서 속성 설정 및 가져오기) (0)	2009.11.09
콜백(CallBack) : 매개변수로 함수를 전달 (0)	2009.11.09
css()메서드를 사용하여 폰트 늘리기 및 줄이기 (0)	2009.11.09
one()메서드로 한번만 실행 (0)	2009.11.06
hover()로 마우스오버와 아웃을 동시 처리 (0)	2009.11.06

Posted by holland14

:

Notice

Category

Tags

Recent Posts

Recent Comments

Recent Trackbacks

Archives

Links

'.NET프로그래밍'에 해당되는 글 690건

Attributes - 마우스 오버시 큰 이미지 보여주기

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

Attributes - DOM요소의 attribute 읽어오기

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

Form관련 jQuery 선택기 명령어 - :selected (드롭다운리스트에서 선택한 값 가져오기)

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

Form관련 jQuery 선택기 명령어 - 암호확인(PasswordConfirm) 기능 구현하기

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

Form관련 jQuery 선택기 명령어 - :text (텍스트박스의 값 복사)

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

Form관련 jQuery 선택기 명령어 - :input (모든 폼 요소 읽어오기)

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

jQuery인덱서(Indexer)를 사용하여 HTML 요소 가져오기

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

jQuery Core 명령어 - Each()메서드로 반복 탐색 (요소만큼 반복해서 속성 설정 및 가져오기)

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

콜백(CallBack) : 매개변수로 함수를 전달

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

브라우저 버전 나타내기

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

티스토리툴바