아빠개발자의 노트

$('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객체의 이름찾기

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

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

HtmlCollection 은 유사배열이다.

​

DOM Tree

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

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

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

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

Node는 Object의 자식이다.

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

​

jquery 객체

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

​

​

제어대상찾기

​

제이쿼리는 자바스크립트보다 보다 실용적이고 적은 코딩으로 작성하기 때문에 줄임말을 자주사용한다

setAttribute , getAttribute 에 대응 되는 jquery의 메소드는 attr이다.

$('t1').attr('checked'); // getAttribute 고

$('t1').attr('checked' , false); // setAttribute 이다

또한 removeAttribute 에 대응되는 jquery의 메소드는 remobeAttr 이다.

​

제이쿼리에 .attr 은 속성제어자 이고 .prop 는 프로퍼티방식 이다

​

t1.prop('href'); // 은 href 의 값을 가져오는 것이고 get

t1.prop('href','abcd'); // 는 t1.href = 'abcd' 와 같다

​

또 javascript 에서는 속성제어자와 프로퍼티방식이 미묘한 차이가 있다고 했지만

제이쿼리에서는 이것을 내부적으로 보완 해주기 때문에

$('#t1').prop('className' , 'important');

$('#t2').prop('class' , 'important');

는 내부적으로 보완해줘서 서로 같은결과를 나타낸다.

제이쿼리 하위엘리먼트 선택 (조회범위 제한)

​

​

​

​

​

​

제이쿼리 NODE의 REMOVE 와 EMPTY

REMOVE --> 선택된 엘리먼트만을 제거

EMPTY --> 선택된 엘리먼트의 텍스트만을 제거

​

​

제이쿼리 NODE의 replaceWith와 replaceAll

replaceWith --> 제어대상을 먼저 지정

replaceAll --> 제어대상을 인자로 전달

clone --> 대상 복사

​

​

자바스크립트는 html 위에서 작동한다

html을 동적으로 작성하기 위해 자바스크립트라는 기술이 나왔습니다.

​

자바스크립트 데이터타입

1. Boolean

2. Null

3. Undefined

4. Number

5. String

6. Symbol (new in ECMAScript 6)

​

'문자열'.toUpperCase // 문자열을 대문자로 치환

'문자열'.indexOf('찾을문자') 찾을문자가 문자 몇번째에서부터 시작되는지 숫자로 표시됨

'문자열'.trim // 문자의 공백을 제거

​

x = 1;

대입연산자 = (우항의값을 좌항에 대입)

변수 : variable (베리어블) 이라고도 한다

​

html 에서 비교연산자 &it; 는 < 이렇게 표시된다

​

함수를 만드는 3가지 방법

​

​

객체 내가 생각하는 객체는 변수 함수 메소드 모든게다 각각 객체가 될수있다

객채에 함수를 넣으면 그 함수는 메소드가된다

위 그림의 3번같은 경우

​

var showAll = {'abc' , 'abc1'};

이럴 경우 객체가 생성이된다.

또한 showAll 이라는 객체의 'abc' 는 프로퍼티 라고도 한다.

​

3번의 showall 에 들어있는 함수에서 this를 사용하면 cow를 뜻한다

함수 안에서 this를 쓰면 함수바로 상위의 객체를 this 로 쓴다

만약 2번처럼 쓰고 그안에 this 를 쓸경우 그 this 는 상위 객체? 인 window를 소환한다

​

자바스크립트는

이렇게 줄바꿈 하면 문장이 끝낫다고 알기때문에 ; 안붙혀도 작동이노딘다

하지만 ; 을 명시적으로 적어주는게 좋다

​

var a = 1 //여기서

a //는 변수

1 //은 값

= //은 대입연산자

//라고부른다

이런걸 이항 연산자라고 한다.

​

또한 비교문

= 는 대입연산자 우항의 값을 좌항에 넣는다

== 비교연산자 좌항과 우항의 같냐 틀리냐

=== 비교연산자 좌항과 우항의 값이 정확히 같냐 틀리냐

​

1 == "1" //true 데이터 타입이 달라도 정보의 값이 같아서 true

1 === "1" // false 정보의 값이 아니라 타입까지 일치해야한다

​

null 과 undefined는 값이 없다라는 뜻이다.

null // 값이 없다

undefined 정의되어있지 않다.

NaN 은 0을 0으로 나눳을때 (성립하지 않는다)

NaN === NaN // False

​

for 문에 i++ 는 실행을 하고 1씩증가하고

++i 는 증가한다음실행이된다

​

​

배열합치기

var li = ['a','b']

li.concat(['f','g'])

이렇게 되면 배열이 합쳐진다.

​

배열.splice([인덱스],0,"배열에추가할문자")

​

배열 제거

배열.shift 첫번째 원소를 제거

배열.pop 끝번째 원소를 제거

​

배열정렬

배열.sort(); 하면 순서대로 정렬된다 디비 asc; 같은 느낌

배열.reverse(); 하면 거꾸로 정렬된다 디비desc;

​

​

​

객체

var grades = new Object(); 이것과 var grades = { }; 은 같은의미이다.

​