속성값 읽기
HTML태그 요소에 적용된 특정 속성값을 얻기 위해서는 css() 함수를 사용한다.
var 변수 = $(“요소”).css( “CSS속성이름” );
속성값 변경/추가 하기
HTML태그 요소에 특정 CSS값을 지정할 경우, attr()함수와 용법이 동일하다.
$(“요소”).css( “속성이름”, “값” );
또는
$(“요소”).css({
“속성1이름”: “값”,
“속성1이름”: “값”,
“속성n이름”: “값”
});
bind 함수
-jQuery에서 이벤트 처리를 목적으로 사용하는 기본 함수.
-앞서 소개한 이벤트 처리 기법은 모두 이 함수에서 파생됨.
-bind 함수의 기본형은 적용 할 이벤트 이름과 함수를 파라미터로 전달하는 형식.
$(“요소”).bind( “이벤트”, function () {
... 이벤트 처리 로직 ...
} );
bind함수에 이벤트 이름을 공백으로 구분하여 여러 개 지정하여 하나의 공통된 함수를 연결 할 수 있다.
$(“요소”).bind( “이벤트1 이벤트2 … 이벤트n”, function() {
... 이벤트 처리 로직 ...
} );
하나의 요소에 JSON형태로 구성된 다수의 이벤트를 한꺼번에 연결하는것도 가능하다.
$(“요소”).bind({
“이벤트1”: function() { ... 이벤트 처리 로직 ...},
“이벤트2”: function() { ... 이벤트 처리 로직 ...},
“이벤트n”: function() { ... 이벤트 처리 로직 ...}
});
one 함수
한 번 정의된 이벤트를 사용자가 반복동작으로 여러 번 실행시키게 될 경우, 경우에 따라 의도치 않은 결과를 가져 올 수 있다.
예) 통신 상태가 느릴 때 게시판의 글 저장 버튼을 여러 번 누르게 되어 글이 중복저장되는 경우.
one 함수는 이벤트가 한번만 실행되기 위한 일회성 처리이다.
사용 방법은 bind 함수와 동일하다.
$(“요소”).one( “이벤트”, function () {
... 이벤트 처리 로직 ...
} );
★★★ on 함수 ★★★
bind() 함수와 one() 함수가 이미 <body>안에 생성되어 있는 요소에 대한 이벤트 정의인 반면, on() 함수는 앞으로 동적으로 추가할 요소에 대한 이벤트를 미리 정의해 놓는 기능이다.
덧글 쓰기의 경우 페이지에 동적으로 추가된 글에 대한 삭제, 수정 버튼의 이벤 트를 미리 정의해 놓을 수 있다.
on 함수의 사용법
새로 추가될 요소에 대한 이벤트이기 때문에, 이 이벤트가 정의 되는 시점에서는 대상이 존재하지 않게 된다. 그러므로, 이 이벤트는 document 객체에 설정해야 하고, 다음의 한가지 용법만 있다.
$(document).on( “이벤트”, “셀렉터”, function () {
... 이벤트 처리 로직 ...
} );
장점 : on()함수를 사용하여 새롭게 생성 될 동적 요소에 대한 이벤트를 미리 정의 해 놓게 되면, 자동으로 연결되는 과정에서 하나의 이벤트를 참조하게 되므로 훨씬 효율적인 처리가 된다.
// 삭제 버튼 클릭시의 동작을 "미리" 지정
$(document).on("click", ".delete_btn", function() {
if (confirm("정말 선택하신 항목을 삭제하시겠습니까?")) {
$(this).parents(".comment_item").remove();
}
});
'jQuery' 카테고리의 다른 글
| 동적으로 구현된 select 값 DB에 저장된 값으로 불러오기 (0) | 2017.03.13 |
|---|---|
| Input Box 내용 초기화 하는방법 (0) | 2017.03.10 |
| javascript 다른페이지에 파라미터 전달 (0) | 2017.03.10 |
| querySelectorAll 활용 (0) | 2017.03.10 |
| jQuery 기본(1) (0) | 2017.03.10 |