'jQuery'에 해당되는 글 40건

JQuery replaceWith, replaceAll, 요소 대체하기

2020/JQuery 2020. 2. 28. 13:02
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        //p태그를 h2태그로 전체 교체
        $("#replaceAll").click(function() {
          $("<h2>replaceAll</h2>").replaceAll("p");
        });
        //p tag의 first를 하나씩 replaceWith로 교체
        $("#replaceWith").click(function() {
          $("p:first").replaceWith("replaceWith");
        });
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph</p>
    <p>This is another paragraph</p>

    <button id="replaceAll">replaceAll</button>
    <button id="replaceWith">replaceWith</button>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery unbind(이벤트해제)  (0) 2020.02.28
JQuery detach, empty, remove, 요소제거  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery 속성 값 입력

2020/JQuery 2020. 2. 28. 13:00
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(function() {
        $(".text1").val("성함이 우째됩니꺼?");
      });
    </script>
    <title>속성입력</title>
  </head>
  <body>
    <input type="text" class="text1" value="What's your name?" />
    <input type="text" class="text2" value="How old are you?" />
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery detach, empty, remove, 요소제거  (0) 2020.02.28
JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
JQuery 속성추가  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery 객체추가

2020/JQuery 2020. 2. 28. 12:59
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      //(a).appendTo(b) b에 a를 추가
      function appendTest() {
        alert(1);
        $("#test1").append("<p>결과</p>");
      }

      //(a).append(b) a에 b를 추가
      function appendToTest() {
        alert(2);
        $("<p>결과2</p>").appendTo("#test2");
      }

      //(a).prepend(b) b를 a의 앞에 추가
      function prependTest() {
        alert(3);
        $("#test3").prepend("<p>결과3</p>");
      }
    </script>
    <title>Document</title>
  </head>
  <body>
    <button onclick="appendTest()">append</button>
    <div id="test1">test</div>

    <button onclick="appendToTest()">appendTo</button>
    <div id="test2">test2</div>

    <button onclick="prependTest()">prepend</button>
    <div id="test3">test3</div>
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 속성추가  (0) 2020.02.28
JQuery 객체이동  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery 속성추가

2020/JQuery 2020. 2. 28. 12:58
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        var object = { name: "홍길동" };

        //객체에 속성추가
        $.extend(object, {
          region: "서울특별시 도봉구",
          part: " bass guitar"
        });
        var output = "";
        //$.each 메소드로 출력해봄
        $.each(object, function(key, data) {
          output += key + ":" + data + "\n";
        });
        alert(output);
      });
    </script>
    <title>Document</title>
  </head>
  <body></body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
JQuery 객체이동  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

JQuery 객체이동

2020/JQuery 2020. 2. 28. 12:56
반응형
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
      $(document).ready(function() {
        $("img").css("height", 250);
        // 2초에 한번씩 사진 바뀜
        setInterval(function() {
          // 1번 이미지를 body에 붙이면서 맨 뒤로 보냄
          $("img")
            .first()
            .appendTo("body");
        }, 2000);
      });
    </script>
    <title>Document</title>
  </head>
  <body>
    <img src="/images/1.png" />
    <img src="/images/2.png" />
    <img src="/images/3.png" />
    <img src="/images/4.png" />
    <img src="/images/5.png" />
  </body>
</html>
반응형
저작자표시

'2020 > JQuery' 카테고리의 다른 글

JQuery replaceWith, replaceAll, 요소 대체하기  (0) 2020.02.28
JQuery 속성 값 입력  (0) 2020.02.28
JQuery selectbox 확인  (0) 2020.02.28
JQuery 객체추가  (0) 2020.02.28
JQuery 속성추가  (0) 2020.02.28
블로그 이미지

꽃꽂이하는개발자

,

jQuery Ajax

