[KDT 포스코x코딩온 10] 웹 풀스택 과정 회고록 (9) | JQuery

 

📚 jQuery 

jQuery는 javascript를 간소화하고 더 쉽게 다룰 수 있도록 만들어진 라이브러리다.

자바스크립트에서 자주 사용되는 DOM 조작과 이벤트 처리 등의 작업을 더 쉽게 수행할 수 있도록

JQuery는 간편한 문법과 유틸리티 함수를 제공한다. jQuery를 사용하면 간단한 CSS 선택자를 이용하여

원하는 DOM 요소를 선택하고 선택된 요소에 대해 동적으로 스타일을 변경하거나 이벤트 처리를 하는 등의

작업을 간단한 코드로 수행 할 수 있다.

 

 jQuery 사용법 [ CDN ] 

https://jquery.com/download/

Download jQuery | jQuery

 

 

script 복사 후 개발중인 script tag에 복사 붙여넣기

 

📌 jQuery 기초

$(선택자).함수();

 

$ 뜻은 jQuery() 함수의 축약 형태로, 식별자 역할

jQuery의 $는 javscript의 

document.querySelector('선택자')
document.querySelectorAll('선택자') 유사한 역할을 한다. 

$(선택자).val();
input과 같은 value 값을 가져올 수 있다.

---

$(선택자).val("설정할 값");
input과 같은 곳에 value 값을 설정할 수 있다.

HTML코드

1.    <input type="text" id="input1" />
2.    <button onclick="setValue()">setValue</button>
3.    <button onclick="getValue()">getValue</button>
4.    <br />
5.    <span style="display: inline-block; width: 100px"> 안녕 </span>
6.    <button onclick="changeStyle()">changeStyle</button>
7.    <button onclick="changeAttribute()">changeAttribute</button>
8.    <button onclick="changeText()">changeText</button>
9.   <button onclick="changeHTML()">changeHTML</button>

 

 

 

1.      function setValue() {
        $("#input1").val("setting");
      }
//////////////////////////////////////

2.      function getValue() {
        alert($("#input1").val());
      }

 

1. setValue() 함수를 2번째 줄 button에서 사용하며, button 클릭시 id값 input1요소에 "setting 값" 추가한다.

2. getValue() 함수를 3번째 줄 button에서 사용하며, button 클릭시 input의 val(값)을 가져와서 alret으로 출력한다.

 

 

---

 

📌 style 변경하기

$(선택자).css("속성","속성값");

      function changeStyle() {
        $("span").css("font-size", "28px");
        $("span").css("background-color", "orange");
      }

changeStyle() 함수를 6번째 줄 button에 사용하며, button 클릭시 span요소의 글자 값을 28px, 배경색: orange로 변경한다.

 

 

---

 

📌 속성 변경하기

$(선택자).css("속성","속성값");

 

속성 변경하기 (요소의 속성으로 있는 값들을 변경할 때 사용함)

$(선택자).arttr("속성","속성값");

      function changeAttribute() {
        $("#input1").attr("placeholder", "input");
      }

changeAttribute() 함수를 7번째 줄 button에 사용하며, button 클릭시 id값이 'input1'에 placeholder 속성에 "input"의 텍스트를 추가한다.

ID값 input1의 요소는 input요소이며, placeholder 속성을 가지고 있어서 placeholder 속성이 사용가능하다.

즉, attr은 그 요소에 속성이 가지고 있는지 없는지 알고 써야 함.

 

---

 

📌 Text 변경하기

$(선택자).text("내용");

      function changeText() {
        $("span").text("jQuery text~");
      }

changeText() 함수를 8번째 button에 사용하며, span 내용을 "jQuery text~"로 변경

 

 

📌 HTML(요소) 변경하기

$(선택자).html("<>html</>");

      function changeHTML() {
        $("p").html("<h3>jQuery html</h3>");
      }

changeHTML() 함수를 9번째 button에 사용하며, p요소의 기존 내용과 달리 <h3></h3> 요소를 추가하여 jQuery html내용 추가

 

 

 

---

 

 

 

📌 요소 추가 [append, prepend, before, after ]

예시 HTML

1    <ul>
2     <li>orange</li>
3      <li class="green">green</li>
4      <li>navy</li>
5      <!-- li 추가 -->
6    </ul>
7
8   <button onclick="appendJQ()">append jQuery</button>
9   <button onclick="prependJQ()">preppend jQuery</button>
10   <button onclick="beforJQ()">before jQuery</button>
11   <button onclick="afterJQ()">after jQuery</button>

 

 

📖 요소추가 [ append ]
: 선택된 요소의 자식 요소 중 마지막으로 추가

$(선택자).append(요소)

      function appendJQ() {
        $("ul").append("<li>jQuery append</li>");
      }

코드 결과

appendJQ() 함수가 들어가있는 버튼을 클릭하면 ul태그 자식 li태그들 중 가장 마지막 위치에 jQuery append li요소가 삽입 됨

 

