jQuery 사용한 예제

jQuery/DOM&jQuery 2009. 10. 13. 23:21

간단한 jQuery 예졔 문서

간단한 jQuery 예졔 문서를 보자.그전에 먼저준비할 일은 다음과 같다

1.jQuery 다운
http://jquery.com/에서 다운받는다.버전별로 보려면 여기가보면 된다.http://docs.jquery.com/Downloading_jQuery
2.문서에 링크 시키기
헤더에 <script src="jquery-1.3.2.min.js"></script> 삽입.경로는 알아서

html예제 보기

목적은 내용에 border를 줄것이다. 먼저 코드를 보자

jQuery 예제

jQuery를 이용border를 준예제

  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타
  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타

위와 같은 코드에서 ul엘리먼트 부분에 보더를 1px줄것이다.css는 다음과 같다.

.boxing{ border:solid 1px #000;}

클래스 boxing에 보더를 주도록되어있다.하지만 html코드에 클래스가 지정되어있지않다. 이제 jquery로 클래스를 지정해주어보자

jQuery 이용하기

<script type="text/javascript"></script>에 다음을 삽입하면된다

$(document).ready(function(){
	$('ul').addClass('boxing');					   
	});

위코드는 다음과 같은 의미이다.하나하나 보자

1.$( ) :선택자 변수 광호 안에 필요한 것을 선택한다, 엘리먼트,아이디,클래스 등이되겠다. 위 예제에서는 $('ul ')으로 되어있다.이것은 엘리먼트 ul에 접근한다는 뜻이다.

2..addClass() :jquery메소드의 일종이다. 영어번역그대로 클래스를 더한다는 역할을한다.위예제에서는addClass(boxing)으로 boxing이라는 클래스를 추가가하게된다.

3. boxing이라는 클래스를 추가 했으므로 워래 html코드의 엘리먼트 ul의 클래스명이boxing이되고 css가 적용된다.

결과는 다음과 같다.

  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타

예제가 적용된 페이지는 여기에서보자 http://sianasiatiger.cafe24.com/study/J_document.html

이예제는 jQuery를 이용한 간단한 예제일 뿐이다.소스를 보면 알 수 있듯이 그저 boxing을 추가 해주었을 뿐이다. 이런방식으로 다른 여러가지 좋은 기능을 사용할 수 있게 된다.


설정

트랙백

댓글

jQuery 알아보는 간단한 예제

jQuery/DOM&jQuery 2009. 9. 3. 13:55

jQuery 맛보기

일반적인 자바스크립트 방법,그리고 분리된 모습,jQuery소스를 보면서 비교해보자

일반적으로 내부에 포함된 스크립트


  • 클릭하면 사라짐
  • 클릭하면 사라짐
  • 클릭하면 사라짐

이와같은 방법은 초창기 자바스크립트가 사용되고 마구남발되었을떄 사용되던것이며(물론지금도 어쩔수 없이 사용되기도하지만) 스크립트와 html의 뒤섞여 많이 사용이반복되고 다른 코드들이있다면 혼란스러워진다 이제 분리한예제를보자

스크립트와 html분리


  • 클릭하면 사라짐
  • 클릭하면 사라짐
  • 클릭하면 사라짐

분리는되었으나 onload속성을 추가하여 바인딩되는시점을 지정했다.하지만 onload시점은 모든 소스들이 load되는 시점으로 이렇게 할경우 시간이 지연될 수 있다.

jQuery


  • 클릭하면 사라짐
  • 클릭하면 사라짐
  • 클릭하면 사라짐

무척단순함을 알수있다 코드도 짧고,사용도편리하다

jQuery를 배워야하지만 이미 자바스크립트를 조금이라도 안다면 배우기 쉽다.또한 필요한경우 반드시 소스의 내용자체를 알필요없이 pulg-in으로 이용할수 있다.(물론이전에도 소스를 복사 붙임으로 사용해왔지만 표준화되지않은 점과 간결성 등에 문제가많다)

이상 jQuery에 대한 간단한 소개였고 다음엔 사용법을 알아보자


설정

트랙백

댓글

jquery란 무엇인가?

jQuery/DOM&jQuery 2009. 9. 3. 13:23

jquery

jQuery는 자바스크립트와 HTML 사이의 상호작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다. 존 레시그에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다.

http://jquery.com/

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다.

웹 애플리케이션 프레임워크?

웹 애플리케이션 프레임워크(framework)는 동적인 웹 페이지나, 웹 애플리케이션, 웹 서비스를 개발하기 쉽게 해주는 구성요소 모음이다.

주로 웹 페이지를 개발하는 과정에서 겪는 어려움을 줄이기 위해 만들어졌다. 따라서 수많은 웹 애플리케이션 프레임워크는 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드의 재사용 등을 지원하고 있다.

대표적인 프레임워크 예로 Prototype이 있다

편의성

이와같은 웹 애플리케이션 프레임워크의 개발은 편의성에있다. 일반 자바스크립트의 사용시 지정하고 함수를만들며 또 반복해서 작업하는것은 상당한 시간이소요된다. 이 자바스크립트를 일정규칙하에 패키지처럼 정해놓고 새로운 언어처럼 대신 좀더쉽게사용할 수있게하는 것이목적이다.


설정

트랙백

댓글

DOM 라운드박스 심플

jQuery/DOM&jQuery 2009. 7. 2. 15:00
먼저 올린 라운딩 박스는 가로 세로 내용물 모두 자유롭게 설정가능하다.
그런데 굳이 가로가 일정치라면  그방법대로 할필요가 없다.
이번엔 가로 사이즈가 정해진경우

목적은
태그
<div id="cb>내용물</div> 여기에 앞뒤로 라운딩그림을 추가해주는것이다.
dom으로 생성할 코드는
<div id="cbbt"></div> //위 라운드박스
<div id="cb>내용물</div>
<div id="cddd"></div> //아래 라운드박스

//먼저요구되는건 insertAfter 함수. insertBefore은 스크립트에서 지원되지만 insertBefore은 없다 
//두함수의 기능은
insertBefore(A, B); :B 엘레먼트앞에 A를 삽입
insertAfter(A, B);   :B 엘레먼트뒤에 A를 삽입

//먼저 insertAfter을 만들어준다, 원리는 insertBefore를 역이용한것이다.
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

function displaydivision(){
     if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    // 모든 div를 검색
 var cb = document.getElementById("cb"); //cb라는id를 얻는다.
 var bottom = document.createElement("div"); //div태그생성 변수명은 bottom
 bottom.id="cbbb"; // 생성된 태그의 아이디를 cbbb로지정
 insertAfter(bottom, cb); //insertAfter을 이용해서 cb 아래에 만들어준다.

 var header = document.createElement("div");//역시 div태그 생성 변수명은 header
 header.id="cbbt"; //생성된 태그 아이디를 cbbt
 cb.parentNode.insertBefore( header, cb); // nsertBefore를 이용해서 cb위에 만들어준다.
}

설정

트랙백

댓글

dom 라운드 박스

jQuery/DOM&jQuery 2009. 7. 2. 14:58
원래 의도는 둥근박스를 위해서 의미 없는 불필요한 클래스를 여러개 지정해야 하는데...이를 자바로 따로 생성한다.

의도하고자하는 기본 html는 다음과 같고
 <div class="box">
 
  <div class="bt"><div></div>
  </div>
   <div class="i1">
     <div class="i2">
       <div class="i3">sdsasd</div></div></div>

  <div class="bb"><div></div>
  </div>
</div>

사용될 html은
<div class="box">
<div class="cbb">
</div>
</div>
준비할 이미지는 box.gif(이미지 에디터 에서 제작한 커다란  라운드 박스) borders.gif(양쪽 라인)이둘.

css는
.box {
margin: 15px 0 0 0;
padding: 5px 0 5px 0;
}
/* cbb 자바스크립트가 지원 안될때 */
.cbb {
margin: 0 10px 0 10px;
background: #FFF;
padding: 5px 0 5px 0;
line-height: 170%;
}

/* 메인박스 */
.cbb p, .cb p {
margin: 0;
padding: 0 5px 5px 50px;
color: #333;
}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

.cb {
margin: 0.5em 0;
line-height: 170%;
    }

/* 상단 코너*/
.bt {
    background:url(box.png) no-repeat 100% 0 !important;
    background:url(box.gif) no-repeat 100% 0;
    margin:0 0 0 18px;
    height:27px;
    }
.bt div {
    height:27px;
    width:18px;
    position:relative;
    left:-18px;
    background:url(box.png) no-repeat 0 0 !important;
    background:url(box.gif) no-repeat 0 0;
    }

/* 하단코너*/
.bb {
    background:url(box.png) no-repeat 100% 100% !important;
    background:url(box.gif) no-repeat 100% 100%;
    margin:0 0 0 12px;
    height:14px;
    }
.bb div {
    height:14px;
    width:12px;
    position:relative;
    left:-12px;
    background:url(box.png) no-repeat 0 100% !important;
    background:url(box.gif) no-repeat 0 100%;
    }

/* 왼쪽 라인 */
.i1 {
    padding: 0 0 0 12px;
    background:url(borders.png) repeat-y 0 0 !important;
    background:url(borders.gif) repeat-y 0 0;
    }
/*오른쪽라인 */
.i2 {
    padding: 0 12px 0 0;
    background:url(borders.png) repeat-y 100% 0 !important;
    background:url(borders.gif) repeat-y 100% 0;
    }
/*내용*/
.i3 {
    background:#FFF;
border: 1px solid #FFF;
    border-width:1px 0;
    padding:0 5px;
    }

설정

트랙백

댓글

DOM 함수 addLoadEvent

jQuery/DOM&jQuery 2009. 7. 2. 14:55

함수를 여러번 사용할때 쓰는 addLoadEvent

function A(){ }
 function B(){ }
 function C(){ }
 .
 .
 .
 function D(){ }

여러합수를 사용할때 전역 함수가 아닌 경우, 그리고 각함수에 귀찮게 이벤트핸들러를 줄필요없게 쓰는함수이다.
addLoadEvent ( 함수명);

그리고 순차적으로 실행된다.
addLoadEvent(A) ;
addLoadEvent(B) ;

코드는 다음과 같다

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

설정

트랙백

댓글

DOM 요약

jQuery/DOM&jQuery 2008. 10. 22. 17:40

다룰 내용

  • 노드의 개념
  • 간편한 DOM 사용법
    • getElementById, getElementsByTagName, getAttribute, setAttribute

 

1. DOM

  • D는 문서입니다.
    • 문서 객체 모델(Document Object Model)은 문서(document)가 없으면 움직이지 않음
    • 웹 문서를 만들어 웹 브라우저에 띄우는 순간 DOM이 살아 움직이기 시작합니다. 작성된 문서가 객체로 변경되기 때문임
  • O는 객체입니다.
    • 자바스크립트에는 세 종류의 객체가 있음
      • 사용자 정의 객체
      • 배열, 수학, 날짜와 같이 자바스크립트에서 이미 만들어진 객체
      • 웹 브라우저가 제공하는 주요 객체
    • 자바스크립트 초기에는 중요한 몇 가지 주요 객체들이 스크립트 제작에 사용돼었음. 그 중 가장 기본적인 것이 윈도우 객체(window object)임
    • 이러한 객체는 웹 브라우저 창 내부의 속성을 표현한 것으로 브라우저 객체 모델(BOM, Browser Object Model)이라고 부르기도 함
    • 브라우저 객체 모델은 주로 window.open이나 window.blur 같은 것을 말한다.
    • 이러한 내용은 DOM의 내용에서 벗어난 주제임. DOM은 브라우저 창 안의 웹 문서 내용을 다루는 문서(document) 객체가 대상임
  • M은 모델입니다.
    • DOM에서 사용하는 가장 중요한 규칙은 문서를 나뭇가지(tree)형 구조로 표시한다는 것임
    • 이러한 구조도는 (X)HTML에서 문서를 가장 잘 표현해주는 방법임
      1. //쇼핑 목록
      2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      3. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        1. <head>
          1. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
          2. <title>쇼핑목록</title>
        2. </head>
        3. <body>
          1. <h1>쇼핑 목록</h1>
          2. <p title="a gentle reminder">이 물건 사는 것을 잊지 마세요.</p>
          3. <ul id="purchase">
            1. <li>땅콩</li>
            2. <li>치즈</li>
            3. <li>우유</li>
          4. </ul>
        4. </body>
      5. <html>
    • [그림]기본 웹페이지의 문서 구조
    • 웹페이지 구조 표현 방식
      • doctype을 선언해 주고 난 후 문서는 <html>을 여는 것으로 시작. 웹 페이지 내의 모든 요소들이 <html>안에 있음. 즉 <html>은 모든 요소들의 부모라고 할 수 있음
      • <html> 바로 아래로 <head>와 <body>가 존재함. 이 둘은 형제 관계
      • 이런 식으로 부모/자식 관계를 맺어가는 것이 기본적인 document 구조임
      • 이러한 형태를 노드 트리라고 부른다.

2. 노드

  • 노드(node) : 어떤 연결망에서 특정 지점과 지점을 연결하는 데 표시하는 것을 말함. 네트웍은 노드의 집합을 말한다.
  • 현실 세계에서 모든 것은 원자로 구성되어 있다. 원자는 세상의 노드라고 할 수 있으며 원자보다 작은 양성자나 전자 등도 노드라고 부를수 있음
  • DOM도 마찬가지임. 문서는 노드의 집합으로, 문서라는 나무 위에 가지나 잎같은 노드를 갖고 있는 것이라 할 수 있음
  1. 요소 노드
    • DOM에서 원자와 같은것이 요소(element) 노드임
    • 앞서 쇼핑 목록 문서의 구조를 이야기 할 때<body>, <p>,  같은 요소로 표현을 했음. 요소는 웹상에서 제공되는 문서의 가장 기본적인 조각을 의미하며, 문서의 구조라 하면 이런 요소가 배열된 것을 의미함
    • 태그는 요소의 이름을 붙인 것이라고 보면 됨.
    • 요소는 다른 요소를 포함할 수 있음. 모든 <li> 요소는 <ul>요소 안에 포함되어 있음. 다른 요소에 포함되지 않는 유일한 요소는 <html>뿐이다. 이것이 문서 노드 트리의 시작이기 때문임
  2. 텍스트 노드
    • 문서가 순수하게 요소로만 구성되어 있다면 구조는 갖겠지만 내용이 없게 됨. 웹 문서에는 내용이 들어 있어야 하며, 대부분 내용은 텍스트로 제공할 수 있다.
    • 예를 들어 <p> 요소에는 "이 물건을 사는 것을 잊지 마세요."라는 내용이 들어 있음. 이것이 바로 텍스트(text) 노드
    • XHTML에서 텍스트 노드는 항상 요소 노드안에 포함됨. 하지만 모든 요소가 텍스트 노드를 포함하는 것은 아니다.
    • 예를 들어 <ul> 요소는 텍스트를 직접적으로 포함하고 있지 않고, 단지 <li> 요소만을 포함하고 있다.
  3. 속성 노드
    • 속성(attribute)이라는 것은 요소에 대한 좀더 정확한 정보를 표현할 때 사용한다. 예를 들어 title 속성을 보자면 요소가 포함하고 있는 것을 좀더 정확히 표현하는 수단으로 사용하고 있음
      1. <p title="a gentle reminder">이 물건 사는 것을 잊지 마세요.</p>
      2. // 노드 구성
      3. 요소 노드 : p
      4. 속성 노드 : title = "a gentle reminder"
      5. 텍스트 노드 : 이 물건 사는 것을 잊지 마세요
    • 모든 요소는 속성을 포함하지 않지만 모든 속성은 요소 안에 포함된다.
  4. CSS 와의 관계
    • DOM은 웹 문서의 구조와 상호 작용하는 기술 중 하나임. 그러한 기술 중에 캐스케이딩 스타일 시트(Cascading Style Sheets), 간단히 CSS는 문서의 내용을 어떻게 표시할 것인가를 나타내는 데 사용하는 방법임
    • 자바스크립트처럼 스타일은 문서의 <head>안에 <style> 태그로 선언하거나 외부 스타일 시트 파일을 포함할 수 있음. CSS를 표시하는 문법은 자바스크립트 함수와 매우 유사함
      1. // CSS 문법
      2. 선택자 {
        1. 속성 : 값;
      3. }
      4. //예를 들면 특정 색상이나 글꼴과 크기를 표현할 수 있다
      5. p {
        1. color : yellow;
        2. font-family : "arial",sans-serif;
        3. font-size : 1.2em;
      6. }
    • 상속(Inheritance)은 CSS의 가장 강력한 기능이다. DOM처럼 CSS도 역시 노드 트리로 문서 내용을 볼 수 있다. 노드 트리 안에 요소들은 그들 부모의 스타일 속성을 그대로 전달 받습니다.
      1. // 예를 들어 body 요소의 글꼴과 색상을 선언하면 body가 포함하고 있는 모든 요소에 자동 적용됨
      2. body {
        1. color : white;
        2. background-color : black;
      3. }
    • 이런식으로 전체에 동일한 스타일을 적용하지 않고 하나의 단락에만 스타일을 적용하기 위해서 클래스(class)와 아이디(id)를 지정하게 된다.
      • 클래스
        1. // class 속성은 원하는 요소에 여러 번 사용 할 수 있다
        2. <p class="special">이 단락은 특별한 내용이 있습니다.</p>
        3. <p class="special">특별한 내용을 담은 제목</p>
        4. // 스타일시트 내용은 아래와 같다
        5. .special {
          1. font-style : italic;
        6. }
        7. // 특정한 요소의 클래스를 지정해서 사용하고 싶은 경우
        8. h2.special {
          1. text-transform : uppercase;
        9. }
      • 아이디
        1. // id 속성은 웹 페이지에서 유일하게 한 번 특정 요소를 지정해서 사용할 수 있다
        2. <ul id="purchase">
        3. // 스타일 시트 내용
        4. #purchase {
          1. border : 1px solid white;
          2. background-color : #333;
          3. color : #ccc;
          4. padding : 1em;
        5. }
        6. // 특정 요소에 표함된 다른 요소들에 대한 스타일 지정
        7. #purchase li {
          1. font-weight : bold;
        8. }

 

