반응형 SMALL jQuery 기초11 반응형 LIST jquery addClass removeClass 이번에는 태그에 클래스를 추가 혹은 제거하는 기능을 이용해보려고 합니다.어떤 영역을 표시하려고 할때 혹은 감추려고 할때,데이터의 목록을 선택하거나, 선택 해지할 경우가 필요할 때 등 다양한 용도에 필요한 기능입니다. 본문에서는 과일과 식재료를 선택하는 영역을 만들고Radio 버튼을 눌러서 div_class 하나의 영역을 selected 클래스를 적용해주고 활성화를 시켜줍니다.활성화된 영역에 대해서는 색상을 밝게 해줘서 표시해주며추가적으로 .div_class.selected 하위로 지정해 그 영역에 있는 리스트들만 손모양 커서를 적용해줄 수 있고선택시에 배경색으로 표시해줄 수 있습니다. 크게 2가지 역할로 보았을때단순히 선택한 태그에 style 설정하거나, 선택된 영역의 하위에만 설정할 수 있도록 css .. 2017. 12. 22. jquery attribute selector attribute selector 기능 객체의 속성값을 가지고 다양한 방법으로 찾기를 하는 기능입니다.mssql의 like 기능을 생각해볼수 있는데요 예를 들어 "김"씨성을 가진 사람들, 이름에 "이"가 들어가는 사람들, 나이가 21이 아닌 사람들 등등 여러 경우의 수를 찾을 때 이용하는 기능입니다.사용방법이 다양한데요 한가지 씩 경우에 따라 실습을 해보도록 하겠습니다.DB에서 like 문을 이용해 혹은 다른 조건들을 이용해서 데이터를 매번 필터해서 호출하지 않고 한번 불러와서 클라이언트에서 데이터를 필터해서 조회하고 이용하는데 유용히 사용할 필요가 있을 것 같습니다.매번 DB호출해서 서버에 많을 일을 시키지 않도록 하는 것이 중요하다는 의견입니다.단 다시 호출해서 가져오기 전까지는 잠깐 동안이지만 새로.. 2017. 12. 18. 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. 이전 1 2 다음
