🐷전동준(Jeon DongJun)

Go with the flow

[web]jQuery 복습 2

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!


jQuery 복습 2️⃣


아코디언 메뉴(Accodian Menu)

  • jQuery의 slide 메소드를 사용해서 어떤 목록을 누르면 목록이 펼쳐지고 다른 목록이 펼쳐지면 목록이 줄어드는 효과를 구현할 수 있다.

  • 슬라이드 메소드
  • slideUp() : 슬라이딩 모션을 통해 매치된 요소를 숨긴다.
  • slideDown() : 슬라이딩 모션을 사용해 매치된 요소를 나타낸다.
  • slideToggle() : 슬라이딩 모션을 사용해 매치된 요소를 숨기고 나타낸다.(위 두기능을 합침)

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • 클래스가 sub_menuN인 li태그를 누르면 하위의 리스트들이 펼쳐지고 형제 목록들은 접어지는 기능을 구현했다.

  • HTML 바디태그 부분

    • 나의 경우에는 해외여행을 하기 위해 준비해야하는 절차를 예시로 사용했다.
    • 우선 jQuery 라이브러리를 사용하기 위해 script 태그를 사용해 호출했다.
    • p태그에 제목을 적어줬고 동일 레벨에 클래스가 main_menu인 ul 요소를 만들어 줬다.
    • 그 하위에 4개의 li 요소를 만들어 줬고 sub_menu1로 클래스를 정해줬다.
    • 그리고 그 각 li 요소 밑에 ul 요소를 만들어 sub_menu2로 클래스를 지정
    • 각 ul 요소 밑에 li 태그를 이용해 여러가지 정보를 적어줬다.

  • CSS style

    • .main_menu : main_menu 클래스의 너비를 300px로 지정
    • .sub_menu1 : 마우스 커서를 가져다 대면 포인터가 생기게 지정
    • .sub_menu2 : display 속성 값을 none으로 지정해 요소가 보이지도, 공간을 차지하지도 않게 한 다음 cursor 속성값을 default로 지정해 일반 마우스 모양이 나오게 지정

  • JS

    • js의 onload 기능을 담고 있는 즉시 실행 함수를 정의했다.

    • 해당 문서 내의 b태그를 클릭하면 이벤트가 생긴다.

    • 그 이벤트가 발생했을 때, 선택한 b태그 요소의 다음 자리에 위치한 요소인 ul요소를 선택해 slideToggle() 기능을 적용해준다.

    • 그리고 end() 메소드를 사용해 b태그 요소를 다시 선택해주고, 그 부모의 형제요소들 중 ul태그를 찾아(find()) slideUp() 함수를 적용해줬다.

      • 그렇게 되면 하나의 ul 요소를 눌러 목록을 펼쳤을 때, 다른 ul 요소들의 목록은 접히게 된다.
    • $(function(){
            $('b').click(function(){
                $(".sub_menu2").slideUp()
                if ($(this).parent().children('.sub_menu2').css('display','none')){
                    $(this).next('.sub_menu2').slideDown()
                } else {
                    $(this).next('sub_menu2').slideUp()
                }
            })
        })
    • 위 처럼 자식/부모/형제 선택자 메소드를 사용해 슬라이드 업/다운 기능을 사용해서 구현할 수도 있다.