3. getElementById

  • DOM은 이름만 봐도 역할을 알 수 있는 getElementById라는 메소드가 있음(대소문자 구별 주의)
  • 이 메소드는 문서 객체와 함께 사용할 수 있는 함수임. 함수는 항상 인수(argument)를 표시하기 위한 괄호를 써서 표헌한다. getElementById는 id, 딱 하나의 인
    수를 가짐
    1. document.getElementById(id)
    2. //id = purchase
    3. document.getElementById("purchase")
  • 이 메소드를 사용하면 HTML 문서에서 purchase라고 지정된 아이디 속성을 포함하는 단 하나의 HTML 요소를 참조하며, 이 요소는 하나의 객체가 된다.
  • 문서내의 모든 요소는 객체이며, DOM을 사용해서 이런 요소들 중 필요한 하나를 얻어낼 수 있다.

 

4. getElementsByTagName

  • getElementById 메소드를 이용해서 특정 id를 가진 문서내 요소를 찾을 수 있지만 id가 없는 요소에 전부 id를 붙일 수는 없다.
  • getElementsByTagName 메소드를 사용하면 특정 태그를 사용하는 요소들을 배열로서 얻어낼수 있다.
  • 이 함수도 역시 하나의 인수를 갖게 되는데, 인수는 바로 태그의 이름이 된다.
    1. // 기본 문법
    2. element.getElementsByTagName(tag) // element라는 사실을 이해해야 함
    3. // 예제
    4. document.getElementsByTagName("li")
    5. alert(document.getElementsByTagName("li").length);
    6. // 이렇게 하면 목록 항목의 개수를 볼수 있게 된다.
  • 불필요한 코드를 줄여보면서 반환되는 type을 확인
    1. var items = document.getElementsByTagName("li");
    2. for (var i=0: i < items.length; i++) {
      1. alert(typeof items[i]);
    3. }
    4. // 세번 object라고 경고창이 뜨게 될 것임
    5. // 특정한 요소 노드를 지정하지 않을 경우 인수에 별(*)을 넣어줄 수 있다
    6. alert(document.getElementsByTagName("*").length);
    7.  
  • 기본 문법에서 doucment가 아닌 element를 이용한 이유
    1. //document 로 문서객체를 사용하지 않고 특정 요소에 포함된 요소를 알아낼 수도 있음
    2. var shopping = document.getElementById("purchase");
    3. var items = shopping.getElementsByTagName("*");
    4. alert(items.length);
    5. for (var i=0; i < items.length; i++) {
      1. alert(typeof itmes[i]);
    6. }

 

