jquery Api 활용

추천 책

jquery Api 활용 - 가메 출판사 (난이도 기초)

기본적인 jquery api 를 한글로 번역한후 샘플을 여러가지 만들어두었기때문에

프로젝트 막들어가서 보고 따라하기에 참 괜찮은 책인것같다.

 

더글라스 크락포트 자바스크립트 핵심 가이드 ( 어렵다...ㄷㄷㄷ)

위에 책을보고 프로젝트를 막 내생각대로 스크립트를 어렵게 해둔걸

이책을보면서 좋은 스크립트 짜는걸 진작알았으면...... 내 철야는 안했을것을....한다는..

 

자바스크립트는 넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌단 아이히(Brendan Eich)에 의해 처음에는 모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로 개발되었으며, 최종적으로 자바스크립트라고 이름을 변경하고서부터 많이 알려 졌습니다.

이 자바스크립트를 Ecma 인터내셔널에 제출하였던 것이니 실은 같은 것입니다.

 

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

jquery 는 다른 라이브러리에 비해 학습이 비교적 쉬운편에 속한다.

prototype.js 나 extjs 둘다 써봤는데 그래도 prototype.js 는 학습을 어느정도하고

프로젝트 중간에 투입해도 어느정도 손데서 고칠수있긴한데 exts 는 첨부터 핸들링역활을해주고

method 만들듯이 만들어야하기때문에 ...첨사용하는데 있어서 학습이필요합니다.

일단 jquery는 간단한 스크립트로도 복잡한 Ajax나 javascript 소스 코드를 간결하게 줄일수있다

단점은 잘못사용하면 퍼포먼스가 느리고 ..복잡해지는단점이있다.

 

jquery 상당히 매력적인 라이브러리 하지만 많이 사용하고 막사용하면 ..코드가 복잡해지고

유지보수할떄 ...힘들어서 야근을 하는수가있다...

 

일단. javascript는 대충아는데 명령어나 복잡한 소스코딩 귀차니즘으로인해 검색후 그대로 되있는

스크립트를 같다 붙이기만 했었는데 .. jquery 보면서 신세계를 보았다.학 이거뭐 완전 편한다는..

참고로 php를 해서그런지 .jquery 접근하는데 거부감이 다른사람보다 적었던것 같다.

jquery 로 흥한자 결국 jquery 로 망한다는 .....

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

jquery

1. Ajax form

function ajaxSubmitForm(expression, successFunc, beforeFunc) {
 var selector = $(expression);
 selector.ajaxForm( {
  dataType :'xml',
  cache: false,
  beforeSubmit : beforeFunc,
  success : successFunc
 });
}

 

2. ajax success

function successDefault(responseXML) {
 var result = $('result', responseXML).text();
 var resultMemo = $('resultMemo', responseXML).text();

 if (result == 'Y') {
  alert('저장이 완료되었습니다.');
 } else {
  //diaUnBlockUI();
  if(resultMemo=='') {
   alert('저장이 실패했습니다. <br>잠시후에 다시 시도해 주세요>');
  } else {
   alert(resultMemo);
  }
 }
}

 

3.Ajax post 방식

src = "액션.do";

  $.post(src, {
//action request 넘기는 값

    'ansNo' : num,
    'prodId' : prodId,
    'colse' : 'false',
    'pageNo' : pageNo

   }, function(data) {

전송완료후 리턴받는 data 값

원하는 부분을 비동기로교체하는 형태로 처리해주면됨
    var value = $(data).find("#ansProd"+num);
    var qtot = $("#qnaCount"+num).html();
    qtot *=1;
    $("#qnaCount"+num).html(qtot+1);
    $("#ansProd"+num).html(value).hide().fadeIn('slow');
jquery 간단하게 지원해주는 이팩트.. 신기하기는한데 ...화면을 재구성하기떄문에 위로 올라간다. 도메인뒤로 # 붙는거처럼 return false; 해줘도 소용이없다 .이거때문에 삽질한걸생각하면 ㅜㅜ ㄷㄷ

.hide().fadeIn('slow')  

 });

 

4.jquery plug in 을 사용한 레이어팝업

<script type="text/javascript" src="jquery.jmpopups-0.5.1.js" ></script>

 

- 레이어 팝업 닫기

// 최상단의 layer close
$.closePopupLayer(); // Open시 지정된 layer 죽이기
$.closePopupLayer("layer명");

 

- 페이지내 존재하는 display:none 된 object 를 layer 로 팝업할경우

 $.openPopupLayer({
name:"nickNameUpdateOK",
width: 452,
target: $("#targetObj")
});

 

- Html 내용을 Layer로 팝업할 경우

$.openPopupLayer({
name:"nickNameUpdateOK",
width: 452,
target: data,// Html 내용 data
isContent:true,// Html일 경우는 해당 옵션을true(디폴트:false)
afterClose: function() {document.location.href ="/mypage/mypage/smArtMedia.do";}// layer가 close된후 동작을 지정함
});

5. jquery Array

체크된값을 모두 || 연결해서 배열을 생성시킨다.

javascript 짤려면

이렇게 할것을

var obj = document.getElementsByName("schk");

 for(var i=0;i<obj.length;i++){
  if(obj[i].checked){selCnt++;
   var schkVal = obj[i].value;
  }
 }

 

요렇게 바꿔보아따 -0-소스...가 약간줄었나 하하하핫 -0-

var arrStr = jQuery.makeArray($("#schk:checked"));
 var arrRes="";
 jQuery.each(arrStr,function(i){
  arrRes+=$(this).val()+"||";
 });

 

5.Jquery selectors

- select 박스에 selected 된것만 찾는방법

id  name 두가지 방법다있다.

 

- name 찾는방법임.

var codeStr = $("select[name='"+periodSelect+"'] option:selected").val();

 

- id로 value 찾기

var prodId = $("#prodId").val();

 

- 엘리멘탈에 해당 ID에 css 클래스 삭제

$("#tab03").removeClass("tab03_off"); 

 

- 엘리멘탈에 해당 클래스 교체  

$("#tab03").toggleClass("tab03_on");

 

- 엘리멘탈에 attribute 추가및 변경

$("#imgMain").attr({src : mainImg,alt:"aa"});