클래스(Class)

  • 지난 번에 이미지에 직접적으로 메소드를 적용해 보여주고 숨겨주는 show() 메소드와 hide() 메소드를 사용한 적이 있었다.
  • jQuery를 라이브러리에는 클래스를 더해주고 삭제해주고 더하고삭제하는 메소드와 해당 클래스를 보유하고 있는지 확인해 bool 값을 반환해주는 메소드가 있다.
    • addClass('클래스명') : 파라미터에 적어준 클래스명의 클래스를 엘리먼트에 적용해준다.
    • removeClass('클래스명') : 파라미터에 적어준 클래스명의 클래스를 엘리먼트에서 삭제해준다.
    • toggleClass('클래스명') : 파라미터에 적어준 클래스명의 클래스를 클릭할 때마다 적용했다 안했다하게 만들어준다.
    • hasClass('클래스명') : 엘리먼트에 해당 클래스명의 클래스가 존재하면 true를 존재하지 않으면 false를 반환한다.
  • 이런 클래스 관련 기능들을 사용해서 이미지를 갖고 놀아보자.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • 아이디가 btn인 버튼을 만들어줬다.
    • 치킨을 좋아한다. 그래서 치킨 이미지 3개를 불러왔다.
  • CSS style
    • img : 200px * 200px 사이즈로 지정
    • .addsize : 300px * 300px 사이즈로 지정
    • .onoff : display 속성값이 none으로 지정. 해당 클래스를 가지면 요소가 보이지 않고 사라진다.
  • JS
    • $(document).ready(function(){}) : js의 onload를 적용해주면서 함수명을 정의하지않고 즉시 실행해준다.
    • 첫 번째 기능
      • 아이디가 btn인 버튼을 누르면, img 태그를 갖고 있는 요소들에게 onoff란 클래스를 줬다가 빼줫다가 할 수 있다.
    • 두 번째 기능
      • img태그의 요소들. 즉, 이미지를 클릭할 때,
      • 이미지 요소가 addsize라는 클래스를 가지고 있다면 removeClass()라는 메소드를 사용해 addsize라는 클래스를 삭제해주며, title 속성에 ‘이미 축소됨’이라는 속성 값을 적용해 준다.
      • addsize 클래스가 없으면 이미지가 축소될 것이다.
      • 이미지 요소가 addsize라는 클래스를 가지고 있지 않다면 addClass()라는 메소드를 사용해 addsize라는 클래스를 적용해주며, title 속성에 ‘이미지 확대됨’이라는 속성 값을 적용해 준다.
      • addsize 클래스가 생기면 이미지의 사이즈가 200px * 200px 에서 300px * 300px로 커진다.


삽입(Insert)

  • 요소들을 삽입해주는 메소드가 여러가지 존재한다.
  • 기능적으로 요소의 내부에 요소를 삽입하는 내부 삽입 메소드와 요소의 외부에 요소를 삽입하는 외부 삽입 메소드로 나눌 수 있다.

내부 삽입(추가)

  • 내부 삽입은 말 그대로 선택한 요소의 자식 위치에 요소를 추가해주는 것을 말한다.

  • 내부 삽입 메소드

    • prepend() : 자식 요소들 중에 가장 앞에 요소를 추가한다.
    • append() : 자식 요소들 중에 가장 뒤에 요소를 추가한다.
    • html() : 자식으로 갖고 있는 HTML 요소를 바꿔준다.
    • text() : 자식으로 갖고 있는 Text Content 요소를 바꿔준다.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분

    • 내부 삽입 메소드 4가지를 적용하기 위한 버튼 4개를 만들어준다.
    • 메소드의 실행 결과를 확인하기 위한 <div>요소를 생성하고 그 안에 p태그를 요소 2개를 만들어줬다.

  • CSS style

    • div : 1px 굵기의 빨간 일반 라인 테두리를 적용
    • .prepend : 1px 굵기의 초록색 점선 테두리를 적용
    • .append : 1px 굵기의 파란색 점선 테두리를 적용

  • JS

    • 즉시 실행 함수 적용

    • 요소가 생성될 때 생성 개수를 표현해주기 위해 cnt라는 변수에 숫자 값 0을 넣어준다.

    • $('button:eq(0)').click(function(){})

      • 첫 번째 버튼을 클릭하면 prepend라는 클래스를 갖고 있는 p태그 요소가 div 영역의 자식의 가장 앞부분에 생성된다.

    • $('button:eq(1)').click(function(){})

      • 두 번째 버튼을 클릭하면 append라는 클래스를 갖고 있는 p태그 요소가 div 영역의 자식의 가장 뒷부분에 생성된다.

    • $('button:eq(2)').click(function(){})

      • 세 번째 버튼을 클릭하면 div 영역의 html 요소를 바꿔준다.
      • 이 때 기존에 존재하던 p 요소들이 사라지며, html요소를 바꿔주는 것이기 때문에 적혀있는 것과 같이 <b> 태그요소가 내부에 생성된다.

    • $('button:eq(3)').click(function(){})

      • 네 번째 버튼을 클릭하면 div 하위에 있던 p 요소들이 사라지며 오직 textcontent만 생성되게 된다.
      • 여기서 텍스트의 내용은 태그 엘리먼트가 아닌 문자로 취급되기 때문에 <b> 태그 요소가 생성되지 않는다.
      • <b>가 &lt;b&lt; 이런식으로 반영된다고 보면 된다.

