Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Tags more
Archives
Today
Total
관리 메뉴

codingfarm

사용법 본문

web/JQuery

사용법

scarecrow1992 2020. 10. 9. 23:40

1. 준비

jQuery를 사용하려면 기본적으로 아래의 2가지 세팅을 해야 한다.

1. jQuery 기능이 들어있는 라이브러리 파일을 연결한다.

2. ready()라는 jQuery 기능을 이용해 초기 시작점을 정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE HTML>
 
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <head>
        <script src="../../libs/jquery-1.11.0.min.js"></script>
        <script>
            $(document).ready(function(){
                //여기에 노드를 다루는 코드를 작성한다.
                alert("hello world");
            })
        </script>
    </head>
 
    <body>
        <p>lorem ipsum</p>
    </body>
</html>
 cs

위 코드를 브라우저로 열면 알림창이 뜨는것을 확인 할 수 있다.

 

 

2. jQuery를 이용한 노드 찾기

jQuery에는 수많은 노드찾기 기능을 제공한다. 우선은 가장 기초적인 방법을 배워보겠다.

jQuery를 활용해 노드를 찾는 가장 기본적인 방법은 아래와 같다.

var $\$$ 변수이름 = $\$$("CSS 선택자");

위 한줄에 어떤 의미가 있는지 알아보겠다.

 

$()

이 구문은 jQuery가 아닌 이름이 $인 함수를 호출하는 것이다.

jQuery라이브러리 내부를 보면 $함수를 아래처럼 작성되어있다.

window.jQuery = window.$ = jQuery;

그러므로 아래 2개의 코드는 동일한 코드이다.

$('div').css('border', '4px solid #f00');
jQuery('div').css('border', '4px solid #f00');

$() 함수의 역할은 매개변수에 적힌 선택자에 해당하는 노드를 찾아주는 역할을 한다.

 

"CSS" 선택자

CSS 선택자 그 자체이다. 찾고싶은 선택자를 만들어 $() 함수의 매개변수 값으로 넣어주면 된다.

 

var $ 변수이름

$() 함수에서 리턴해주는 값을 저장하기 위해 만든 변수이다.

변수이름 앞에 $를 붙여준 이유는 jQuery 기능이 들어있는 변수라는 것을 표현하기 위해서다.

1
2
3
4
5
6
<script>
    $(document).ready(function(){
        var $divs = $("div");
        $divs.css("color", "#f00");
    })
</script>
 cs

<div> 태그에 붉은색 글자 스타일을 입히는 jQuery문이다.

아래와 같은 구문이 나온다면 jQuery의 기능을 사용하는 구문이라 해석하면 된다.

$변수이름.함수이름()

 

3. jQuery와 CSS의 관계

이쯤되면 알겠지만 jQuery에서는 CSS의 선택자를 활용해 노드를 찾는게 가능하다.

이것이 jQuery가 큰 인기를 얻는 이유이다.

 

4. 우선적으로 알아둘 jQuery 핵심기능

일반적으로 jQery는 노드 찾기와 이벤트등록, 스타일 설정 구문을 제일 많이 쓴다.

노드찾기

$\$$변수이름 = $\$$("css 선택자");

 

이벤트 등록은

$\$$대상.on("click", 이벤트리스너);

또는

$\$$대상.단축이벤트메서드(이벤트리스너);

 

스타일 설정

설정 내용이 하나인 경우
$\$$대상.css("스타일이름", 값);

설정 내용이 여러 개인 경우
$\$$대상.css({
   "스타일이름":"값"[
   "스타일이름":"값", ...]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE HTML>
 
<html>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <head>
        <script src="../../libs/jquery-1.11.0.min.js"></script>
        <script>
            $(document).ready(function(){
            var $button1 = $("#btnCheck1");            
            var $button2 = $("#btnCheck2");
                $button1.on("click", function(){
                    $button1.css("color", "red");
                    alert("hello world 1");
                });
                //또는
                $button2.click(function(){
                    $button2.css("color", "blue");
                    alert("hello world 2");
                });
            })
        </script>
    </head>
 
    <body>
        <button id = "btnCheck1">click 1</button>
        <button id = "btnCheck2">click 2</button>        
    </body>
</html>
 cs

선택자로 얻은 노드를 button1과 button2 변수에 저장하고

버튼을 누를때마다 경고문이 나오게 하였고 스타일이 변경되게끔 하였다.

 

 

5. 정리

$\bullet$ jQuery는 수많은 기능(함수)를 가진 하나의 클래스 덩어리이다.

$\bullet$ 주로 $()라는 함수 호출을 시작으로 인스턴스가 만들어진다.

$\bullet$ $()함수로 얻은 노드는 접근 연산자(.)를 이용해 원하는 기능을 사용하게 된다.

$\bullet$ $()함수에 CSS 선택자를 그대로 이용해 원하는 요소를 찾을 수 있다.

 

 

 

 

 

저작자표시

'web > JQuery' 카테고리의 다른 글

.eq() - 이미지 배열하기  (0) 2020.10.11
switch, keydown- 물고기 움직이기  (0) 2020.10.11
addClass, removeClass - 체크박스 만들기  (0) 2020.10.11
<input> 태그의 값 읽기 - 물고기 움직이기  (0) 2020.10.09
소개  (0) 2020.10.09
'web/JQuery' Related Articles more
Comments