전체 글

[jQuery] 효과

1. 기본 메서드 JQuery는 시각적인 효과를 내기 위해 기본적으로 아래의 메서드를 제공하고 있습니다. show() 화면에 표시합니다. hide() 화면에서 숨김니다. toggle() show()와 hide()가 번갈아 실행됩니다. slideDown() 슬라이드 형태로 표시합니다. slideUp() 슬라이드 형태로 숨김니다. slideToggle() slideDown()과 slideUp()을 번갈아 실행합니다. fadeIn() 페이드 형태로 표시합니다. fadeOut() 페이드 형태로 숨김니다. fadeToggle() fadeIn()과 fadeOut()을 번갈아 실행합니다. ※ 번갈아 실행된다는 의미는 예를 들어 show()일 때 hide()를 한번 수행하고 hide()일 때 show()를 한번 수행한..

[jQuery] 이벤트 다루기

1. 이벤트 이벤트는 '사건'을 의미합니다. 요소를 클릭하는 경우에는 클릭이라는 행위 자체를 하나의 이벤트라고 볼 수 있으며 ready와 같은 경우에도 문서가 준비됨을 알리는 이벤트라고 할 수 있습니다. 2. 이벤트 연결 jQuery에서 이벤트를 연결하는데 사용되는 메서드로 on이 있습니다. 이벤트를 연결하는 기본적인 메서드입니다. 아래 예제에서는 요소를 클릭했을 때 이벤트를 연결하는 과정을 보여주고 있습니다. 클릭 문자열 이외에 객체를 통한 이벤트 연결도 가능합니다. $(function () { $('span').on({ click: function() { alert($(this).text()); } }) }); 위 예제의 경우 this키워드가 사용되었는데 바로 이벤트를 발생시킨 요소를 의미합니다. t..

[jQuery] 요소 조작 메서드

jQuery는 문서 내부의 요소를 변경하는 여러가지 메서드를 사용할 수 있습니다. (1) addClass() 요소에 클래스 속성을 추가합니다. 자동차 자전거 비행기 배 오토바이 문자열 형태의 값을 지정하는것 이외에 매개변수로 함수를 지정할 수도 있습니다. 이는 이후에서 살펴보는 대부분의 메서드에 동일하게 적용됩니다. $(function () { $('div').find('span').each(function (index) { $(this).addClass(function (index){ return 'myclass'; }); }); }); (2) removeClass() 클래스 속성을 제거합니다. 자동차 자전거 비행기 배 오토바이 만약 요소에 여러 클래스가 지정되어 있는경우 특정 클래스만 제거하고자 한다..

[C#] MySQL(MariaDB) EntityFramework 사용하기

Core 이외에 보통. NET으로 작업을 하면 대부분 MSSQL을 많이 사용합니다. MSSQL사용 시는 별다른 제약사항 없이 편하게 EntityFramework를 이용할 수 있었는데 MySQL로 EntityFramework를 사용하려면 그게 쉽지가 않았습니다. 참 좋아졌네요. 작년까지만 해도 이래서 안되는둥 저래서 안되는 둥... 이래야 하고 저래야 하고... 말고 많고 탈도 많았는데 이번에 최신 버전으로 다시 해보니 매끄럽게 진행이 돼서 해당 내용을 같이 살펴보고자 합니다. 우선 아래 페이지로 들어가 Development Releases에서 설치파일을 내려받아 설치합니다. 설치하는 과정은 별다른 내용 없이 그냥 일반적인 방법으로 설치하면 됩니다. https://dev.mysql.com/downloads..

[jQuery] 요소 탐색 메서드

jQuery는 문서의 특정 요소를 선택하거나 탐색할 때 필요한 몇 가지 메서드를 지원하고 있습니다. (1) filter filter는 필터선택자를 통해 요소를 선택할 수 있도록 합니다. 필터 선택자에 대해선 아래 글을 참고해 주세요. [Web/JQuery] - [jQuery] 선택자 아래 예제는 filter메서드를 이용해 다수의 span에서 2번째 요소를 가져와 배경색을 변경합니다. 자동차 자전거 비행기 배 오토바이 또는 다음과 같이 메서드를 추가해 사용할 수도 있습니다. $(function () { $('span').filter(function (index) { return index == 1; }).css({ color: 'red' }); }); (2) end end는 문서의 탐색상태를 이전으로 되돌..

[jQuery] 객체 합치기 ($.extend)

jQuery의 $.extend 메서드는 두 번째 매개변수에 지정된 객체의 속성을 첫 번째 매개변수에 지정한 객체와 합쳐주는 역할을 수행합니다. 아래 예제는 기존 javascript에서 객체를 생성 후 해당 객체에 원하는 속성을 추가하는 방법을 보여주고 있습니다. $(function () { var obj = {}; obj.name = '홍길동'; alert(obj.name); }); 이것을 jQuery의 $.extend를 사용하면 다음과 같이 바꿀 수 있습니다. $(function () { var obj = {}; $.extend(obj, { name : '홍길동' }); alert(obj.name); }); 물론 다수의 속성을 추가하는데도 사용할 수 있으며 속성이 많으면 많을수록 $.extend메서드를..

[jQuery] 배열처리

jQuery에서는 배열을 순회하기 위한 메서드로 $.each가 있습니다. 아래 예제는 숫자로 된 단순 배열을 $.each를 통해 순회하는 방법을 보여주고 있습니다. $(function () { var obj = [ 1, 2, 3, 4, 5 ]; $.each(obj, function (index, item) { alert(item); }); }); 배열이 객체인 경우에도 같은 방법으로 순회합니다. $(function () { var obj = [ { name : '홍길동', addr : '서울시' }, { name : '홍길순', addr : '부산시' }, { name : '홍길남', addr : '대구시' } ]; $.each(obj, function (index, item) { alert(item.n..

[jQuery] 선택자

jQuery로 문서 내부의 요소를 다루려면 선택자를 통해 원하는 요소를 가져와야 합니다. 이를 위해서 jQuery에서는 CSS선택자를 사용하고 있습니다. 따라서 CSS선택자를 알면 jQuery에서 그대로 응용이 가능합니다. [Web/HTML5 & CSS3] - [HTML5&CSS3] CSS선택자 -1 [Web/HTML5 & CSS3] - [HTML5&CSS3] CSS선택자 -2 [Web/HTML5 & CSS3] - [HTML5&CSS3] CSS선택자 -3 [HTML5&CSS3] CSS선택자 -3 1. 일반 구조 선택자 CSS3부터 지원하는 선택자로서 다음의 선택자 사용이 가능합니다. first-child 동위 관계에서 첫번째 요소 last-child 동위 관계에서 마지막 요소 nth-child(수열) 동..