w3schools JQuery페이지 번역

유용한 제이쿼리 기초를 한글로 번역하였습니다..

제이쿼리 란?

제이쿼리는 자바 스크립트 함수의 라이브러리입니다.
제이쿼리는 코딩 양을 줄이고, 더 많은걸 나타내는 자바 스크립트 라이브러리입니다.
제이쿼리 라이브러리는 다음과 같은 기능을 포합니다.
- HTML element 선택
- HTML element 조작
- CSS 조작
- HTML 이벤트 기능
- 자바 스크립트 효과와 애니메이션
- HTML DOM 탐색 및 수정
- AJAX
- 유틸리티

제이쿼리 라이브러리 추가

*jQuery 라이브러리는 모든 제이쿼리 방법을 포함, 하나의 자바 스크립트 파일(.js)로 저장됩니다.

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

자신의 컴퓨터에 jQuery 라이브러리를 저장하지 않으려면, Google이나 Microsoft에서 호스팅하는 jQuery 라이브러리를 사용할 수 있습니다.

<!--Google-->
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head> 

<!--Microsoft-->
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
</head>

제이쿼리 Selectors

$("*") 모든 element
$("#daum") daum 이란 id를 가진 element
$(".daum") daum 이란 class를 가진 element

$(".daum #naver div") css문법과 비슷합니다.
$("div") 모든 div element
$(".daum.naver") daum class와 naver class를 element
$("li:first") 처음 li element
$("li:last") 마지막 li element
$("li:even") 짝수 li element
$("li:odd") 홀수 li element
$("ul li:eq(2)") 리스트 3번째 element
$("input:not(:empty)") 비어있지않는 input element
$(":header") 모든 헤더 element h1, h2 ...
$(":animated") 모든 애니메이션 element
$(":contains('daum')") daum이라는 텍스트가 포함된 element
$("div:hidden") 숨겨져 있는 div element
$("div:visible") 보이는 div element
$("th,td,.intro") selector가 일치하는 element
$("href") href 속성을 가진 모든 element
등의 문법이 있습니다.

제이쿼리 Events

bind()

bllur()

change()

click()

bdlclick()

delegate()

die()

error()

event.isDefaultPrevented()

event.pageX

event.pageY

event.preventDefault()

event.result

event.target

event.timeStamp

event.type

event.which

focus()

focusin()

focusout()

hover()

keydown()

keypress()

keyup()

live()

load()

mousedown()

mouseenter()

mouseleave()

mousemove()

mouseout()

mouseover()

mouseup()

one()

ready()

scroll()

select()

submit()

toggle()

trigger()

triggerHandler()

unbind()

undelegate()

unload()

제이쿼리 Effects

// 이벤트 예문
$(".btn").click(function(){
  $("div.wrap").animate({height:"500px"});
});

// .btn 클릭시 .wrap class를 가진 div의 높이 값이 점차적으로 500px로 변화함

animate() 선택된 element에 애니메이션을 실행. css 속성값은 점차적으로 변경됨.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
  {
  $("#btn1").click(function(){
    $("#box").animate({height:"300px"});
  });
  $("#btn2").click(function(){
    $("#box").animate({height:"100px"});
  });
});
</script>
</head>
<body>
<div id="box" style="background:#red;height:100px;width:100px;margin:6px;"></div>
<button id="btn1">클릭</button> <button id="btn2">초기화</button>
</body>
</html>

clearQueue() 선택된 element에 모든 기능을 제거함. 실행되지 않은 대기중인 모든 기능을 중지합니다.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#start").click(function(){
    $("#box").animate({height:300},"slow");
    $("#box").animate({width:300},"slow");
    $("#box").queue(function () {
      $(this).css("background-color","red");  
      $(this).dequeue();
    });
    $("#box").animate({height:100},"slow");
    $("#box").animate({width:100},"slow");
  });
  $("#stop").click(function(){
    $("#box").clearQueue();
  });
});
</script> 
</head>
<body>
<p><button id="start">시작</button><button id="stop">중지</button></p>
<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative"></div>
</body>
</html>

delay() 선택된 element에 대기중인 기능을 지연을 설정.
dequeue() 선택된 element에 다음 대기중인 기능을 실행함.

fadeIn() 선택된 element에 서서히 opecity로 변화하면서 나타남.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").fadeOut()
  });
  $(".btn2").click(function(){
    $("p").fadeIn();
  });
});
</script>
</head>
<body>
<p>문단입니다.</p>
<button class="btn1">Fade out</button>
<button class="btn2">Fade in</button>
</body>
</html>

