[JSP] JQuery

🙏🏻 JQuery

쉽게 말하자면 아주 간편하게 HTML 요소를 선택하고 그렇게 선택된 요소에 특정 동작을 설정할 수 있습니다.

$(선택자).동작함수1( ).동작함수2( )

① $

달러($) 기호는 jQuery를 의미합니다.

즉, jQuery에 접근할 수 있게 해주는 식별자를 뜻하여 이러한 식별자를 이용하여 원하는 HTML 요소를 선택할 수 있습니다.

② 선택자

원하는 HTML 요소, CSS 요소를 선택하며 그 요소가 선택자가 됩니다.

③ 동작함수

동작함수를 정의하여 선택자로 선택된 요소에 원하는 동작을 설정할 수 있습니다.

여러 개의 메서드를 연속으로 호출하는 '메서드 체이닝'이 가능합니다.

📍 JQuery를 사용하는 이유

1) 페이지 내부 요소에 접근하기 쉬움

jQuery를 사용하지 않으면 DOM 트리를 이용해서 요소에 접근해야 합니다.

그러나, jQuery를 사용하면 CSS의 선택자를 이용해서 간편하게 접근이 가능합니다.

2) 페이지에 보여지는 모습을 변경하기 쉬움

CSS도 jQuery를 사용하여 간결하고 직관적으로 작성이 가능합니다.

3) 상호작용 처리가 쉽고 애니메이션 사용 가능

HTML 문서의 목적은 페이지의 구조와 데이터를 표현하는 것 입니다.

그러나 HTML 태그에 이벤트를 사용하면 이 목적과 어긋나다고 할수 있습니다.

때문에 jQuery를 사용하여 이벤트를 핸들링하면 HTML 문서 변경 필요없이 쉽게 처리할 수 있습니다.

📍 JQuery를 사용하기 위해서는 [ jQuery 객체 ]가 필요합니다.

jQuery 객체는 다양한 메서드를 가지지만 전부 jQuery 객체를 반환하는 특징이 있습니다.

1) CSS의 selector를 인수로 전달받을 때

(1) $('#happy')             -> javascript.version = document.getElementById('happy')

(2) $('.happy')             -> javascript.version = document.querySelectorAll('.happy')
                                                    document.getElementsByClassName('happy')

(3) $('happy')              -> javascript.version = document.getElementsByTagName('happy')

2) selector 이벤트 등록

만약, HTML 코드가 다음과 같을 경우

각 버튼에 이벤트를 적용하기 위해 하나의 요소마다 일일이 이벤트를 등록해야 하는 자바스크립트와 달리,

<button id="b1" class="btn"> button1 </button>
<button id="b2" class="btn"> button2 </button>
<button id="b3" class="btn"> button3 </button>

jQuery는 다음과 같이 입력하여 class 이름이 btn에 해당하는 여러 개의 버튼을 자동으로 순회해서 등록해줍니다.

$('.btn').on('click', function() {...});

[jQuery]
$("p").on("click", function() {
     $("#jq").css("border", "2px solid orange");
 });
 
 
 [javaScript]
 document.querySelector("p").addEventListener("click", function() {
      document.querySelector("#jq".style.border = "2px solid orange"; })

3) HTML을 인수로 전달받으면 새로운 HTML 요소 생성

$('<p id="test"> My <em> text </em></p>').appendTo('body');

4) AJAX 사용이 쉬움

📍 JQuery 사용 연습

<body>
    <ul id="nav">
       <li> HTML </li>
       <li> CSS </li>
       <li> javascript </li>
       <li class = "selected"> jQuery </li>
    </ul>
</body>

Q. 자식 노드인 li 요소들을 가져와서 클릭하면 클래스 이름을 [selected]로 바꾸기

$("#nav li").on("click", function() {
    $("nav li").removeClass('selected');
    $(this).addClass('selected');
})

1) ul의 자식들인 li를 자동으로 하나씩 등록

2) removeClass는 클래스를 삭제시키는 메서드

3) addClass는 클래스를 추가하는 메서드

4) 여기서 this는 클릭 이벤트에 등록된 li를 알아서 가리킴

'Study > JSP' 카테고리의 다른 글

[JSP] DataTables (0)	2022.11.22
[JSP] ObjectMapper (0)	2022.11.18
[JSP] Mybatis (0)	2022.11.18
[JSP] JSTL (0)	2022.11.18
[JSP] Ajax (0)	2022.11.18

But ! Let us begin 🙏🏻

[JSP] JQuery

🙏🏻 JQuery

① $

② 선택자

③ 동작함수

📍 JQuery를 사용하는 이유

1) 페이지 내부 요소에 접근하기 쉬움

2) 페이지에 보여지는 모습을 변경하기 쉬움

3) 상호작용 처리가 쉽고 애니메이션 사용 가능

📍 JQuery를 사용하기 위해서는 [ jQuery 객체 ]가 필요합니다.

1) CSS의 selector를 인수로 전달받을 때

2) selector 이벤트 등록

3) HTML을 인수로 전달받으면 새로운 HTML 요소 생성

4) AJAX 사용이 쉬움

📍 JQuery 사용 연습

Q. 자식 노드인 li 요소들을 가져와서 클릭하면 클래스 이름을 [selected]로 바꾸기

'Study > JSP' 카테고리의 다른 글

티스토리툴바

[JSP] JQuery

🙏🏻 JQuery

① $

② 선택자

③ 동작함수

📍 JQuery를 사용하는 이유

1) 페이지 내부 요소에 접근하기 쉬움

2) 페이지에 보여지는 모습을 변경하기 쉬움

3) 상호작용 처리가 쉽고 애니메이션 사용 가능

📍 JQuery를 사용하기 위해서는 [ jQuery 객체 ]가 필요합니다.

1) CSS의 selector를 인수로 전달받을 때

2) selector 이벤트 등록

3) HTML을 인수로 전달받으면 새로운 HTML 요소 생성

4) AJAX 사용이 쉬움

📍 JQuery 사용 연습

Q. 자식 노드인 li 요소들을 가져와서 클릭하면 클래스 이름을 [selected]로 바꾸기

'Study > JSP' 카테고리의 다른 글

관련글

티스토리툴바