Html/CSS/Script | jQuery 선택자 사용하기

페이지 정보

작성자 : 에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 날짜 : 작성일17-03-27 10:46 조회 : 276회

본문

초기 웹 프로그래밍에서는 웹 페이지내의 컨텐츠를 바꾸려면 서버에 필요한 요청을하고, 새로운 내용의 웹페이지 전체를 받아서 화면에 보여주는 방식이었습니다.
이 경우 페이지내의 많은 변하지 않는 부분(헤더, 푸터 등)도 매번 새로 받아와야 했었습니다. 그래서 페이지를 프레임(frame)으로 나누어 변하는 부분은 줄이는 방법도 많이 사용되었습니다.
요즘은 필요한 컨텐츠를 가져올 때는 ajax 를 통해서 백그라운드로 가져오고, 화면은 자바스크립트를 이용해서 페이지내의 요소들을 직접 바꾸는 방법을 주로 사용합니다.
이때 DOM(Document Object Model) 구조로 되어 있는 페이지내의 필요한 요소에 손쉽게 접근할 수 있게 해주는 자바스크립트 라이브러리로 많이 사용되는 것이  jQuery 입니다.
일단 필요한 요소에 접근하면 그 요소에 대한 값/속성 등의 변경, 활성/비활성화, 보이기/감추기, 애니메이션등 다양한 작업을 편리하게 할 수 있도록 해 도와줍니다.
현재 jQuery의 최신버전은 3.1.1 입니다.
https://code.jquery.com/jquery-3.1.1.min.js
Internet Explorer 6-8, Opera 12.1x or Safari 5.1+ 와 같은 하위 브라우저에 대한 지원이 필요하다면  jQuery 1.12 버전을 사용해야 합니다.
https://code.jquery.com/jquery-1.12.4.min.js
 
 
다음은 http://learn.jquery.com/using-jquery-c jQuery의 기본 개념은 "어떤 엘리먼트를 선택하여 어떤 작업을 수행한다." 입니다. 작업을 할 엘리먼트를 선택하는 것이 기본이 되겠습니다. jQuery는 대부분의 CSS3 셀렉터를 지원합니다. 뿐만아니라 표준이 아닌 셀렉터도 지원합니다.
- ID 를 사용하여 선택하기 (ID 는 페이지 내에서 유일해야 합니다.)
$( "#myId" );
<p id="myId">아이디</p>
 
- 클래스명을 사용하여 선택하기 (동일한 클래스를 가지는 복수 요소가 선택될 수 있습니다.)
$( ".myClass" );
<p class="myClass">클래스</p>
 
- 속성으로 선택하기
$( "input[name='first_name']" );
<input type="text" name="first_name" />
 
- 복합 CSS 선택자로 선택하기 ( contents 를 id 로 가지는 요소 하위의 ul 요소중 people를 클래스로 가지는 ul 요소의 모든 li를 선택한다.)
$ ("#contents ul.people li" ).each(function(){console.log($(this).text(););});
<div id="contents">
     <ul class="people">
          <li>첫번째</li>
          <li>두번째</li>
     </ul>
</div>
 
- 콤마로 구분된 셀렉터의 리스트로 선택하기 (콤마(,) 로 분리된 요소들은 독립적입니다.)
$( "div.myClass, ul.people" );
<div class="myClass"></div>
<ul class="people"></ul>
 
- Pseudo-Selector(의사 선택자)
$( "a.external:first" ); // "external" 클래스를 가지는 a 요소중 첫번째 요소를 선택한다.
<a href="" class="external">첫번째</a>
<a href="" class="external">두번째</a>
 
$( "tr:odd" );  // table의 홀수 번째 행을 선택합니다. 행번호는 0 번 부터 시작합니다.
$( "tr:even" ); // table의 짝수 번째 행을 선택합니다.
$( "li:even" ); // table 외에 다른 요소에도 사용할 수 있습니다.
 
// 폼내에서 input 태그 모두 선택 합니다.
$( "#myForm :input" );
 
// 보이지 않는 div 들을 선택합니다.
$( "div:visible" );
$( "div:hidden" );
 
:visible, :hidden 선택자는 CSS의 visibility 또는 display 속성을 사용하여 판단하지 않습니다. 요소의 실체 높이와 너비가 0보다 큰지를 가지고 판단합니다.
 
// 처음 세개의 div 를 제외한 모든 div 들을 선택합니다. 카운트는 0부터 시작하므로 2보다 큰것이 되어 0,1,2 가 제외됩니다.
$( "div:gt(2)" );
 
// 모든 현재 애니메이션되는 div들을 선택합니다.
$( "div:animated" );
 
