Blog Content

fadeIn (speed, callback) : 서서히 나타나기 fadeOut (speed, callback) : 서서히 감추기 02.FadeInFadeOut.htm 서서히 보이기 및 숨기기 #my .hover { cursor:pointer; background-color:Yellow; } div { background-color:Silver; height:100px; } $(document).ready(function() { $("#btn").click(function() { $("#first").fadeIn('slow'); //서서히 나타나기 $("#second").fadeOut('fast'); //서서히 감추기 }); }); 첫번째 영역 두번째 영역 결과화면

show() : 요소 보이기 show(speed, callback) : 요소 보이기(스피드와 콜백함수 지정 가능) hide() : 요소 숨기기 hide(speed, callback) : 요소 숨기기(스피드와 콜백함수 지정 가능) 01.ShowHide.htm 보이기 및 숨기기 #my .hover { cursor:pointer; background-color:Yellow; } $(document).ready(function() { //[1] 기본값 설정 $(".region").show(); //region 영역 보이기 $("#moreRegion").hide(); //more...숨기기 //[2] more...클릭시 보이기 및 숨기기 $("span.more").click(function() { //3000 :..

02.Unbind.htm 이벤트 처리기 해제 $(document).ready(function() { //[!] 버튼 클릭시 메시지 출력 $('#btn').click(function() { alert('클릭됨'); }); //[1] unbind() 메서드로 지정된 이벤트 해제 $('#btnUnbind').one("click", function() { $('#btn').unbind("click"); //바인딩 해제 }); }); 결과화면 버튼을 클릭하면 메세지 박스가 출력 이벤트 해제 버튼을 클릭 후 버튼 클릭시 아무런 반응이 없음

코드 설명 모두 동일한 이벤트로 테스트시 하나만 4번째 이벤트를 trigger에서 실행시킨다. 자바,jquery에서의 프로토타입 실제 클리아이언트에서 실행 하여 아주 유용한 이벤트(자주 사용 할 듯) 제한적인 것이 있다. http://docs.jquery.com/Events 사이트에서 참고 01.Trigger.htm 동적으로 다른 이벤트 호출 $(document).ready(function() { //[1] btn 클릭 이벤트 처리 //$('#btn').click(function() { alert('버튼이 클릭'); }); //[2] 페이지 로드시 버튼 클릭 //$('#my, .hover').click(function() { alert('test'); }); //[3] one메서드 딱 한번만 실행된다. ..

margin(마진)을 포함한 높이와 너비 구하는 예제입니다. 마진(margin) : 사각형을 그리는데 사각형 모양을 포함하고 있는 테두리, 영역등 포함 02.OuterWidthAndHeight.htm 검색된 요소의 크기 구하기 #my { background-color : Yellow; border:2px solid gray; position:absolute; padding:10px; z-index:0px; margin:10px; top:50px; left:50px; width:200px; height:200px; } $(document).ready(function() { $('#btnSize').click(function() { //outerHeight() : 마진을 제외한 영역의 크기 alert("ou..

jQuery 에서 Width와 Height 값의 크기 구하는 예제입니다. 01.WidthHeight.htm 검색된 요소의 크기 구하기 #my { background-color:Lime; } $(document).ready(function() { $('#btnSize').dblclick(function() { var msg = $('#my').width() + ", " + $('#my').height(); window.alert(msg); }); }); jQuery Ajax 결과화면

현재까지 진행된 jQuery 전체 소스 파일입니다.

remove : DOM에서 요소를 제거 검색된 요소를 완전 제거 하는 예제입니다. 07.Remove.htm 검색된 요소를 완전 제거 div { background-color:Yellow; } $(document).ready(function() { //[1] 내용지우기 $('#btnEmpty').click(function() { $('div').empty(); $('div').append("hi"); //div에 추가 가능 }); //[2] 요소 없애기 $('#btnRemove').click(function() { $('div').remove(); $('div').append("hi"); //div 없다. }); }); jQuery Ajax 결과화면

검색된 요소를 변경하는 예제입니다. 06.ReplaceWith.htm 검색된 요소를 변경하기 button { display:block; margin:3px; color:Red; width:200px; } div { color:Red; border:2px solid blue; width:300px; margin:3px; text-align:center; } $(document).ready(function() { //모든 버튼 요소를 클릭시 $("button").click(function() { //나 자신(버튼)을 태그로 변경하자. $(this).replaceWith("" + $(this).text() + ""); }); }); First Second Third 결과화면

clone : 요소를 복사 검색된 요소를 복사하는 예제입니다. 05.Clone.htm 검색된 요소를 복사하기 #menu{ background-color:Blue; color:White; } #submenu{ background-color:Silver; } #content { height:100px; } $(document).ready(function() { //[!] 상단 메뉴를 복사(Clone)해서 하단 메뉴에 추가(Append) $('#menu').clone().insertBefore('#submenu'); // 앞 $('#menu').clone().insertAfter('#submenu');// 뒤 $('#menu').clone().appendTo('#submenu'); //서브 매뉴에 포함해라 :..

Wrap : 요소를 감싸서 추가 검색된 요소를 특정 태그로 감싸는 예제입니다. 04.Wrap.htm 검색된 요소를 특정 태그로 감싸기(Wrap) $(document).ready(function() { //[1] ... 태그로 묶자 $('h3').wrap(""); //[2] 모든 A태그를 으로 묶자. //[a] 첫번째 링크앞에 동적으로 태그 삽입 $('').insertBefore('a:eq(0)'); //[b] 모든 링크를 로 감싸고 이를 태그에 추가 $('a').each(function() { $(this).appendTo('#community').wrap(''); }); }); .Net 기술 관련 커뮤니티 ASP SilverLight WPF .NET ALL(?) 준철이블로그(Godffs) 결과화면

Append : 요소의 안에 내용 추가 03.Append.htm 특정 용어에 대해서 번호 붙이기 $(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("" + (i + 1) + ""); }); //매개변수 i }); 열공!열공! 준철이는!! 요즘들어 게임은 자제 하고 공부! 만 하고 있어요. 진짜로! 열심히 블로그 정리를 ..

InsertAlter : 검색된 요소 뒤에 추가하기 02.InsertAlter.htm DOM 요소의 앞/뒤에 요소 추가 .Chapter{ background-color:Silver; } .Content{ height:100px; border:1px solid red; } $(document).ready(function() { //[1] 내용 뒤에 구분선() 삽입 $('').insertAfter(".Content"); //[2] TOP 링크를 Chapter 앞에 추가 $('p.Chapter:gt(0)').before("TOP"); //Top클릭시 맨 위로 이동 :.Chapter:gt(0)'인덱스 설정 하여 맨 첫번째 제외 }); 1장 내용... 2장 내용... 3장 내용... 결과확인

append : 요소의 안에 내용 추가 01.Append.htm DOM 요소 생성 후 원하는 요소에 추가 $(document).ready(function() { //[11] 태그 안의 내용 초기화 $('#lblDisplay').empty(); //[2] 동적으로 태그 추가 var strHtml = $("닷넷코리아"); $('#lblDisplay').append(strHtml); //동적으로 추가 : append를 이용하여 추가됨. /* //[3] 버튼 클릭시 테이블 생성 $('#btnCreate').click(function() { var row = $('#row').val(); var col = $('#col').val(); var strTable = ""; strTable += ""; //$('#lb..

현재까지 진행된 jQuery 전체 소스 파일입니다.