외부 삽입(추가)

  • 외부 삽입은 선택한 요소의 자식이 아닌 선택한 요소의 바깥에 요소를 삽입해준다.

  • 외부 삽입 메소드

    • after()
      • 선택된 요소의 다음 위치에 요소를 삽입한다.
      • $('선택요소').after('삽입할 요소')
      • target이 앞에 위치해있다.
      • insertAfter와 차이점은 after()에는 function 기능이 있다.(jQuery사이트 참고)
    • insertAfter()
      • 선택된 요소의 다음 위치에 요소를 삽입한다.
      • $('삽입할 요소').insertAfter('선택요소')
      • target이 뒤에 위치해있다.
    • before()
      • 선택된 요소의 이전 위치에 요소를 삽입한다.
      • $('선택요소').before('삽입할 요소')
      • target이 앞에 위치해있다.
      • insertBefore와 차이점은 before()에는 function 기능이 있다.(jQuery사이트 참고)
    • insertBefore()
      • 선택된 요소의 이전 위치에 요소를 삽입한다.
      • $('삽입할 요소').insertBefore('선택요소')
      • target이 뒤에 위치해있다.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분

    • 외부 삽입 메소드 4가지를 적용하기 위한 버튼 4개를 생성
    • <div> 요소를 생성해 그 안에 <p> 요소를 생성, 이 영역을 기준으로 메소드를 테스트

  • CSS style

    • div : 1px 굵기의 빨간 일반 라인 테두리를 적용

  • JS

    • 즉시 실행 함수 적용
    • eq()는 선택된 요소 중 n번지에 위치한 요소를 선택해준다.
    • $('button:eq(0)').click(function(){})
      • 첫 번째 버튼을 클릭하면, 아이디가 base인 div요소를 선택해 그 위치의 다음의 위치에 새로운 div 엘리먼트를 삽입해준다.(after())
      • target이 앞에 있다.
    • $('button:eq(1)').click(function(){})
      • 두 번째 버튼을 클릭하면, 아이디가 base인 div요소를 선택해 그 위치의 다음의 위치에 새로운 div 엘리먼트를 삽입해준다.(insertAfter())
      • target이 뒤에 있다.
    • $('button:eq(2)').click(function(){})
      • 세 번째 버튼을 클릭하면, 아이디가 base인 div요소를 선택해 그 위치의 이전 위치에 새로운 div 엘리먼트를 삽입해준다.(before())
      • target이 앞에 있다.
    • $('button:eq(3)').click(function(){})
      • 네 번째 버튼을 클릭하면, 아이디가 base인 div 요소를 선택해 그 위치의 이전 위치에 새로운 div 엘리먼트를 삽입해준다.(insertBefore())


교체(Replace)

  • replace 메소드는 선택한 요소를 원하는 값으로 바꾸는 메소드다.
    • replaceWith() : 타겟(‘선택 요소’)이 앞에 위치
    • replaceAll() : 타겟이 뒤에 위치
  • 두 메소드의 차이점은 코드를 적을 때 선택할 요소(타겟)를 적는 부분의 위치 차이가 있다는 것이다.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • 교체 메소드를 사용할 때 변화를 보기 위해 <div>와 그 안에 <p>를 만들었다.
    • 메소드 2개를 실행하기 위한 버튼 2개를 생성
  • JS
    • 첫 번째 버튼('button:first')을 클릭하면 p 태그 요소가 b태그를 포함한 p태그 요소로 변경된다.(replaceWith()을 사용해 target이 앞에 위치)
    • 두 번째 버튼('button:last')을 클릭하면 p 태그 요소가 b태그를 포함한 p태그 요소로 변경된다.(replaceAll()을 사용해 target이 뒤에 위치)


