'jQuery'에 해당되는 글 12건

  $("*").slice(2,3);

  모든 엘리먼트를 선택한 다음 세 번째 엘리먼트를 담은 새로운 집합을 생성한다.

  $("*").slice(4);

  모든 엘리먼트중 처음 네 엘리먼트를 제외한 모든 엘리먼트의 집합을 반환한다.

2.3.4 관계를 이용해 확장 집합 얻기 

2.3.5 확장 집합을 이용하는 기타 방법들 

wrappedSet.find("p cite"); 

변수 wrappedSet에 할당된 확장 집합에서, <p> 엘리먼트에 포함된 모든 <cite>엘리먼트로 구성된 확장 집합을 생성.

 $("p").find("span").css('color','red'); 

<p>엘리먼트 하위의 <span>엘리먼트의 글자색을 빨간색으로 설정

var hasImage = $("*").is("img");

전체 엘리먼트중 <img>엘리먼트가 존재하면 hasImage 변수에 true를 저장한다. 그렇지 않으면 false

2.3.6 jQuery 체인 관리하기

$("img").appendTo("#somewhere").end().addClass("beenCloned");

아이디가 #somewhere인 엘리먼트 하위에 <img> 엘리먼트를 붙이고, <img>엘리먼트에 beenCloned 클래스를 추가한다.

$("div#aa").find("p").andSelf().css("border", "2px solid red");

id가 aa인 <div>엘리먼트의 확장 집합과 <div>엘리먼트 하위의 <p>엘리먼트의 확장 집합을 합친

확장집합의 border 값을 2px solid red로 설정한다.

3.1 엘리먼트 프로퍼티와 어트리뷰트 조작하기

  3.1.1 엘리먼트 프로퍼티 조작하기 

    $("img").each(function(n){

        this.alt = "아이디가 " + this.id + "인 image[" + n + "]이다."

    })

  3.1.2 어트리뷰트 값 가져오기

  <img id="myImage" src="test.gif" alt="이미지"/>

  $("#myImage").attr("alt");

  3.1.3 어트리뷰트 값 설정하기

  $("*").attr("title", function(indext){

    return "나는 " + index + "번 엘리머트이고 내 이름은 " + (this.id? this.id : "unset") + "이다";

  });

  $("input").attr({value : "", title : "값을 입력하세요."});

  3.1.4 어트리뷰트 제거하기

어트리뷰트를 제거한다고 해서 자바스크립트 DOM 엘리먼트에서 대응하는 프러퍼티가 제거되는 않음에 주목하자. 단지 값이 변경될 뿐이다. 예를 들어 한 엘리먼트에서 readonly 어트리뷰트를 제거함으로써 readonly 프로퍼티 값이 true에서 false로 전환되지만 이로 인해 엘리먼트에서 프로퍼티가 제거되지는 않는다.

3.2 엘리먼트 스타일 변경하기

  3.2.1 클래스 추가하고 제거하기

   function swap(){

     $("tr").toggleClass("striped");

   }

   <table onmouseover="swap();" onmouseout="swap();">

  3.2.2 스타일 얻고 설정하기

  $("div.expandable").css("width", function(){

     return $(this).width() + 20 + "px";

  });

  $("div.expandable").css({color:red, width:20px, height: function(index, value) { 
        return parseFloat(value) * 1.2; 
      } });

$("div.expandable").css("color");

   $("div.myElements").width(500);

   $("div.myElements").css("width", "500px");

   var value = $("div.myElements").width();

  3.2.3 스타일과 관련된 유용한 커맨드

$("p:first").hasClass("surpriseMe");

내부적으론 아래와 같이 구현 되어 있다.

$("p:first").is(".surpriseMe");

3.3 엘리먼트 콘텐츠 설정하기

  3.3.1 HTML과 텍스트 콘텐츠 대체하기

$("div").html("<span class='red'>Hello <b>Again</b></span>");

그냥 innerHTML인가 보네..

$("div").text("<span class='red'>Hello <b>Again</b></span>"); 

