1) 학습한 내용
Form 태그 선택자
Form 태그 내부의 입력에 관련된 태그들에 대한 선택자
- :input : 모든 입력에 관련된 태그들을 선택
$(function(){
$(":input").css("background-color", "yellow");
});- :text : type 속성이 text인 input 태그를 선택
- :password : type 속성이 password인 input 태그를 선택
- :radio : type 속성이 radio인 input 태그를 선택
- :checkbox : type 속성이 checkbox인 input 태그를 선택
- :submit : type 속성이 submit인 input 태그를 선택
- :rest : type 속성이 rest인 input 태그를 선택
- :button : type 속성이 button인 input 태그를 선택
- :image : type 소것ㅇ이 image인 input 태그를 선택
- :file : type 속성이 file인 input 태그를 선택
$(function(){
$(":text").css("background-color", "yellow");
$(":password").css("background-color", "red");
});-
:enabled : 활성 상태인 input 태그가 선택
-
:disabled : 비 활성 상태인 input 태그가 선택
$(function(){
$(":enabled").css("background-color", "yellow");
$(":disabled").css("background-color", "red");
});jQuery 이벤트 함수
jQuery는 여러 이벤트에 대해 이벤트 처리 할 수 있는 함수를 제공한다. 각 함수는 해당 이벤트가 발생됐을 때 등록된 함수를 자동으로 호출
- click : 클릭
- Dblclikck : 더블 클릭
- Mouseenter : 마우스 커서가 들어왔을 때
- Mouseleave : 마우스 커서가 나갔을 때
- Mousedown : 마우스 키를 눌렀을 때
- Mouseup : 마우스 키를 떼었을 때
- Hover : 마우스 커서가 들어왔을 때와 나갔을 때
- focus : 포커스가 주어졌을 때
- blur : 포커스를 잃었을 때
정리
- jQuery는 다양한 이벤트를 처리할 수 있도록 함수를 제공한다.
- 이벤트의 이름과 동일한 함수를 이용해 이벤트를 처리할 수 있다.
- on을 사용하면 지정된 이벤트를 등록할 수 있다.
- off를 사용하면 지정된 이벤트를 제거할 수 있다.
- one을 사용하면 1회성 이벤트 등록이 가능하다.
$(function(){
$("#a1").click(function(){
$("#a1").css("background-color", "black");
$("#a1").css("color", "white");
});
$("#a2").dblclick(function(){
$("#a2").css("background-color", "black");
$("#a2").css("color", "white");
});
$("#a3").mouseenter(function(){
$("#a3").css("background-color", "black");
$("#a3").css("color", "white");
});
$("#a3").mouseleave(function(){
$("#a3").css("background-color", "white");
$("#a3").css("color", "black");
});
$("#a4").mousedown(function(){
$("#a4").css("background-color", "white");
$("#a4").css("color", "white");
});
$("#a4").mouseup(function(){
$("#a4").css("background-color", "white");
$("#a4").css("color", "black");
});
$("#a5").hover(function(){
$("#a5").css("background-color", "black");
$("#a5").css("color", "white");
}, function(){
$("#a5").css("background-color", "white");
$("#a5").css("color","black");
});
$("#a6").focus(function(){
$("#a6").css("background-color", "blue");
});
$("#a6").blur(function(){
$("#a6").css("background-color", "red");
});
$("#a7").on("click", function(){
alert('#a7');
});
$("#a8").one("click", function(){
alert('#a8');
});
$("#a9").on({
click : function(){
alert('click');
},
mouseenter : function(){
$("#a9").css("background-color", "black");
},
mouseleave : function(){
$("#a9").css("background-color", "white");
}
});
function remove_event(){
$("#a7").off("click");
}
});DOM
- Document Object Model
- text : 태그 사이의 문자열을 제어
- html : 태그 내부의 html을 제어
- val : 입력 도구들의 value 속성값을 제어
- attr : 태그의 속성을 제어
attr 설정 : image 한 개 준비 -> 프로젝트 - src - webapp -image 폴더 생성 과정을 거쳐서 준비한 image를 생성한 image폴더에 넣기
function getAttr(){
var src = $("#a1").attr("src");
var width = $("#a1").attr("width");
var height = $("#a1").attr("height");
var id = $("#a1").attr("id");
$("#result").html("src : " + src + "<br/>"
+ "width : " + width + "<br/>"
+ "height : " + height + "<br/>"
+ "id : " + id + "<br/>");
}
function setAttr(){
$("#a1").attr("width", 544);
$("#a1").attr("height", 184);
}
- text 함수를 사용하면 태그 내부의 문자열을 제어할 수 있다.
- html 함수를 사용하면 태그 내부의 html 코드를 제어할 수 있다.
- val 함수를 사용하면 입력 도구들의 value 속성을 제어할 수 있다.
- attr ㅎ마수를 사용하면 태그의 속성을 제어할 수 있다.
append, prepend
- append : html 코드나 태그를 태그 내부의 뒤에 추가
- prepend : html 코드나 태그를 태그 내부의 앞에 추가
function append1(){
$("#a1").append("<p>새롭게 추가한 p1</p>");
}
function append2(){
var p = $("<p>");
p.text("새롭게 추가한 p2");
$("#a1").append(p);
}
function prepend1(){
$("#a1").prepend("<p>새롭게 추가한 p3</p>");
}
function prepend2(){
var p = $("<p>");
p.text("새롭게 추가한 p4");
$("#a1").prepend(p);
}
after, before
- after : html 코드나 태그를 태그 다음에 배치
- before : html 코드나 태그를 태그 앞에 배치
function after1(){
$("#a1").after("<p>새롭게 추가한 p태그 1</p>");
}
function after2(){
var p = $("<p>");
p.text("새롭게 추가한 p태그 2");
$("#a1").after(p);
}
function before1(){
$("#a1").before("<p>새롭게 추가한 p태그 3</p>");
}
function before2(){
var p = $("<p>");
p.text("새롭게 추가한 p태그 4");
$("#a1").before(p);
}remove, empty
- remove : 태그를 제거
- empty : 태그 내의 모든 태그를 제거
function remove_a2(){
$("#a2").remove();
}
function empty_a1(){
$("#a1").empty();
}정리
- append : html 코드나 태그를 태그 내부의 뒤에 추가
- prepend : html 코드나 태그를 태그 내부의 앞에 추가
- after : html 코드나 태그를 태그 뒤에 붙임
- before : html 코드나 태그를 태그 앞에 붙임
- remove : 태그를 제거
- empty : 태그 내의 모든 태그를 제거
2) 학습내용 중 어려웠던 점
이번 수업에 서버 문제 해결법을 알았기 때문에 대체적으로 진행이 무난했다.
3) 해결방법
이번 수업은 대체적으로 무난했지만 복습은 필수다.
4) 학습소감
오늘 수업은 jQuery 사용법과 코딩법을 학습하게 되었다. 복습이 필요한 이유는 인간의 기억력은 컴퓨터와는 다르게 시간이 지날수록 자료가 풍화되어버리지만 컴퓨터는 자료가 외부에 의하지 않으면 사라지지 않는다.
coding