반응형 SMALL jQuery9 반응형 LIST jquery addClass removeClass 이번에는 태그에 클래스를 추가 혹은 제거하는 기능을 이용해보려고 합니다.어떤 영역을 표시하려고 할때 혹은 감추려고 할때,데이터의 목록을 선택하거나, 선택 해지할 경우가 필요할 때 등 다양한 용도에 필요한 기능입니다. 본문에서는 과일과 식재료를 선택하는 영역을 만들고Radio 버튼을 눌러서 div_class 하나의 영역을 selected 클래스를 적용해주고 활성화를 시켜줍니다.활성화된 영역에 대해서는 색상을 밝게 해줘서 표시해주며추가적으로 .div_class.selected 하위로 지정해 그 영역에 있는 리스트들만 손모양 커서를 적용해줄 수 있고선택시에 배경색으로 표시해줄 수 있습니다. 크게 2가지 역할로 보았을때단순히 선택한 태그에 style 설정하거나, 선택된 영역의 하위에만 설정할 수 있도록 css .. 2017. 12. 22. jquery each() jQuery의 반복문 each() 여러개의 태그를 select() 함수를 이용해 동시에 속성을 지정한다거나 지우거나 복사하거나 하는 등 한번에 처리를 해야할 때가 있으나, 선택한 태그들을가지고 하나하나 처리를 해야할 때 사용하는 반복문 함수입니다. 이번 실습에서는 성적표를 가지고, 각각의 점수를 합하고 평균을 구하는 구분을 each()문을 이용해서 해보도록 하겠습니다. 한사람씩 그리고 과목하나하나의 점수씩 계산이 필요하므로 이중 each()문을 이용해서 구하는 방법입니다. * find() : 현재위치의 태그 하위에 있는 태그를 검색할 때 사용하는 함수 입니다. * length : jQuery를 이용해 선택한 태그들의 갯수를 구할 때 사용하는 속성 입니다. * Math.round : javascript 기.. 2017. 12. 16. jquery closest() 오늘은 closest() 함수에 대해 알아볼게요~ 어떤 태그의 부모태그를 찾는데 부모태그들 중 태그명이나 클래스명, 아이디 등을 지정해 찾는 방법입니다.바로 상위(부모태그) 태그가아닌 부모의 부모의 부모의 부모의 부모 태그에 잇더라도 클래스명이나 아이디 혹은 태그명이 내가 찾는 것이라면그 부모태그를 찾아주는 기능입니다. 여기에서는 게시글을 삭제하는 기능을 구현할때 [삭제] 버튼 클릭시 클릭한 삭제버튼의 부모태그 li 태그를 찾기 위해서 사용합니다.물론 부모태그 parent() 태그를 이용해도 가능합니다.단 삭제버튼이 li 바로 자식태그로 존재할 경우에는 (삭제버튼태그).parent() 한번호출 해서해야되고만일 삭제 버튼이 자식태그의 자식태그에 존재할 경우에는 (삭제버튼태그).parent().parent(.. 2017. 12. 14. jquery click() jQuery 기초 click() 실습 두개의 박스중 왼쪽 박스에있는 문장을 클릭하면 파란색 텍스트로 변하고 오른쪽 박스에 있는 문장을 클릭하면 빨간색 텍스트로 변하도록 클래스를 적용하도록 하겠습니다. click() 함수를 이용해 각 문장에 이벤트를 설정하는 방법 입니다. 첫번째 영역 div 태그의 span 태그 첫번째 입니다. 첫번째 영역 div 태그의 span 태그 두번째 입니다. 첫번째 영역 div 태그의 span 태그 세번째 입니다. 첫번째 영역 div 태그의 span 태그 네번째 입니다. 첫번째 영역 div 태그의 span 태그 다섯번째 입니다. 첫번째 영역 div 태그의 span 태그 여섯번째 입니다. 첫번째 영역 div 태그의 span 태그 일곱번째 입니다. 첫번째 영역 div 태그의 span.. 2017. 12. 13. jquery hide() show() jQuery 기초 hide() show() 실습 태그를 숨기고 hide() , 보이게하는 show() 함수를 활용해보려고 합니다. 일반적으로 그냥 깜빡사라지고 나타나기도 하고 속도를 지정해 펼쳐지며 사라지고 나타나는 설정도 할수가 있는데요 hide() : 사라지기 hide(1000) : 1초동안 사라지기 show() : 나타나기 hide(300) : 0.3동안 나타나기 사용을 해보며 속도 조절도 설정해서 실습을 해보았습니다.^^ 숨기기 hide() 보이기 show() 빠르게(최소0.1초) 느리게(최대3초) 현재속도 : 100 2017. 12. 12. jquery append() jQuery 기초 append() 실습 오늘은 태그를 추가하는 용도로 사용하는 append() 함수를 활용해보려고 합니다. 중간중간 이전에 실습하지 않았던 val() 함수와 remove() 함수가 나오는데요 이것은 실습간단히 설명으로 끝내려고 하니다. val() 함수는 input 태그 (text박스)에 입력한 값을 가져올 때 사용합니다. 내용을 입력하고 입력하기 버튼을 누르면 우측 파란색 박스에 입력한 내용이 입력됩니다. (한줄단위로) 그리고 새로 입력을 하기 위해 input 태그의 값은 초기화를 해주고 있습니다. remove() 함수는 태그를 삭제할 때 사용합니다. 내용 : 입력한내용 123456788 입력하기 지우기 2017. 12. 11. jquery eq() jQuery 기초 eq() 실습 eq()는 select() 선택자를 기본으로 하되 id 혹은 name 혹은 class 를 이용해서만 지정하는것이 아닌 추가적으로 목록에서의 몇번째를 지정할 때 유용하게 사용하는 선택자 입니다. 또한 방식의 차이로 :eq(2) 이런식으로도 지정을 할수 있고 다중선택을 할수도 있습니다. ## 유의사항 ## 3번째를 지운상태에서. 또 다시 3번째를 지울때 최신 상태에서 다시 한번 3번째를 찾게됩니다. (지운 태그 부분을 다시한번 3번째로 지정하지 않음) HTML 삽입 미리보기할 수 없는 소스 첫번째 영역 div 태그의 span 태그 첫번째 입니다. 첫번째 영역 div 태그의 span 태그 두번째 입니다. 첫번째 영역 div 태그의 span 태그 세번째 입니다. 첫번째 영역 di.. 2017. 12. 9. jquery attr() jQuery 기초 attr() 실습 색상변경을 하기위해 attr() 실습을 해보았습니다. 태그에 있는 class 속성을 변경해서 text/css 선언한 클래스를 이용해 스타일을 변경해 봅니다. 첫번째 영역 div 태그의 span 태그 첫번째 입니다. 첫번째 영역 div 태그의 span 태그 두번째 입니다. 첫번째 영역 div 태그의 span 태그 세번째 입니다. 첫번째 영역 div 태그의 span 태그 네번째 입니다. 첫번째 영역 div 태그의 span 태그 다섯번째 입니다. 첫번째 영역 div 태그의 span 태그 여섯번째 입니다. 첫번째 영역 div 태그의 span 태그 일곱번째 입니다. 첫번째 영역 div 태그의 span 태그 여덟번째 입니다. 첫번째 영역 div 태그의 span 태그 아홉번째 입니.. 2017. 12. 8. jquery select() 두문단을 가지고 select() 실습을 해보았습니다. 버튼3개를가지고 태그를 선택하는것으로 id / class / tag 를 지정하여 선택하기 실습이며 아래의 소스를 이용해서 실행시 버튼의 기능을 확인할 수 있습니다. 첫번째 영역 div 태그의 span 태그 첫번째 입니다. 첫번째 영역 div 태그의 span 태그 두번째 입니다. 첫번째 영역 div 태그의 span 태그 세번째 입니다. 첫번째 영역 div 태그의 span 태그 네번째 입니다. 첫번째 영역 div 태그의 span 태그 다섯번째 입니다. 첫번째 영역 div 태그의 span 태그 여섯번째 입니다. 첫번째 영역 div 태그의 span 태그 일곱번째 입니다. 첫번째 영역 div 태그의 span 태그 여덟번째 입니다. 첫번째 영역 div 태그의 s.. 2017. 12. 8. 이전 1 다음