<span class='red'>Hello <b>Again</b></span> 모두 문자열로 화면에 그대로 출력

  3.3.2 엘리먼트 복사하기와 이동하기

대상이 하나이면 원본 엘리먼트는 기존 위치에서 삭제되고 덧붙여지도록 지덩된 새로운 부모 엘리먼트의 위치로 이동한다.

대상이 여러개라면 원본 엘리먼트는 그대로 남아 있고 각 대상에 복사본이 추가된다.

<div class="inner">Hello</div>
<div class="inner">Goodbye</div>

// 원본 엘리먼트를 대상 엘리먼트 앞에 삽입한다.

$('.inner').prepend('<p>Test</p>');

<div class="inner">
    <p>Test</p>
    Hello
</div>
<div class="inner">
    <p>Test</p>
    Goodbye
</div>

$('<p>Test</p>').prependTo('.inner');

<div class="inner">
    <p>Test</p>
    Hello
  </div>
<div class="inner">
    <p>Test</p>
    Goodbye
</div>

// 엘리먼트를 대상의 첫 번째 자식으로 삽입하는 대신에 대상의 바로 앞 형제로 삽입한다.

$('.inner').before('<p>Test</p>');

<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>

$('<p>Test</p>').insertBefore('.inner');

<p>Test</p>
<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>

//엘리먼트를 대상의 마지막 자식으로 삽입하는 대신에 대상의 바로 뒤 형제로 삽입한다.

$('.inner').after('<p>Test</p>');

<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>

$('<p>Test</p>').insertAfter('.inner');

<div class="inner">Hello</div>
<p>Test</p>
<div class="inner">Goodbye</div>
<p>Test</p>

 3.3.3 엘리먼트 감싸기

$('.inner').wrap('<div class="new" />');

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

  3.3.4 엘리먼트 제거하기

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

$('.hello').remove();

$('div').remove('.hello');

<div class="container">
  <div class="goodbye">Goodbye</div>
</div>

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

$('.hello').empty();

<div class="container">
  <div class="hello"></div>
  <div class="goodbye">Goodbye</div>
</div>

$("div#divTest").after("<p>div를 대체한다.</p>").remove(); 

$.fn.replaceWith = function(html){

   return this.after(html).remove();

}

$("div#divTest").replaceWith er("<p>div를 대체한다.</p>"); 

  3.3.5 엘리먼트 복사하기

$("img").clone(); // 원본 확장 집합과 복사본 확장 집합 2개 생성후 아무것도 안함.

// 확장집합 복사 후 id가 here인 노드 바로 앞 형제로 삽입 후 원본 확장 집합 숨김

$("img").clone().insertBefore("#here").end().hide();

3.4 폼 엘리먼트 값 다루기

$("[name=radioGroup]:checked").val(); // name이 radioGroup인 라디오 버튼들중 선택된 라디오 버튼의 value값을 가져온다.

체크박스와 마친가지로 확장집합의 첫번째 값만 가져오기 때문에 :checked를 안해주면 선택이 되었던 안되어있던 첫번째

라디오 버튼의 value값을 가져온다.

$("[type=radio]").val("c"); // 셋팅 안됨
$("[type=checkbox]").val("가"); // 셋팅 안됨
$("[type=text]").val("텍스트 박스"); // 셋팅 됨
$("select").val("Multiple"); // 셋팅 됨

$("[type=radio]").val(["c"]); // 셋팅 됨

$("[type=checkbox]").val(["가"]); // 셋팅 됨
$("[type=text]").val(["텍스트 박스"]); // 셋팅 됨
$("select").val(["Multiple"]); // 셋팅 됨

<select>에 배열로 넘기면 멀티 선택이 가능하고 (multiple="multiple" or multiple="true")

text박스에 배열로 넘기면 (["가","나","다"])

가,나,다 <= 요따구로 셋팅된다

.

