YYYEJI

[jQuery] jQuery 기본 문법 본문

Web Application Server (WAS)

[jQuery] jQuery 기본 문법

YEJI ⍢ 2023. 1. 5. 16:08
728x90

jQuery란?

JavaScript의 생산성을 향상시켜주는 JavaScript 라이브러리입니다.

 

 

 

jQuery 특징

- Element를 쉽게 선택 가능하다.

- 선택된 Element를 효율적으로 제어 가능하다.

- JavaScript의 라이브러리이다.

 

 

 

jQuery 문법

$('selector').method();

method 뒤에 .(dot)을 붙여서 method를 체인처럼 이어붙일 수 있습니다.

 

 

사용법에 대해 알아봅시다.

 

 

선택자(Selector)

선택자는 CSS 속성값을 정용하기 위해 HTML의 어떤 요소를 선택해야 하는지 브라우저에 알려주는 요소입니다.

(jQuery 문법인 $(제어대상).method()에서 $(제어대상)입니다.)

$("p")                      // <p> tag의 모든 요소 선택
$("#s_id")                  // id가 s_id인 tag 모두 선택
$(".s_class")               // class가 s_class인 tag 모두 선택
$("*")                      // 모든 요소 선택
$(this)                     // 현재 HTML 요소 선택
$("p.intro")                // class가 intro인 <p> tag 선택
$("ul li:first")            //  첫 번째 <ul> tag의 첫 번째 <li> tag 선택
$("ul li:first-child")      // 모든 <ul>의 첫 번째 <li> 요소 선택
$("[href]")                 // href 속성을 가진 모든 요소 선택
$(":button")                //<input> tag의 type이 button인 모든 button 요소를 선택

 

 

 

parent, children, find

선택자(selector)는 바로 선택이 가능할 수도 있지만 선택자(selector) 뒤에 메소드를 이용해서 선택해 줄 수도 있습니다.

$('selector').parent('selector')
$('selector').children('selector')
$('selector').find('selector')

 

 

 

이벤트(Event)

이벤드(event)는 함수의 기능을 원하는 시점에 실행시킬 수 있습니다.

즉, 사용자(user)가 마우스를 움직이거나 클릭했을 때 어떠한 행동을 했을 때 함수의 동작(action)을 수행합니다.

$('selector').[event](call-back function);

 

 

마우스 관련 이벤트

<!DOCTYPE html>
<script src="http://code.jquery.com/jquery.min.js"></script>
<html> 
    <button id="id_1">Click Me!</button>
</html>

버튼을 하나 생성하고 시작하겠습니다.

아래 코드들은 마지막 코드인 </html> 아래 이어 붙이시면 됩니다.

 

.Click( )

<script>
    $(document).ready(function(){
        $("#id_1").click(function() { 
            alert("Hello!");
        });
    })
</script>

버튼을 한 번 클릭하면 alert 창이 화면에 뜹니다.

 

 

.dblclick( )

<script>
    $(document).ready(function(){
        $("#id_1").dblclick(function() { 
            alert("Hello!");
        });       
    })
</script>

버튼을 두 번 더블 클릭하면 alert 창이 화면에 뜹니다.

 

 

.mouseenter( )

<script>
    $(document).ready(function(){
        $("#id_1").mouseenter(function() { 
            alert("Hello!");
        });       
    })
</script>

버튼 위에 마우스를 올리면 alert 창이 화면에 뜹니다.

 

 

 

.mouseleave( )

<script>
    $(document).ready(function(){
        $("#id_1").mouseleave(function() { 
            alert("Hello!");
        });       
    })
</script>

버튼에서 마우스를 밖으로 이동하면 alert 창이 화면에 뜹니다.

 

 

 

키보드 관련 이벤트

<!DOCTYPE html>
<script src="http://code.jquery.com/jquery.min.js"></script>
<html> 
    ABC <input type="text" id="key">
</html>

input box를 하나 생성하고 시작하겠습니다.

아래 코드들은 마지막 코드인 </html> 아래 이어 붙이시면 됩니다.

 

 

.keydown( )

<script>
    $(document).ready(function(){
        $("#key").keydown(function(e) {
        alert(e.keyCode);
        });  
    })
</script>

키가 눌릴 때 반응하는 이벤트입니다.

 

.keypress()

<script>
    $(document).ready(function(){
        $("#key").keypress(function(e) {
        alert(e.keyCode);
        });  
    })
</script>

keydown하고 마찬가지고 키가 눌릴 때 반응하는 이벤트입니다.

keypress가 keydown과 다른 점은 특수키에 반응하지 않는다는 점입니다.

 

.keyup( )

<script>
    $(document).ready(function(){
        $("#key").keyup(function(e) {
        alert(e.keyCode);
        });  
    })
</script>

 

키 입력이 끝난 후 반응하는 이벤트입니다.

 

 

효과(Effect)

효과(effect)는 역동적인 동작을 적용하여 객체를 화려하게 숨기거나 보이게 할 수 있습니다.

 

 

.hide( )

<!DOCTYPE html>
<script src="http://code.jquery.com/jquery.min.js"></script>
<html> 
    <div>Hi there~</div>
    <button id="id_1">Click Me!</button>
</html>

<script>
    $(document).ready(function(){
        $("#id_1").click(function() { 
            $("div").hide("fast");
        });
    })
</script>

button을 클릭하면 <div> tag의 문자열을 숨겨줍니다.

 

 

.show( )

<!DOCTYPE html>
<script src="http://code.jquery.com/jquery.min.js"></script>
<html> 
    <div style="display:none">Hi there~</div>
    <button id="id_1">Click Me!</button>
</html>

<script>
    $(document).ready(function(){
        $("#id_1").click(function() { 
            $("div").show("fast");
        });
    })
</script>

button을 클릭하면 tag의 문자열을 보여줍니다.

 

 

.toggle( )

<!DOCTYPE html>
<script src="http://code.jquery.com/jquery.min.js"></script>
<html> 
    <div style="display:none">Hi there~</div>
    <button id="id_1">Click Me!</button>
</html>

<script>
    $(document).ready(function(){
        $("#id_1").click(function() { 
            $("div").toggle("fast");
        });
    })
</script>

선택된 요소가 숨겨져 있다면 .show()를 수행해주고,

문자열이 보여져 있다면 .hide()를 수행해줍니다.

 

 

 

https://jqueryui.com/

 

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

 

 

 

◡̈

'Web Application Server (WAS)' 카테고리의 다른 글

[React] JSX(JavaScript XML)에서 웹 브라우저가 이해할 수 있는 코드로 변환하기  (0) 2023.01.06
[React] 리액트(React) 기본  (0) 2023.01.06
[MacOS] dothome 배포하기  (0) 2022.12.30
[MacOS] 리액트(React) 설치하기  (0) 2022.12.29
[MacOS] 원하는 버전의 Node.js 설치하기  (0) 2022.12.29
'Web Application Server (WAS)' Related Articles more