홈으로 | 무료회원가입 | 아이디/비번찾기
추천음악방송
운.영.자.1대1.상담
온라이브 음악방송
음악방송 앱 다운로드
보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
jQuery의 기본이 되는 jQuery - Core에 대해 알아보자!!
9년 전
jQuery/Core란?

jQuery/Core란 jQuery의 핵심이 되는 것을 의미한다. 그만큼 우리가 jQuery를 사용할 때 많이 사용되는 부분이기도 하다.

하지만 Core라고해서 어려울것은 없고, 의외로 간단하다. Core를 표현하면 "$()"이렇게 된다.



참고로,

jQuery를 표현할 때 두가지가 있는데 한가지는 "jQuery(document).ready()" 이렇게 "jQuery"를 사용하는 방법과 "$(document).ready()" 처럼 "$"로 사용하는 방법이 있다. 이것은 사용자 취향에 맞게 선택해서 사용하면 된다.



정확한 개념을 알고 싶으신 분은 http://docs.jquery.com/Core 여기로 가시면 자세히 알 수가 있다. 하지만 저 처럼 영어에

약하신 분들은 이렇게 이해를 하시면 된다.

그럼 이제 사용법에 대해서 한번 살펴 봅시다.



jQuery 사용법

여기서 사용되는 예제나 API는  http://docs.jquery.com/ jQuery공식 사이트에서 발췌한 것임을 미리 말씀드리고 시작합니다.



1. jQuery( expression, context )

  : expression는 String로 표현되고 특정 태그를 찾을때 사용되며, context는 Element나 jQuery으로 인자 값으로 받는다.

    즉, $("input:radio", document.forms[0]); 이와 같이 사용된다.



2. jQuery( html )

  : jQuery는 인자값으로 html 태그를 받아 그 태그를 HTML페이지에 추가를 할 수가 있다.

    즉, 이렇게 $("<div><p>Hello</p></div>").appendTo("body") 사용이 되기도 하고,  $("<input/>").attr("type", "checkbox");

    이렇게도 사용되기도 한다.

    풀이 하자면 첫 번째는 "body"안에 "<div><p>Hello</p></div>"를 삽입(appendTo()는 특정 태그에 사입할 때 사용 )한다는

    애기고 두번째는 "input"를 생성하되 "type=checkbox"로 하여 태그를 생성하게 된다. 두번째는 HTML 마지막 부분에 삽입이

    된다.



3. jQuery( elements )

  : DOM element(s) 를 인자로 받아 그 지역의 elements를 설정할 수가 있다.(한개 혹은 다수를 지정할 수가 있다.)

    $(document.body).css( "background", "black" ); -> HTML 배경색을 검정색으로 바꾼다.

    $(myForm.elements).hide() -> myForm의 이름을 가진 form안의 elements을 숨긴다.



4. jQuery( callback )

  : 이것은 인자값을 함수로 지정을 할 수가 있다는 애기로 jQuery를 처음 시작하는 부분에서 많이 접해 봤을 것이다.

    즉, "$(document).ready(function(){....};)" 이 부분

    이렇게 사용하는 것은 특정 이벤트가 발생할 때 그 부분을 함수로 처리 하기 위해서 이다. 예를 들어 마우스를 클릭시

    경고창을 띄워주고 싶다면 아래와 같이 하면 된다.

                           "$(document).click(function(){

                                   alert("마우스가 눌려짐!!");

                             };)"




- jQuery Object Accessors

이번에는 직접 오브젝트를 엑세스할 수 있는 jQuery에 대해서 알아 본다. 뭐, jQuery 홈페이지에 가면 다 나와 있는 것들이긴 하지만 그래도 본좌의 나름 해석판을 듣고 싶다면 계속 봐도 된다. 다만, 본좌도 영어가 짧기 때문에 직접 실행해 봐서 이해 하기도 한 부분도 있고 이리저리 찾아 다니면서 알아낸 것 들도 있다. 그래서 영어 잘하시는 분 들이 봤을 경우 영 아니다 싶으면 자세히 답변을 남겨 주시면 참고하여 수정토록 하겠음...

그럼 오브젝트를 엑세스 할 수 있는 jQuery 에 대해서 알아 봅시다.



1. each( callback )

