반응형 SMALL jquery함수8 반응형 LIST jquery each() jQuery의 반복문 each() 여러개의 태그를 select() 함수를 이용해 동시에 속성을 지정한다거나 지우거나 복사하거나 하는 등 한번에 처리를 해야할 때가 있으나, 선택한 태그들을가지고 하나하나 처리를 해야할 때 사용하는 반복문 함수입니다. 이번 실습에서는 성적표를 가지고, 각각의 점수를 합하고 평균을 구하는 구분을 each()문을 이용해서 해보도록 하겠습니다. 한사람씩 그리고 과목하나하나의 점수씩 계산이 필요하므로 이중 each()문을 이용해서 구하는 방법입니다. * find() : 현재위치의 태그 하위에 있는 태그를 검색할 때 사용하는 함수 입니다. * length : jQuery를 이용해 선택한 태그들의 갯수를 구할 때 사용하는 속성 입니다. * Math.round : javascript 기.. 2017. 12. 16. jquery appendTo() appendTo() 함수 이전에 사용했던 append() 함수와 마찬가지로 태그를 추가하는 함수입니다.방식의 차이인데요. 용도에 맞게 사용하시면 되겠습니다.append() 함수는 (부모태그선택).append(들어갈태그내용) 의 방식으로 사용을 했다면appendTo() 함수는 (들어갈태그내용).appendTo(부모태그선택) 의 방식으로 사용합니다. 보통 저의 경우에는 append()를 많이 사용했습니다. 둘중 처음접한 함수이기도 하고 한번 써본 방식을 벗어나질 않게 되는 문제 때문이죠^^계속 사용하게 되었고 appendTo는 개발하다 중간중간 아차 이거로 쓰면 되겠네. 라고 생각이 났을때 쓰는정도^^;(유용한함수인데 못쓰는 저의 문제 일수도 있겠네요) append()를 써야만한다거나, appendTo()를.. 2017. 12. 15. 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 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 다음