2020/JSP SERVLET 2019. 12. 27. 15:50
반응형

  클라이언트 측에서의 작업과는 상관 없이 비동기적으로 서버와 작업을 수행할 때 Ajax기능을 사용합니다. Ajax란 Asynchronous Javascript(비동기 자바스크립트) + XML의 의미로 자바스크립트를 사용한 비동기 통신, 즉 클라이언트와 서버 간의 xml이나 JSON 데이터를 주고받는 기술을 의미합니다.

  Ajax는 페이지 이동 없이 데이터 처리가 가능하며, 서버의 처리를 기다리지 않고 비동기 요청이 가능하다는 특징을 가지고 있습니다.

  개인 정보를 입력하고 서버에 요청하면 서버에서 결과를 처리한 후 HTML 태그를 클라이언트의 브라우저에 전송하여 다른 페이지를 보여줍니다. 즉, 페이지 이동이 발생합니다.

  반면에 Ajax로 페이지를 처리할 경우를 보면 요청 페이지의 결과를 서버에서 처리한 후 다시 XML이나 JSON으로 원래 요청 페이지로 전송합니다. 즉, 페이지 이동이 발생하지 않습니다.

 

  제이쿼리에서 Ajax를 사용하려면 $ 기호 다음에 ajax라고 명명한 후 속성에 대한 값을 설정해야 합니다.

속성 설명
type 통신 타입을 설정합니다(post 또는 get방식)
url 요청할 url을 설정합니다.
async 비동기식으로 처리할지의 여부를 설정합니다(false인 경우 동기식으로 처리합니다).
data 서버에 요청할 때 보낼 매개변수를 설정합니다.
dataType 응답받을 데이터 타입을 설정합니다(XML, TEXT HTML, JSON등).
success 요청 및 응답에 성공했을 때 처리 구문을 설정합니다.
error 요청 및 응답에 실패했을 때 처리 구문을 설정합니다.
complete 모든 작업을 마친 후 처리 구문을 설정합니다.

 

다음 글부터 제이쿼리 Ajax를 사용해 서블릿과 비동기식 방식으로 데이터를 송수신 해보겠습니다.

반응형
저작자표시

'2020 > JSP SERVLET' 카테고리의 다른 글

ajax XML 데이터 연동  (0) 2019.12.27
jQuery Ajax 코딩  (0) 2019.12.27
jQuery 선택자  (0) 2019.12.27
Jquery 개념, 기능  (0) 2019.12.27
HTML5 <section>  (0) 2019.12.27
블로그 이미지

꽃꽂이하는개발자

,

jQuery 선택자

2020/JSP SERVLET 2019. 12. 27. 14:32
반응형

  이전 글에서 알아본 제이쿼리 선택자를 이용해 HTML 태그에 접근하여 여러가지 작업을 수행해 보겠습니다. 먼저 제이쿼리의 ID선택자 기능을 이용해 HTML 태그의 ID에 접근하는 방법입니다.

  사용하실 이미지 파일과 test02폴더를 만들고 연습할 jQuery.html 파일을 만들겠습니다.

  jQuery1.html을 작성하도록 하겠습니다. 페이지 로드 시 $("#unique2")는 # 다음에 오는 id가 unique2인 태그를 웹 페이지에서 검색합니다. id에 해당하는 태그(객체)를 얻은 후 제이쿼리의 html() 메서드를 호출해 태그의 값을 얻습니다.

 

  다음으로는 제이쿼리의 id 선택자를 이용해 해당 id를 가지는 <p> 엘리먼트에 접근하여 동적으로 텍스트를 추가해보겠습니다. jQuery2.html을 작성합니다.

제이쿼리로 id가 article인 태그를 찾아서 html() 메서드의 인자값을 태그에 설정합니다.

추가하기를 누르면 안녕하세요라는 메시지가 나타납니다.

 

  이번에는 class 선택자로 <div> 태그에 접근하여 기능을 수행해 보겠습니다. 버튼을 클릭하면 함수에서 제이쿼리의 클래스 선택자를 사용해 class1 클래스 이름을 갖는 <div> 태그에 접근하여 이미지를 나타냅니다.

 