fadeOut() 선택된 element에 서서히 opecity로 변화하면서 사라짐.

fadeTo() 선택된 element를 opecity를 지정하여 변화함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
  $("p").fadeTo(1000,0.4); // 속도과 opecity 값을 지정할수 있습니다.
  });
});
</script>
</head>
<body>
<p>문단입니다</p>
<button>fade to</button>
</body>
</html>

fadeToggle()

hide() 선택된 element를 숨김.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
  $("p").hide();
  });
  $(".btn2").click(function(){
  $("p").show();
  });
});
</script>
</head>
<body>
<p>문단입니다.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>

queue() 선택된 element에 대기 기능을 보여줌.
show() 숨겨진 element를 보여줌.

slideUp() 선택된 element를 높이가 점차적으로 낮아지면서 숨김.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").slideUp();
  });
  $(".btn2").click(function(){
    $("p").slideDown();
  });
});
</script>
</head>
<body>
<p>문단입니다.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>
</body>
</html>

slideDown() 선택된 element를 높이가 점차적으로 높아지면 보여짐.

slideToggle() slideUp()과 slideDown()를 전환함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>문단입니다.</p>
<button>slideToggle</button>
</body>
</html>

stop() 선택된 element에 실행중인 애니메이션을 중지함.

toggle() 선택된 element에 hide()와 show()를 전환하는 기능.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>
<p>문단입니다.</p>
<button>Toggle</button>
</body>
</html>

제이쿼리 HTML

addClass() 선택된 element에 하나 이상의 클래스를 (CSS)을 추가

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("fc_red");
  });
});
</script>
<style type="text/css">
.fc_red{ font-size:20px; color:red;}
</style>
</head>

<body>
<p>첫번째 문단</p>
<p>두번째 문단</p>
<button>클릭</button>
</body>
</html>
//.button.btn 클릭시 첫번째 p에 .fc_red class를 추가합니다.

after() 선택된 element에 다음에 내용을 삽입함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>추가되는 글입니다!</p>");
  });
});
</script>
</head>
<body>
<p>문단입니다.</p>
<button>클릭</button>
</body>
</html>

append(),appendTo() 선택된 element에 내부에 내용을 삽입함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(" <b>추가되는 글입니다!</b>");
  });
});
</script>
</head>
<body>
<p>문단입니다.</p>
<p>문단입니다.</p>
<button>클릭</button>
</body>
</html>

attr() 요소(ex:width)의 값(ex:150px;)을 지정합니다.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("img").attr("width","400");
  });
});
</script>
</head>
<body>
<img src="http://icon.daumcdn.net/w/c/10/12/37691415937798319.png" alt="다음" width="223" height="109" />
<br />
<button>클릭</button>
</body>
</html>

before() 선택된 element 앞에 내용을 삽입함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").before("<p>추가되는 글입니다!</p>");
  });
});
</script>
</head>
<body>
<p>문단입니다.</p>
<button>클릭</button>
</body>
</html>

clone() element를 복사하여 지정한 요소에 삽입함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").clone().appendTo("body");
  });
});
</script>
</head>
<body>
<p>문단입니다.</p>
<button>클릭</button>
</body>
</html>

detach() 모든 텍스트와 자식 노드를 포함하여 선택된 요소를 제거합니다.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").detach();
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Remove all p elements</button>
</body>
</html>

empty() 텍스트와 자식 노드를 포함하여 선택된 요소의 모든 콘텐츠를 제거합니다. 요소 자체 또는 특성을 제거하지 않습니다.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
  $("p").empty();
  });
});
</script>
</head>
<body>
<p style="width:200px;height:200px;background-color:yellow">문단입니다.</p>
<button>클릭</button>
</body>
</html>

hasClass() 선택된 element에 지정된class가 있는지 체크함.

html() 설정하거나 선택된 element의 내용을 변환합니다.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").html("추가되는 <b>글!</b>");
  });
});
</script>
</head>
<body>
<p>문단 1입니다.</p>
<p>문단 2입니다.</p>
<button>클릭</button>
</body>
</html>

insertAfter() html마크업 또는 선택된 element 뒤에 추가됨.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<span>H추가되는 글입니다!</span>").insertAfter("p");
  });
});
</script>
</head>

<body>
<p>문단 1입니다.</p>
<p>문단 2입니다.</p>
<button>클릭</button>
</body>
</html>

insertBefore() html마크업 또는 선택된 element 앞에 추가됨.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<span>추가되는 글입니다!</span>").insertBefore("p");
  });
});
</script>
</head>

