Peng's Happy Life~!Peng's Happy Life~!

css  변경
제거 : $("#name").css("border", "none");
추가 : $("#name").css("border", "5px"); 

class 변경
제거 : $("#name").removeClass("클래스명");
추가 : $("#name").addClass("클래스명");  

• .change( handler(eventObject) )

  handler(eventObject)A function to execute each time the event is triggered.

• version added: 1.4.3.change( [eventData], handler(eventObject) )

  eventDataA map of data that will be passed to the event handler.

  handler(eventObject)A function to execute each time the event is triggered.

• version added: 1.0.change()

For example, consider the HTML:

<form>
  <input class="target" type="text" value="Field 1" />
  <select class="target">
    <option value="option1" selected="selected">Option 1</option>
    <option value="option2">Option 2</option>
  </select>
</form>
<div id="other">
  Trigger the handler
</div>

The event handler can be bound to the text input and the select box:

$('.target').change(function() {
  alert('Handler for .change() called.');
});

 jQuery를 이용한 show 와 hide, 그리고 이 것을 하나의 버튼에 구현하는 toggle 입니다. 

<div id='theDiv'></div>
<button id='show'>Show</button>
<button id='hide'>Hide</button>
<button id='toggle'>Toggle</button>

<script type='text/javascript'>
$(function() {
     $('#show').click(function(){
     $('#theDiv').show();
});
     $('#hide').click(function(){
     $('#theDiv').hide();
});
     $('#toggle').click(function(){
     $('#theDiv').toggle();
});
});
</script>

style.display = "none"; 
style.display = "block"; 

하던것을 쉽게 사용할수 있을듯하네요 

1. 개수 구하기

$("input[name=chk1]:checkbox:checked").length

2. 체크여부 확인


$("#check_all").is(':checked')

3.  chk1 개수만큼 돌면서 실행한다

  $("input[name='item[]']:checkbox:checked").each(function(){items.push($(this).val());}); 

  var items_str = items.join(',');

  또는 var items_str = items.toString();

  또는 var items_str = $("input[name='item[]']:checkbox:checked").map(function () {return this.value;}).get();

4. disabled 하기

$("input[name=chk1]").attr('disabled', 'true');

select box의 내용 가져오기
$("#select_box > option:selected").val();

select box의 값 설정
 $("#select_box > option[value=지정값]").attr("selected", "true")

select disabled 
$('#select_box ').attr('disabled', 'true');
해제 $('#select_box ').attr('disabled', ''); // 'false'를 줬을경우 안됨

URL : http://nyromodal.nyrodev.com/

레이어 팝업 띄우는 플러그인 

URL 가서 예제 보면 쉽게 사용할수 있음~ 

정보 URL : http://calisza.wordpress.com/2008/11/03/javascript-jquery-bookmark-script/

 jqbookmark.js 파일을 임포트 하고

<a href="링크URL" title="즐겨찾기 이름" class="jqbookmark"><img src="/admins/images/login/btn_favor.gif" alt="" class="atbtn" style="cursor:pointer;" /></a>

이렇게 사용 

다운로드 경로 : https://github.com/carhartl/jquery-cookie

간단 사용법

js 파일(jquery.cookie.js) 임포트 한 후

<쿠키생성>

1. 세션 쿠키(Session Cookie)

세션 쿠키는 브라우저 열려있는 동안만 유지된다

$.cookie('key' , 'value');

2. 만료일 지정한 쿠키

$.cookie('key' , 'value', { expires : 값 });

값의 단위는 일(日)단위 이다

주의할 점은 위 생성방식 모두 디폴트로 쿠키가 만들어진 페이지 경로에만 쿠키가 적용된다

모든 페이지에 쿠키를 적용하려면 아래와 같이 path : '/' 를 설정 해야 한다

$.cookie('key' , 'value', { expires : 값, path : '/' });

$.cookie('key' , 'value', { path : '/' });

<쿠키 읽기>

$.cookie('key');

위처럼 하면 저장된 값을 반환한다. 해당 key가 없다면 null 반환

<쿠키삭제>

$.cookie('key', null);

path 옵션을 주어 쿠키를 만들었다면 삭제할때 역시 같은 path 옵션을 줌 (이것 떄문에 삽질 대박함)

<쿠키 생성시 옵션 항목>

expires : 365

쿠키 만료를 일단위로 설정한다 생략하면 세션 쿠키로 만들어진다

path : '/'

쿠키가 적용되는 페이지 경로. 사이트 전체 페이지에 적용하려면 위와같이 설정

domain : 'domain.com'

쿠키가 적용될 도메인 디폴트가 쿠키가 만들어진 도메인이다

secure : true

디폴트는 false 다. true로 설정하면 쿠키전송은 https 프로토콜로만 가능

raw : true

디폴트는 false이다 false 일 경우는 쿠키는 생성되거나 읽을 떄 기본적으로 인코딩/디코딩을 한다(encodeURIComponent / decodeURIComponent 이용)