웹언어/jQuery (15) 썸네일형 리스트형 [jQuery강좌] 15강 폼관련 change와 submit이벤트 ** 이번 강좌에서는 제이쿼리에서 폼요소에 사용되는 이벤트들을 보도록 하겠습니다. - 대표적으로 change이벤트가 있습니다. 요소에 변화가 있을때라는 뜻입니다. - submit이벤트는 폼데이터를 전송할 때라는 뜻입니다. - 이 두가지 이벤트를 보도록 하겠습니다. 1. change이벤트 - change이벤트는 요소가 변화가 있을때라는 이벤트입니다. 보통 폼요소가 변화가 있을때 사용됩니다. - 그럼 폼요소가 변화가 있다는 것을 무슨 의미일까요? - 체크박스가 체크되거나 미체크되었을때, 선택상자의 옵션이 변경되었을때 등을 볼 수 있습니다. ## 문법 //이벤트타입메서드 $('문서객체선택').change(function(){ }); //on메서드 - 이벤트연결메서드 $('문서객체선택').on('change',.. [jQuery강좌] 14강 $(window)객체 이벤트와 메서드 ** 이번 강좌에서는 제이쿼리에서 $(window) 객체를 사용하는 방법을 알아보도록 하겠습니다. - window객체가 갖고 있는 대표적인 이벤트인 resize와 scroll을 보도록 하겠습니다. - 그리고 자바스크립트에는 없었지만, 제이쿼리에서 window객체를 위해 만든 메서드도 보도록 하겠습니다. 1. window객체 - window객체는 BOM객체입니다. BOM객체 중 최상위객체인 브라우저 전체 창을 의미합니다. ## JS에서의 window문법 window.속성명; window.메서드명(); ## jQuery에서의 window문법 $(window).메서드명(); - 위에서 보다시피 제이쿼리는 $()안에다 쓴다는 점이 다릅니다. - 하지만 자바스크립트에서 썼던 속성이나 메서드를 $(window) 에.. [jQuery강좌] 13강 animate()메서드 - 오쌤의 니가스터디 ** 이번 강좌에서는 제이쿼리의 animate() 메서드에 대해서 알아보도록 하겠습니다. - 우선 animate() 메서드는 사용자 지정 애니메이션을 만들 수 있습니다. - 하지만 위와 같이만 설명하며 [ 아~ 움직이는 명령을 주는구나? ]라고 받아들일 수 있습니다. - 실제 animate() 메서드는 CSS의 변화에 시간차를 주는 메서드입니다. - CSS속성의 transition 과 비슷한 느낌을 받죠? 비슷해도 명령을 디테일하게 줄 수 있다는 점이 조금 다릅니다. - 그럼 자세한 내용들은 아래에서 정리하면서 보도록 하겠습니다. 1. animate()의 기본문법 ## 기본문법 animate({CSS속성정의},시간,콜백함수); - 기본적인 매개변수는 위에 보이는 대로 CSS속성, 시간, 콜백함수가 있습니.. [jQuery강좌] 12강 시각효과메서드 - 오쌤의 니가스터디 1. 시각효과메서드 - 제이쿼리의 시각효과메서드는 문서 객체를 사라지게 하거나 나타나게 하는 것을 의미합니다. - 사라지게 하거나 나타나게 하는 것은 여러 가지 종류가 있어 정리해보도록 하겠습니다. 1) 시각효과메서드 정리 메서드 설명 show() 좌측상단을 기준으로 요소를 나타나게 하는 메서드 hide() 좌측상단을 기준으로 요소를 사라지게 하는 메서드 toggle() show()와 hide() 메서드를 번갈아 실행하는 메서드 slideDown() 상단을 기준으로 요소를 나타나게 하는 메서드 slideUp 상단을 기준으로 요소를 사라지게 하는 메서드 slideToggle() slideDown()과 slideUp() 메서드를 번갈아 실행하는 메서드 fadeIn() 투명도를 기준으로 요소를 나타나게 하는 .. [jQuery강좌] 11강 제이쿼리 이벤트 관련 메서드 - 오쌤의 니가스터디 1. 이벤트(event) 란? - 이벤트라는 것은 사용자의 모든 작업에 웹페이지가 응답할 수 있는 모든 작업을 이벤트라고 합니다. - 보통 명령이 발생되는 시점을 말합니다. - 우리가 준 명령이 사용자가 원하지도 않는데 계속 실행된다면 어떨까요? 불편하겠죠? - 예를 들어 스마트폰이 켜지는 것이 우리가 뭔가 작업을 하지 않았는데, 계속 켜진다고 생각해보면 됩니다. 너무 무섭거나? 혹은 고장났구나라고 생각되겠죠? - 그래서 명령은 발생 시점이라는 것이 있습니다. 보통 스마트폰이 켜지는 것은 우리가 터치했을 때, 혹은 전화가 올때, 알림이 울릴때 이럴때겠죠? 이런 것을 시점이라고 합니다. - 그리고 DOM(Document Object Model)에 발생되는 이벤트의 종류는 무엇이 있는지 대표적인 것을 보도록.. [jQuery강좌] 10강 문서객체 영역 메서드 - 오쌤의 니가스터디 1. 문서객체 영역메서드의 종류 - 문서객체 영역메서드는 w3school사이트에서 워낙 잘 그려놔서 참조해서 가져왔습니다. - 우리가 문서객체(선택자=요소=태그)가 있을 때 영역이 있습니다. - 이때 영역을 어떻게 처리했냐에 따라 메서드를 다 다르게 작성해야 합니다. - CSS에서 영역을 표시할 때 width/height속성으로 크게 영역을 잡습니다. - 거기에 padding이라는 테두리 안쪽 여백, margin이라는 테두리 바깥쪽 여백도 있습니다. - 그리고 테두리를 뜻하는 border라는 속성도 있습니다. - 이 전체가 모여 요소를 이루는 영역이 되는 것입니다. - 이때 과연 개발자가 필요로 하는 요소는 무엇인가에 따라 메서드를 다르게 써야 하는 것입니다. 메서드명 설명 width() 요소의 너비를 .. [jQuery강좌] 9강 제이쿼리 CSS 조작 메서드 - 오쌤의 니가스터디 1. 제이쿼리 CSS 조작메서드 종류 - 제이쿼리는 CSS 조작을 위한 몇가지 방법이 있습니다. 표로 정리해보도록 하겠습니다. 메서드명 메서드사용법 설명 addClass() $('문서객체선택').addClass('클래스명'); 문서객체에 매개변수 클래스를 추가하는 메서드 removeClass() $('문서객체선택').removeClass('클래스명'); 문서객체에 매개변수 클래스를 제거하는 메서드 toggleClass() $('문서객체선택').toggleClass('클래스명'); 문서객체에 매개변수 클래스를 추가/제거를 번갈아 실행하는 메서드 css() $('문서객체선택').css('css속성명',값); 문서객체 CSS를 컨트롤하는 메서드 - 뒤에 Class가 붙은 메서드들은 전부 매개변수가 한개입니다... [jQuery강좌] 8강 문서객체 추가/이동/복제/삭제 메서드 - 오쌤의 니가스터디 1. 문서객체추가/이동메서드 - 문서객체를 동적으로 생성한 것을 추가할 땐 추가메서드가 되고, 기존에 있는 메서드를 선택하면 이동하게 되는 메서드입니다. 1) 문서객체선택을 기준으로 매개변수를 추가하는 유형 메서드명 사용법 설명 append() $('A').append(B); A의 마지막 자손으로 B를 추가하는 메서드 prepend() $('A').prepend(B); A의 첫번째 자손으로 B를 추가하는 메서드 after() $('A').after(B); A의 동생으로 B를 추가하는 메서드 before() $('A').before(B); A의 형으로 B를 추가하는 메서드 ** 사용될 이미지 출처 : https://icon-icons.com/icon/fish-movie/35099 Fish, movie Ic.. 이전 1 2 다음