<form action="" class="form">
	<p>(*) 항목은 반드시 입력해 주세요.</p>
	<ul>
		<li>
			<label for="uid">ID(*):</label>
			<input id="uid" />
			영문, 숫자, 언더스코어(_), 하이픈(-)이 포함된 3~16 문자.
		</li>
		<li>
			<label for="upw">PW(*):</label>
			<input id="upw" type="password" />
			영문, 숫자, 언더스코어(_), 하이픈(-)이 포함된 6~18 문자.
		</li>
		<li>
			<label for="mail">Email(*):</label>
			<input id="mail" value="@" />
		</li>
		<li>
			<label for="url">Web(*):</label>
			<input id="url" value="http://" />
		</li>
		<li>
			<label for="tel">Tel(*):</label>
			<input id="tel" />
			하이픈(-)은 입력하지 마세요.
		</li>
	</ul>
	<input type="submit" value="전송" />
</form>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
// <![CDATA[
jQuery( function($) { // HTML 문서를 모두 읽으면 포함한 코드를 실행

	// 정규식을 변수에 할당
	// 정규식을 직접 작성할 줄 알면 참 좋겠지만
	// 변수 우측에 할당된 정규식은 검색하면 쉽게 찾을 수 있다
	// 이 변수들의 활약상을 기대한다
	// 변수 이름을 're_'로 정한것은 'Reguar Expression'의 머릿글자
	var re_id = /^[a-z0-9_-]{3,16}$/; // 아이디 검사식
	var re_pw = /^[a-z0-9_-]{6,18}$/; // 비밀번호 검사식
	var re_mail = /^([\w\.-]+)@([a-z\d\.-]+)\.([a-z\.]{2,6})$/; // 이메일 검사식
	var re_url = /^(https?:\/\/)?([a-z\d\.-]+)\.([a-z\.]{2,6})([\/\w\.-]*)*\/?$/; // URL 검사식
	var re_tel = /^[0-9]{8,11}$/; // 전화번호 검사식

	// 선택할 요소를 변수에 할당
	// 변수에 할당하지 않으면 매번 HTML 요소를 선택해야 하기 때문에 귀찮고 성능에도 좋지 않다
	// 쉼표를 이용해서 여러 변수를 한 번에 선언할 수 있다
	// 보기 좋으라고 쉼표 단위로 줄을 바꿨다
	var
		form = $('.form'),
		uid = $('#uid'),
		upw = $('#upw'),
		mail = $('#mail'),
		url = $('#url'),
		tel = $('#tel');

	// 선택한 form에 서밋 이벤트가 발생하면 실행한다
	// if (사용자 입력 값이 정규식 검사에 의해 참이 아니면) {포함한 코드를 실행}
	// if 조건절 안의 '정규식.test(검사할값)' 형식은 true 또는 false를 반환한다
	// if 조건절 안의 검사 결과가 '!= true' 참이 아니면 {...} 실행
	// 사용자 입력 값이 참이 아니면 alert을 띄운다
	// 사용자 입력 값이 참이 아니면 오류가 발생한 input으로 포커스를 보낸다
	// 사용자 입력 값이 참이 아니면 form 서밋을 중단한다
	form.submit( function() {
		if (re_id.test(uid.val()) != true) { // 아이디 검사
			alert('[ID 입력 오류] 유효한 ID를 입력해 주세요.');
			uid.focus();
			return false;
		} else if(re_pw.test(upw.val()) != true) { // 비밀번호 검사
			alert('[PW 입력 오류] 유효한 PW를 입력해 주세요.');
			upw.focus();
			return false;
		} else if(re_mail.test(mail.val()) != true) { // 이메일 검사
			alert('[Email 입력 오류] 유효한 이메일 주소를 입력해 주세요.');
			mail.focus();
			return false;
		} else if(re_url.test(url.val()) != true) { // URL 검사
			alert('[Web 입력 오류] 유효한 웹 사이트 주소를 입력해 주세요.');
			url.focus();
			return false;
		} else if(re_tel.test(tel.val()) != true) { // 전화번호 검사
			alert('[Tel 입력 오류] 유효한 전화번호를 입력해 주세요.');
			tel.focus();
			return false;
		}
	});

	// #uid, #upw 인풋에 입력된 값의 길이가 적당한지 알려주려고 한다
	// #uid, #upw 다음 순서에 경고 텍스트 출력을 위한 빈 strong 요소를 추가한다
	// 무턱대고 자바스크립트를 이용해서 HTML 삽입하는 것은 좋지 않은 버릇
	// 그러나 이 경우는 strong 요소가 없어도 누구나 form 핵심 기능을 이용할 수 있으니까 문제 없다
	$('#uid, #upw').after('<strong></strong>');

	// #uid 인풋에서 onkeyup 이벤트가 발생하면
	uid.keyup( function() {
		var s = $(this).next('strong'); // strong 요소를 변수에 할당
		if (uid.val().length == 0) { // 입력 값이 없을 때
			s.text(''); // strong 요소에 포함된 문자 지움
		} else if (uid.val().length < 3) { // 입력 값이 3보다 작을 때
			s.text('너무 짧아요.'); // strong 요소에 문자 출력
		} else if (uid.val().length > 16) { // 입력 값이 16보다 클 때
			s.text('너무 길어요.'); // strong 요소에 문자 출력
		} else { // 입력 값이 3 이상 16 이하일 때
			s.text('적당해요.'); // strong 요소에 문자 출력
		}
	});

	// #upw 인풋에서 onkeyup 이벤트가 발생하면
	upw.keyup( function() {
		var s = $(this).next('strong'); // strong 요소를 변수에 할당
		if (upw.val().length == 0) { // 입력 값이 없을 때
			s.text(''); // strong 요소에 포함된 문자 지움
		} else if (upw.val().length < 6) { // 입력 값이 6보다 작을 때
			s.text('너무 짧아요.'); // strong 요소에 문자 출력
		} else if (upw.val().length > 18) { // 입력 값이 18보다 클 때
			s.text('너무 길어요.'); // strong 요소에 문자 출력
		} else { // 입력 값이 6 이상 18 이하일 때
			s.text('적당해요.'); // strong 요소에 문자 출력
		}
	});

	// #tel 인풋에 onkeydown 이벤트가 발생하면
	// 하이픈(-) 키가 눌렸는지 확인
	// 하이픈(-) 키가 눌렸다면 입력 중단
	tel.keydown( function() {
		if(event.keyCode==109 || event.keyCode==189) {
			return false;
		}
	});
});
// ]]>
</script>

