2017-06-30-T

JQuery 활용해보기

---------------------------------------------

선택자 메서드

---------------------------------------------

parent - 선택된 대상의 1단계 부모검색

parents - 선택된 대상의 html최상위까지 검색 (매개변수로 인하여 브레이크가능)

first - 선택된 대상의 첫번째를 선택

last - 선택된 대상의 마지막을 선택

eq - 선택된 대상의 해당 index를 선택

index - 선택된 대상의 index 값을 구한다.

예)$('선택자').index($(this))

chlidren - 선택된 대상의 1단계 자식 검색

find - 선택된 대상의 자식 전체 검색

---------------------------------------------

html 제어 메서드

---------------------------------------------

wrap - 선택된 대상에 부모를 생성한다.

append - 선택된 대상의 자식 요소 마지막에 html을 생성한다.

prepend - 선택된 대상의 자식 요소 첫번째에 html을 생성한다.

html - 선택된 대상의 내부에 html을 생성한다.

next - 선택된 대상의 다음 순서에 html을 삽입한다.

prev - 선택된 대상의 이번 순서에 html을 삽입한다.

---------------------------------------------

비교 메서드

---------------------------------------------

prop - 선택대상의 속성의 상태를 비교하여 boolean으로 리턴해준다. 혹은 실행

예)상태정보 - var isCheck = $('선택자').prop(':checked');

예)상태실행 - $('선택자').prop('checked',true or false);

is - 선택대상의 속성 및 존재 여부를 확인하여 boolean으로 리턴해준다.

예)상태정보 - var isCheck = $('선택자').prop(':checked');

예)상태정보 - var isCheck = $('선택자').prop('클래스 혹은 아이디');

ex)

위 사진은 eq 를 사용한 사진이다.

설명을 하자면 aOne 이라는변수에 $('article') 태그인걸 찾습니다. 그후 eq(0) 이라는것은 article이라는 태그를 가진것중 0번째인것을 의미합니다.

aOne을 적어주게 되면 aOne안에 담긴것이 왼쪽화면에 나오게 됩니다.

위 사진은 remove 를 사용한 사진이다

설명을 하자면 aOne객체를 remove 즉 삭제한것이다 aOne 안에는 아까 article 중에 0번째꺼가 담겨있기때문에 삭제된모습니다.

위사진은 children 을 사용한사진이다.

설명을 하자면 article태그를 가진걸 찾아서 그중 (1)번째를 찾음다음 children을 통해서 header의 값을 선택해 지운것이다.

위사진은 find를 사용한 사진이다.

설명을 하자면 위 children 과 비슷하다.

위사진은 first를 사용한 사진이다.

설명을하자면 eq 대신 first 가 들어갓는데 article 태그를 가진것중에 첫번째라는 뜻이다.

위사진은 last를 사용한 사진이다.

설명을하자면 first 와 마찬가지로 article 태그를 가진것중에 마지막번째꺼라는 뜻이다.

위사진은 parent를 사용한 사진이다.

설명을하자면 parent는 선택한 대상의 부모를 선택하는것이다 즉 article 태그 위를 선택하는것이다.

parent와 find 를 같이 사용하면 저런식으로도 만들수있다 여기서 find 뒤에것은 h1인것중에 eq(0)번째라는 뜻이다.

위 사진은 button을 생성한 것이다.

위처럼 버튼을 만들어서 btn 안에 담고 속성값도 set 할수있다.

*생성만하고 화면에 구현하지는 않았다.

위 사진은 button을 만들고 button을 넣어준것이다.

위에서 버튼객체를 만들고

아래 $('article').find('.entry-summary').append(btn3); 라고 적힌부분을 통해 화면에 버튼을 넣은것이다

사진에서 $('article').find('.entry-summary').append(btn3);부분이 가려져서 나와있다.

위 사진은 이벤트를 넣어봤다.

생성된 버튼을 클릭하면 즉 checks 클래스를 가진것을 클릭하면 그것의 부모 article을 지워달라는 뜻이다.

(모든 버튼의 클래스가 checks 이기 때문에 this로 클릭한 checks 를 찾아줘야한다.)

위사진은 index를 활용한것이다.

위와 마찬가지로 버튼 클릭시 안에 function이 실행되는데

클릭한 버튼의 부모태그인 article를 객체 parentObj에 담고 그것의 index를 변수 index에 담아서 alert로 보여주게된다.

위사진은 document 에 관한내용이다

설명을 하자면 document (지금까지 적용할것들을 다시 한번더 적용해주세요 이런느낌이다)해달라는것이고 

클릭이 발생햇을때 해달라는뜻이다 'add','del' 이라는 클래스를 가진것이 클릭되었을때 실행해달라는것이다

(*clone)는 복제이다. 그리고 prepend 는 추가한다고 생각하면된다.