사월은 봄이다.

- JSON 문자열

var jString = '{"key" : "myKey"}';

- JSON parse

var data = JSON.parse(jString) ;

alert( data.key ) ;

jQuery  에서는

var jString = '{"key" : "myKey"}';

var data = jQuery.parseJSON(jString) ;

alert( data.key ) ;

이거의 반대의 경우가 있다.

JSON.stringify

이녀석은 객체 또는 배열을 인자로 받아서 JSON 문자열로 만들어 줌

var a = { 

name: "nk"

,age : "14"

,like : ["a", "b" , "c"]

}

var j = JSON.stringify(a);

결과:

{"name" : "nk" , "age" : "14"  , "like" : ["a", "b" , "c"]}

자꾸 잊어버림..

그러면 자꾸 쓰자!

h1  태그 중에서 id 속성이 'abc'인 객체를 선택한다

$('h1#abc').css('color' , 'red');

클래스 속성으로 item 과 select를 모두 가진경우, 붙여서 사용한다.

$('.item.select').css('color' , 'red');

<h1 class='item select'>d dsfjdksjfklsdj </h1>

$('부모 > 자식').css('color' , 'red');

가로 스크롤을 만들고 싶었다.

이건 div 안에 테이블을 넣어서 td를 추가 하는 방식으로 한 거다.

하지만 내가 원하는건,

div 안에 div를 추가하여 가로 스크롤이 생기게 하고 싶었으나,

이렇게, 부모 div의 크기를 넘어서 자식 div가 추가 되면 사이즈에 맞게 알아서 세로 스크롤이 생겨버린다.ㅠㅠ

아무리 찾아봐도 뚜렷한 해결책이 보이지 않아 결국...

부모 div > 자식 div 구조에서 부모 div > 감싸는 div > 자식 div 로 구조를 바꾸었다... 

그리고 부모 div에 overflow:auto를 주고,

감싸는 div의 width를 자식 div 가 추가 될 때마다 동적으로 늘여 주었다.

하하하하하하

그리고, jquery의 scrollLeft( 위치 ) 를 주어서 자식 div가 늘어나면 가로 스크롤이 그만큼 이동하도록 해주었다.

뭔가 더 간단한 방법이 있을까 ? 했으나 못찾고 시간없어서 이렇게 완료함

ㅠㅠ

var widthSize = $J('#widthSize').val() ;

   var gps = parseInt(widthSize) + parseInt(225) + 'px'; 

   $J('#widthSize').val(gps);

   $J('.div-contents').css('width', gps) ;

   $J('.div-wrap').scrollLeft(parseInt(gps) - 50);

text 박스의 값 전부 초기화 하기

$J(':text').val('');

...

이거때문에 엄청 고민했음

특정 아이디 값의 필드를 제외하고 text 초기화

$J(':text:not([id=area])').val('');

1. 부모 페이지의 selector 접근 하기 

  $J('#부모페이지원하는노드id', parent.document).trigger('click');

  $J('#부모페이지원하는노드id', parent.document).css('머를', '머로바꿔라');

...

2. 부모 페이지의 다른 iframe에 접근 하기

$J('#부모페이지내다른iframe원하는노드id', parent.frames["iframeid"].document).css('머를', '머로바꿔라');

웹 프론트엔드정리하자 정리

$.get(url , data, function(data, status,xhr), dataType)

url : 요청을 보낼 url

data : 보낼 데이터...

function : 몰라...

dataType:응답받을 데이터 타입

xml, html, text, script,json, 이 있음

- 요청 url만 있으며 리턴 값 무시

$.get('/popup') ;

- 요청 url , 데이터, 리턴 값 무시

$.get('/popup', {id:'myname', pw:'0000'}) ;

- 요청 url, 리턴 값

$.get('/popup', function(data){ alert(data) ; }) ;

- 요청 url, 리턴 값 ,  결과값 형식

$.get('/popup', function(data){ alert(data) ; }, 'text') ;

>> get 이나 post나 문법은 같은 듯

- url + 데이터 + 리턴 후 메시지