<!doctype html>

모바일웹 이나 웹을 만들경우 스크롤을 내렸을 경우 다시 Top 으로 올라갈 때 유저가 불편할 수 있으므로 어느정도 스크롤을 내리면 위로 자동으로 올려주는 기능이 필요합니다.~
그래서 간단히 구현한 위로 올라가기 animate 으로 화면을 이쁘게~

TEST
http://jjh889.lovepc.net/c/demo-scroll-top/scrolltotop.html   

<html lang="kr">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function(){

 $("#back-top").hide();
 //alert($(window).height());  // 윈도우 크기 현재 창
 $(function () {
  $(window).scroll(function () {
   if ($(this).scrollTop() > 1000) { // 스크롤 내린 크기
    $('#back-top').fadeIn();
   } else {
    $('#back-top').fadeOut();
   }
  });

  $('#back-top a').click(function () {
   $('body,html').animate({
    scrollTop: 0
   }, 300);   // 애니메이션 속도 작을 수록 빨라요~
   return false;
  });
 });

});
</script>

<style>
body {
 font: .88em/150% Arial, Helvetica, sans-serif;
 margin: 30px auto;
}
h1 {
 font: bold 80%/120% Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 margin: 0 0 10px;
 color: #999;
}
h2 {
 font-size: 2.5em;
 margin: 0 0 8px;
}
h3 {
 font-size: 1.6em;
 margin: 20px 0 5px;
}
a {
 color: #69C;
 text-decoration: none;
}
a:hover {
 color: #F30;
}
p {
 margin: 0 0 10px;
}
em {
 font: italic 100% "Times New Roman", Times, serif;
}
.credits {
 border-bottom: solid 1px #eee;
 padding-bottom: 10px;
 margin: 0 0 30px;
}
#pagewrap {
 margin: 0 auto;
 width: 600px;
 padding-left: 150px;
 position: relative;
}