<body>
<p>문단 1입니다.</p>
<p>문단 2입니다.</p>
<button>클릭</button>
</body>
</html>

prepend() 내용의 시작부분에 선택된 element가 삽입됨.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").prepend("<b>추가되는 글입니다!</b> ");
  });
});
</script>
</head>
<body>
<p>문단 1입니다.</p>
<p>문단 2입니다.</p>
<button>클릭</button>
</body>
</html>

prependTo() 내용의 시작부분에 선택된 element가 삽입됨.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<b>추가되는 글입니다!</b>").prependTo("p");
  });
});
</script>
</head>
<body>
<p>문단 1입니다.</p>
<p>문단 2입니다.</p>
<button>클릭</button>
</body>
</html>

remove() 선택된 element를 제거함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove();
  });
});
</script>
</head>
<body>
<p>문단 1입니다.</p>
<p>문단 2입니다.</p>
<button>클릭</button>
</body>
</html>

removeAttr() 선택된 element에 지정된 속성을 제거함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeAttr("style");
  });
});
</script>
</head>

<body>
<h1>This is a heading</h1>
<p style="font-size:20px;color:red">스타일이 있는 문단입니다</p>
<p>문단입니다.</p>
<button>클릭</button>
</body>
</html>

removeClass() 선택된 element에 지정된 class를 제거함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeClass("fc_red");
  });
});
</script>
<style type="text/css">
.fc_red{ font-size:120%; color:red;}
</style>
</head>

<body>
<h1>제목입니다.</h1>
<p class="intro">문단입니다.</p>
<p>문단입니다.</p>
<button>클릭</button>
</body>
</html>

replaceAll() 선택된 element를 새로운 콘텐츠로 대체함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<b>대체할 텍스트입니다!</b>").replaceAll("p");
  });
});
</script>
</head>
<body>
<p>문단1입니다.</p>
<p>문단2입니다.</p>
<button>클릭</button>
</body>
</html>

replaceWith() 선택된 element를 새로운 콘텐츠로 대체함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").replaceWith("<b>대체할 텍스트입니다!</b>");
  });
});
</script>
</head>
<body>
<p>문단1입니다.</p>
<p>문단2입니다.</p>
<button>클릭</button>
</body>
</html>

text() 선택된 element를 새로운 text로 대체함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").text("대체할 텍스트입니다!");
  });
});
</script>
</head>
<body>
<p>문단1입니다.</p>
<p>문단2입니다.</p>
<button>클릭</button>
</body>
</html>

toggleClass() 선택된 element에 하나이상의 class를 추가,제거 전환함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main");
  });
});
</script>
<style type="text/css">
.main{font-size:20px; color:red;}
</style>
</head>
<body>
<p>문단1입니다.</p>
<p>문단2입니다.</p>
<button>클릭</button>
</body>
</html>

unwrap() 선택된 element의 부모 요소를 제거함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").unwrap();
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<div>
  <p>문단입니다</p>
</div>
<div>
  <p>문단입니다</p>
</div>
<button>클릭</button>
</body>
</html>

val() 반환 또는 선택된 element에속성값을 설정함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("input:text").val("김용환");
  });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" /></p>
<button>클릭</button>
</body>
</html>

wrap() 선택된 element에 지정된 html element를 래핑함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").wrap("<div></div>");
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<p>문단 1입니다.</p>
<p>문단 2입니다.</p>
<button>클릭</button>
</body>
</html>

wrapAll() 선택된 모든 element에 지정된 html element를 래핑함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").wrapAll("<div></div>");
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<p>문단 1입니다.</p>
<p>문단 2입니다.</p>
<button>클릭</button>
</body>
</html>

wrapInner() 선택된 각 element에 지정된 html element를 래핑함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").wrapInner("<b></b>");
  });
});
</script>
</head>
<body>
<p>문단 1입니다.</p>
<p>문단 2입니다.</p>
<button>클릭</button>
</body>
</html>

제이쿼리 CSS

addClass() 선택된 element에 하나이상의 class를 추가함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").addClass("fc_red");
  });
});
</script>
<style type="text/css">
.fc_red{ font-size:20px; color:red;}
</style>
</head>

<body>
<p>첫번째 문단</p>
<p>두번째 문단</p>
<button>클릭</button>
</body>
</html>
//.button.btn 클릭시 첫번째 p에 .fc_red class를 추가합니다.

css() 선택된 element에 하나이상의 css 속성을 설정 반환 함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("color","red");
  });
});
</script>
</head>

