본문 바로가기

Dev.FrontEnd/JavaScript

[네번째] 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" );



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