1. selector 연습코드 (body) 1) 아래의 텍스트박스에 입력한 후 선택을 눌렀을 때, radio에 체크했을때, checkbox를 클릭했을 때 각 value값이 body의 div(화면에서는 select위 공백)에 나타날 수 있도록 하자. 2) radio에 선택한 값이 index와 함께 alert창으로 나타나도록 하자. 20/6/5~ 빅데이터 전문가 과정 1 2 3 4 2. script jquery를 사용했을 때 코드가 조금 더 길어질 수도 있는 상황 발견... javascript로 했을 때와 두가지 방법으로 해보았다.
1. Selector 이용하여 이미지 바꾸기(body) 1. 이미지들의 크기를 모두 200px * 200px 으로 설정하자. 클릭 2. 이미지들 중 id가 'selid'인 태그를 찾아, 숨기자 클릭 3. 이미지들 중 class가 'selclass'인 태그를 찾아, 투명도 50%를 적용하자 클릭 4. 이미지들 중 속성값으로 탐색하여 slideUp 기능을 적용하자. title 속성값 중 , '02'를 포함하는 img 태그를 찾아서 적용 slideUp은 2000ms로 적용 클릭 5. 이미지 바꾸기 td의 자식요소인 img만 선택해서 바꾸자 클릭 2. script 1) 이름 중 특정 부분으로 검색하고 싶을 때는 *=를 사용할 수 있다. 예) $("img[title*=02]").slideUp(2000); 2) ...
1. Selector 표현식 연습 코드(body) selector 표현식 tag로 선택하기 id로 선택하기 class로 선택하기 parent child로 선택하기 parent> child로 선택하기 :nth-child(n/odd/even) :first-child :last-child 태그선택(span) id선택(t1) class선택(t2) p c 선택 p > c 선택 nth-child first-child last-child reset code 2. script
1. jQuery 기본 작성법 : Selector 표현식 (css표현식 + javascript표현식) $("selector").메서드(); ->$("#test").css("color","red"); 2. 연습코드(body) jQuery 시작! 1. selector 2. dom 탐색 3. 이벤트 4. 이펙트 5. ajax 강조! show resize add toggle 3. script 주석처리된 부분은 jquery표현식을 javascript로 바꾸었을 때의 코드로, jquery를 사용했을 때 얼마나 간단히 코드를 작성할 수 있는지 비교 할 수 있다.
1. jQuery 홈페이지(https://jquery.com/) jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. jquery.com 2. 메인화면에 다운로드 클릭 3. compressed 버전으로 다운로드 - compressed: 압축된 형태로 띄어쓰기 등이 되어있지 않음(용량이 작다) ..
