Blog Content

Input 모든폼 요소 읽어오는 예제입니다. 01.Input.htm Input 모든폼 요소 읽어오기 $(document).ready(function() { var result = ""; // 폼 요소가 있는 만큼 반복하자. // alert($(':input').size()); //13개 $(':input').each(function(index) { result += "태그명 : " + $(this).get(0).tagName // this.tagName + ", type 속성명 : " + $(this).attr('type') + '\n'; }); alert(result); }); 드롭다운리스트 멀티라인텍스트박스 버튼 결과화면

jQuery For문을 사용한 예제입니다. 02.jQueryIndexer.htm HTML 요소 가져오기 $(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()); }); */ }); 준철이 멋있다 결과화면

-Each() : 순차적으로 특정 함수를 수행 가능한 메서드 반복문으로 jQuery에서 많이 사용됩니다. 이유는 있는 만큼 반복한다는 장점과 Index에서 자동으로 반복 횟수가 저장됩니다. 01.Each.htm Each() 요소만큼 반복해서 속성 설정 및 가져오기 $(document).ready(function() { //[1] each() 메서드 설명 //$('p').each( function (index) { alert(index); }); //[2] for문처럼 반복한다. index는 0부터 자동 증가됨 $('p').each(//p 태그 만큼 반복 function(index) { $(this).attr({ // attr({어트리뷰트:값}); 'id': "para-" + index //ID 속성 동적..

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

- CallBack : 데이터가 아닌 함수를 매개변수로 전달, 사용자 정의 애니메이션의 효과중 하나로 애니메이션이 끝난뒤 호출되는 함수 매개변수로 함수를 전달하는 예제입니다. 20.CallBack.htm 콜백 : 매개변수로 함수를 전달 $(document).ready(function() { $('p:eq(1)') //[1] 두번째 p태그 영역 .css('backgroundColor', 'Yellow') //[2] 두번째 영역의 배경색 지정 .click(function() { var $thisPara = $(this); //[3] 현재 영역을 변수에 설정 $thisPara.next().slideDown('slow'); //[4] 두번째의 다음 요소를 슬라이드 다운 }); }); 첫번째 두번째 세번째 네번째..

jQuery를 이용하여 브라우저의 버전을 확인해보는 예제입니다. 19.Browser.htm 브라우저 버전 $(document).ready(function() { alert('현재 웹 브라우저 버전은 : ' + jQuery.browser.version + '입니다.'); }); 결과화면

jQuery 에서 CSS() 동적으로 폰트 늘리기 및 줄이는 예제입니다. 18.CSS.htm Css()동적으로 폰트 늘리기 및 줄이기 .button { background-color:Yellow; } .silver { color:Silver; } $(document).ready(function() { $('div.button').click(function() { //본문 영역을 변수에 담기 var $region = $('div.silver'); // 본문 영역의 폰트 사이즈 가져오기 var currentSize = $region.css('fontSize'); // 16px // px 문자열을 제외한 16만 가져오기 var num = parseFloat(currentSize, 10); // 16 // px..

- One메서드 : bind(), click() 메서드와 달리 one() 메서드는 딱 한번만 실행되고, 이벤트가 해제됨. 버튼을 클릭했을때 한번만 메세지 박스를 띄우는 예제입니다. 17.One.htm one()메서드로 한번만 실행 .hover { background-color:Red;} $(document).ready(function() { $("#my .hover").one("click", function() { alert('한번만 클릭'); }); }); 결과화면 처음 버튼 클릭하면 메세지 박스 출력. 이 후 다시 버튼 클릭시 더 이상 이벤트가 실행되지 않음

- hover( over, out )을 지원하는 메서드hover()로 마우스오버와 아웃을 동시 처리하는 예제입니다. 16.Hover.htm hover()로 마우스오버와 아웃을 동시 처리 .hover { cursor: hand; background-color: Yellow; } $(document).ready(function() { $('table tr:gt(0)').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }); $('table tr').slice(1, 3).addClass('hover'); }); //'table tr:gt(0) 0보다 큰것만 마우스 오버 효과가 나타남 제목 ASP..

[ 14.jQuery - Toggle ] 예제를 Class (클래스)로 사용한 예제입니다. 15.ToggleClass.htm toggleClass()메서드로 CSS 클래스에 대한 토글링 .hidden { display:none; } $(document).ready(function() { // [!] hidden CSS Class에 대해서 addClass() removeClass() $('#btn').click(function () { $('#myLayer').toggleClass('hidden'); }); }); 버튼을 클릭할 때마다 레이어 보이기/숨기기 안녕 결과화면

추가적 기능이 가능한 메서드로 실행할 이벤트를 할당 하는 Toggle메서드 입니다. 14.Toggle.htm toggle()메서드로 토글링 .hidden { display:none; } $(document).ready(function() { // .toggle(fn1, fn2); // fn1과 fn2를 서로 토글링한다. $("#btn").toggle( function() { $('#myLayer').addClass("hidden"); }, function() { $('#myLayer').removeClass("hidden"); } ); }); 버튼을 클릭할 때마다 레이어 보이기/숨기기 안녕 결과화면

Slice() 메서드 : 지정된 위치의 문자열 반환 silce(n, index) : 왼쪽에서 n번째 문자열 반환 silce(-n) : 오른쪽에서 n자 반환 13.Silce.htm silce() 메서드로 지정된 개체만 가져오기 .red { color:Red; } $(document).ready(function() { //size() 해당 결과값(집합)의 개수(반환값) alert("현재 웹 페이지에는 " + $('input').size() + "개의 input 태그가 있다."); //2번째와 3번째만 스타일 적용 $('input').slice(1, 3).addClass('red'); //1번째 인덱스에서 (3-1)번째 인덱스까지 }); 2번째와 3번째 버튼에만 빨간 글씨 적용 결과화면

[ 탐색 : 필터링 및 체인 ] 표현식 설명 eq(index) 일치된 요소들 중에서 인덱스와 일치하는 단일 요소를 가져옵니다. filter(expr) 지정된 표현식과 매치되지 않는 모든 요소들을 제거합니다. 즉, 매치되는 요소들만을 가져옵니다. filter(func) 지정된 함수와 매치되지 않는 모든 요소들을 제거합니다. is(expr) 현재 개체와 표현식에 해당한다면 true, 표현식에 여러 개의 조건이 있다면 그 중 한 개만 맞아도 true가 됨 map(callback) jQuery 개체 안에 있는 요소들의 집합을 다른 집합으로 변경해서 옮긴다. net(expr) 지정된 표현식과 매치되는 모든 요소들을 제거합니다. 즉, 매치되지 않는 요소들만을 가져옵니다. [ 출처 : Taeyo ] 12.Filter..

bind() 중 click 이벤트는 click() 메서드로 사용사용빈도가 높은 Click(클릭) 이벤트 사용 예제입니다. [ 아이디 값에 따라 각각의 이벤트 처리 ] 11.Click.htm bind() 중 click 이벤트는 click() 메서드로 사용 .redColor { color:Red; } $(document).ready(function() { //특정 요소에 클릭 이벤트를 적용 : bind() 보다 간편 $('#mainMenu .redColor').click(function() { if (this.id == "dnk") { location.href = "http://www.dotnetkorea.com"; } else if (this.id == "godffs") { window.open("http..

$(this) : 이벤트 핸들러 컨텍스트 this : 이벤트 핸들러에서의 this는 DOM을 가리킨다. $(this) : 현재 이벤트가 적용된 개체(DOM)를 jQuery 개체로 반환한다. this.id : DOM 개체 중 클릭된 요소를 알고자 할 때에는 id 속성을 사용한다. 아이디 값에 따라서 각각의 이벤트를 주는 예제입니다. 10.ThisId.htm this.id로 DOM 요소의 id 속성 가져오기 .redColor { color: Red; } $(document).ready(function() { //[1] 닷넷코리아 레이어 클릭시 CSS 클래스 해제 $('#dnk').bind('click', function() { //[a] 해제 $('#mainMenu .redColor').removeClass..