중간 정리

  • 문서 내에 모든 요소 노드는 개체임
  • 또한 이러한 객체 하나 하나 모두 DOM이라는 마당에 세워지 저장 창고 속에 있는 메소드임
  • 재정리
    1. 문서는 트리 구조를 지닌 객체들의 모음임
    2. 요소, 속성, 텍스트 등 다양한 형식의 노드가 있다
    3. getElementById를 사용하면 특정 아이디를 가진 요소에 바로 접근할 수 있다.
    4. getElementsByTagName을 사용하면 특정 태그를 가진 요소에 바로 접근할 수 있다.
    5. 이러한 노드들은 모두 객체다.

 

5. getAttribute

  • 요소 노드에 접근하기 위해서 getElementById나 getElementsByTagName이라는 두 가지 방법을 사용함
  • 일단 원하는 요소에 접근하게 되면 각 속성 값들을 알 수 있어야 하는데, 이때 사용하는 것이 getAttribute
  • getAttribute 역시 함수로, 속성명을 인수로 갖게 된다.
    1. // 기본 문법
    2. object.getAttribute(attribute)
    3. // 예제 : <p> 요소의 title 속성을 얻는 방법
    4. var paras = document.getElementsByTagName("p");
    5. for (var i=0; i < paras.length; i++) {
      1. alert(para[i].getAttribute("title"));
    6. }
  • 위의 예제 코드를 실행하면 "a gentle reminder" 경고창이 나타남
  • 이때는 <p> 요소가 하나 있기 때문에 그러한데, 속성이 없을 경우 null이 반환된다.
    1. // null 반환의 경우를 감안해서 코드 정리
    2. var paras = document.getElementsByTagname("p");
    3. for (var i=0; i < paras.length; i++) {
      1. var title_text = paras[i].getAttribute("title");
      2. if (title_text != null) {
        1. alert(title_text);
      3. }
    4. }
    5. // null 체크 간단하게
    6. var paras = document.getElementsByTagname("p");
    7. for (var i=0; i < paras.length; i++) {
      1. var title_text = paras[i].getAttribute("title");
      2. if (title_text) alert(title_text); // 변수에 값이 있으면 참이고 없으면 거짓임
    8. }

 

