[jQuery] 자주 쓰는 텍스트/내용 관련 함수 모음

1. .text()

- 선택한 요소들의 텍스트 내용을 불러오거나 설정

// 텍스트 읽기
let txt = $("#myDiv").text();

// 텍스트 변경
$("#myDiv").text("새 텍스트");

 

2. .html()

- 선택한 요소들의 html 내용을 가져오거나 설정

// HTML 읽기
let html = $("#myDiv").html();

// HTML 변경
$("#myDiv").html("<strong>굵은 텍스트</strong>");

 

3. .val()

- <input>, <select>, <textarea> 같은 폼 요소의 값(value) 을 가져오거나 설정

// 값 읽기
let val = $("#inputBox").val();

// 값 변경
$("#inputBox").val("새 값");

 

4. .attr()

- 선택한 요소의 속성(attribute) 값을 가져오거나 설정

// 속성 읽기
let href = $("a").attr("href");

// 속성 변경
$("a").attr("href", "https://google.com");

 

5. .css()

- 선택한 요소의 css 스타일 속성을 가져오거나 설정

// 스타일 읽기
let color = $("p").css("color");

// 스타일 변경
$("p").css("color", "blue");

 

6. .append()

- 선택한 요소 내부의 마지막 자식으로 내용 추가

// div
<div>
     셀렉트박스1: <select id="selectBox"></select>
     셀렉트박스2: <select></select>
 </div>

const option1 = "<option>첫번째</option>",
              option2 = "<option>두번째</option>",
              option3 = "<option>세번째</option>";
    
        // TODO 1: 위의 3개 옵션을 셀렉트박스1에 추가
        // .append() : 선택한 요소의 자식 중 마지막에 삽입
        $("#selectBox").append(option1, option2, option3);

 

7. .prepend()

- 선택한 요소 내부의 처음 자식으로 내용 추가

// div
<div>
     셀렉트박스1: <select id="selectBox"></select>
     셀렉트박스2: <select></select>
 </div>

const option1 = "<option>첫번째</option>",
              option2 = "<option>두번째</option>",
              option3 = "<option>세번째</option>";
   
        $("#selectBox").prepend(option1, option2, option3);

 

8. .on()

- 이벤트 등록

$("button").on("click", function() {
    alert("클릭됨");
});

 

9. .each()

- 반복문 (많이 사용하는 듯)

$("li").each(function(index, element) {
    console.log(index, $(element).text());
});

 

10. .hide() / .show() / .toggle()

- 요소를 숨기거나 보이게 할 때

$("#myDiv").hide();
$("#myDiv").show();
$("#myDiv").toggle();  // 숨기기/보이기 토글