슬롯머신(Slotmachine)

  • 클래스를 줬다 안줬다가 하게 만드는 toggleClass()와
  • target의 자식 중 맨 뒤쪽에 요소를 추가해주는 appendTo() 메소드를 사용해서 슬롯머신을 구현할 수 있다.
  • appendTo() 함수사용법 : $('생성할 요소').appendTo('target')
  • 이 예제는 CSS가 비중이 큰 역할을 맡고 있으며 심도 있는 이해도가 필요하다.
  • js의 주기 실행 함수도 사용하니 잘 기억해두면 나중에 애니메이션 등을 구현할 때 유용하게 쓸 수 있을 것 같다.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • <h1> 태그로 제목 생성
    • 아이디가 menubox인 <div> 하나를 생성해 그 안에 <div> 2개와 버튼 1개를 생성
    • menubox div의 요소 안의 첫 번째 div 에는 sel이라는 클래스를 적용해준다.
    • 두 번째 div에는 menu라는 클래스를 적용해주고 그 안에 이미지 4개를 불러온다.
  • CSS style
    • img : 이미지 요소의 크기를 150px * 150px로 적용, float 속성을 적용해 왼쪽에 내용을 띄우고 공백을 메워준다.
    • #menubox : 아이디가 menubox인 div를 선택해 position을 relative로 적용해줬다. 이에 메뉴박스의 요소들은 순서대로 위치하게 될 것이다.
    • #menu : 박스의 내용이 흘러 넘칠 때 자동으로 스크롤을 생성
    • .sel : 크기 140px * 140px 으로 지정, 5px굵기의 빨간 일반 테두리를 생성해 이미지의 크기에 맞춰준다. 위치는 절대적으로 잡아놓고 페이지의 왼쪽에서 300px 떨어지게 위치시켰다.
    • button : 크기 150px * 150px으로 지정, 왼쪽 여백을 .sel의 위치에 맞춰 300px로 적용
  • JS
    • 즉시 실행 함수를 적용
    • setInterval() : 자바스크립트에서 정의되어 있는 함수로 주기적으로 인자를 실행하는 함수다.
    • setInterval(인자, 밀리초) 로 작동되며 본 코드에서는 100을 적어줬기 때문에 100밀리세컨즈에 해당하는 0.1초 마다 함수가 주기적으로 실행된다.
    • 함수 내용은 다음과 같다.
    • 아이디가 menu이며 이미지 요소들을 포함하고 있는 div 요소를 div라는 변수에 저장해준다.
    • 그 다음에 appendTo()함수가 적용되는데 이 함수는 생성할 요소를 선택한 요소의 자식 중 맨 뒤에 추가하는 함수다.
    • 클래스가 active인 가장 첫번째 요소. 스타트 버튼을 누른 후의 이미지 중 첫 이미지가 아이디가 menu인 div의 자식중 맨뒤의 위치로 이동이 된다.
    • 이미지 요소가 기존에 생성이 되있었기 때문에 생성이 아닌 이동으로 적용된다.
    • 다음은 두 번째 기능이다.
    • 버튼을 클릭할때마다 이미지 요소에 active라는 클래스가 적용되었다 안되게끔 적용해줬다.
    • 만약 버튼의 내용이 ‘start’인 상태에서 버튼을 누르면 ‘stop’으로 바뀌게 하고 그 반대의 경우 반대로 바뀌게 만들어줬다.


메뉴(Menu)

  • 이 예제에서는 부모 요소를 생성하고 제거하는 메소드, 자식요소 혹은 지정한 태그를 찾아서 전부 감싸는 메소드를 사용해볼 것이다.
    • wrap()
      • $('선택한 요소').wrap('생성할 요소')
      • wrap()은 선택한 요소에서 부모 위치에 원하는 요소를 생성해준다.
    • unwrap()
      • $('선택한 요소').unwrap('지울 요소')
      • unwrap()은 선택한 요소에서 지정한 부모 요소를 제거한다.
    • wrapInner()
      • $('선택 요소').wrapInner('<태그></태그>')
      • 선택한 요소의 자식 요소를 지정한 태그로 감싸준다.
    • wrapAll()
      • $('선택 요소').wrapAll('<태그></태그>')
      • 선택한 요소를 찾아서 전부 지정한 태그 하나로 감싸준다.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • 클래스가 menu인 하나의 큰 div 안에 5개의 div를 생성
    • 5개의 div는 모두 sub_menu라는 클래스를 갖고 있다. 그리고 모두 <a>태그 요소를 포함중이며 첫번째 div만 <a>태그 안에 <span>태그 요소가 있다.
    • wrapAll() 메소드를 적용할 <pre> 태그 요소 3개를 생성
  • CSS style
    • .box : 2px 굵기의 일반 빨간 테두리 적용
    • #menu : 가장 큰 <div>태그의 배경색을 하늘색으로 적용하고 내용을 오른쪽으로 정렬했다.
    • a : 텍스트 꾸미기를 없애고, 글씨 크기를 20px로 적용
    • #menu div : 가장 큰 <div>의 하위에 있는 5개의 <div>를 인라인 블록으로 표시하고 오른쪽 여백을 10px 적용
  • JS
    • 즉시 실행 함수 적용
    • $box라는 변수에 클래스가 box인 div태그 객체를 저장한다.
    • 클래스가 sub_menu인것 중 첫 번째를 찾아서 $box로 wrap을 해주면 클래스가 box인 <div> 부모 요소가 생성된다.
    • 클래스가 sub_menu인 요소 중 하나를 클릭하면
    • .sub_menu인 div요소 5개에 각각 함수를 적용하는데,
    • 그 함수 내용은 각 div요소의 부모요소의 클래스가 box이면 그 부모 요소를 제거한다는 것이다.
    • 또한 5개의 div중 클릭한 div는 box 클래스를 가진 <div> 부모 요소를 생성해준다.
    • 그래서 실제로 div를 누를 때 빨간 사각형의 테두리가 클릭한 곳을 따라다닌다.
    • wrapInner()의 내용은 a태그 요소를 찾아 자식요소를 span태그로 감아주는 것이다.
      • 개발자 도구를 사용해서 확인해보면 스포츠가 적혀있는 부분을 클릭해보면 a 안에 span안에 span이 존재한다.
      • 나머지는 a안에 span하나가 존재한다.
    • wrapAll()의 내용은 pre 태그 요소를 찾아 전부 b태그 하나로 감싼다는 내용이다.
      • 개발자 도구를 사용해서 확인해보면 각자 따로 있던 pre태그 3개가 b하나에 감싸져있다.