---

📖 요소 추가 [prepend]

: 선택된 요소의 자식 요소 중 첫 번째로 추가

$(선택자).prepend(요소)

 

      function prependJQ() {
        $("ul").prepend("<li>jQuery append</li>");
      }

코드결과

prependJQ() 함수가 들어간 버튼 클릭시 ul태그 자식 li태그들 중 가장 첫번째 위치에 jQuery append li 요소가 삽입 됨

 

---

📖요소 추가 [befor]

: 선택된 요소의 형제 요소로 이전 형제로 추가.

$(선택자).befor(요소)

      function beforJQ() {
        $(".green").before("<li>before jQuery</li>");
      }

 

코드 결과값

beforJQ() 함수가 들어간 버튼 클릭시 class이름이 green인 형제 요소 이전 위치에 li태그와 내용 삽입

 

---

📖요소 추가 [after]

: 선택된 요소의 형제 요소로 다음 형제로 추가.

$(선택자).after(요소)

      function afterJQ() {
        $(".green").after("<li>after jQuery</li>");
      }

코드 결과값

afterJQ() 함수가 들어간 버튼 클릭시 class이름이 green 형제 요소 다음 위치에 li태그와 내용 삽입

 

---

📌요소 삭제 [ remove, empty ]

📖 요소삭제 [ remove ]

- 선택한 요소를 DOM 트리에서 삭제

- 인자를 선택자로 넘겨주면, 선택한 요소 중 조건을 만족하는 요소만 삭제

$(선택자).remove(요소)

      function removeJQ() {
        $("#li2").remove();
      }

 

왼쪽 : 삭제 전 /오른쪽 : 삭제 후

removeJQ() 함수가 들어간 버튼 클릭시 ID값이 li2 요소 삭제

 

---

📖 요소 삭제 [ empty ]

- 선택한 요소의 자식 요소를 모두 삭제

- 선택된 요소는 남아 있고 그 안이 전체 비워짐

$(선택자).empty(요소)

      function emptyJQ() {
        $(".nums").empty();
      }

왼쪽: 삭제 전 / 오른쪽: 삭제 후

 

emptyJQ() 함수가 들어간 버튼 클릭시 class이름이 nums인 자식요소 모두 삭제한다 선택된 nums는 살아있음

 

 

---

📌 요소 탐색 [parent, parents, next, prev, children]

 

요소 탐색 예시 HTML

    <div>
      <ul class="nums">
        <li>1</li>
        <li id="li2">2</li>
        <li>3</li>
      </ul>
    </div>

 

 

 

📖 요소탐색 [parent]

: 바로 위에 존재하는 하나의 부모 요소 선택

$(선택자).parent().함수()

      function findParent() {
        console.log($("#li2").parent());
      }

 

---

li의 부모 ul.nums 출력

findParent() 함수가 들어간 버튼 클릭시 id값이 li2인 부모 요소를 반환받아서 console.log 출력

li2 부모요소 ul.nums 출력

 

 

---

📖 요소탐색 [parents]

: 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택

$(선택자).parents().함수()

      function findParents() {
        console.log($("#li2").parents());
      }

li 부모, 조상 모두 출력

findParents() 함수가 들어간 버튼 클릭시 id값이 li2는 부모뿐만 아닌 모든 조상을 반환받아서 console.log 출력

li 부모요소 뿐만 아니라 위의 조상요소까지 출력 ul.nums, div, body, html

 

---

📖 요소탐색 [next]

: 선택된 요소 바로 다음에 위치한 형제 요소 선택

$(선택자).next().함수()

      function findNexet() {
        console.log($("#li2").next());

li2의 바로 다음 위치한 형제요소 li 출력

findParents() 함수가 들어간 버튼 클릭시 id값이 li2는 다음위치한 형제 요소를 출력한다.

id값 li2는 다음 위치한 형제가 li요소로 되어있으므로  li를 출력한다

 

---

📖 요소탐색 [prev]

: 선택된 요소 바로 이전에 위치한 형제 요소 선택

$(선택자).prev().함수()

      function findPrev() {
        console.log($("#li2").prev());
      }

li2의 바로 이전 형제 li 출력

findPrev() 함수가 들어간 버튼 클릭시 id값이 li2는 바로 이전에 위치한 형제 요소를 선택하여 출력한다.

id값 li2 요소 바로 이전은 li요소로 되어있으므로 li요소를 출력한다.

 

---

📖 요소탐색 [children]

: 선택된 요소의 자식 요소 모두 선택

$(선택자).children().함수()

      function findChildren() {
        console.log($(".nums").children());
      }

ul의 자식 요소 li들을 모두 출력

findChildren() 함수가 들어간 버튼 클릭시 class값이 nums의 자식 요소 모두를 선택하여 출력한다.

ul의 자식 요소 li들을 모두 출력한다.