#back-top {
 position: fixed;
 bottom: 30px;
 margin-left: -150px;
}
#back-top a {
 display: block;
 text-align: center;
 font: 11px/100% Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 text-decoration: none;
 color: #bbb;
 /* background color transition */
 -webkit-transition: 1s;
 -moz-transition: 1s;
 transition: 1s;
}
#back-top a:hover {
 color: #000;
}
/* arrow icon (span tag) */
#back-top a:hover span {
 background-color: #777;
}
</style>

</head>

<body id="top">
<div id="pagewrap">
 <h1>Seok-In</h1>
 <h2><a href="http://smartjuho.tistory.com/">스크롤 테스트</a></h2>
 <p class="credits"><em>by <a href="http://smartjuho.tistory.com/">juho</a></em></p>
 <p>&darr; scroll down</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>더내려~~~~</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>&darr;</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 <p>←</p>
 
 <p id="back-top">
  <a href="#top"><span></span>▲ 위로 gogo ▲</a>
 </p>

</div>
</body>
</html>

------------------------------

<?xml version="1.0" encoding="utf-8" ?>

<Company CompanyType="Private">

  <CompanyName>닷넷코리아</CompanyName>

  <CompanyNumber>1234</CompanyNumber>

  <CompanyAddress>서울</CompanyAddress>

  <Name>레드마이너스</Name>

</Company>

-------------------------------

// JSON 데이터

var tableData = [

    { "Num": "1", "Name": "홍길동", "Title": "안녕" },

    { "Num": "2", "Name": "백두산", "Title": "방가" },

    { "Num": "3", "Name": "임꺽정", "Title": "또봐" }

];

var htmls = '';

htmls += "<table border='1'>"

htmls += "<tr><th>번호</th><th>이름</th><th>제목</th></tr>";

$.each(tableData, function() {

    htmls += "<tr>";

    htmls += "<td>" + this['Num'] + "</td>";

    htmls += "<td>" + this['Name'] + "</td>";

    htmls += "<td>" + this['Title'] + "</td>";

    htmls += "</tr>";

});

htmls += "</table>";

$('#ctlGrid').html(htmls); // ctlGrid는 포함될 HTML에 있는 레이어

==================================

03.JQuery.getScript.htm

-----------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>하나의 완성된 자바스크립트 파일을 동적 로드/실행</title>

    <script src="../Js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#btn").click(function() {

                // 아래 코드가 실행되는 시점에 js 파일의 기능 실행됨

                $.getScript('03.jQuery.getScript.js');

            });

        });

    </script>

</head>

<body>

<input type="button" id="btn" value="표그리기" />

<div id="ctlGrid">

</div>

</body>

</html>

02.JQuery.getJSON.js

--------------------------------

[

    {

        "Num": "1",

        "Name": "홍길동"

    },

    {

        "Num": "2",

        "Name": "백두산"

    },

    {

        "Num": "3",

        "Name": "한라산"

    },

    {

        "Num": "4",

        "Name": "북한산"

    },

    {

        "Num": "5",

        "Name": "도봉산"

    },

    {

        "Num": "6",

        "Name": "뒷산"

    }

]

=========================================

02.JQuery.getJSON.htm

------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>비동기적으로 JSON파일 로드</title>

    <script src="../Js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function() {

            $("#btn .btnLoad").click(function() {

                $.getJSON("02.jQuery.getJSON.js", function(data) {

                    $('#pnlDisplay').empty(); // 패널(div)의 내용 초기화

                    var table = "<table border='1'><tr><td>인덱스</td><td>번호</td><td>이름</td></tr>";

                    // data를 탐색 : each() 메서드를 사용해서 데이터가 있는만큼 반복

                    $.each(data, function(index, entry) {

                        table += '<tr>';

                        table += '<td>' + index + '</td>';

                        table += '<td>' + entry["Num"] + '</td>';

                        if (entry["Name"]) { //특정 필드를 비교할 때 이러한 표현법 사용

                            table += '<td>' + entry["Name"] + '</td>';

                        }

                        table += '</tr>';

                    });

                    table += "</table>";

                    $('#pnlDisplay').append(table); // 패널에 추가하기

                });

            });

        });

    </script>