: 해당 오브젝트에서 어떤 함수처리를 하고 싶을 경우 사용된다.  코드를 직접 보면 이해가 쉽게 된다.

    $(document.body).click(function() {
      $("div").each(function (i) {

        // 클릭 이벤트가 발생 되었을 경우 "div"태그에서만 글 색상을 변경하도록 한다.
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });

   이 코드를 실행 시키면 클릭 할때마다 색깔이 변경이 된다. 참고로 이 코드는 "body"안의 모든"div"태그를 뜻한다. 특정 "div"

   에서만 이벤트가 발생되기를 원하시면 그 태그의 인덱스를 찾아야 할 것이다.

  

2. size()

: 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다.

    $(document.body).click(function () {
        $(document.body).append($("<div>"));
        var n = $("div").size();
        $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).click(); // trigger the click to start



3. length()

  : 해당 오브젝트의 Elements의 수를 알고자 할 때 사용된다. size()와 동일하다.

     $(document.body).click(function () {
      $(document.body).append($("<div>"));
      var n = $("div").length;
      $("span").text("There are " + n + " divs." +
                     "Click to add more.");
    }).trigger('click'); // trigger the click to start



4. eq( position )

  : 해당 포지션에 위차한 태그를 찾는다. 한마디로 아파트로 비교하자면 몇호실을 찾는지와 같다. "405호실를 청소해라!"라는

    명령이 있다면 그 아파트의 "405호실"을 찾아가서 거기만 청소를 하면 된다. 구지 다른곳도 청소할 필요가 없다는 것이다.

    position의 위치는 0 부터 시작해서 -1까지다.

  

    $("p").eq(1).css("color", "red"); // "p"태그에서 1(0 부터 시작하므로 두번째를 의미한다.)번지에 해당하는 "p"를 변경한다.


5. get()

  : 해당 태그의 Elements 들을 Array형태로 리턴한다. 즉, '$("div").get() 하면 모든 div태그 들을 Array 형태로 리턴한다.'

    한마디로 하면 DOM의 Elements를 배열로 리턴하는 것이다.

       function disp(divs) {
          var a = [];
          for (var i = 0; i < divs.length; i++) {
               a.push(divs[i].innerHTML);
          }
          $("span").text(a.join(" "));
        }
    
        disp( $("div").get().reverse() ); // div태그의 값들을 읽어 와서 그 값의 순서를 뒤집는다.

        // 예를 들어

        // <div>1</div><div>2</div><div>3</div> 이 있으면 reverse() 하면 3, 2, 1로 순서가 뒤집히게 된다.



6. get( index )

   : index에 해당되는 위치의 element을 가져온다. 즉, 단일 element를 가져 오게 되는 것이다.

         $("*", document.body).click(function (e) { // body안의 모든 Elements에서 클릭 이벤트가 발생되면.
               e.stopPropagation();
               var domEl = $(this).get(0); // 클릭된 태그의 Elements중 0번지에 해당하는 Element를 가져온다.
               $("span:first").text("Clicked on - " + domEl.tagName); // 0번지의 태그이름을 출력한다.
          });

      이해하는데에는 어렵지 않을 것이다. 프로그래밍을 하다보면 위와 비슷한 함수를 많이 접해 보기 때문이다.



7. index( subject )

  : subject의 인덱스 번호를 찾는다. 인덱스 번호도 0부터 시작된다.

      $("div").click(function () {
           // this is the dom element clicked
          var index = $("div").index(this); // "div"태그에서 클릭이벤트가 발생 될경우 그 "div"태그의 인덱스 찾아서 리턴한다.
          $("span").text("That was div index #" + index);
    });
추천추천 : 579 추천 목록
번호 제목
3,025
 PHP 파일 존재 여부 파악하기(로컬 파일 존재 및 원격지 파일 존재)
3,024
 [CSS] 박스 세로 가운데 중앙 정렬 6가지
3,023
 CSS Layout 수평 & 수직 정렬
3,022
 여러 도메인들 간 쿠키 공유하기
3,021
 태그 사이에 있는 텍스트를 추출
3,020
 [JQuery] textbox focus on off일때 숫자 콤마 보여주기
3,019
 쿠키 생성,가져오기,삭제
3,018
 사용자 함수 모음
3,017
 마우스,키보드 제한 ( 오른쪽클릭,드래그,영역선택등..)
3,016
 [HTML5] <video> - DOM으로 제어하기
3,015
 HTML5 video 태그에서 영상 좌우반전
3,014
 PHP - 특정 태그 및 문자열 추출, 제거
3,013
 [PHP] define과 defined의 차이
3,012
 우클릭 완벽차단 스크립트
3,011
 iframe 높이 100% 맞추기
3,010
 curl 함수를 이용한 HTTP REFERER 변경
3,009
 윈도우10 시스템 파일 및 Dism 검사
3,008
 텍스트 줄바꿈, 글자자르기 CSS
3,007
 jQuery Mobile에서 유용한 코드 10가지.
3,006
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,005
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,004
 [jQuery] jQuery Quick API
3,003
 [ transition ] 링크 hover 색상 변화 속도 조절
3,002
 PHP 5.3.0 에서 사라진 함수들 대체
3,001
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
목록
환상의뽕짝카페
트로트티비
뽕짝아가씨
트롯맘
종합성인가요방
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
POP TOP BEST

최신인기가요특집
추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.