🗒️ 2017/05/22 (12)

1. 2017.05.22 주요 선택자 정리

   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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 div{background-color:yellow;} .tit{background-color:orange;} 내용1 내용2 내용3 내용4 리스트1 리스트2 리스트3 리스트4 $(function(){ $("h1").attr("align","left"); // 태그의 "align" 속성값을 "left"로 적용 $("li:first").text("첫 번째 리스트"); // 태그 중에 첫 번째 요소의 텍스트를 새 텍스트로 바꿈. $("h2>strong"..
2. 2017.05.22 객체 조작 메서드 - 객체 편집 메서드

   (3) 객체 편집 메서드 - 선택한 요소를 복제/새 요소를 생성/복제하거나 새로 생성한 요소를 위도한 위치에 삽입/선택한 요소를 삭제하는 기능을 갖고 있는 메서드. - 객체 편집 메서드의 종류 종류 사용법 설명 before() $("요소 선택").before("새 요소"); 선택한 요소 이전 위치에 새 요소 추가 after() $("요소 선택").after("새 요소"); 선택한 요소 다음 위치에 새 요소 추가 append() $("요소 선택").append("새 요소"); 선택한 요소의 마지막 위치에 새 요소 추가 appendTo() $("새 요소").appendTo("요소 선택"); 선택한 요소의 마지막 위치에 새 요소 추가 prepend() $("요소 선택").prepend("새 요소"); 선택한 ..
3. 2017.05.22 객체 조작 메서드 - 수치 조작 메서드

   (2) 수치 조작 메서드 - 속성 조작 메서드와 성격이 비슷하지만, 선택한 요소의 수치 관련된 속성을 변경하거나 기존에 입력된 값을 불러올 때 사용. - 예를 들어, 요소의 너비 또는 높이의 속성값을 바꾸거나 불러올 때 사용. - 수치 조작 메서드 종류 사용법 설명 height() $("요소 선택").height(); $("요소 선택").height(100); 안쪽 여백과 선을 제외한 높잇값을 반환하거나 변환 width() $("요소 선택").width(); $("요소 선택").width(100); 안쪽 여백과 선을 제외한 너빗값을 반환하거나 변환 innerHeight() $("요소 선택").innerHeight() $("요소 선택").innerHeight(300); 안쪽 여백을 포함한 높잇값을 반환하거..
4. 2017.05.22 객체 조작 메서드 - 속성 조작 메서드

   * 객체 조작 메서드 - 객체 조작 메서드는 속성 조작 메서드와 수치 조작 메서드 그리고 객체 편집 메서드로 나눌 수 있음. - 속성 조작 메서드는 요소의 속성을 바꿀 때 사용하고, 수치 조작 메서드는 요소의 너비 또는 높잇값과 같은 수치를 바꿀 때 사용 -> 선택한 요소의 속성을 바꾸는 메서드이므로 성격이 비슷하다고 볼 수 있음. - 객체 편집 메서드는 객체를 생성하거나 삭제 또는 복제할 때 사용하는 메서드임. (1) 속성 조작 메서드 - 요소의 속성을 조작할 때 사용하는 메서드 - 속성 조작 메서드 종류 사용법 설명 html() $("요소 선택").html(); $("요소 선택").html("새 요소"); 선택한 요소의 하위 요소들을 반환하거나 새 요소로 변환함. text() $("요소 선택").te..
5. 2017.05.22 선택자와 함께 사용하면 편리한 메서드들

   [선택자와 함께 사용하면 편리한 메서드들] - 메서드 종류 종류 사용법 설명 is() $("li").is(".visible") 선택한 요소가 보이면 true를 반환함. noConflict() var m=$.noConflict(); m("h1").width(100); 선택자 메서드를 사용할 때 "$"를 앞에 붙여 사용했음. $.onConflict()를 사용하면 "$" 메서드를 변수에 참조시켜 "$"문자 대신 임의의 문자를 지정하여 사용할 수 있음. get() $("li").get(0).style.color="red" 제이쿼리로 선택한 요소에 get(0) 메서드를 적용하면 자바스크립트에 DOM 선택자로 선택한 태그로 인식되어 이전 자바스크립트의 DOM 방식을 따름. each() / $.each() $("lI..
6. 2017.05.22 탐색 선택자 - 콘텐츠 탐색 선택자

   [그 외의 선택자 - 콘텐츠 탐색 선택자] - 콘요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자. - 콘텐츠 탐색 선택자의 종류 종류 사용법 설명 $("요소 선택":contains(텍스트)") $("li:contains('내용2')") 요소 중 '내용2'라는 텍스트를 포함하는 요소만 선택 $("요소 선택").contents() $("p").contents() 선택한 요소의 하위 요소 중 가장 가까운 하위 요소를 선택 $("요소 선택:has(요소명)") $("요소 선택").has(요소명) $("li:has('span')") $("li").has('span') 요소 중 을 포함하는 요소만 선택 $("요소 선택:not(:제외 요소)") $("요소 선택").not("제외 요소) $("li:not..
7. 2017.05.22 탐색 선택자 - 속성 탐색 선택자

   [속성 탐색 선택자] - 선택해 온 요소를 기준으로 일치하는 속성의 포함 여부를 따져서 요소를 선택해오는 선택자. - 속성 탐색 선택자 종류 종류 사용법 설명 $("요소 선택[속성]") $("li[title]") 요소 중 title 속성이 포함된 요소만 선택 $("요소 선택[속성=값]") $("li[title='리스트']") 요소 중 title 속성값이 '리스트'인 요소만 선택 $("요소 선택[속성^=텍스트]") $("a[href^='http://']") 요소 중 href 속성값이 'http://'로 시작하는 요소만 선택 $("요소 선택[속성$=텍스트]") $("a[href$='.com']") 요소 중 href 속성값이 '.com'으로 끝나는 요소만 선택 $("요소 선택[href*=텍스트]") $("a[..
8. 2017.05.22 탐색 선택자 - 위치 탐색 선택자

   * 탐색 선택자 - 탐색 선택자를 사용하면 직접 선택자를 이용해 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 정확히 선택할 수 있음. - 탐색 선태자는 선택한 요소 중 요소의 위치를 기준으로 선택하는 위치 탐색 선택자, 요소의 지정된 속성을 기준으로 선택하는 속성 탐색 선택자가 있음. - 그 외의 탐색 선택자로 요소 내에서 콘텐츠의 포함 여부를 따져 선택하는 콘텐츠 탐색 선택자, 선택한 요소를 한 번 더 필터링할 수 있는 필터링 선택자 등이 있음. [위치 탐색 선택자] - 기본 선택자로 선택한 요소 중 요소의 위치 또는 인덱스 번호를 이용하여 특정 요소를 좀 더 정확히 선택. - 위치 탐색 선택자 종류 종류 사용법 설명 $("요소 선택:first") $("요소 선택").first() $("li:fi..
9. 2017.05.22 직접 선택자와 인접 관계 선택자

   * 제이쿼리의 직접 선택자 및 인접 관계 선택자 - 앞으로 '문서 객체'라는 말을, '요소' 또는 '태그'라 표현하겠음. - 자바스크립트의 DOM(Document Object Model) 서낵자는 IE 8 이하와 그 외의 브라우저 사이에 호환성에 대한 문제점이 있었음. - 하지만 제이쿼리는 이러한 호환성과 관련된 문제들을 모두 해결함. - 제이쿼리 선택자는 자바스크립트의 DOM 선택자보다 사용이 편리하고 쉬움. - 제이쿼리의 선택자에는 크게 직접 선택자와 인접 관계 선택자로 나눌 수 있음. - 직접 선택자에는 전체 선택자, 아이디 선택자, 클래스 선택자, 요소명(tag Name) 선택자, 그룹 선택자가 있음. - 인접 관계 선택자에는 부모 요소 선택자, 자식 요소 선택자, 형(이전) 요소 선택자, 동생(..
10. 2017.05.22 아이디 선택자를 적용하여 글자 색상을 바꾸기

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 선택자 $(function(){ $("#title").css("color","green"); }); 제이쿼리 Colored by Color Scripter cs 소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)
11. 2017.05.22 선택자 (Selector)

    * 선택자란? - 선택자(Selector)를 사용하면 지정한 문서 객체를 선택해 올 수 있음. - 제이쿼리 선택자에는 직접 선택자, 이미 선택한 요소를 기준으로 근접한 요소의 관계를 따져 선택하는 인접 관계 선택자, 선택된 요소 중 더 세밀하게 선택할 수 있는 탐색 선택자가 있음. * 제이쿼리 선택자 사용 준비하기 - 선택자를 사용하기 위해서는 문서 객체가 필요함. 1. 잘못된 적용 1 2 3 4 5 6 7 8 9 10 11 12 13 14 잘못된 선택자 적용 문단 요소보다 먼저 실행됨 문단 요소 Colored by Color Scripter cs -> 자바스크립트가 인터프린터 언어이기 때문에 제이쿼리가 먼저 실행되고 난 후 영역에 문서 객체가 로딩됨. -> 선택자가 먼저 실행되어 문서 객체를 선택할 수..
12. 2017.05.22 제이쿼리란?

    * 제이쿼리란? - 제이쿼리는 모질라 사의 자바스크립트 개발자였던 존 레식(John Resig)이 창시함. - 제이쿼리는 자바스크립트를 이용해 만든 라이브러리 언어(자바스크립트로 만들어진 다양한 한수들의 집합). - 제이쿼리에서 개선된 사항 1) 호환성 문제점 해결 - 자바스크립트는 호환성(크로스 브라우징)이 떨어짐. - 자바스크립트에서는 이벤트 객체를 생성할 때 IE 브라우저 8 이하 버전과 그 외의 브라우저(파이어폭스, 크롬, 사파리, 오페라, IE 9 이상 버전)는 코드를 실행했을 때 그 결과에 많은 차이가 있었음. - 제이쿼리에서는 이 문제들을 모두 해결함. 2) 쉽고 편리한 애니메이션 효과 기능 구현 - 자바스크립트로 애니메이션 효과를 구현하려면 많은 코드를 사용해야 했고, 개발하는 데도 많은 ..