7. setAttribute

  • 지금까지의 메소드들은 정보를 뽑아 내는 용도였음
  • setAttribute는 성격이 조금 다른데. 이것은 특정 속성 노드의 값을 바꿀 수 있다.
  • 이 메소드도 당연히 함수이므로 인수를 갖게 되고, 다른점은 인수가 두개인데, 하나는 바꾸고 싶은 속성이고, 나머지 하나는 바꿀 값이 된다.
    1. // 기본 문법
    2. object.setAttribute(attribute,value)
    3. // 예제
    4. var shopping = document.getElementById("purchases");
    5. alert(shopping.getAttribute("title"); // 빈창이나 null 
    6. shopping.setAttribute("title","a list of goods");
    7. alert(shopping.getAttribute("title"); // a list of goods
    8. // <p> 요소의 title 수정 코드
    9. var paras = document.getElementsByTagName("p");
    10. for (var i=0; i < paras.length; i++) {
      1. var title_text = paras[i].getAttribute("title");
      2. if (title_text) {
        1. paras[i].setAttribute("title", "brand new title text");
        2. alert(paras[i].getAttribute("title");
      3. }
    11. }
  •  setAttribute를 써서 값을 바꿨더라도 이런 변화를 웹브라우저의 HTML 소스보기로는 알수 없음. DOM을 통해서 이미 표시된 웹 페이지 내용을 동적으로 바꾼것이기 때문임(FF의 firebug나 IE의 IE DOM explorer를 사용하면 DOM 내용의 변화를 확인 할 수 있음)
dom

설정

트랙백

댓글

티스토리 카테고리 메뉴...

jQuery/DOM&jQuery 2008. 10. 1. 13:36
메뉴를 보면 답답함이 느껴 질떄가 있는데...

카테고리를 보면 줄줄이 이어져있는모습..떄론 좋기도 하지만 답답하기도 하다.

이걸 자바스크립트로  대체 시켜서 바꿀순없을까 하는 생각도..

아직 내게 그정도 능력은 없지만..ㅎㅎ

설정

트랙백

댓글