자주 쓰이는 JQuery 함수
Value 값 조회 / 변경 (val)
- Value 값 조회 : 해당 요소의 value를 가져온다
$("요소").val();- Value 값 변경 : 해당 요소의 value를 변경한다
$("요소").val(변경할 값);
텍스트 값 조회 / 변경 (text. 해당 태그 내부의 순수 문자열)
해당 태그 내부의 순수 문자열만을 가져온다는 것은 무슨 의미일까요? <p><strong>안녕하세요</strong></p>라는 태그를 text로 조회하면 안녕하세요만을 가져오게 되는데요. 태그 내부의 HTML 태그는 무시하고 순수하게 텍스트만을 처리합니다.
마찬가지로 텍스트 값을 변경할 때에도 동일하게 처리되는데요. 텍스트 값을 <strong>안녕하세요</strong>으로 변경하게 되면, 굵은 글자를 가진 안녕하세요로 변경되는 게 아니라 <strong>안녕하세요</strong>이라는 문자열 자체로 변경됩니다.
- Text 값 조회 : 해당 요소의 text를 가져온다.
$("요소").text();- Text 값 변경 : 해당 요소의 text를 변경한다.
$("요소").text(변경할 내용);
InnerHTML 값 조회 / 변경 (html. 해당 태그 내부의 원형)
위의 text 함수와는 반대로 html함수는 태그 내부 그 자체를 가져옵니다. <p><strong>안녕하세요</strong></p>라는 태그를 html 값으로 조회하면 이번에는 <p><strong>안녕하세요</strong></p>를 그대로 가져오는 것이지요.
또한 html 값을 태그에 담긴 값으로 변경하면 그대로 반영됩니다. html 값을 <strong>안녕하세요</strong> 으로 변경하게 되면 굵은 글자를 가진 안녕하세요로 변경되지요.
- HTML 값 조회 : 해당 요소의 innerHTML을 가져온다.
$("요소").html();- HTML 값 변경 : 해당 요소의 innerHTML을 변경한다.
$("요소").html(변경할 내용);
CSS 스타일 변경 (css)
- 속성 한 가지만 변경할 때
$("요소").css("속성", "값");
// ex) $("요소").css("background-color", "pink");- 여러 속성을 함께 변경할 때
- 속성-값 연결에 ,(쉼표) 대신 :(콜론)을 사용하고, 속성-값 쌍을 ,(쉼표)로 구분한다.
$("요소").css({
"속성1" : "값1",
"속성2" : "값2"
});
속성 값 조회 / 변경 (attr)
- Attr 값 조회 : 해당 요소의 특정 속성 값을 가져온다.
$("요소").attr("속성명");- Attr 값 변경 : 해당 요소의 특정 속성 값을 변경한다. 만약 해당 속성이 없다면 추가한다.
$("요소").attr("속성명", "값");
요소 숨기기 / 드러내기 (hide, show)
CSS 스타일의 display : None과 display : Block을 각각 쉽고 간결하게 표현할 수 있습니다.
- 요소 숨기기
$("요소").hide();- 요소 드러내기
$("요소").show();
요소 내부 모든 내용 비우기 (empty)
요소 내부의 태그 포함 모든 내용을 비웁니다. 여는 태그와 닫는 태그만 남아있게 되는 것이지요. 예를 들어 게시판에서 페이지를 변경하지 않고 새로운 글 목록을 받아와야 한다면 기존의 글 목록을 비워내야 하는데, 이럴 때 empty 함수를 사용합니다.
- 요소 비우기
$("요소").empty();
이벤트 바인딩 (on)
$("요소").on("이벤트", function(){
// 이벤트를 처리할 코드
});
동적 이벤트 할당
동적 이벤트 바인딩
이벤트 바인딩이 버튼 클릭 같은 이벤트가 발생했을 때 이를 처리하는 함수를 정의하는 것이었다면, 동적 이벤트 바인딩은 무엇일까요? 예를 들어 새로운 댓글을 작성한 상황을 가정해 보겠습니다. 그러면 기존의 웹페이지에는 없던 댓글 요소가 댓글 목록에 띵 하고 나타납니다.
그런데 이 댓글 요소에는 댓글 수정과 댓글 삭제 버튼이 달려있는데요. 이 댓글 수정과 삭제 버튼에 대해 어떻게 이벤트 바인딩을 할 수 있을까요? 요소를 지정해 놓으려 해도 댓글이 나중에 추가되기 때문에 기존의 웹페이지에는 이 댓글 요소가 없습니다. 이처럼 기존 웹페이지에 존재하지 않다가 실시간으로 추가되는 요소를 동적 요소라고 합니다.
그리고 이 동적 요소의 이벤트를 처리하는 함수를 정의하는 것이 동적 이벤트 바인딩입니다. 미래에 생기는 요소는 어쨌든 간에 기존의 웹페이지에 존재하는 요소 안에 생길 것입니다. 이렇게 기존의 웹페이지에 이미 존재하고 있는 요소를 정적 요소라고 하는데요. 이 정적 부모 요소에게 미래에 생길 요소에 대한 이벤트를 위임해서 해당 이벤트 처리 함수를 미리 정의할 수 있습니다.
그런데 왜 여기서 정적 '부모' 요소라고 표현했냐면, 사실 정적 요소를 기준으로 한다 치면 <body> 태그에도 이벤트를 위임할 수 있습니다. 그런데 이 경우에는 불필요하게 넓은 범위에서 이벤트를 감지하게 되기 때문에 성능적으로 굉장히 안좋습니다. 이것보다는 댓글 목록을 관리하는 <div> 태그 같이 직전의 정적 부모 요소를 기준으로 잡는 게 성능 면에서 가장 효율적입니다.
그리고 이때 이벤트 처리 함수 내에서 이벤트가 호출된 동적 요소는 $(this)로 표현됩니다. 이 $(this)를 기준으로 부모 요소나, 형제 요소, 자식 요소에 접근해 이를 조작하는 것이 가능합니다. 보통 호출된 동적 요소 자체를 조작하기보다는 부모 요소의 어떤 다른 것들을 조작하는 경우가 대부분입니다. 예를 들어 댓글 수정 버튼을 눌렀을 때 수정 버튼 자체가 바뀌기보다는 댓글 내용 부분이 수정할 수 있도록 바뀌거나 하는 것처럼요.
마지막으로 하나 참고할 만한 사항으로, 위의 방법처럼 동적 이벤트 할당을 할 수도 있지만 삽입되는 요소 자체에 onclick과 같이 이벤트 바인딩을 해서 삽입하는 방법도 있습니다. 다만 이 경우에 삽입할 요소에 대한 코드가 길어지고 복잡해지기 때문에 저는 정적 부모 요소에 동적 이벤트 바인딩 하는 방식을 선호합니다.
- 정적 부모 요소에 동적 이벤트 바인딩하기
$("정적 부모 요소").on("이벤트명", "감지할 동적 자손 요소", function() {
// 이벤트를 처리할 코드
});
기준 요소의 부모 요소로부터 특정 요소 접근하기
- parent() : 기준 요소의 직계 부모 요소 선택
$("기준 요소").parent();- closest() : 기준 요소의 부모 요소부터 모든 조상 요소들 중 조건에 맞는 가장 가까운 요소 선택
$("기준 요소").closest("검색할 요소");
기준 요소의 자식 요소로부터 특정 요소 접근하기
- children() : 기준 요소의 직계 자손 요소들 중 조건에 맞는 모든 요소 선택
// 조건이 없는 경우 직계 자손 요소들 모두 선택
$("기준 요소").children( );
// 조건에 맞는 직계 자손 요소 선택
$("기준 요소").children("검색할 요소");- find() : 기준 요소의 자손 요소부터 모든 후손 요소들 중 조건에 맞는 가장 가까운 요소 선택
$("기준 요소").find("검색할 요소");
기준 요소의 형제 요소로부터 특정 요소 접근하기
- prev() : 기준 요소의 형제 요소들 중 바로 앞쪽 요소 선택
$("기준 요소").prev();- next() : 기준 요소의 형제 요소들 중 바로 뒷쪽 요소 선택
$("기준 요소").next();- siblings() : 기준 요소의 형제 요소들 중 조건에 맞는 요소 선택
// 조건이 없는 경우 형제 요소들 모두 선택
$("기준 요소").siblings();
// 조건에 맞는 형제 요소 선택
$("기준 요소").siblings("검색할 요소");'크래프톤 정글 > 로드 투 정글(입학시험)' 카테고리의 다른 글
| [로드 투 정글] 2. 입학 시험(5) - DB(MongoDB) (0) | 2025.03.06 |
|---|---|
| [로드 투 정글] 2. 입학 시험(4) - 서버(Flask) (0) | 2025.03.05 |
| [로드 투 정글] 2. 입학 시험(3) - 프론트엔드(JQuery, AJAX) (0) | 2025.03.03 |
| [참고자료] 외부 CSS, JS 파일을 HTML 문서에 연결하는 방법 (0) | 2025.03.02 |
| [로드 투 정글] 2. 입학 시험(2) - 프론트엔드(HTML, CSS, Javascript) (0) | 2025.03.01 |