-요청 url + 데이터 + 완료 후 리턴 메시지

$.ajax({

          type: "post",

          url: url1,

         }).done(function(data){

          alert(data);

         });

- 최종 버전 리턴 html 가져오기

$.ajax({

          url: url1,

   cache:false

         }).done(function(data){

          $('#result').append(data);

         });

- 서버에 데이터 보낸 후 처리, 리턴 메시지 보여주기와 실패시 메시지

var req = $.ajax({

 url:'/popup' ,

 type:'post',

 data: {id:'1111'},

 datayType:'html'

});

req.done(function(msg){

 $('#show).html(msg);

});

req.fail(function(msg, textStatus){

 alert('fail!' + textStatus);

});

- js 로딩 및 실행

$.ajax({

          type: "get",

          url: 'mask.js',

   dataType:'script'

         });

일단, 자바 쪽 코드

String selectedData = request.getParameter("selectedData");

  HashMap<String, Object> map = new HashMap<String, Object>();

  map.put("selectedData", selectedData);

  List<ChildDataVO> childList = new ArrayList<ChildDataVO>() ;

  childList = homeSrv.getChildDataList(map);

  HashMap<String, Object> mapData = new HashMap<String, Object>();

  mapData.put("childList", childList);

  JSONObject jso = new JSONObject();

  jso.put("result", mapData);

  try {

   response.setContentType("application/json");

   response.setCharacterEncoding("UTF-8"); // 이 부분은 jsp 에서 한글이 깨져서 넣어주었다.

   PrintWriter out = response.getWriter();

   out.println(jso);

   out.close();

  } catch (IOException e) {

   e.printStackTrace();

  }

List로 DB 에서 받아온 값들을 HashMap<String, Object> 에 넣는다.

그리고 이걸 json Object에 넣어!

그러면 이 값이 화면 단으로 넘어가겠지 ?

이제, 화면단 소스(js)

$J.ajax({

       type: "post",

       url: url,

       data : 'selectedData='+param

       ,contentType: "application/x-www-form-urlencoded; charset=UTF-8"

       ,success : function(data){

        console.log('sucess');

        $J("#childDataList").find('option').remove();

        var result  = new Array();

        result = data.result.childList ;

        console.log(result[0].dataId);

        $J.each(result, function(i,result){

         $J('#childDataList').append($J("<option/>", { value: result.dataId, text: result.dataName }));

        });

       }

      }).done(function(data){

      });

보면 list로 넘어온 object를 스크립트에서 array를 선언해 넣는다.

그 뒤. .each() 함수를 이용했는데, 아직 잘 이해는 안간다.

저기서 value 값엔 data의 id를 text엔 name을 넣은 것이다.

헷갈려....=ㅂ=

1. 

$(function(){

  ..

});

그냥 함수를 실행하라는 의미

2.

(function($){

... jQery 플러그인을 정의

})(jQuery);

보통 prototype.js와 jqery를 같이 사용하는경우 종종 $가 충돌이 날 때가 있다.

그래서 함수로  $를 매개변수로 넘기는 것!

http://linuxism.tistory.com/666

참고 : http://mooki83.tistory.com/2656587

$('#userName').siblings('label').show() ;

$('select[name=areaCode]').attr('disabled', true);

$('select[name=classCd]').attr('disabled', false);

선택된 값 읽기

$("#areaCode  option:selected").val();

$('select[name=classCd]').val();

선택된 위치

var idx = $('#classCd option').index($('#classCd option:selected'));

셀렉트 박스 선택

 $('#areaCode').change(function(){});

value 값으로 선택하기

$J('#selectBox').val('값');

<select name="popupOpt" id= "popupOpt" class="frm_select" style="width:300px;">

                         <option value="N">메인출력</option>

                         <option value="L">로그인시출력</option>

                     </select>

셀렉트 박스의 경우 readonly 기능이 없다.

셀렉트 박스의 disable은 submit 시에 값이 반영되지 않는다!!!!!!!!!!!!!!

결국 submit 직전에 disable을 풀어야 한다. 헐....