코딩물고기

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 34. show와 hide 관련 메소드 * hide() 메소드 - 노출되어 있는 요소 영역을 숨김 $("요소").hide(); * show() 메소드 - 노출되어 있는 요소 영역을 보여줌 $("요소").show(); * show()와 hide() 메소드 이용 효과 - 이벤트를 발생시킬 버튼과 사라질 문장을 생성함 이 버튼을 누르면 아래 글이 사라집니다 위 버튼을 누르면 이 글이 나타납니다. - 버튼을 클릭하면 문장이 사라지는 메소드를 추가함 $(document).ready(function(){ $("p").hide(); $("button").click(function(){ $("p").show(); }); });

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 33. 이벤트 연결 * 이벤트 - 마우스를 해당 객체에 올리거나 클릭, 또는 키보드를 치는 등의 브라우저에서 발생하는 모든 동작을 의미 - 주요 메소드 mouseup : function(){} mousedown : function(){} mouseenter : function(){} mouseleave : function(){} click : function(){} * 클릭 이벤트 처리 - 클릭 이벤트 대상이 될 요소들을 생성한다 클릭하면 사라집니다 클릭해 보세요! 클릭! - 클릭하면 요소가 사라지면서 경고 창을 출력하는 함수를 정의함 $(document).ready(function(){ $("p").on("click", functi..

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 32. 스타일 조작 * css() 메소드 - 선택된 요소의 스타일을 조작한다 기본 상태 : hello world! 메소드 사용 : $("p").css("color","blue"); 결과 : Hello world! * addClass()와 removeClass() 메소드 - 선택자에 의해 선택된 요소에 클래스 스타일을 추가하거나 제거할 수 있다 기본상태 : hello world! 스타일지정 : .red{color : red} 메소드사용 : $("p").addClass("red"); 결과 : hello world! * css() 메소드 이용 스타일 조작 - css()를 적용할 요소들과 이벤트를 발생시킬 버튼을 생성함 빨간색 배경요소 주황..

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 31. 문자 조작 방법 * text()와 html() 메소드 - 선택 연산자로 선택한 요소에 대해서 text() 메소드를 이용해 문자를 변경하거나 html() 메소드를 이용해 선택된 요소의 HTML 요소를 변경함 기본상태 : hello world! 메소드사용: $("p").text("Thank you!"); $("h1").html("Thank you!"); 결과 : Thank you! "Thank you!" * val()와 attr() 메소드 - 선택 연산자로 선택한 요소의 value 값을 val() 메소드를 사용하여 얻어오거나 변경할 수 있고, attr() 메소드를 사용하여 속성값을 얻어오거나 변경할 수 있다. 기본상태 : 메소드 ..

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 30. 문서 객체 생성 * prepend()와 append() 메소드 - prepend() : 특정 문서 객체의 이전 부분에 문서 객체를 생성함 - append() : 특정 문서 객체의 맨 뒤에 문서 객체를 생성함 기본 상태 : HELLO 메소드 사용 : $("p").prepend("prepend"); $("p").append("append"); 결과 : prepend HELLO append * before()와 after() 메소드 - before() : 이전 문서 객체를 생성 - after() : 다음에 문서 객체를 생성 기본 상태 : HELLO 메소드 사용 : $("p").before("before"); $("p").after(..

경기도 일자리 재단에서 수업을 배웠고 자료를 참고하여 공부를 해보았다. 29. 문서 객체 선택 - 문서 객체를 다양한 방식으로 선택할 수 있다 - 일반적인 선택이 아닌 filter 메소드를 이용해 특정한 객체를 선택 할 수 있다 - 주요 함수 : first(), last(), eq() $(요소).eq(0); //0번 인덱스 문서 객체 선택 $(요소).first(); //첫 번째 문서 객체 선택 $(요소).filter(function(i){i ==0;}); * filter 관련 메소드로 문서 객체 선택 - filter 메소드를 이용해 선택할 객체들 생성 - 작성된 객체를 선택하는 메소드 생성 $(document).ready(function(){ var first = $('h1').first().text()..