홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취

음악배달(구독하세요)
음악가사 검색
온라이브스토어(앱다운로드)
온라이브(방송등록및청취)
Search Video Best 50
금영노래방
TJ노래방
유튜브 동영상 다운로드
POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
운.영.자.1대1.상담
FAQ\지원.프로그램
Q&A\고.객.지.원

자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
jQuery의 기본이 되는 jQuery - Core에 대해 알아보자!!
5년 전
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);
    });
추천추천 : 474 추천 목록
번호 제목
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
2,985
 jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
2,984
 jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
2,983
 jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
2,982
 jquery 스크립트내 특정값 확인하기 (디버깅)
2,981
 jquery cookie (jquery.cookie.js)
2,980
 jquery div 기본 넓이, 높이 계산 및 padding, border 포함 하기
2,979
 jquery 다른버전 추가 사용시 충돌 방지 (카페24 스마트디자인 기본내장 jquery 1.4.4 버전과 충돌시 해결방법)
2,978
 특정 페이지 종료시 확인 경고창 출력
목록
추천음악방송
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
콩뮤직
작은 음악다방
종합성인가요방
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
Dance&Remix
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
JP\CN
POP TOP BEST
K.R.노래방

추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요1번지(종합)
뮤직하우스
동요\연변\반주\기타
앗싸! 뽕짝
가요 포장마차
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
추천가요\POP\기타
최신가요\인기가요
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.