웹언어/jQuery (15) 썸네일형 리스트형 [jQuery강좌] 7강 문서객체 HTML요소관련 메서드 - text(), html(), attr(), prop()메서드 1. 문서객체 - 텍스트관련메서드 - 이번에는 문서객체 중 글자를 컨트롤하는 메서드들을 보도록 하겠습니다. 1) text()와 html() 메서드 비교 - text메서드와 html메서드는 문서객체의 텍스트컨텐츠를 컨트롤하는 메서드입니다. - 둘다 게터와 세터를 갖고 있어, 글자를 얻어올 수도 있고, 변경할 수도 있습니다. - 두 메서드의 큰 차이는 태그문자를 태그로 인식하는지, 아니면 문자로 인식하는지입니다. - 자바스크립트의 innerHTML속성과 innerText속성을 메서드화 시켰다고 생각하면 편합니다. ## 코드 보기 ## 결과보기 - text() 메서드는 매개변수의 문자열을 그냥 문자로 받아들여 그대로 출력해줍니다. - html() 메서드는 매개변수의 문자열 중 태그가 있다면 태그를 인식하여 태.. [jQuery강좌] 6강 문서객체 DOM Tree 이동 메서드 1. 제이쿼리 문서객체 DOM Tree 이동 메서드 - 문서객체의 선택이 이동되는 메서드들입니다. 흔히, 가족관계 선택을 의미합니다. 1) DOM Tree 가족관계 - 는 과 의 부모(parent)입니다. - 과 은 의 자손(children)입니다. - 과 은 형제(sibling)입니다. - 이런 DOM들의 관계를 가족관계라고 부릅니다. 2) DOM Tree 문서객체선택 이동메서드의 종류 메서드 종류 설명 parent() 선택된 문서객체의 부모객체를 선택 parents() 선택된 문서객체의 모든 조상요소를 선택 parents('선택자') 선택된 문서객체의 조상요소 중 매개변수에 작성한 조상요소를 선택 parentsUntil('선택자') 선택된 문서객체의 조상요소 중 매개변수에 작성한 요소 전까지 조상요소.. [jQuery강좌] 5강 문서객체 필터(filter) 메서드 - 오쌤의 니가스터디 1. 제이쿼리 필터메서드 - 제이쿼리 필터메서드는 선택된 문서객체를 다시 재선택하는 메서드입니다. 1) 메서드 체이닝 - 객체선택 후 메서드 뒤에 또 메서드를 붙이는 것을 메서드 체이닝이라고 합니다. ## 문법 $('선택자').메서드명1().메서드명2(); - 대부분의 컴퓨터 언어는 특별하게 제어하는 구문이 없는 이상 FIFO(First In First Out)방식을 선택합니다. - 그래서 먼저 쓴 코드 먼저 처리되고 나중에 쓴 태그 나중에 처리됩니다. - 위의 문법에서는 메서드명1( )이 먼저 처리되고 메서드명2( )가 나중에 처리됩니다. 2) 필터메서드의 종류 - 제이쿼리 문서객체 필터메서드들은 문서객체를 선택 후 다시 재선택하는 메서드입니다. - 필터메서드의 종류를 보도록 하겠습니다. 필터메서드 종.. [jQuery강좌] 4강 문서객체 메서드 문법 - 오쌤의 니가스터디 1. 제이쿼리 메서드 문법 ## 기초적 문법 $('문서객체선택자').메서드명(); - 제이쿼리 문법은 속성을 사용하는 방식은 거의 없습니다. - 대부분 메서드화시켜서 위에서 보이는 대로 작성합니다. - 하지만 메서드 ( )괄호 안에 매개변수를 어떻게 작성하는지 나뉘기 때문에 이번 시간에는 메서드 문법을 보도록 하겠습니다. 1) 메서드 문법 정리 문법유형 예시 매개변수가 없는 유형 $('선택자').메서드명( ); 매개변수가 한개인 유형 $('선택자').메서드명(값); 매개변수가 함수인 유형 $('선택자').메서드명(function( ){ }); 매개변수가 여러개인 유형 $('선택자').메서드명(값1,값2,...); 매개변수가 객체방식인 유형 $('선택자').메서드명({ 옵션: 값, 옵션: 값 }); - 위.. [jQuery강좌] 3강 제이쿼리 문서객체 선택자 - 오쌤의 니가스터디 ** 동영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/UOjuRXeGbr8 https://youtu.be/N3te-ax1Sa0 1. 제이쿼리 객체선택 - 제이쿼리는 기본적으로 자바스크립트에서 파생된 언어입니다. - 그래서 자바스크립트에서 사용되는 속성과 메서드를 사용시에는 자바스크립트에서 사용했던 객체선택방식을 사용해야합니다. - 하지만 제이쿼리의 장점은 바로 문서객체선택이 쉬워졌다는 것이죠. 그 부분에 대해서 알아보도록 하겠습니다. 1) 기본내장객체 선택 - 이것은 두 언어 모두 동일하게 선택합니다. - 예시는 Math객체를 들도록 하겠습니다. ## 자바스크립트(JS)에서의 기본내장객체 선택 - [ Math ]라는 기본내장객체를 직접적으로 작성하여 코드를 작성합니다... [jQuery강좌] 2강 제이쿼리 준비구문 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/Rx0lYV0Lb_0 1. 준비구문이란? - 준비구문이란 문서 객체를 먼저 읽고 스크립트구문을 실행하라는 구문입니다. - ## 표현식을 태그 안쪽 아래에 쓴 경우 결과 - 글자색이 빨간색으로 변경된 것을 확인할 수 있습니다. - 하지만 스크립트 태그를 위쪽에 쓰기 위해 사용하는 것을 준비구문이라고 볼 수 있습니다. - 아래쪽에서 세가지 종류를 비교해보도록 하겠습니다. 2. 준비구문의 종류 - 준비구문은 크게 세가지 종류를 나뉩니다. 어떤 것을 사용해야할지 아래 예제들을 보고 확인해보도록 하겠습니다. 1) $(document).ready(function(){}); - 문서객체가 준비되고 나면 스크립트(제이쿼리) 명령을 .. [jQuery강좌] 1강 제이쿼리 플러그인 설치 - 오쌤의 니가스터디 ** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요. https://youtu.be/wmpPwLH5ycU 1. 제이쿼리(jQuery)란? 1) 제이쿼리 소개 - HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다. - 2006년 John Resig이 뉴욕시 바캠프(Barcamp NYC)에서 공식적으로 소개하였습니다. - MIT 라이선스를 가진 자유 오픈 소프트웨어입니다. - 최근 리액트나 Vue.js같은 자바스크립트 프레임워크가 나오면서 많이 위축되고는 있고, 트렌드에 많이 밀리고는 있지만 그래도 실무에서는 현저히 홈페이지를 제작하는데 많이 사용합니다. - 그리고 jQuery 차기버전(4.x)가 나올 예정이며, 그동안 단점으로 보았던 것들을(무거움 등).. 이전 1 2 다음