삭제(Delete)

  • 엘리먼트들을 삭제하는 메소드들도 있다.
    • remove() : 선택한 요소를 제거
    • detach() : 선택한 요소를 제거하는 것은 같지만 다른 변수에 저장해서 재사용할 수 있다.
    • empty() : 선택한 요소의 자식을 제거한다.

예제

See the Pen hello by goodjeon (@goodjeon) on CodePen.

  • HTML 바디태그 부분
    • <h1>태그로 제목 지정
    • <div>태그로 영역 만든 뒤 그 안에 각 메소드를 적용할 <p> 태그 요소 3개를 생성
  • CSS style
    • div : p태그를 감싸는 div 영역을 2px 굵기의 빨간 일반 테두리로 적용, 너비는 200px, 안쪽 여백을 가로 세로 10px씩 적용
    • p : 배경색을 노란색으로 적용
    • h1 : 제목 영역의 테두리를 1px 굵기의 파란 일반 테두리로 적용
  • JS
    • 즉시 실행함수 적용
    • $(p:eq(0)) 을 클릭하면
      • 자기 자신의 요소를 제거한다.
    • $(p:eq(1)) 을 클릭하면
      • 자기 자신을 잘라내어 서 ele라는 변수에 저장한 뒤
      • <h1> 태그 요소의 자식 부분의 마지막 위치에 잘라낸 요소를 추가
    • $(p:eq(2)) 을 클릭하면
      • 해당 요소의 부모 요소인 div태그 내의 요소들이 싹다 사라진다.