<body>
<p>문단 글입니다.</p>
<button>클릭</button>
</body>
</html>

hasClass() 선택된 element에 지정된 class가 있는지 체크함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("p").hasClass("fc_red"));
  });
});
</script>
<style type="text/css">
.fc_red{font-size:20px;color:red;}
</style>
</head>
<body>
<h1>제목입니다</h1>
<p class="fc_red">문단 글 입니다.</p>
<p>문단 글 입니다.</p>
<button>클릭</button>
</body>
</html>
//.fc_red class를 체크해 alert창에 true로 출력됨.

height() 선택된 element의 높이를 설정하거나 반환함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").height(100);
  });
});
</script>
</head>
<body>
<p style="background-color:yellow">문단1</p>
<p style="background-color:red">문단2</p>
<button>클릭</button>
</body>
</html>
// 클릭시 높이값이 늘어난다.

offset() 선택된 element의 위치를 반환함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").offset();
    alert("Left offset: " + x.left + " Top offset: " + x.top);
  });
});
</script>
</head>
<body>
<p>문단 글 입니다</p>
<button>클릭</button>
</body>
</html>

offsetParent() 첫번째 부모 element의 위치를 반환함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").offsetParent().css("background-color","red");
  });
});
</script>
</head>
<body>
<div style="width:70%;position:absolute;left:100px;top:100px">
  <div style="margin:50px;background-color:yellow">
    <p>문단</p>
    <button>클릭</button>
  </div>
</div>
</body>
</html>

position() 첫번째 선택된element의 위치(부모 요소에 상재적인 위치)를 반환함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    x=$("p").position();
    alert("Left position: " + x.left + " Top position: " + x.top);
  });
});
</script>
</head>
<body>
<p>문단</p>
<button>클릭</button>
</body>
</html>
// alert창에 position 값이 출력된다.

removeClass() 선택된 element에 하나 이상의 class를 제거함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").removeClass("fc_red");
  });
});
</script>
<style type="text/css">
.fc_red{font-size:120%;color:red;}
</style>
</head>
<body>
<h1>제목입니다.</h1>
<p class="fc_red"> .fc_red 문단입니다.</p>
<p>문단입니다</p>
<button>클릭</button>
</body>
</html>
// .fc_red class가 제거됨니다.

scrollLeft() 선택된 element의 수평 스크롤위치를 반환함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("div").scrollLeft()+" px");
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
  스크롤영역 글입니다.스크롤영역 글입니다.스크롤영역 글입니다.스크롤영역 글입니다.스크롤영역 글입니다.
</div>
<button>클릭</button>
</body>
</html>
// 스크롤 위치값이 출력됨니다.

scrollTop() 선택된 element의 수직 스크롤위치를 반환함

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    alert($("div").scrollTop()+" px");
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
 스크롤영역 글입니다.스크롤영역 글입니다.스크롤영역 글입니다.스크롤영역 글입니다.스크롤영역 글입니다.
</div>
<button>클릭</button>
</body>
</html>
// 스크롤 위치값이 출력됨니다.

toggleClass() 선택된 element에 대해 하나 이상의 class를 추가하고 제거 전환함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggleClass("main");
  });
});
</script>
<style type="text/css">
.main{font-size:120%;color:red;}
</style>
</head>
<body>
<p>문단입니다.</p>
<p>문단입니다.</p>
<button>클릭</button>
<p><b>볼드체</b> 글 입니다.</p>
</body>
</html>
// 클릭시 추가 제거 전환합니다.

width() 선택된 element의 넓이를 설정하거나 반환함.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").width(200);
  });
});
</script>
</head>
<body>
<p style="background-color:yellow">노란 문단입니다.</p>
<p style="background-color:red">빨간 문단입니다.</p>
<button>클릭</button>
</body>
</html>

실습도 가능한 제이쿼리 입력기 화면

출처-http://blog.daum.net/yonghany/2

저작자표시

'Javascript > jQuery' 카테고리의 다른 글

jquery 정리.. (0)	2016.04.07
jQuery selectBox 컨트롤. (0)	2014.10.30
layer popup drag move (0)	2014.10.29
jQuery ajax 예제 (0)	2014.06.18

어떤공간

w3schools JQuery페이지 번역

제이쿼리 Selectors

'Javascript > jQuery' 카테고리의 다른 글

티스토리툴바

w3schools JQuery페이지 번역

제이쿼리 Selectors

'Javascript > jQuery' 카테고리의 다른 글

'Javascript/jQuery' Related Articles

티스토리툴바