Blog Content

AddClass 와 RemoveClass : CSS관련 메서드 AddClass 매치된 요소들의 각 집합에 지정된 CSS 클래스를 추가 RemoveClass 매치된 요소들의 각 집합에서 지정된 CSS 클래스 혹은 모든 클래스를 제거 [ 출처 : Taeyo ] 09.AddClassRemoveClass.htm addClass() : 스타일 추가 .yellow { background-color:Yellow; border:1px solid red; } //[!] 마우스 오버시 yellow 스타일 적용, 아웃시 yellow 스타일 해제 $(document).ready(function() { $('#btnClick') //yellow의 클래스를 호출 .bind('mouseover', function() { $('#b..

bind(eventType, data, listener) 메서드- 이벤트 바인딩 할당을 위한 API 08.Bind.htm bind() 메서드로 동적으로 이벤트 부여 $(document).ready(function() { $('#btnClick').bind("click", function() { alert("클릭됨"); }); $('#btnClick').bind('mouseover', function() { document.getElementById('btnClick').style.backgroundColor = 'red'; }); $('#btnClick').bind("mouseout", function() { $('#btnClick').get(0).style.backgroundColor = ''; });..

HTML 문서의 Element(엘레멘트) 제어하는 예제입니다. 07.DOM.htm DOM 요소 가져오기 //[1] jQuery의 엔트리 포인트 //$(document).ready( //[1] 첫번째 방법 : 추천 (동일한 진입지점) //$().ready( //[2] 두번째 방법 $( //[3] 세번째 방법 function() { //alert("로드됨"); var tagName = $('#dnk').get(0).tagName; //dnk id를 가지느 태그의 이름 alert(tagName); //A } ); 닷넷코리아 결과확인

[ 메서드 체인 ] 일반적인 코드 var obj = $(":header:eq(0)") obj = obj.css("font-weight", "bold"); obj = obj.css("color", "blue"); 메서드 체인 (일반) $(":header:eq(0)").css("font-weight", "bold").css("color", "blue"); 메서드 체인 (권장) $(":header:eq(0)") .css("font-weight", "bold") .css("color", "blue"); [ 출처 : Taeyo ] [ 선택기 필터 : 자식 ] 표현식 설명 :nth-child (index/even/odd) 자식 중 index로 지정된 위치의 요소들과 일치되거나, even, odd에 해당하는 자식들과..

[ 선택기 필터 : 콘텐트 ] 표현식 설명 :Contains(text) 지정한 텍스트를 포함하는 요소들과 일치합니다. :empty 자식을 가지지 않는 모든 요소와 일치됩니다. 더불어, 내부 텍스트를 가지지 않는 요소들도 이에 해당됩니다. :has(selector) 지정된 셀렉터에 해당하는 요소를 갖는 모든 요소들과 일치됩니다. :parent 부모인 모든 요소들과 일치됩니다. 자식 요소를 갖는 요소 뿐만 아니라 텍스트를 갖는 요소들이 이에 해당됩니다. [ 출처 : Taeyo ] 05.Contains.htm 특정 텍스트 검색 .redColor{ color:Red; } .green{ color:Green; } $(document).ready(function() { //[1] td 태그내의 텍스트가 RedPlu..

Even : 짝수, Odd : 홀수에 관련된 예제입니다. [ 기본필터 ] 표현식 설명 :first 선택된 개체들 중 첫 번째 요소와 일치합니다. :last 선택된 개체들 중 마지막 요소와 일치합니다. :not(selector) 괄호에 주어진 셀렉터와 일치되는 모든 요소를 제외합니다. :even 짝수 요소들과 일치합니다. (0부터 시작) :odd 홀수 요소들과 일치합니다. (0부터 시작) :eq(index) 인덱스에 해당하는 단일 요소와 일치합니다. :gt(index) 주어진 인덱스보다 높은 인덱스를 갖는 모든 요소와 일치합니다. :lt(index) 주어진 인덱스보다 낮은 인덱스를 갖는 모든 요소와 일치합니다. :header 모든 헤더 요소들(h1, h2, h3 등)과 일치합니다. :animated 현재 ..

선택기(Selector) - 태그내의 모든 DOM 요소에 접근 가능하다. - $('선택기') : $(document) = 선택기로 읽어오는 개체의 반환값은 jQuery에서 사용 할 수 있는 개체 - CSS : 문법 그대로 간다. = div a : div 태그 내의 a 요소 모두를 의미 03.RegSelector.htm 정규표현식 실렉터 .red { color:Red; } .green { color:Green; } .silver { color:Silver; } $(document).ready( function() { //[1] dotnet이라는 단어가 들어가는 링크에 배경을 red로 설정 $("a[href*='dotnet']").addClass("red"); //~가 들어가는 //[2] aspx로 끝나는 ..

기본 CSS 선택기 표현식 설명 E1 E1(태그명)인 모든 요소와 일치 E1.class E1(태그명) 요소의 클래스가 class와 동일한 요소와 일치 E1.#id E1(태그명) 요소의 id 어트리뷰트 값이 id와 동일한 요소와 일치 E1 E2 E1요소의 자식인 모든 E2(태그명) 요소와 일치 E1 > E2 E1요소와 바로 아래 자식인 E2 요소와 일치 E1 + E2 E1요소의 바로 다음에 나오는 형제요소 E2와 일치 E1[attr] Title 어트리뷰트를 값이 val을 갖는 E1 요소와 일치 E1[attr=val] attr 어트리뷰트의 값이 val을 갖는 E1 요소와 일치 E1[attr^=val] attr 어트리뷰트의 값이 val 값으로 시작하는 E1 요소와 일치 E1[attr$=val] attr 어트리..

jQuery의 시작입니다. 1. 새프로젝트 - 웹사이트를 추가합니다. [ C#언어 ]2. 해당 웹 사이트에서 새 항목 추가 - htm 파일을 추가합니다. [기본화면] 01.HelloWorld.htm 웹 사이트 프로젝트를 추가 한 이후 솔루션 탐색기에서 폴더를 추가 하여 jQuery 코드 관리를 위해 파일을 넣어두고 [그림1-1]과 같이 코드를 작성합니다.Tip : 10줄 코드에서 솔루션에 넣어둔 jquery-1[1].3.2-vsdoc2.js파일을 html안에 드래그앤 드롭으로 추가 가능 태그 안에 1,2,3 간단한 예제입니다. 01.HelloWorld.htm Hello World! jQuery!! .bg { background-color:Yellow; } $(document).ready(function(..

jQuery란? - 가장 많이 사용되는 오픈소스 JavaScript Library - 공통 소스 진영으로 .Net, Java 언어에 상관없이 사용 가능 jQuery특징 - 인텔리센스와 도움말 지원 - 플러그인 개념 도입, 여러가지 기능 확장하여 업그레이드 가능 - JavaScript Framework 중 가볍고 확장성이 좋음 - 크로스브라우저(Explorer, Firefox)에 잘 나타남 - 매서드, 캡슐화로 유지보수성 좋음 - 기본 입출력은 웹폼으로, 가볍고 빠르고 화려한 입출력에는 jQuery 사용 - 클라이언트 영역에서 실행되어 서버 부하가 적어 빠르게 실행 - 가볍게 웹사이트 만들고자 할 때 사용되며, 빠르게 개발하고자 할 때에는 WebForm 사용 - WebForm, jQuery, SilverL..

JavaScript 문자열 관련 함수 예제 입니다. var s = " Abc Def Fed Cba "; document.writeln("길이 : " + s.length); //길이 document.writeln("대문자출력 : " + s.toUpperCase()); //대문자 document.writeln("소문자출력 : " + s.toLowerCase()); //소문자 document.writeln("글자체 볼트로 : " + s.bold()); //볼드 document.writeln("이탤릭체 : " + s.italics()); //이탤릭 //1번째 인덱스 : A, IndexOf() document.writeln("인덱스 1번째자리 : " + s.charAt(1)); //뒤에서 b검색 : 14 docu..

JavaScript의 날짜관련 예제입니다. 날짜관련내장객체 //현재 시간을 출력 var today = new Date(); //출력 document.write(today.getFullYear() + " "); document.write((today.getMonth() + 1) + " "); document.write(today.getDate() + " "); document.write(today.getDay() + " "); //0요일~6요일까지 document.write(today.getHours() + " "); document.write(today.getMinutes() + " "); document.write(today.getSeconds() + " "); document.write(today.g..

JavaScript의 이벤트를 모은 예제 입니다. 예제 이벤트 1.클릭 : 클릭 했을때 메세지 박스 출력 2.오버/아웃 : 마우스 포인터 가 해당 영역들어왔을때와 나갔을때 3.두번클릭 : 두번클릭시 글씨체 변경 여기서는 두껍게 4.다운 : 클릭시 다른 웹 페이지로 이동 5.무브 : 마우스 포인터가 해당영역에 들어오면 바로 메세지 박스 출력 6.업 : 클릭시 새 웹페이지창 출력 7.텍스트 박스 안에서 키를 놓을 때 발생 8.텍스트 박스 안에서 키를 눌렀다 놓는 순간 발생 9.텍스트 박스 안에서 처음 키를 누를때 발생 10. 버튼 클릭시 버튼 포커스 색상 변경 11."1234"가 아닌 다른 값 입력시 "쉬는시간" 메세지박스 출력 12.즐겨찾기 목록 선택시 해당 사이트로 이동 파일 다운 받으시고 파일 실행하시..

JavaScript에서 스타일시트를 적용하는 예제입니다. // 스타일 변경 함수 function ChangeStyle() { var div1 = document.getElementById("myLayer"); div1.style.backgroundColor = "Yellow"; div1.style.border = "1px solid red"; div1.style.fontSize = "30pt"; } // 앞뒤로 이동하게 하는 함수 function GoGo(flag) { var div1 = document.getElementById("myLayer"); if (flag == -1) { div1.style.left = (parseInt(div1.style.left) - 10) + "px"; } else { ..

selectedIndex : 드롭다운리스트 컨트롤의 현재 선택된 인덱스 값을 반환하는 예제입니다. function CheckSelect() { if (document.getElementById("lstFavorite").selectedIndex == 0) { alert("관심사항을 선택하시오"); document.getElementById("lstFavorite").focus(); } else { window.alert("당신의 관심사항 : " + document.getElementById("lstFavorite").value); } } 관심사항 - 선택 - C# ASP.NET Silverlight