Ajax

  • 비동기 통신으로 jQuery는 아약스를 간편하게 만들어주는 라이브러리다.
  • 자바스크립트는 XMLHttpRequest라는 객체를 이용해 그 객체의 onreadystatechange와 같은 메서드라던가 readySate, status, responseXML 같은 속성을 이용해야해서 조금 복잡하다.
  • jQuery를 사용한 Ajax는 jQuery.ajax($.ajax)를 사용해서 조금 더 쉽게 구현할 수 있다.
  • $.ajax의 속성 값은 이렇다.
    • url: '경로' : 통신할 경로(주소)를 정해준다.
    • method: '방식' : 전송 방식을 선택해야한다. get, post 방식이 있으며 적지 않을 경우 디폴트 값인 get가 적용된다.
    • async: bool : 비동기 방식을 사용할지 동기 방식을 사용할지 고른다. true일 경우 비동기, false일 경우에 동기 방식을 채택한다. 디폴트 값은 비동기방식(true)
    • dataType: '전송받을 데이터 타입' : 전송 받을 데이터의 타입을 정해준다.
      • xml, json, html, script 등등 다양하게 있다.
      • 기존의 클라-서버 관계에서 클라가 요청한 내용을 응답할 때 모두 string 형태로 전달해준다.
      • 하지만 HTML에서는 DOCTYPE이 HTML이라서 문자열이 HTML에 맞게 해석해주는 것이다.
    • success: data : 성공했을 경우에는 data가 생기며 다양한 함수를 사용해 입맛에 맞게 사용하면 되겠다.
    • error: request,error : 실패했을 경우이며, request, error 값이 반환된다.
      • request.status : 요청 완료 후 상태를 나타낸다.
      • responseText : request.status와 맞는 상태 메시지를 나타낸다.
  • 해당 실습 예제는 codepen을 사용하지 못했다. 왜냐하면 xml 파일과 js파일을 사용해서 실습을 해야하는데 코드펜에서 그 기능을 사용하려면 프로버전으로 업그레이드 해야하기 때문이다.(가난이 죄다..)
  • 그래서 코드를 올려서 주석으로 설명하는 식으로 복습해보겠다.
  • 사용하는 파일
    • emplist.xml
      • 직원 목록을 나열해 놓은 xml 파일로, <ROW> 요소가 107개 존재한다.
      • <ROW> 안에는 직원번호, 성, 이메일, 전화번호, 고용일자 태그가 존재하며 각 태그는 텍스트 내용을 갖고 있다.
      • image
    • create-table.js
      • 예제 2에서 사용할 파일로 테이블을 만들어주는 makeTable() 함수가 정의되어 있다.

예제1

HTML

<body>
    
    <h1>데이터 가져오기</h1> <!-- 제목을 적어준다-->

    <fieldset>
        <legend>사원정보 조회</legend> <!-- 필드셋 태그를 사용해 영역을 지정-->
        <!-- 텍스트 상자 여기다가 사원번호를 적어서 서버에 데이터를 요청할 것이다.-->
        <input type='text' name='empid'> 
        <!-- 사원번호를 조회하기 위한 버튼으로 서버에 요청하는 트리거 -->
        <input type='button' id='emp_search' value='조회'>
    </fieldset>

    <!-- 사원번호를 적어서 데이터를 요청했을 때 해당 태그에 맞는 데이터를 응답 받을 곳-->
    <table>
        <tr>
            <th>사원번호</th>
            <td><input type='text' name='empnum'></td>
        </tr>
        <tr>
            <th>이  름</th>
            <td><input type='text' name='lastname'></td>
        </tr>
        <tr>
            <th>이 메 일</th>
            <td><input type='text' name='email'></td>
        </tr>
        <tr>
            <th>전화번호</th>
            <td><input type='text' name='phone'></td>
        </tr>
        <tr>
            <th>입 사 일</th>
            <td><input type='text' name='hire'></td>
        </tr>
    </table>
</body>

CSS

<style>
    *{margin: 0px; padding: 0px;} /* -- 모든 요소에 바깥, 안쪽 여백을 0px로 지정 */
    table{width: 400px;} /* 응답받을 데이터를 표현할 테이블의 너비를 400px로 지정 */
    table tr:nth-child(odd){background-color: orange;} /* 홀수 tr에만 오렌지색 배경 지정 */
    fieldset{width: 400px;} /* 필드셋의 영역의 너비를 400px로 지정 */
    body{width: 1000px; margin: 50px auto;} /* HTML 문서 너비를 1000px로 지정하고 위아래 바깥 여백을 50px로 지정하고 바디태그를 가운데정렬 */
</style>

JS