다음은 제이쿼리에서 <div> 엘리먼트에 직접 접근하여 이미지를 추가해 보겠습니다. jQuery4.html을 다음과 같이 작성합니다.

사용자가 텍스트 박스에 입력한 내용을 제이쿼리 id 선택자를 이용해 가져온 후 다시 텍스트 박스에 출력하는 내용입니다. 제이쿼리의 val()메서드는 해당 엘리먼트의 값을 가져오거나 엘리먼트로 값을 출력하는 기능을 합니다.

반응형
저작자표시

'2020 > JSP SERVLET' 카테고리의 다른 글

jQuery Ajax 코딩  (0) 2019.12.27
jQuery Ajax  (0) 2019.12.27
Jquery 개념, 기능  (0) 2019.12.27
HTML5 <section>  (0) 2019.12.27
HTML5 시맨틱 웹  (0) 2019.12.27
블로그 이미지

꽃꽂이하는개발자

,

Jquery 개념, 기능

2020/JSP SERVLET 2019. 12. 27. 11:45
반응형

  Jquery란 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리입니다. 제이쿼리는 여러가지 효과나 이벤트를 간단한 함수 호출만으로 빠르게 개발할 수 있어 유용합니다.

 

Jquery 특징

  • CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운 형태로 표현할 수 있습니다.
  • 메서드 체인 방식으로 수행하므로 여러 개의 동작(기능)이 한 줄로 나열되어 코드가 불필요하게 반복되는 것을 피할 수 있습니다.
  • 풍부한 플러그인을 제공하므로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있습니다.
  • 크로스 브라우징을 제공하므로 브라우저 종류에 상관없이 동일하게 기능을 수행합니다.

  제이쿼리를 사용하는 방법으로는 2가지의 방법이 있습니다. 첫번째는 www.jquery.com에서 서 라이브러리를 다운로드해서 사용하는 방법이고, 두 번째는 네트워크로 CDN 호스트를 설정해서 사용하는 방법입니다. 여기 티스토리에서는 상대적으로 간편하게 설정할 수 있는 두 번째 방법을 사용해 글을 작성하도록 하겠습니다.

 

  • <script src="http://code.jquery.com/jquery-2.2.1.min.js"></script> 지정한 버전의 제이쿼리를 사용합니다.
  • <script src="http://code.jquery.com/jquery-latest.min.js"></script> 가장 최신버전의 제이쿼리를 사용합니다.

  제이쿼리는 HTML 객체(DOM)를 탐색하는 방법으로 CSS 선택자를 이용합니다. 제이쿼리의 선택자 종류와 이를 표현하는 방법을 정리해보겠습니다.

 

선택자 종류 선택자 표현 방법 설명
All selector $("*") 모든 DOM을 선택합니다.
ID selector ${"#") 해당되는 id를 가지는 DOM을 선택
Element selector $("elementName") 해당되는 이름을 가지는 DOM 선택
class selector $(".className") CSS 중 해당되는 클래스 이름을 가지는 DOM을 선택
Multiple selector $("selector1, selector2, selector3, ..., selectorN") 해당되는 선택자를 가지는 모든 DOM을 선택합니다.

다음 글에서부터 Jquery를 실습하도록 하겠습니다.

반응형
저작자표시

'2020 > JSP SERVLET' 카테고리의 다른 글

jQuery Ajax  (0) 2019.12.27
jQuery 선택자  (0) 2019.12.27
HTML5 <section>  (0) 2019.12.27
HTML5 시맨틱 웹  (0) 2019.12.27
HTML5  (0) 2019.12.27
블로그 이미지

꽃꽂이하는개발자

,
반응형

공지사항

글 보관함

달력

«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

티스토리툴바