자바블로그

$(opener.document).find(찾으려는 객체 id/class/element)

$("찾으려는 객체 id/class/element",opener.document).val("")

jQuery로 선택된 값 읽기

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

$("#select_box > option:selected").val()

$("select[name=name]").val();

jQuery로 선택된 내용 읽기

$("#selectBox option:selected").text();

선택된 위치

var index = $("#test option").index($("#test option:selected"));

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

// Add options to the end of a select

$("#selectBox").append("<option value='1'>Apples</option>");

$("#selectBox").append("<option value='2'>After Apples</option>");

// Add options to the start of a select

$("#selectBox").prepend("<option value='0'>Before Apples</option>");

// Replace all the options with new options

$("#selectBox")

.html("<option value='1'>oranges</option><option value='2'>Oranges</option>");

// Replace items at a certain index

$("#selectBox option:eq(1)")

.replaceWith("<option value='2'>apples</option>");

$("#selectBox option:eq(2)")

.replaceWith("<option value='3'>bananas</option>");

// 지정된 index 값으로 select 하기

$("#selectBox option:eq(2)").attr("selected", "selected");

// text 값으로 select 하기

$("#selectBox").val("Some oranges").attr("selected", "selected");

// value 값으로 select 하기

$("#selectBox").val("2");

$("#selectBox > option[@value=지정값]").attr("selected", "true");

// 지정된 인덱스 값의 item 삭제

$("#selectBox option:eq(0)").remove();

// 첫번째 item 삭제

$("#selectBox option:first").remove();

// 마지막 item 삭제

$("#selectBox option:last").remove();

// 선택된 옵션의 text 구하기

alert($("#selectBox option:selected").text());

// 선택된 옵션의 value 구하기

alert($("#selectBox option:selected").val());

// 선택된 옵션 index 구하기

alert($("#selectBox option").index($("#selectBox option:selected")));

// SelecBox 아이템 갯수 구하기

alert($("#selectBox option").size());

// 선택된 옵션 앞의 아이템 갯수

alert($("#selectBox option:selected").prevAll().size());

// 선택된 옵션 후의 아이템 갯수

alert($("#selectBox option:selected").nextAll().size());

// 0번째 item 다음에 삽입

$("#selectBox option:eq(0)").after("<option value='4'>Some pears</option>");

// 3번째 item 전에 삽입

$("#selectBox option:eq(3)").before("<option value='5'>Some apricots</option>");

// select box 값이 변경될때 선택된 현재값

$("#selectBox").change(function() {

           alert($(this).val());

           alert($(this).children("option:selected").text());

});

//선택된 selectbox의  index값 구하기(class를 이용해서 다중 선택박스를 사용하는 경우)

$(document).on("change", ".selectBoxClass",function(){

var index=$(".selectBoxClass").index(this);

});

http://blog.daum.net/twinsnow/124 참조

유투브 동영상을 플레이 하고 나서 특정한 작업을 하게 해야 하는 경우 

아래와 같이 player_api를 통해서 스크립트로 제어가 가능 합니다.

<script src="http://www.youtube.com/player_api"></script>

<script type="text/javascript">

    var player;

    function onYouTubePlayerAPIReady() {

        try {

            player = new YT.Player('movieViewDiv', {

                height: '500',

                width: '750',

                videoId: 'movieUrl',

                playerVars: {

                    'autoplay': 0,  

                    'controls': 0,   

                    'autohide': 0,  

                    'rel': 0,          

                    'wmode': 'transparent'

                },

                events: {

                    'onReady': onPlayerReady,

                    'onStateChange': onPlayerStateChange

                }

            });

        } catch (e) {

        }

    }

    function onPlayerReady(event) {

    //유튜브 플레이어가 다 만들어지면 호출됨

    }

    function onPlayerStateChange(event) {

        if (event.data === 0) {

        if(confirm("시청이 완료되었습니다.\n화면아래 다음 버튼을 클릭하시면 이동하시겠습니까?")==true){

location.href="";

        }else{

$("#nexBtnDiv").show();

        }

        }

    }

</script>

해당 스크립트는 동영상이 모두 플레이 되고 나서 다음 버튼이 출력 되고 해당 버튼이 선택 되면 페이지 이동을 하는 소스로 이외에도 events를 통해서 플레이어의 동작 상태에 대한 제어가 가능 하게 되어 있습니다.

기존에 동적으로 추가된 객체들을 jquery에서 관리하기 위해서 live()를 사용해서 처리 하던 부분을

1.9.x 버전 이후부터 on()으로 변경 되었습니다.

bind(), delegate() 또한 변경 되었습니다. 정확하게는 해당 메소드를 사용 못하게 해버렸다고 보면 될거 같습니다.

변경된 내용은 아래 와 같습니다.

1.bind

$( "#객체아이디" ).on( "click", function( e ) {} ); 

$( "#객체아이디" ).bind( "click", function( e ) {} ); 

2.live

$( document ).on( "click", "#객체아이디", function( e ) {} ); 

$( "#객체아이디" ).live( "click", function( e ) {} );

3.delegate

$( "#객체아이디" ).on( "click", "li a", function( e ) {} ); 

$( "#객체아이디" ).delegate( "li a", "click", function( e ) {} );

html2canvas.js 파일을 이용해서 현재 브라우저 화면을 이미지로 캡쳐해서 사용 할 수 있습니다.

해당 내용을 파일로도 저장 가능 합니다.

첨부한 파일을 실행시 chart_div안의 내용을 캡쳐 후 이미지 태그로 변경 하는 소스 입니다.

html2canvas.html

1. 선택된 option value 가지고 오는 부분

$('select[name="select name"] option:selected').val()

2. select의 option 삭제후 추가

$("#select아이티").empty();

$("#select아이티").append("<option value=''>옵션추가</option>");

정규식을 이용해서 replaceAll과 같이 구현 할 수 있다.

str.replace("#","");   ->  #를 공백으로 변경한다.

하지만 첫번째 # 만 공백으로 변경하고 나머지는 변경이 되지 않는다.

str.replace(/#/gi, "");    -> #를 감싼 따옴표를 슬래시로 대체하고 뒤에 gi 를 붙이면

replaceAll 과 같은 결과를 볼 수 있다.

escape(unicode)

encodeURI(utf-8)

encodeURIComponent(utf-8)

ajax등을 이용할때 한글이 깨지는 경우가 많이 발생 되는데 이 경우

encodeURIComponent(utf-8) ==> java.net.URLDecoder.decode(넘겨받은값", "UTF-8" ); 

같은 방식으로 전달 받을수 있다.

jquery사용 안할적의

내용 입니다.

style.left, style.top은 문서전체의 좌측상단을 기준으로 측정된 좌표값이고

event.clientX, event.clientY는 브라우저 클라이언트 영역의 좌측상단을 기준으로 측정된 좌표입니다.

스크롤이 되지 않은 상태에선 같은 값을 가지게 되지만,

스크롤이 된 상태라면 좌표값이 스크롤 된 양에 따라 달라집니다.

이를 일치시키려면 클라이언트 좌표에 스크롤 된 양을 더해서 계산에 포함시켜야 합니다.

 document.getElementById(obj).style.left = event.clientX + document.body.scrollLeft + 'px';

 document.getElementById(obj).style.top = event.clientY + document.body.scrollTop + 'px';

document.body.scrollLeft  및 document.body.scrollTop  가 스크롤을 움직여도 0으로 있을때

--> 소스 가장 위쪽에 <html> 보다 위에 <!DOCTYPE ....>이라고 된 부분을 삭제 하시고 확인!!