<head>
    // jQuery 라이브러리 호출(경로는 라이브러리 링크)
    <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
    <script>
        // 즉시 실행 함수
        $(function(){
            $("#emp_search").click(function(){ // 조회 버튼을 눌를 때
                // empid라는 변수에 사원정보 조회 텍스트 상자에 적은 사원 번호 값을 저장
                var empid = $('input[name=empid]').val(); 
                // 유효성 검사
                // 사원번호가 NaN이 아니거나 100이상 206이하 일 때 
                if (!isNaN(empid) && (empid >= 100) && (empid <= 206)){
                    // 비동기 통신을 시작한다.
                    $.ajax({
                        url:"emplist.xml", // 통신할 경로는 emplist.xml(사원정보파일)
                        method:"get",      // 전송 방식은 get방식 
                        async:true,        // 비동기 통신
                        dataType:"xml",    // 전송 받을 데이터의 타입은 xml 타입
                        //data:{"key":value},  // 전송할 데이터
                        success:function(data){ // 요청에 성공 했을 때
                            // empInfo라는 변수에 응답받은 데이터 중 텍스트 상자에 입력해준 사원번호와 같은 사원번호 태그의 부모 요소를 저장(노드리스트)
                            var empInfo = $(data).find("EMPLOYEE_ID:contains("+empid+")").parent();

                            // 만약 노드리스트가 <ROW>라면 <ROW>의 자식 요소들이 갖고 있는 각각의 텍스트 값을 순서대로 input들의 value로 저장해준다.
                            if((empInfo).is("ROW")){
                                $("table input").each(function(i){
                                    $(this).val($(empInfo).children().eq(i).text())
                                })
                                
                              // 만약 <ROW> 태그가 아니라면 알림이 알림이 뜰 것이다.  
                            } else {
                                alert("검색 대상이 존재하지 않습니다.")
                            }
                            

                        },
                        // 실패한다면 요청 상태 번호, 메시지, 에러 이유가 알림창에 출력
                        error:function(request,error){
                            alert("code:"+request.status+'\n'+
                            'message:'+responseText+'\n'+
                            'error:'+error)
                        }
                    })
                } else {
                    alert("사원번호를 다시 입력해주세요.") // 유효성 검사에 통과하지 못하면(100~206번을 제외한 값을 적거나, 값을 안적거나, 숫자가 아니라면)
                }
            })
        })

    </script>
</head>

결과1 : 유효성 검사에 통과 못했을 때

image

결과2: 유효성 검사에 통과 했을 때

image

예제2

HTML

<body>
    
	<h1>데이터 가져오기</h1> <!-- 제목 지정 -->

	<fieldset> <!-- 필드셋 영역 구성 -->
		<legend>사원 전체 조회</legend> <!-- 필드셋 제목 -->
		<input type="button" value="조회" id="emp_search"/> <!-- 사원 정보를 조회하기 위한 버튼 생성-->
	</fieldset>

</body>

CSS

<style type="text/css">
    *{margin:0px;padding:0px;} /* 전체 요소의 안팎의 여백을 0px로 지정 */
    table{width: 900px;} /* 조회 데이터가 생길 테이블의 너비를 900px로 지정 */
    table tr:nth-child(1){background: orange;} /* 테이블의 첫 행에만 오렌지색 배경 적용 */
    fieldset{width: 400px;} /* 필드셋 영역의 너비를 400px로 지정 */
    body {width: 1000px; margin: 50px auto;} /* 문서의 너비를 1000px로 지정하고 바깥 상하 여백을 50px로 적용하고 가운데정렬 */
</style>

JS

<head>
    // jQuery 라이브러리 호출
    <script type="text/javascript" src="resources/js/jquery-3.6.0.min.js"></script>
	// makeTable() 함수 사용을 위한 라이브러리 호출
    <script type="text/javascript" src="resources/js/create-table.js"></script>
    
    <script type="text/javascript">
    	// 즉시 실행함수 적용
        $(function(){
            // 조회 버튼을 누르면
        	$("#emp_search").click(function(){
                
                // 비동기 통신 시작
                $.ajax({
                    url:"emplist.xml", // 경로는 emplist.xml 파일
                    dataType:"xml", // 전송 받을 테이터 타입은 xml
                    // 나머지 속성을 안적어준 이유는 디폴트 값이 적용되기 때문이다.
                    // get방식, 비동기통신
                    // 성공했을 때 전송 받은 데이터 중 <ROW> 태그를 찾아서 empRowList에 저장
                    success:function(data){
                        var empRowList=$(data).find("ROW");
                        // 바디 태그의 마지막 위치에 empRowList로 만든 테이블을 추가
                        $("body").append(makeTable(empRowList));
                    },
                    error:function(){
                        alert("통신 실패");	// 통신 실패시 알림창이 뜸
                    }
                });
                
            });
        });
    
    </script>
    
</head>

결과 : 조회 버튼을 누르면

image

2022

[web]jQuery 복습 3

2 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 2

13 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]jQuery 복습 1

14 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리4

5 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리3

10 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리2

7 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]JavaScript 정리1

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]CSS 기초 정리

11 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[web]HTML 기초 정리

8 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

[Pandas]pandas 연습

3 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑

2021

[Python기초]module

1 분 소요

[Noitce] 고쳐야하거나 틀린 것이 있으면 말씀해주세요!

맨 위로 이동 ↑