</head>

<body>

    <div id="btn"><div class="btnLoad">HTML읽어오기</div></div>

    <div id="pnlDisplay">

    </div>

</body>

</html>

 $.ajax({           // 실행 함수
  type:"POST",      // get.post 가능
  url:"ajax.jsp",       // 호출 url
  dataType: "json",              //date 타입  xml,text 등
  data:"point=1&gift=2",   // url 에 보낼 파라미터 값
  timeout:3000,              //제한시간 설정 가능
  cache:false,                // true, false
  error:function(request, status, error){   // 에러 발생 시   status 400 이 성공 그 외 404, 500 등
   alert("에러!");
  },
  success:function(msg){     // 성공 시 콜백  msg 에 data
   alert("성공");
  },
  beforeSend:function(){     // ajax 통신을 시작하기 전에 콜백
   alert("통신시작");
  },
  complete:function(){        //완료 후 실행할 콜백 함수 정의
   alert("통신완료");
  }
 });

 /**
  *  상황에 따라 적절하게 함수 사용 아래 상황 예제 샘플
  *  html document  완성 시  onload 와 유사함
  */
  jQuery(document).ready(function(){
   $.ajax({
    type:"GET",
    url:"ajax.jsp",
    data:param,
    success:function(msg){
     html_id.innerHTML = msg;    // text 로 태그 통신 시 html 삽입 하기
     $('.html_id').append(msg);    // 위와 같은 jQuery 방식 이거 쓰지마셈
     // '.html_id' <-- 이놈은 <div class='html_id'></div>
     // '#html_id' <-- 이놈은 <div id='html_id'></div>
     // 선언을 어떻게 하냐에 틀리고 적절하게 사용 하면 됨
    }
   });
  });

  /**
   * 엘리먼트 클릭 등 dom 의 변화에 따른 이벤트  id , class 등 지정 가능
   *  Ex id = # , class 는 . 으로 구분 css 문법과 같음~!
   */
 $(function() {
  $('#divId').click(function() {  // function 으로 감싸지 않고 아래의 예제처럼도 사용가능
   $.ajax({
    type:"GET",
    url:"ajax.jsp",
    data:"page="+3,
    success:function(msg){
     html_id.innerHTML = msg;    // text 로 태그 통신 시 html 삽입 하기
     $('.html_id').append(msg);    // 위와 같은 jQuery 방식
    }
   });
  });
 }); 
 
 /**
 * form submit 시 콜백 id, class 등 지정
 */
 $("formName").submit(function(){
  
 });
 
  /**
  * 함수 호출을 통한 ajax
  * <a href='board_list.php?page=1&code=2' >page전환</a> <--이거를
  * <a href='paging(1,2)' >page전환</a> 이런식으로 함수에 보내서 하면 되겠지~?
  */
 function paging(page,code){
  // POST 방식도 아래 param 처럼 만들어서 보내면 됨
  var param = "board_code="+code+"&page="+page;
  $.ajax({
   type:"GET",
   url:"board_list.php",
   dataType: "text",  
   data:param,
   success:function(msg){
    board_list_area.innerHTML = msg;
   }
  });
 }

 $(function() {
  $('[name=samju]').click(function() { 
   alert($(this).val());
  });
 }); 

 $(function() {
  $('[name=samju]').click(function() { 
   $(this).val(function(index,value){
    alert(this.value);
    alert(this.index);
   });
  });
 }); 

  $("button").click(function () {
      var text = $(this).text();
      $("input").val(text);
    });

  $("input").keyup(function () {
      var value = $(this).val();
      $("p").text(value);
    }).keyup();

 $('select.foo option:selected').val();    // 드롭박스에서 선택된 것을 가져옴
 $('select.foo').val();                    // 드롭박스에서 좀더 쉽게 값을 가져옴
 $('input:checkbox:checked').val();        // 체크가 된 체크박스의 값을 가져옴
 $('input:radio[name=bar]:checked').val(); // 라디오버튼 중 선택된 값을 가져옴

