[네번째] JavaScript - Web Browser / jQuery

JavaScript 와 jQuery의 비교를 살짝 보고 //

>> jQuery 라이브러리란? 

현재 시점에서 가장 많은 사람들이 사용하는 자바스크립트 라이브러리.

라이브러리란 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어

적은 코드로 많은 일을 할 수 있는 효율성을 보인다!

DOM이 할 수 없는 것을 제이쿼리가 할 수 있는 것은 아니다.

제이쿼리에 DOM이 담겨져 있으므로.

제이쿼리만 사용한다면 라이브러리 바깥 쪽에 있는 기능을 알지 못할 수 있다.

인간은 도구를 사용한다! 라이브러리를 적재적소에 활용할 줄 알아야 한다.

CDN = Contents Delivery Network

jQuery 파일을 따로 다운받지 않아도 jQuery를 연동해서 사용할 수 있다.

 src="//code.

// 앞에 http가 생략된 것.

jQuery 파일 크기 얼마 안 한다. 다운 받아도 상관 없다.

다운받아서 가져오기.

htdocs/WB_JS/jquery.1.11.0.min.js

jQuery( document ).ready(function( $ ) {

      $('body').prepend('<h1>Hello world</h1>');

    });

ready 메소드는 jQuery가 잘 연동이 됬는지 확인하는 메소드이다.

작업하기 전에 확인 차 자주 사용하는 메소드!

두번째 줄이 우리가 컨트롤 하는 부분;

태그의 이름이 body인것을 가져오고 prepend 는 jQuery의 명령어.뒤에 오는 것을 위치시킨다.

(1) 제어대상 찾기

제이쿼리는 항상 달러($)로 시작한다.

$는 함수를 의미한다. -> 제이쿼리 함수(jQuery function)

인자값으로는( ()안에 들어오는 값 ) CSS 선택자가 들어오게 된다.

CSS 선택자가 중요!

$('li').css('color','red');

li라는 태그를 하고 있는 엘리먼트들을 선택하는 구문.

제이쿼리 객체는 함수를 통해서 리턴된 결과를 말한다.

.css 같은 메소드는 제이쿼리 객체의 프로퍼티.

-1-

var lis = document.getElementsByTagName('li');

for(var i=0; i&lt;lis.length; i++){

    lis[i].style.color='red';

} 

-2-

$('li').css('color', 'red') 

1과 2는 동일한 기능을 하는 코드.

제이쿼리의 강력함.

$('li')        getElementsByTagName

$('.active')   getElementsByClassName

$('#active')   getElementById

제이쿼리 vs DOM

chaining

$('#active').css('color', 'red').css('textDecoration', 'underline');

: 연속적인 메소드의 사용이 가능.

: 리턴값이 제이쿼리 개체일 때 가능하다.

(2) HTMLElement

constructor.name

단수 : HTML(조회한 엘리먼트 명)Element

복수 : HTMLCollection - 유사배열 여러개의 엘리먼트를 담고 있다.

HTMLLIElement

HTMLAnchorElement

HTMLInputElement

세 가지 모두 HTMLElement 에 상속되어 있다.

동일한 부모객체를 가진다.

각자 필요한 기능(부가적인 프로퍼티)들을 추가한 모습이다.

DOM Tree 의 일부;

(3) HTML Collection

리턴 결과가 복수인 경우 사용하게 되는 객체

목록이 실시간으로 갱신된다.

1. jQuery 객체

var li = $('li');

li

>[ <li>html</li> , <li>html</li> , <li>html</li> ]

-> 암시적 반복

두개 - 설정 / 한개 - 가져오기(첫번째 인자만을 가져온다)

체이닝!

제이쿼리 객체는 배열의 형태를 갖는다.

따라서 각 요소를 가져올 때는 배열을 가져오는 것처럼 인덱스값으로 불러온다.

유사배열이기 때문에 배열과 똑같지는 않다

    ? 그렇다면 유사배열과 배열과 뭐가 다른다.

li[i]의 각 요소는 HTMLElement 이므로 DOM 객체이다.

제이쿼리 객체가 아니므로 .css 로 할 수 없다.

그래서 $()로 감싸줘야 한다. 그래야 제이쿼리 객체가 된다.

.map 메소드 인자로 함수를 받는다.

    var li = $('li');

    li.map(function(index, elem){

        console.log(index, elem);

        $(elem).css('color', 'red');

    })

index 는 0,1,2 호출

elem는 DOM 객체 호출

DOM 객체에 제이쿼리 명령어를 쓰기위해서 $()로 감싸준다.(제이쿼리 객체로 만들어준다.)

2. Element 객체

-Element 와 HTMLElement 왜 두가지로 나뉘는 것인가

:자바스크립트(DOM)가 마크업 언어 중 HTML만을 프로그래밍적으로 제어하기 위한 프로그래밍 언어가 아니기 떄문

DOM체계는 XML SVG, XUL 등 마크업 언어도 제어해야 하는 표준이다.

이 각각들에도 적용할 수 있는 객체는 Element.

HTMLElement는 HTML언어에서만 특별히 가져야하는 프로퍼티를 추가하여 따로 존재.

DOM은 체계 다른 언어에서도 DOM체계를 지원한다면 금방 익숙해질 수 있다.

크롬 개발자도구에서 오른쪽 탭의 property에는 선택한 객체의 상속관계를 볼 수 있다.

(1) 식별자 API

엘리먼트를 제어하기 위해서 그 엘리먼트를 조회한다. 그 때 식별자가 필요하다.

tagname - 읽기 전용

id(문서에서 단 한번만 등장할 수 있는 식별자) 같은 이름을 갖고 있는 id는 존재할 수 없다. - 변경 가능

classname - 까다롭고 불편 차라리 classlist가 더 편리함

(2) 조회 API

document 객체는 문서 전체를 의미하는 엘리먼트이기 때문에

document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회한다.

Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있는데

Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행한다.

(3) 속성 API

attribute  그 값을 가져온다.

setAttribute(바꿀 대상, 바꿀 내용);

속성의 값을 바꿀 수 있다.

attribute(속성) vs property

3. jQuery 속성 제어 API

jQuery 는 실용성을 추구한 결과 메소드 명들이 토막토막 나있다.

.attr('title', 'opentutorials.org');

두번째 인자는 setAttribute의 기능

.prop -> property 방식;

심지어 속성과 프로퍼티는 값이 다를수도 있다.

jQuery 가 내부적으로 보정해주기 때문에 아무렇게나 사용해도 된다.

4. jQuery 조회 범위 제한

$( ".marked", "#active").css( "background-color", "red" );

두번째 인자로 selectorcontext가 온다.

$("#active .marked").css( "background-color", "red" );

이것도 같은 표현

$('#active').find('.marked').css( "background-color", "red" );

이것도 같은 표현

-> find를 쓰면 조금더 세분화 시켜서 css 메소드를 적용시킬 수 있다.

$('#active').css( "background-color", "red" ).find('.marked').css( "background-color", "blue" );

생활코딩 이고잉님 감사합니다^^

-,,-