jquery 이용한 Ajax 데이터로드하기 간단한 스크립트파일편

Ajax 2010.02.07 10:51

Ajax 데이터로드하기 스크립트편

자바스크립트를 사용하면서 과다량의 사용으로 한번에 로드가 요구되어 과부하가 걸리는수가있다.이런경우 html생성부분을 로드하는 파일에 넣어서 처리할 수 있다.JSON의 예를보면서 확인해보자

앞서 포스팅한 부분(아래참조)을 되돌려보면 데이타를 로드하는 부분 그리고 html코드를 만들어주는 부분이 같이 포함된것을 볼수있다.이 스크립트만 사용한다면 문제없지만 다른 스크립트 소스와 많이 사용하게된다면 복잡하고 문제발생우려가 크다.

$(document).ready(function() {
  $('#part02').click(function() {
    $.getJSON('./ajax_part/aboutJSON.json' ,function(data) {
    //여기까지 데이타로드하는코드
   $('#content').empty();
      $.each(data, function(entryIndex, entry) {
        var html = '

' + entry['listN'] + '

'; html += '

' + entry['sunmmary'] + '

'; html += '
' + entry['definition'] +'
' ; $('#content').append(html); //HTML작성하는 코드 }); }); return false; }); });

자 그럼 이번엔 HTML작성코드 부분을을 데이파일에 삽입시켜 간단하게 만들어보자. 로딩소스는 아래 html을 뺀 부분이니 다음과 같다.

$(document).ready(function() {
  $('#part04').click(function() {
    $.getScript('./ajax_part/generaljvs.js');
    return false;
  });
});

JSON파일을 설명할떄 봤던 데이터 파일을 다시보자

[
  { 
    "listN" :  "JSON ",
    "sunmmary" : "JavaScript Object Notation",
	"definition" : "어쩌고 저쩌고"
  }
]

이쪽으로 이제 html작성소스를 옯길것이다.

var entries = [
  { 
    "listN" :  "JSON ",
    "sunmmary" : "JavaScript Object Notation",
	"definition" : [
 	   "definition" : "어쩌고 저쩌고" 
	]  }]
//아래부터 만들어질 html소스
var html = '';
$.each(entries, function() {
         html += '

' + this['listN'] + '

'; //당연히 스크립트내에 존재하니 this를 사용했다. html += '

' + this['sunmmary'] + '

'; html += '
' + this['definition'] +'
' ; }); $('#content').html(html);

이렇게함으로서 로딩 소스만 단간하게 구축할수 있었고 데이타에 파일에 번거로운 html작성소스를 따로 명확히 넣어주어 관리도 쉬워졌다. 결과를 보면 같은 것을 볼수있을 것이다.

http://sianasiatiger.cafe24.com/study/A_ajax_03.html


저작자 표시
신고

설정

트랙백

댓글

jquery 이용한 Ajax 데이터로드하기 xml편

Ajax 2010.02.06 14:01

Ajax 데이터로드하기 xml편

xml은 가장 널리알려지고 호환성좋은 데이터 형식이다.현재 웹상에서 보편적으로 통용되기에 부담없이 사용가능하다.이번엔 xml파일을 로드해보자

xml

 
  
    
        어쩌고 저쩌고~~
    
  
  

위와같은 파일을 로드해볼것이다. term이라지정된Xml을 h2 엘리멘트로 part의extensible markup language를 h3엘리먼트로 그리고 definition의 내용은 div엘리먼트로 로드해보자 이번엔먼저 만들어질 html 소스부터 생각해보자.앞서 설명한대로라면 다음과같이 나와야 할것이다.

Xml

extensible markup language

어쩌고 저쩌고~~

두번 설명한 기본적인페이지 소스를다시보자 이번엔 part03로 아이디주고 list에 xml삽입이라고 텍스트를 입렸해줬다.

jquery를 이용한 ajax 데이터로드_01

로드된 데이터가 들어올자리

불러올 스크립트소스는 json파일을 부를때처럼 get을 사용한다

 $(document).ready(function() {
 $('#part03').click(function() {
     $.get('./ajax_part/aboutXML.xml' ,function(data)  {
   });													  
     return false;
   });
 });

약간 스크립트소스짜는방법이 차이나는데 JSON에서 대괄호entry[' ']로 데이타를 불러왔다면 여기선 $entry.attr()로 불러오게 되어있다.

 $('#content').empty();
     $(data).find('entry').each(function() {
     //데이타에서 entry를 모두검색
        var $entry = $(this); 
        var html = '

' + $entry.attr('term') + '

'; //term의 속성값을 h2엘리먼트로 html += '

' + $entry.attr('part') + '

'; //part의 속성값을 h3엘리먼트로 html += '
' + $entry.find('definition').text() +'
'; //역시definition의 속성값을 div엘리먼트로 $('#content').append(html);

완성된 최종 소스는 아래

   $(document).ready(function() {
   $('#part03').click(function() {
     $.get('./ajax_part/aboutXML.xml' ,function(data) {
    $('#content').empty();
     $(data).find('entry').each(function() {
        var $entry = $(this);
        var html = '

' + $entry.attr('term') + '

'; html += '

' + $entry.attr('part') + '

'; html += '
' + $entry.find('definition').text() +'
'; $('#content').append(html); }); }); return false; }); });

요약

  • 불려진 데이타 xml역시 부른페이지의 css의 영향을 받는다.
  • xml데이터 형식은 널리 쓰이고 통용화되어 부담없이사용가능하다.
  • xml데이터 형식은 다른 데이타에 비해 조금 느리다.

마지막을 완성된 예제를 직접보자면 여기를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_03.html

저작자 표시
신고

설정

트랙백

댓글

jquery 이용한 Ajax 데이터로드하기 JSON편

Ajax 2010.02.05 23:28

Ajax 데이터로드하기 JSON편

가장간단한 html을 로드해봤다면 이번엔 JSON파일을 로드해보겠다.

JSON이란?

JavaScript Object Notation으로 xml데이터를 대신하기위해 사용되기도 한다.중괄호 대괄호 등을 사용하여 표현한다. 예제를 보자

[
  { 
    "listN" :  "JSON ", //변수지정 기리고 값설정
    "sunmmary" : "JavaScript Object Notation",
	"definition" : [
 	     "JSON (JavaScript Object Notation) is a lightweight data-interchange format.",
	     "It is easy for humans to read and write.",
		 "It is easy for machines to parse and generate." 
	]//긴문장에서는 대괄호로 묽는다.
  }
]

대괄호는 크게 감사주고 중괄호로 다시 감싸고 안에 데이타가 삽입되어있다. JSON은 "변수지정" : "값" 이방식으로 간단하지만 중괄호 대괄호를 확실하게 써줘야 한다. 하나라도 오차가있으면 읽어들이지못하게 된다.

간단히요약

  • 시작은 [{ 끝맺음은}]
  • "변수지정" : "값"방식으로 입력
  • 긴 문장을 넣을때는 대괄호를 쓸수있다.
  • JSON에 대해 더자히 알고싶다면 이사이트에 가보자http://json.org

    활용

    아래와 같은 레이아웃를 페이지로 삼고 오른쪽 검정색부분에 JSON 데이타를 부를것이다.

    기본적인페이지 소스

    jquery를 이용한 ajax 데이터로드_01

    로드된 데이터가 들어올자리

    그리고 약간꾸며줄 css소스.

    body{ width:960px; text-align:center;}
    #wrapper{ text-align:left;}
    #siadebar{ float:left; border:1px #000 solid; width:200px;}
    #content{ border:1px #000 solid; float:right; width:700px;}
    

    이번엔 불러올 스크립트소스를 만들어보자.html을 부를때 load를 사용했다면 json파일을 부를때는 getJSON을 사용한다

     $(document).ready(function() {
       $('#part02').click(function() {
         $.getJSON('./ajax_part/aboutJSON.json' ,function(data) {
       });													  
         return false;
       });
     });
    

    HTML과달리 이건 어디까지나 데이타이다. 따라서 스크립트에서 HTML소스를 만들어줘야한다.다음과 같은 것일 생각하고 만들어 보자

    JSON

    JavaScript Object Notation

    어쩌고 저쩌고`~~

    사실 위와같은 완성된 모습을 생각하고 데이타 소스를 짜는게 젤 편하다.자그럼 여기서 삽입될 데이터는 JSON에서 짜주었고 HTML소스를 생성해보자

        $('#content').empty();
         //먼저 전에 있었던 삽입될 부분#content의 내용을 비운다
           $.each(data, function(entryIndex, entry) {
             var html = '

    ' + entry['listN'] + '

    '; //h2엘리먼트에 listN의 데이터를 넣는다 html += '

    ' + entry['sunmmary'] + '

    '; //h3엘리먼트에 sunmmary데이터를 넣는다 html += '
    ' + entry['definition'] +'
    ' ; $('#content').append(html); //append로 삽입 });

    위에서 each()메소드가 사용된것은 여러데이타가 같은 형식으로 있을경우이다. 위에서는 단순히 하나의 데이터를 내가 올렸지만 전화번호부를 생각해보자 무수히 마흔것들이 일관적 양식으로 있을것이다. 따라서 이때 이일이 검색해주면서 패턴을 생성해주는 것이다.

    완성된 최종 소스는 아래

     $(document).ready(function() {
       $('#part02').click(function() {
         $.getJSON('./ajax_part/aboutJSON.json' ,function(data) {
        $('#content').empty();
           $.each(data, function(entryIndex, entry) {
             var html = '

    ' + entry['listN'] + '

    '; html += '

    ' + entry['sunmmary'] + '

    '; html += '
    ' + entry['definition'] +'
    ' ; $('#content').append(html); }); }); return false; }); });

    요약

    • 불려진 데이타 JSON역시 부른페이지의 css의 영향을 받는다.
    • 로드는 빠르고 간결하다,
    • JSON소스는 상당히 까다롭다. 만들기는 쉽지만 하나의 오류라도 있으면 실행되지않는다.

    마지막을 완성된 예제를 직접보자면 여기를 클릭

    http://sianasiatiger.cafe24.com/study/A_ajax_02.html

    저작자 표시
    신고

설정

트랙백

댓글

jquery 이용한 Ajax 데이터로드하기 html편

Ajax 2010.01.30 19:59

Ajax 데이터로드하기 html편

ajax는 여러기능이 있지만 그중 기본적인것이 비동기방식으로 데이터를 전송하는것이다.가장간단하게 jquery를 이용하여 html파일을 불러오는 것을 살펴보자

아래와 같은 레이아웃를 페이지로 삼고 오른쪽 검정색부분에 html 데이타를 부를것이다.

기본적인페이지 소스

jquery를 이용한 ajax 데이터로드_01

로드된 데이터가 들어올자리

그리고 약간꾸며줄 css소스. 간단하게 양쪽으로 float해주고 명확히 하기위해 border를 주었다.마진 패딩 초기화등은 귀찮아서 패스.

body{ width:960px; text-align:center;}
#wrapper{ text-align:left;}
#siadebar{ float:left; border:1px #000 solid; width:200px;}
#content{ border:1px #000 solid; float:right; width:700px;}

마지막으로 불러올파일을 간단히 적어보자 여기선 html에대한 설명을 한 html파일이다.단 데이터 형식으로 취급하기에 소스에<html><head><body>가 없이 body안에 것만 있으면 된다

인터넷 서비스의 하나인~ 어쩌고저쩌고~ ~이다

이번엔 불러올 스크립트소스를 만들어보자.간단하다 load를 사용한다. 앞서 포스팅을 봐왔다면 별탈없이이해할것이다

 $(document).ready(function() {
   $('#part01').click(function() {//#part01이란 아이디 클릭시
     $('#content').load('./ajax_part/abouthtml.html');//#content에 데이타를 부른다.
     return false;
   });
 });

위와같이 했다면 왼쪽에 html을 클릭한다면 오른쪽에 데이타가 불러질것이다.

중요시할점은 다음과 같다

  • 앞서 설명했지만 비동기 방식이다.
  • 불려진 데이타 html은 부른페이지의 css의 영향을 받는다.

마지막을 완성된 예제를 직접보자면 여기를 클릭

http://sianasiatiger.cafe24.com/study/A_ajax_01.html


저작자 표시
신고

설정

트랙백

댓글

HttpRequest 객체

Ajax 2009.12.10 21:39

자바스크립트객체 HttpRequest

브라우저의 다른 작업을 방해하지않으면서 서버에 데이터를 요청할수 있게하는 HttpRequest..이번엔 그 객체를 직접 만들어보자

인스턴스 만들기

대부분의 브라우저에서는 다음과 같이 간단히 시작할 수 있다

xhr = new XMLHttpRequest();

여전히 걸림돌은 IE이다.익스플로어의 경우는 액티브X인스턴스를 만들어야된다.

 xhr = new ActiveXObject("Microsoft.XMLHTTP");

자 그럼 일반적으로 내장객체지원하는 브라우저 그리고 그렇지않은 익스플로어를 구분하고 그에따라 위에서 생성한 적절한것을 사용하도록 해야할 것이다. 그럼 이때 필요한것은? 당연히 조건문..

//XMLHttpRequest를 지원할 경우
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } 
//아니면 액티브X  
else if (window.ActiveXObject) {
   try {
   xhr = new ActiveXObject("Msxml2.XMLHTTP");  
 } 

마지막으로 볼것은 이제까지 설명한것에 대해 브라우저가 액티브X를 지원한다고 해서 ajax를 위한 특정한 액티브X 객체가 있다는 보장은 없다, 따라서 검색해보고 그에따른 적절한 액티브X를 사용할 수 있도록 하는것이다.이때 try..catch를 사용한다.

try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        xhr = false;
      }
    }
  }

최종 완성된 인스턴스를 점검해보자

function getHTTPObject() {
  var xhr = false;
  //코드를 작석항때마다 반복코드작업을 피하기위해
  //변수로 선언하고 판별가능하도록 했다.
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
    //내장객체 인스턴스
  } else if (window.ActiveXObject) {
    //아니면 액티브X 객체의 인스턴스
    try {
      xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
      try {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
      } catch(e) {
        xhr = false;
      }
    }
  }
  return xhr;
}

서버와 통신

요청

XMLHttpRequest 인스턴스를 만든후 서버와 통신하기해 먼저 요청해보자

function grabFile(file) {
  var request = getHTTPObject();
  if (request) {
    request.onreadystatechange = function() {
    //onreadystatechange 새로고쳐 요청
      displayResponse(request);
    };
    //비동기요청 open메소드 
    request.open("GET", file, true);
    //보내기
    request.send(null);
  }
}
  • ajax에거 헤더 정보를 보내는 기능onreadystatechange
  • open메소드 : 단순한 파일을 받을때는 GET, 데이터를 받을때는 POST,두번째인자 는 url,마지막은 비동기로할것인지 결정
  • 데이타가 아닌 GET으로 파일요청시 아무것보내지않는다.

응답 readyState

readyState는 ajax에 요청 상태를 나타낸다.0~4 다음과 같은갑을 가진다.
0:초기화되지않음
1:open메소드 호출
2:open메소드 호출, send메소드호출, 송신완료 요청시작
3:수신중
4:수신완료

실제 사용하기위해서 위의 상태에서 우리는 값4 즉 수신완료가정하에 작업되어야 한다.다음예제를 보자

function displayResponse(request) {
if (request.readyState == 4) {
//수신완료 될경우
if (request.status == 200 || request.status == 304) {
 어쩌고 저쩌고 수행할 작업
}}}

위에서 request.status는 무엇인가?이것은 서버상태코드를 말한다.흔히 우리가 사이접속에러시 404에러 Not Found를 한번쯤은 보았을꺼다, 또403 forbidden등 이런 상태를 보았을것이다.이번호가 지정해놓은 상태를 말해주는 코드이다.위에서 200,304의 의미는 성공적응답을 말하는 것이다.

마지막으로 수행할작업을 넣어주면된다

function displayResponse(request) {
if (request.readyState == 4) {
//수신완료 될경우
if (request.status == 200 || request.status == 304) {
//성공적 응답
 alert(request.responseText);//작업
}}}

예제보기

앞에서 사용한것을 적용해보자 송수신할 것은 텍스트 문서 이고 예제를보자


여기를 클릭

결과는 여기서확인 http://sianasiatiger.cafe24.com/study/A_ajaxbasic.html

저작자 표시
신고

설정

트랙백

댓글

Ajax와 HttpRequest

Ajax 2009.12.09 21:52

Ajax와 HttpReqyest, 자바스크립트객체

먼저 저번에 둘러봤던 ajax에 대해 다시한번 돌아보자

일반적인 웹어플리케이션 동작
  1. 페이지에서 이벤트발생
  2. 서버에 요청
  3. 일반적으로 HTML로 결과를 응답받는다
  4. 페이전체가 리로드(바뀐다)된다
Ajax 웹어플리케이션 동작
  1. 페이지에서 이벤트발생
  2. 서버에 요청
  3. XML,텍스트 등으로 결과를 응답받는다
  4. 필요한 페이지 일부가 리로드(바뀐다)된다

단 다음을 반드시 명시하자

  • 기본적으로 html+css가 페이지를 구성한다
  • 브라우저가 요청과 응답하는것이다.
  • 자바스크립트 객체의 역할은 요청과 응답이 아니라 요청을 동기화시키고 들어온 응답을 처리한다.

XMLHttpRequest

앞에서 본 자바스크립트 개체의 역할은 클라이언트와 서버사이통신을 담당한다고 할수 있겠다.이런 객체가 처음 만들어진것은 XMLHttp였고 우리가 흔히 알고 있는 액티브X(activeX)형태로만 사용할 수 있었다.하지만 잘 알다 시피 액티브X는 많은 문제를 야기시켰고 특히국내는 빨리 만들어야 하는시점에서 남용되었다.

한편 다른 브라우저들은 XMLHttprequyest 객체를 모질라측에서 개발하게되고 내장하는방법으로 사용하게되었고 이후 대부부의 내장객체로 사용되게된다.(IE6를 제외하고 최근 브라우저 대부분은 내장객체로 지원한다.파록,사파리,오페라...등)

병맛 IE6

문제는 css가 익스플로어6에서 적용되지않거나 버그등이있듯것처럼, 아직까지 사용되는IE6 는 액티브X를 사용한다.물론 앞으로 설명할 ajax에 간단한 예제 대해서는 방법이있다. 하지만 이것때문에 아직도 많은 전문 개발자들이 쓸데없는 문제를겪고 있다.

두번째 ajax포스팅을 마치면서 하루빨리 IE6가 사라지길 바란다.......

저작자 표시
신고

설정

트랙백

댓글

Ajax란 무엇인가? Ajax의 정의

Ajax 2009.12.08 16:12

Ajax란 무엇인가?

jQuery를 한창 포스팅하다가 dom가지 설명을 끝내고 이제 Ajax로 넘어갈떄이다. 이쯤에서 Ajax를 둘러볼 필요가있다. 간단한 정의부터 사용예시까지 짤막하게 살펴보자.

Ajax 의 정의

초창기에 비동기적인 자바스크립트와 XML 이라는 말의 줄임으로 접근되었다.

  • 비동기(Asynchronous)
  • 자바스크립트(javascript)
  • 그리고 and
  • XML

이로서 ajax 란 약자가 나왔다고 하는데....마지막에 xml은 필수요소가 아니다. 이후에 어떤 약어라기보다는 방법론으로 축약되어 사용되고있다.

위에서 그래도 중요시 할점은 비동기(asynchronous) 란 점이다. 페이지의 전통적인경우 브라우저는 서버에 전재페이지를 요청하고 그리고 사용자가 링크크릭또는 폼전송시 브라우저는 새로운요청을 보내고 서버는 다른페이지를보내게된다. 하지만 ajax의 경우는 전체 페이지를 반환하는대신 현재 로딩되어있는 페이지의 일부분만 반환한다. 쉽게 말하자면 일반사이트의 클릭 새로고침으로 페이지가 완성된다면 한페이지내에서 간단하게 빨리 정보가 제공되는 셈이다.

간단히 둘러보는 몰라왔던 ajax

넓은 의미에서 ajax는 비동기란점에서 우리가 아는 다음과 같은 것들도 포함될수있다.

플래시
플래시 무비는 웹서버와 비동기적으로 통신할 수 있다.플래시로 구성된 사이트를 가보면 새로고침,앞으로 가기,뒤로가기와 달리 클릭으로 새내용을 볼수있는것을 볼수 있다. 새로고침을 플래시로 된 페이지에서 클릭한다면 맨처음페이지로 갈것이다.
프레임
요즘 홈페이지 구축에서 거의 사용하지않지만 기억을떠올려보자 클릭시 페이지의 모든 것이업데이트되지않고 한프레임만 업데이트되는것을 볼수 있다. 이것역시 비동기관점에서 본것이다.
그외..
아이프레임. XMLHttpRequest..

요약하기

Ajax는 특정한 기술, 즉 "css할 수 있어요"와 같이 "전 ajax할 수 있어요" 가 아니란 것이다. ajax는 방법론이다HTML,CSS,DOM을 기본으로 개념을 잡고 어떻게 서버측과 비동기적으로 페이지를 구축하는냐 라고 할 수 있다.

위키백과참조

앞서 설명한 것처럼 되어있다.여기도 특정 기술이 아니라고 설명되어있다. 일부 요약했고 링크된 곳으로 직접가보자

Ajax(Asynchronous JavaScript and XML)는 대화식 웹 애플리케이션의 제작을 위해 아래와 같은 조합을 이용하는 개발 기법이다.

  • 표현 정보를 위한 HTML (또는 XHTML) 과 CSS
  • 동적인 화면 출력 및 표시 정보와의 상호작용을 위한 DOM, 자바스크립트
  • 웹 서버와 비동기적으로 데이터를 교환하고 조작하기 위한 XML, XSLT, XMLHttpRequest (Ajax 애플리케이션은 XML/XSLT 대신 미리 정의된 HTML 이나 일반 텍스트, JSON, JSON-RPC를 이용할 수 있다).

DHTML이나 LAMP와 같이 Ajax는 자체가 하나의 특정한 기술을 말하는 것이 아니며, 함께 사용하는 기술의 묶음을 지칭하는 용어이다. 실제로 AFLAX와 같이 사실상 Ajax에 바탕을 두고 있는 유사/복합 기술들이 속속 나타나고 있다.

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM empty clone 메소드 복사하기

jQuery/DOM&jQuery 2009.11.28 21:20

jQuery DOM clone 메소드

.clone()은 엘리먼트를 복사하는 메소드이다.

클론은 이벤트 또한 복제하는데 하나하나 살펴보자

아메바......

위의 엘리먼트를 복제해보자

$('p').clone();

자 위의것 대로 하면 될것같지만 복사해서 놓을 위치를 정해줘야 된다. 그래서 .insertAfter()등의 메소드를 사용한다.

$('p').clone().insertAfter('p');

위와같이하면아래와같이 복사되어 나올것이다

아메바......

아메바......

이벤트까지 복제

이벤트 까지 복제하는예제를 보자.변수에 true를 넣으면 이벤트까지복제 반대로 false를 넣어주면 엘리먼트만 복제된다.


위의 버튼을 누르면 복제되도록하려면

  $('button').click(function() {
     //button 엘리먼트에 접근 클릭시 이벤트발생
      $(this).clone(true).insertAfter(this);
     //this 즉 button엘리먼트를 복사해서 그뒤에 붙임
     // clone(true)로 이벤트까지 복사
    }); 

이러면 클릭시 옆에 새로 버튼이 나올거고 또 그버튼을 클릭하면 또 복사되어 나올것이다.

예제릐 결과를 보고싶다면 아레로 가보자

http://sianasiatiger.cafe24.com/study/D_clone.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM empty remove 메소드 제거하기

jQuery/DOM&jQuery 2009.11.25 15:12

jQuery DOM empty remove 메소드

제거하기위한 메소드로는 .empty().remove()가 있다..empty()의경우는 검색된 요소안의 모든 엘리먼트를 제거하고 .remove()의 경우는 검색된 엘리먼트와 자식들을 제거한다.차례대로 보자

empty 메소드

empty메소드는 비운다는 말 그대로 모든걸 지운다.해당엘리먼트의 자식과 텍스트모두 제거한다

모두 사라 집니다.

위의 코드에 아래를 삽입하면 아무것도 나오지 않는다.

$('p').empty();
//p란 엘리먼트에 접근후 
//p엘리먼트의 자식과 텍스트 제거

remove 메소드

이메소드는 접근하여 검색된 엘리먼트와 자식,텍스트를 제거한다.

사라짐

안사라짐

위에서 selected란 클래스의 엘리먼트를 사라지게 할것이다.

$('p').remove('.selected');
//p엘리먼트에 접근후 
//selected란 클래스를 가진것을 제거한다.

결과는 안사라짐 이것만 나올것이다.

예제의 결과는 여기에서http://sianasiatiger.cafe24.com/study/D_empty_remove.html

저작자 표시
신고

설정

트랙백

댓글

jQuery DOM wrap 메소드 대치하기

jQuery/DOM&jQuery 2009.11.24 18:52

text replaceAll, replaceWith 메소드

대치란 원래있던 값대신에 다른 값을 생성하여 넣어주는 것을 말한다. 이런것이가능한 메소드는 .text(), .replaceAll()그리고 .replaceWith()등이 있다.

text 메소드

.text()메소드는 텍스트를 대치해준다.안녕하세요?반갑습니다로 대치해보겠다.

안녕하세요?

이걸 대치하려면 다음과 같다.

$('p').text('반갑습니다');

결과는 안녕하세요? 대신에 반갑습니다가 나올것이다

replaceWith 메소드

이메소드는 .text()메소드 처럼 대치하느데 그 대상이 엘리먼트인다.예제를보자문자대신에 그림을 대치시켜보자.

네이버 간판으로 바뀜

$('p').replaceWith('');

네이버 간판으로 바뀜 대신에 아래그림이 나올것이다

replaceAll 메소드

이것도 영어 Not only A but also B = B as well as A와 마찬가지다 replaceWith와 기능은 같고 위치값만 다를뿐이다.

$('').replaceAll('p');

예제의 결과는 여기서 확인http://sianasiatiger.cafe24.com/study/D_replace.html

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바