function callback() { //서버로부터 응답이 왔다면 일한다. if (xhr.readyState == 4) {//응답을 다 받은 경우 if (xhr.status == 200) {//응답코드가 200인 경우 - OK var resTxt = xhr.responseText;//서버가 보낸 응답
function callback1() { //서버로부터 응답이 왔다면 일한다. if (xhr.readyState == 4) {//응답을 다 받은 경우 if (xhr.status == 200) {//응답코드가 200인 경우 - OK var resTxt = xhr.responseText;//서버가 보낸 응답
var jobj = JSON.parse(resTxt); var txt = ""; txt = txt + "<option value='default'>소분류</option>";
for ( var i = 0; i < jobj.length; i++) { txt = txt+"<option value="+jobj[i].id+">"+jobj[i].name+"</option>"; } $("#third_category").html(txt); //or //$("#third_category").empty().append(txt); /* $(jobj).each(function(){ alert(this.id); alert(this.name); });//위의 for문을 jQuery의 each를 사용해서 다음과 같이 바꿀 수도 있다. */ } else { alert("요청처리가 정상적으로 안되었습니다.\n" + xhr.status); } } }
function callback2() { //서버로부터 응답이 왔다면 일한다. if (xhr.readyState == 4) {//응답을 다 받은 경우 if (xhr.status == 200) {//응답코드가 200인 경우 - OK var resTxt = xhr.responseText;//서버가 보낸 응답
var jobj = eval("(" + resTxt + ")");
var thead = document.getElementById("thead");
var childCnt = thead.children.length; for (var i = 0; i < childCnt; i++) { thead.removeChild(thead.firstChild); }
var tr = document.createElement("tr"); var td1 = document.createElement("th"); var td2 = document.createElement("th"); var td3 = document.createElement("th"); var td4 = document.createElement("th"); var td5 = document.createElement("th");
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){
$(".annotation").each(function(idx){//배열을 돌면서 하나씩 첨자 붙여주기each사용, function()에 매개변수 지정 : 반복 횟수(배열의 index)를 전달해준다.- 0부터 var i = idx+1; $(this).after("<sup>"+i+"<sup>");//<sup>윗첨자, <sub>아랫첨자 //$(this).append("<sup>"+i+"<sup>");//append를 사용하면 자식노드로 들어가서 배경색이 들어가고, after를 사용하면 span태그 밖으로 들어가서 배경색이 들어가지 않는다. }); }); </script> <style type="text/css"> .annotation { background: pink; } </style> </head> <body> <input type="button" id="prevBtn" value="이전페이지로"/> <input type="button" id="nextBtn" value="다음 페이지로"/> <h3>jQuery란?</h3> <div> <b>jQuery</b>는 가볍고 빠르며, 간결한 <span class="annotation">오픈소스</span> 스크립트 라이브러리입니다. 이를 이용하면 Rich 웹 UI를 개발하는 데 도움이 되는 다양한 기능들 즉, HTML 문서 <span class="annotation">트래버스</span>, 이벤트 처리, 애니메이션, <span class="annotation">Ajax</span> 상호 작용 등을 지원하여 빠르고 견고하게 리치 웹 애플리케이션 개발을 할 수 있도록 지원합니다. </div> <br /> <div id="btnDiv">DIV</div> </body> </html>
• attr(name) – 조회된 요소의 name Atribute의 값을 조회 • attr(key, value) – 모든 조회된 요소들의 attribute를 설정 • attr(key, 함수) – 모든 조회된 요소들의 attribute를 설정. 값은 함수 실행 후 return 값으로 설정 • attr(properties) – 모든 조회된 요소들의 attribute를 설정. – 여러 개의 attribute 설정시 사용 – properties는 key:value 쌍의 모음 • removeAttr(name) – 모든 조회된 요소들의 해당 attribute를 제거
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#allcheck").bind("click",function(){ var flag = $(this).attr("checked"); if(flag){//체크됬다면 $("input[name=menu]").attr("checked",true); }else{//체크되지 않았다면 $("input[name=menu]").attr("checked",false); } }); });
$(셀렉터).eaxh(function(){ $(this) }) //셀렉터를 조회했더니 배열을 조회 했을 경우 사용
$("#chkbtn").bind("click",function(){ var chk = $(":checkbox:checked"); var txt = ""; for(i=0;i<chk.length;i++){ txt = txt + $(chk[i]).val()+ ", "; } $("#showLayer").text(txt); });
//빨강색으로 된 부분을 아래와 같이 바꿔 쓸 수 있다.
//each() : $("배열 셀렉터").each(function) - jQuery 객체가 가지고 있는 배열 객체의 크기 만큼 반복하면서 함수 호출 $(":checkbox:checked").each(function(){ txt = txt + $(this).val()+",";//this를 가져오면 checkbox에서 선택된 값이 넘어오는데 val()함수가 jQuery것이어서 사용하기위해$(this)로 바꿔준다. });
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //$("input[type=text]").bind("blur",function(){//blur : 포커스를 잃었을경우 $(":text").bind("blur",function(){//input[type=text]와 : text는 같다. var txt = $(this).val();//value값 리턴 if(txt==""){ alert("값을 입력하지 않았습니다."); }else{ $(this).val("입력한 값 : "+txt); //value를 다시 입력한값 : txt로 셋팅 } }); $("#hp").bind("change",function(){ //select에서 선택된 option 조회 - val(); alert($(this).val()); }); $("#chkbtn").bind("click",function(){ var chk = $(":checkbox:checked"); var txt = ""; /* for(i=0;i<chk.length;i++){ txt = txt + $(chk[i]).val()+ ", "; } */ //each() : $("배열 셀렉터").each(function) - jQuery 객체가 가지고 있는 배열 객체의 크기 만큼 반복하면서 함수 호출 $(":checkbox:checked").each(function(){ txt = txt + $(this).val()+",";//this를 가져오면 checkbox에서 선택된 값이 넘어오는데 val()함수가 jQuery것이어서 사용하기위해$(this)로 바꿔준다. });
$("#showLayer").text(txt); }); });
</script> </head> <body> <form id="form1" name="form1" action="" method="post"> 이름 : <input type="text" name="name" id="name"><br> 나이 : <input type="text" name="age" id="age"><br>
• html() – 선택요소의 html 내용을 가져옴. innerHtml과 동일 • html(value) – 선택요소에 인수로 받은 value를 넣는다. – value내에 html태그가 있는 경우 태그로 들어간다. • text() – 선택요소 내의 html태그 요소를 제외한 내용을 가져옴 • text(value) – 선택요소 내에 인수로 받은 value를 넣는다. – value내의 html태그도 text로 들어간다. • val() – input 태그의 value 값을 조회 • val(value) – 인수로 받은 value를 input 태그의 value 값을 설정
• append(value) – 선택요소내의 content 뒤에 value를 붙인다. • prepend(value) – 선택요소내의 content 앞에 value를 붙인다. • appendTo(selector) – 선택된 요소를 selector로 선택된 요소내 내용 뒤에 붙인다. • prependTo(selector) – 선택된 요소를 selector로 선택된 요소내 내용 앞에 붙인다.
• after(value) – 선택된 요소 뒤에 value를 붙인다. • before(value) – 선택된 요소 앞에 value를 붙인다. • insertAfter(selector) – 선택된 요소를 selector 뒤에 붙인다. • insertBefore(selector) – 선택된 요소를 selector 앞에 붙인다. • remove() – 선택된 요소들을 삭제한다. • empty() – 선택된 요소들의 자식 요소를 삭제 한다.
category_list_jquery.jsp
category_list_jquery.zip