/**

<p>
  Once there was a <em title="huge, gigantic">large</em> dinosaur...
</p>

  The title of the emphasis is:<div></div>
  em 태그에서 title 속성을 가져와 title 변수로 넣음
**/

var title = $("em").attr("title");
  $("div").text(title);

  $('#greatphoto').attr({
   alt: 'Beijing Brush Seller',
   title: 'photo by Kelly Clark',
   src : './img/image.jpg'
});
// ID 가 greatphoto 인 이미지 태그에서 attr 속성을 불러오며 바로 값도 넣을 수 있음

$("button:gt(1)").attr("disabled","disabled"); // 버튼등의 비활성도 가능

/**
 <div></div>
  <div></div>
  <div></div>
 **/

    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!")) .css("color", "red");

// Wow!!!! Such excitement...   Wow   와  Such excitement 사이에 !!! 빨간색 텍스트를 추가

//----------------------------------------------------------
// 배열 관련

var x = [0, 3, 1, 2];
console.log(x.reverse()); // x = [2, 1, 3, 0]
console.log(x.join(" – ")); // x = "2 - 1 - 3 - 0"
console.log(x.pop()); // x = [2, 1, 3]
console.log(x.unshift(-1)); // x = [-1, 2, 1, 3]
console.log(x.shift()); // x = [2, 1, 3]
console.log(x.sort()); // x = [1, 2, 3]
console.log(x.splice(1, 2)); // x = [2, 3]

// <div>Click here</div> 클릭 하면 파란색으로 바꾸기 파란색 -> 검정색 이런식..
$(document.body).click(function () {
      $("div").each(function (i) {
        if (this.style.color != "blue") {
          this.style.color = "blue";
        } else {
          this.style.color = "";
        }
      });
    });

/**
  <div></div>
  <div></div>
  <div id="stop">Stop here</div>
  <div></div>
 
3번 째 div 를 만나면 stop   false 를 리턴하면 멈춤
**/

 $("button").click(function () {
      $("div").each(function (index, domEle) {
        // domEle == this
        $(domEle).css("backgroundColor", "yellow");
        if ($(this).is("#stop")) {
          $("span").text("Stopped at div index #" + index);
          return false;
        }
      });
    });

/**

reverse() : 배열 순서를 뒤집기
 join('key') : key 값으로 배열요소를 문자열로 만들어줌
pop() : 배열의 맨 마지막 요소를 삭제하고 삭제된 해당 값을 반환함
unshift(값) : 값을 배열의 0번째 요소에 삽입하고 이전 요소를 하나씩 뒤로 밀어낸 후, 배열의 길이를 반환함(ie는 undefined를 반환함)
shift() : 배열의 맨 처음 요소를 삭제하고 삭제된 해당 값을 반환함
splice(index, 몇개) : index위치 부터 몇개를 삭제한 후 삭제된 요소들을 반환해 줍니다.

**/

// $.inArray(value, array);    값으로 배열 index 찾기
var index = $.inArray(2, [1, 2, 3, 4, 5]);          // 해당 index 변수에는 1이 할당된다.

$.makeArray(object);
//NodeList와 같은 변환될 유사 배열 객체, 이 함수를 사용하면 jQuery를 사용하지 않고 XML 문서를 순회할 때 NodeList 객체를 편리하게 다룰 수 있다

// 마우스 오버 이벤트 샘플
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));    //.appendTo("<span> ***</span>"") 마지막 요소에 추가
  },
  function () {
    $(this).find("span:last").remove();
  }
);

// Text 붙이기
// div class="inner">Hello</div>

$('<p>Test</p>').insertAfter('.inner');  //class inner 뒤에 <p> Tag 를 붙임  반대  .insertAfter()  앞에 붙이기  $('.inner').after('<p>Test</p>');

// Tag 를 DIV 로 감싸기

// <div class="inner">Hello</div>
//   <div class="new">
// <div class="inner">Hello</div>
//</div>

$('.inner').wrap('<div class="new" />');  // 위와 같이 태그를 감쌀 수 있음   // .wrapAll( wrappingElement )  로 많이 사용?