본문 바로가기

COA Lab's jQuery

메서드2 DOM객체 조작하는 메서드 ------------------- 요소의 속성 변경 1. 선택자 속성의 값을 가져온다 2. 선택자의 속성값을 변경 3. 선택자의 속성값을 제거 $(selector).removeAttr() ------------------- 요소의 스타일 변경 1. 선택자 스타일의 해당값을 가져온다. 2. 선택자 스타일의 값을 변경한다. 3. 선택자에 여러 스타일을 한번에 설정한다. ------------------- 클래스 사용하기 1. 선택자에 class 추가 2. 선택자에 특정 class가 있는지 찾기 3. 선택자에 class제거 4. 선택자에 class추가 제거 반복 ------------------- 제거,비우기 1. 선택자 노드 제거 - $(selector).remove() 2. 선.. 더보기
선택자 및 메서드 1 jq의 cdn 작성 위치와, cdn다운받는 곳 - code.jqeury.com jq의 기본 구문 작성법 $(selector).method(); ------------------- 기본선택자 5가지 이상 - 요소(태그명), 아이디(#), 클래스(.), 종속( ), 자식(>), 이웃(+), 형제(~), 그룹(,), 모든(*)선택자 탐색선택자 5가지 이상(구조, 순서) li를 예로 들면, - li:first-child - li:last-child - li:nth-child(n) - li:nth-child(2n+1) - li:nth-last-child(n) ... 제이쿼리 선택자(짝홀수, 2번째, 첫번째, 마지막li, 3번째 뒤에 있는 모든 li, 3번째 앞에 있는 모든 li) - li:even - li:odd.. 더보기
jQ 5 - each() each() : 배열객체를 순서대로 순환하는 메서드이다. $(셀렉터).each(function(){....}) 와 같이 작성하는데, function의 ()안에는 2개의 인자값이 들어가고, 첫번째는 index순서, 두번째는 배열의 값이 들어간다. each(function(index, item){...})와 같다. $(셀렉터).each()에서 셀렉터는 배열객체가 된다. 1. 배열객체를 초기화 해두고, 여기에서 객체의 value값을 순서대로 가져오는 방법을 본다. $(function(){ let arr = [ {name : '네이버', link : 'https://www.naver.com'}, {name : '다음', link : 'https://www.daum.net'}, {name : '구글', link .. 더보기
jQ 4 - append 활용 : 배열객체, 이미지를 추가하기 1. append vs appendTo 차이점 $(A)append(B) : A의 end tag 바로 앞에 B를 추가한다. $(B).appendTo(A) : A의 end tag 바로 앞에 B를 추가 한다. 2. 배열객체를 만들어서 div태그에 값을 추가해 본다. $(function(){ let content = [ {name : '손지영', position : '영상부장'}, {name : '조성민', position : '아이디어부장'}, {name : '김서희', position : '디퍼부장'} ]; $('div').append(function(index){ let item = content[index]; let output =''; output += '' + item.name + ' : '; out.. 더보기
jQ 3 - method() 의 종류 1 1. 요소에 클래스를 추가 제가하는 메서드 addClass() : 추가할 클래스의 이름을 ()안에 작성한다. removeClass() : 제거할 클래스의 이름을 () 안에 작성한다. toggleClass() : 추가|제거를 반복적으로 사용할 수 있는 메소드로, ()안에 클래스의 이름을 작성한다. 2. 이벤트 연결하기 on(), bind() 메소드로 이벤트를 연결하는데, $(selector).on('click', function(){...}); 식으로 작성한다. 3. 요소를 태그로, 텍스트로 추가하는 메소드 : html(), text() 4. 객체의 내부를 비우거나 제거하는 메소드 : empty(), remove() 5. 새 요소를 추가하는 메소드 : append(), appendTo(), prepend(.. 더보기
jQ 2 - 선택자의 종류 DOM객체에 접근할 수 있는 방법은 CSS에 작성하는 선택자 작성방법과 동일하다. 다양한 선택자의 종류가 있으므로, 아래와 같이 한번씩 작성해 본다. 구조선택자와 메서트체이닝 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 인접 관계 선택자 탐색 선택자 내용 1 내용 2 내용 3 내용 4 내용 5 내용 6 네이버 구글 다 음 유투브 메일보내기 내용 7 내용 8 내용 9 이름 사용자동의 네이버 다음 $(function(){ //jqeury에서 위와 동일한 뜻 // $(selector).method(); // $('tr:odd').css('background', '#f00');//index 홀수 // $('tr:even').css('background', '#0f0');//inde.. 더보기
jQ 1 - 문서에 cdn 연결하기 1. code.jquery.com 사이트에 접속하여, cdn을 선택하여 링크저장해 둔다. 2. js폴더에 저장해 두고, 이 문서를 문서의 상단에 안에 주소를 연결한다. 3. script 태그 안에 jQuery문법을 사용할 것이라고 선언한다. $(document).ready(function(){ }); 위와 같이 작성하고 준비 해 둔다. 더보기

티스토리툴바