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

제이쿼리는 항상 $로 시작합니다

$ = jquery function 입니다. (제이쿼리 함수다)

$('css 선택자') <-- 대부분 어떤 element 의 css 선택자가 올지를 정한다 # id선택자 . class 선택자 그냥은 태그

$('li') <-- 는 제이쿼리 함수이다 (li 태그의 모든요소들을 객체로 객체로 바꾼결과

// $('li') 는 var object2 = (function() { return document.getElementsByTagName('li') });

약간 이런느낌??

chaining

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

$('li')의 객체를 .css 프로퍼티로 전달햇는대 결국

$('li').css('color','red') 이것도 객체이기 때문에 .css 프로퍼티를 또 붙혀서 사용할수있다

이것을 chaining 라고한다.

내가 이렇게 선택한 엘리먼트 들을 연속적으로 또 메소드를 호출한다

html객체의 이름찾기

<body> <ol> <li name= 'name'>안녕하삼</li> <li id = 'active'>안녕하삼</li> <li class = 'class'>안녕하삼</li> <li>안녕하삼</li> <span id = 'act'>스판</span> </ol> <script> var li = document.getElementById('active'); console.log(li.constructor.name); // HTMLLIElement var li2 = document.getElementById('act'); console.log(li2.constructor.name); // HTMLSpanElement var lis = document.getElementsByTagName('li'); console.log(lis.constructor.name); // HTMLCollection </script> </body>

저렇게 id로 하나만 선택하는 것들은 HTML(엘리먼트이름)Element 가 나오고

Elements로 복수개를 선택하는 것들은 HTMLCollection 으로 나온다

HtmlCollection 은 유사배열이다.

DOM Tree

모든 엘리먼트는 HTMLElement의 자식이다.

따라서 HTMLElement의 프로퍼티를 똑같이 가지고 있다.

동시에 엘리먼트의 성격에 따라서 자신만의 프로퍼티를 가지고도 있는데, 이것은 성격에 따라서 달라진다.

HTMLElement 는 Element의 자식이고 Element는 Node의 자식이다.

Node는 Object의 자식이다.

이런 관계를 DOM Tree 라고 한다.



Dom Tree (이고잉 자바스크립트 출처) DOM Tree

jquery 객체

html collection 은 실시간으로 구조가 변경이된다.

제어대상찾기


'프로그래밍 > Jquery' 카테고리의 다른 글

jQuery - html 페이지 테이블 엑셀변환  (2) 2019.04.02
jQuery 란?  (0) 2019.02.27
제이쿼리의 기본문법  (0) 2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐)  (0) 2019.02.27
JQuery - NODE 객체  (0) 2019.02.27

+ Recent posts