이건없지

jquery를 이용해서 index 값 알아내기

<div class="checkbox">
 <label>
   <input type="checkbox"> 1. okkks.tistory.com
 </label>
 <label>
   <input type="checkbox"> 2. okkks.tistory.com
 </label>
 <label>
   <input type="checkbox"> 3. okkks.tistory.com
 </label>
</div>

<script type="text/javascript">
$('.checkbox input').click(function() {
 alert($('.checkbox input').index(this)); // index 값 알아내기
});
</script> 

더보기>

- jquery css 변경 - 선택한 메뉴를 활성화하고 나머지 메뉴는 비활성화하기

jquery를 이용해서 메뉴 목록에서 선택한 메뉴(탭, 버튼)를 활성화 시키고 나머지는 비활성화 시키기

<style type="text/css">
ul {list-style-type:none;max-width:200px;}
.list {border:1px solid #cccccc;padding:5px;} /* 기본 css 및 선택하지 않은 경우 */
.list.on {border:1px solid #000000;} /* 선택한 경우 css */
</style>

<ul>
 <li class="list"><a href="javascript:;">1. okkks.tistory.com</a></li>
 <li class="list on"><a href="javascript:;">2. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">3. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">4. okkks.tistory.com</a></li>
 <li class="list"><a href="javascript:;">5. okkks.tistory.com</a></li> 
</ul>

<script type="text/javascript">
$('li').click(function() {
 $('li').removeClass('on');
 $(this).addClass('on');
});
</script>

더보기>

- jquery를 이용한 index 값 알아내기

/* 특정 쿠기 삭제
ck_name : 쿠키 이름
*/
function del_cookie(ck_name) {
    set_cookie(ck_name, "", 0 , 0);
}

del_cookie('site_name');        // 쿠키 삭제

참고> javascript cookie 생성

/* 쿠키 생성
초단위
ck_name : 쿠키 이름
ck_val : 쿠키 값
t_type : 시간 종류
t_val : 시간 값
*/
function set_cookie(ck_name, ck_val, t_type, t_val) {
    var expire = new Date();
    var ary_time_type = [1000, (1000*60), (1000*60*60), (1000*60*60*24)]; // 초, 분, 시, 일
    v = (ary_time_type[t_type] * t_val);
    expire.setTime(expire.getTime() + v);
    cookies = ck_name + '=' + escape(ck_val) + '; path=/ '; // 한글 깨짐 막기 : escape(cValue)

    if(typeof t_val != 'undefined') cookies += ';expires=' + expire.toGMTString() + ';';

    document.cookie = cookies;

}

set_cookie('site_name', 'okkks.tistory.com', 0, 10);    // 쿠키 생성(보유시간:10초)

참고> javascript cookie 삭제

json 형식으로 넘어오는 데이터 중 \n 부분을 자바스크립트에서 처리하는 방법

[php]

<?

$ary_rtn = array();

$ary_rtn['result'] = false;

$ary_rtn['msg'] = "안녕하세요\okkks.tistory.com 블로그에 방문해주셔서 감사합니다.";

echo json_encode($ary_rtn);    // php json encode

exit;

?>

[javascript/jquery]

 $.post(
  '전송할 json 파일경로'
  ,전송할 데이터들
  ,function(data){
   var rtn_json = $.parseJSON(data); // 데이터를 JSON으로 파싱

    if(rtn_json['result']) {
     location.replace('/');
   } else if(rtn_json['msg']) {
    var msg = rtn_json['msg'].replace(/\\n/g, '\n');
    alert(msg);
   } else alert('취소되었습니다.');
  }
 );

[ 처리 없이 바로 출력했을 경우] 

[\n 처리를 한 후 출력했을 경우]

더보기>

- php javascript jquery json 한글 깨짐 - json_encode() parseJSON()

[php]
<?

$que = "select name from tb";
$res = dbQuery($que);
$row = mysql_fetch_assoc($res);

$return['row'] = $row;

ob_start();
?>
<p>html '오케이' "okkks.tistory.com"</p>
<?
$return['html'] = ob_get_contents();

ob_end_clean();

$return['kor1'] = '오케이';
$return['kor2'] = urlencode('오케이');
$return['result'] = 'true';

echo json_encode($return);

?>

[javascript, jquery]
$.post(
          'php 파일 주소'
          ,전송할 값들
          ,function(data){
                    var json = $.parseJSON(data);
                    alert(json);
                    alert('row=' + json.row['name']);
                    alert('한글 1='+ json['kor1']);
                    alert('한글 2='+ decodeURI(json['kor2']));
                    alert('html=' + json['html']);
}); 

더보기>

- javascript, jquery json \n 처리

jquery를 이용해서 자기 자신을 포함한 HTML을 알아내기

<script type="text/javascript">

//=== outerHTML : jquery 용
$.fn.outerHTML = function()
{
    var th = $(this);
    if( !th[0] ) return "";
 
    if (th[0].outerHTML)
    {
        return th[0].outerHTML;
    }

    else
    {
        var content = th.wrap('<div>').parent().html();
        th.unwrap();
        return content;
    }
}

alert($('.okkks).outerHTML());

</script>

<div class="okkks">
 <div>okkks.tistory.com</div>
 <div>okkks.tistory.com</div>
 <div>okkks.tistory.com</div>
</div>

더보기>

- jquery 자신을 포함한 html값 알아내기 - innerHTML, outerHTML

키코드(event.keycode)값을 알려주는 사이트 : http://www.w3.org/2002/09/tests/keys.html

37 : 왼쪽 화살표 (←)

38 : 위쪽 화살표 (↑)

39 : 오른쪽 화살표 (→)

40 : 아래쪽 화살표 (↓)

13 : 엔터키 (Enter Key)

substring

첫 번째 인자는 시작지점, 두 번째 인자는 끝지점(옵션)

예>

var s = 'ABC1234';

s.substring(3) -> 1234

s.substring(0,3) -> ABC

substr

첫 번째 인자는 시작지점, 두 번째 인자는 추출할 문자열의 길이

예>

s.substr(3,1) -> 1

s.substr(0,3) -> ABC

s.substr(3,4) -> 1234 

String.prototype.atrim = function()
{
 return this.replace(/\s/g,'');
}

모든 공백을 제거한 후 값을 반환한다.

사용 예 : document.getElementById("id").value = document.getElementById("id").value.atrim();

<input type="text" onblur="this.value=this.value.atrim()" />

tirm() : 좌우 공백 없애기 더보기>