주의: :visible, :hidden 의사 선택자를 사용할 때, jQuery 는 엘리먼트의 실제 보여지는가를 체크합니다. 그 엘리먼트의 CSS 의  visibility 혹은 display 속성을 체크하지 않습니다. jQuery 는 엘리먼트의 페이지내에서의 물리적인 높이와 너비가 0보다 큰지를 확인합니다.
 
예외로 
     <tr>
     엘리먼트에 대해서는 동작하지 않습니다. 
          <tr>
          의 경우 jQuery는 CSS display 프로퍼티를 체크합니다. 그리고 display 프로퍼티가 none 으로 설정되면 hidden 으로 판단합니다.
 
          엘리먼트가 DOM에 추가되지 않았다면 항상 hidden으로 판단합니다. CSS 가 그것들이 보이도록 되어 있어도 그렇습니다.
 
          선택자 선택하기
          좋은 선택자를 선택하는 것은 자바스크립트의 성능을 향상시키는 하나의 방법이 됩니다. 너무 특수한 것은 나쁜 선택이 될 수 있습니다. 만약 #myTable th.special과 같은 선택자로 처리할 수 있다면, #myTable thead tr th.special 같은 선택자는 지나치게 과합니다.
 
          나의 선택에는 엘리먼트가 포함되어 있는가?
          선택을 하고 나면, 선택된 것들로 작업을 할 수 있을지 알고 싶어 할것입니다. 통상적인 실수는 다음과 같이 사용하는 것입니다.
 
          // 동작하지 않습니다.
          if( $( "div.foo" ) ) {
          ...
          }
 
          이것은 동작하지 않습니다. 선택이 $()를 사용하여 만들어질 때, 객체가 항상 반환됩니다. 그리고 객체는 항상 true 로 평가됩니다. 그 선택이 어떤 엘리먼트도 포함하지 않았을때도 if 문장 안의 코드는 여전히 실행될 것입니다.
 
          선택된 엘리먼트가 있는지 결정하는 가장 좋은 방법을 선택자의 .length 프로퍼티 를 확인하는 것입니다. 이것은 얼마나 많은 엘리먼트가 선택되었는지 알려줍니다.
 
          만약 결과가 0 이라면 .length 프로퍼티는 boolean값으로 사용되어질 경우,  false 로 평가 될 것입니다.
 
          // 선택이 엘리먼트를 포함하고 있는지 테스트 합니다.
          if ( $( "div.foo" ).length ) {
          ...
          }
 
          선택 저장하기
          jQuery는 엘리먼트를 캐쉬하지 않습니다. 사용했던 선택을 다시 만들 필요가 있다면 선택 만들기를 반복하는 것보다 변수에 저장해야 합니다.
 
          var divs = $( "div" );
 
          변수에 저장하고 나면, 원래 선택에 대해 메소드를 호출하는 것과 동일하게 변수에 대해 메소드를 호출할 수 있습니다.
 
          선택은 단지 선택이 만들어질 당시의 페이지상의 엘리먼트만을 가지고 옵니다. 만약에 엘리먼트들이 나중에 추가되었다면, 선택을 다시 해야만 할 것입니다. 그렇지 않으면 추가된 것들은 선택이 저장된 변수에 추가해야할 것입니다. 저장된 선택들은 DOM 이 변경될 때 자동적으로 업데이트 되지 않습니다.
 
          선택의 정제와 필터링
          때때로 선택은 우리가 찾는것보다 더 많을 것을 포함합니다. jQuery는 선택을 정제하고 필터하는데 필요한 여러 메소드를 제공합니다.
 
          // 선택을 정제하기
          $( "div.foo" ).has( "p" );       // <p> 태그를 포함하는 "div.foo" 엘리먼트
          $( "h1" ).not( ".bar" );         // 클래스  bar 를 가지지 않는 <h1> 엘리먼트
          $( "ul li" ).filter( ".current" ); // current 클래스를 가지는 ul li 아이템
          $( "ul li" ).first();                 // ul 리스트의 첫번재 아이템
          $( "ul li" ).eq( 5 );               // 여섯번째 아이템
 
          폼 엘리먼트 선택하기
          jQuery 는 폼내의 엘리먼트를 찾는데 도움을 주는 여러개의 의사 선택자를 제공합니다. 이것들은 특히 유용한데, 표준 CSS 선택자들을 사용하여 타입이나 상태에 기반하여 폼엘리먼틀을 구분하기 힘들기 때문입니다.
 
          :checked
 
          :checkbox 와 체크된 체크박스들을 목표로하는 :checked를 혼동하지 말아야 합니다. 그러나 명심하세요. 이 선택자는 또한 체크된 라디오 버튼들과 
          <select>
          엘리먼트와도 일을 한다는 것을요.(
          <select>
          엘리먼트만을 위해서는 :selected 선택자를 사용하세요.)
 
          $( "form :checked" );
 
          :checked 의사 선택자는 체크박스, 라디오 버튼, 콤보박스 와 동작합니다.
 
          :disabled
 
          :disabled 의사 선택자를 disabled 속성의 <input> 엘리먼트에 목표로 사용됩니다.
 
          $( "form :disabled" );
 
          따라서 :enabled 를 사용할 때 가장 좋은 성능을 얻으려면, 먼저 표준 jQuery 선택자로 엘리먼트를 선택한 다음, .filter(":enabled") 를 사용하거나, 의사 선택자 앞에 태그 이름이나 다른 선택자를 함께 사용합니다.
 
          :input
 
          :input 선택자를 사용하여 모든 <input>, <textarea>, 
          <select>
          , <button> 엘리먼트를 선택합니다.
 
          $( "form :input" );
 
          :selected
 
          :selected 의사 선택자는 <option> 엘리먼트 내의 모든 선택된 아이템들을 목표로 합니다.
 
          $( "f
 
          따라서 :selected 를 사용할때 가장 좋은 성능을 얻으려면, 먼저 표준 jQuery 선택자로 엘리먼트를 선택한 다음, .filter(":selected") 를 사용하거나, 의사 선택자 앞에 태그 이름이나 다른 선택자를 함께 사용합니다.
 
          타입에 의해 선택하기
          jQuery 는 유형에 따라 폼 정의 엘리먼트를 선택하는 의사 선택자를 제공한다.
 
          :password - 패스워드 입력 필드
          :reset       - 리셋 버튼
          :radio       - 라디오 버튼
          :text         - 텍스트 입력필드
          :submit     - 폼 제출 버튼
          :checkbox  - 체크박스
          :button      - 버튼
          :image       - 이미지 폼 제출 버튼
          :file           - 파일 선택 필드
 
          출처: http://pentode.tistory.com/97 [쉬고 싶은 개발자]
Total 63건 1 페이지
게시물 검색
웹스터디 목록
번호 제목 글쓴이 날짜 조회
열람중 Html/CSS/Script jQuery 선택자 사용하기 에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17-03-27 277
62 Html/CSS/Script 브라우저 크기 실시간으로 체크하기 에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 17-02-03 197
61 Html/CSS/Script 모바일에서 확대/축소 않되게 하기 에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 16-04-21 140
60 Html/CSS/Script 브라우저 크기에따라서 ... 표시되게 하는 스타일 시트 반응형 홈페이지 만들때 쓰면 좋을듯... 에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15-12-17 121
59 Html/CSS/Script 모바일에서 스크롤 않되게 하기 에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15-12-14 100
58 Html/CSS/Script jsdelivr에 나눔 웹폰트 사용~ 에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15-06-17 170
57 Html/CSS/Script CKEditor 4.4.7 설치방법 첨부파일 에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 15-04-24 111
56 Html/CSS/Script 오브젝트 그림자 css 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14-01-23 124
55 Html/CSS/Script 롤링되는 공지글 구현할때 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14-01-15 148
54 Html/CSS/Script 웹폰트 적용 스타일소스 에렐리안 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 14-01-02 144
53 Html/CSS/Script ssl 보안인증서 적용된 사이트로 자동전환되게 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13-11-26 144
52 Html/CSS/Script 천단위(콤마)넣기 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13-11-07 230
51 Html/CSS/Script IE6에서 Position: fixed 하단고정 레이어 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13-05-06 279
50 Html/CSS/Script self.close()에 확인창없이 바로닫기 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13-05-02 287
49 Html/CSS/Script 배경이미지를 그라데이션화교 주기 linear-gradient 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13-04-25 213
48 Html/CSS/Script 그누보드에서 "회원아이디를 입력하지 않았거나 입력에 오류가 있습니다." 라고 메세지 나올때 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 13-03-06 236
47 Html/CSS/Script 웹접근성을 위한 퀵메뉴 + 확대/축소/기본 스크립트 첨부파일 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-11-29 234
46 Html/CSS/Script FCKEditor 설치및설정 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-05-11 394
45 Html/CSS/Script 비밀번호 숫자+영문 혼용 체크 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-04-30 307
44 Html/CSS/Script 영상재생스크립트 에렐리앙 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 12-04-17 278
Today 74 Yesterday 295
Total 86,596