신문과 프로그래머.

jQuery 1.9버전 이상에서는 보안상의 문제로 $.browser 와 관련된 함수들을 사용할 수 없다고 합니다.

하지만 편법으로 위와 같은 함수를 사용할 수 있습니다.

제가 사용하려 했던 함수는

$.browser.msie 함수로써 이 함수는 IE로 접속했을때 true 값을 줍니다.

그럼 jQuery 1.9버전 이상에서 해당 함수들을 사용하는 방법을 보겠습니다.

jQuery.browser={};(function(){jQuery.browser.msie=false;

jQuery.browser.version=0;if(navigator.userAgent.match(/MSIE ([0-9]+)\./)){

jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;}})();

이상 3줄의 코드를 <script>태그 속에 넣어 놓는다면 이후에 $.browser.mise 또는 $browser.version 등의 함수를 사용할 수 있습니다.

이 코드의 출처는 아래입니​다.

http://n33.co/2013/03/23/browser-on-jquery-19x-for-legacy-ie-detection

모달 팝업을 사용하는 이유

1. 팝업 띄워놓고 부모창에서 딴 짓을 못하도록 하기 위해서
2. 속도가 빠르다고 하니
3. 열린 창 중에서 항상 위에 보이게 되니까

이 정도 인것 같다.

모달 팝업의 종류가 또 나뉘게 되는데
showModalDialog();
showModelessDialog();

showModalDialog

메시지 박스와 똑같다.
팝업이 열려 있는 동안 부모창은 먹통..

showModelessDialog

일반 팝업과 같지만, 항상 위 에 보여 지게 된다.
일반 팝업은 부모창을 누르게 되면 부모창 뒤로 숨겨지게 되지만
이건 무조건 항상 위에 표시가 된다.

Syntax : 반환값 = window.showModelessDialog(sUrl, [인자1], [설정])

Parameters :

sURL : 창을 띄울 주소를 말합니다.

인자1 : 창을 띄우는 창의 개체를 말하며, 일반적으로 새창을 띄울 경우 window(현재 창의개체명)을 사용합니다.

그러면 부모창의 내용을 일반적인 형태로 승계받습니다.

설정 : 창의 모양을 결정하는 옵션

dialogHeight:xx
창의 높이(픽셀단위)
dialogWidth:xx
창의 넓이(픽셀단위)
dialogLeft:xx
창의 왼쪽 위치(픽셀단위)
dialogTop:xx
창의 위쪽 위치(픽셀단위)
center:{yes | no | 1 | 0 | on | off }
창이 Desktop(창이 아님)의 중간에 위치할 것인가를 결정.
기본값은 yes
dialogHide: { yes | no | 1 | 0 | on | off }
창이 보여질 것인가를 결정.
기본값은 no
egde: { sunken | raised }
창 틀의 두께를 의미하며, sunken이 두텁고, raised가 얇음.
기본값은 raised
help: { yes | no | 1 | 0 | on | off }
도움말 아이콘(물음표)을 표시할 것인가 결정
기본값은 yes
resizable: { yes | no | 1 | 0 | on | off }
창 크기 조절이 가능한지 여부를 결정
기본값은 no
scroll: { yes | no | 1 | 0 | on | off }
스크롤바의 표시 여부.
기본값은 yes
status: { yes | no | 1 | 0 | on | off }
창 하단의 상태바를 표시할 것인가를 결정
기본값은 no
unadorned: { yes | no | 1 | 0 | on | off }
본인의 실력으로는 알 수 없음. 부모창과 자식창간의 제어와 관련된 개체인것 같은데....모르겠음..끙..

반환값

showModelessDialog 또는 showModelDialog 로 오픈시킨 창에서

returnValue라는 변수에 어떠한 값을 넣어줌으로써 자식창이 닫힐 때 부모창으로 값을 넘겨줄 수 있습니다

예시) JavaScript

부모창
var nTest = window.showModalDialog("dialog.html",self,"help=no; scroll=no; dialogWidth=350px; dialogHeight:300px; center:yes");

자식창
window.returnValue = "1111";
window.close();

파라미터

부모창
var args = new Array();
args[0] = "차문환"
args[1] = "테스트"
var retval = window.showModalDialog("dialog.html", args, "dialogWidth=800px; dialogHeight=900px; center:yes; status:no; scroll:no;resizable:yes; help:no");

자식창
var args = window.dialogArguments;
alert(args[0]);
alert(args[1]);

부모창의 함수 호출

부모창
Function aaa()
{
return "차문환"
}

자식창
var tempName = dialogArguments;
alert(tempName.aaa());

※ 부모 페이지에서 window.showModalDialog 로 팝업을 만들었을 경우 유효함.
window.showModalDialog("dialog.html",self,"help=no; scroll=no; dialogWidth=350px; dialogHeight:300px; center:yes");

반드시 인자값은 self 나 window 여야 한다.

<img id="event_img" src="이미지" usemap="#mmap" style="width:100%;">
<map name="mmap">
<area id="ar1" shape="rect" href="링크1" target="_blank">
<area id="ar2" shape="rect" href="링크2" target="_blank">
<area id="ar3" shape="rect" href="링크3" target="_blank">
<area id="ar4" shape="rect" href="링크4" target="_blank">
</map>

<script language="Javascript">
<!--
function imageMap(rimg,rwidth,x1,y1,x2,y2,mapid){
 var rxsize = document.getElementById(rimg).width;
 var xp1 = rxsize / rwidth * x1;
 var yp1 = rxsize / rwidth * y1;
 var xp2 = rxsize / rwidth * x2;
 var yp2 = rxsize / rwidth * y2;
 document.getElementById(mapid).coords = xp1+","+yp1+ ","+xp2+","+yp2;
}

//원래 좌표위치
imageMap('event_img',실제 이미지 너비,747,1450,983,1700,'ar1');
imageMap('event_img',실제 이미지 너비,509,1450,745,1700,'ar2');
imageMap('event_img',실제 이미지 너비,28,1450,267,1700,'ar3');
imageMap('event_img',실제 이미지 너비,270,1450,506,1700,'ar4');
-->
</script>

function clipCopy(str) {

if ( document.all ) {

window.clipboardData.setData("Text", str);

alert("복사 되었습니다! 원하는 곳에 Ctrl+V 하셔서 붙여넣기 하세요~   ");

} else {

temp = prompt("자동 복사가 지원되지 않는 브라우져 입니다.\n\n 아래 주소를 눌러서 복사하신 후 사용해 주세요.   ", str);

}

}

$('input:checkbox[name="chk_all"]').click(function () {

            var upper_this;

            upper_this = $(this)

            $('input:checkbox[name="chk_indicator"]').each(function () {

                this.checked = upper_this.is(":checked");

            });

        });

javascript로 동적 rowspan, colspan

1. rowspan

<script language="javascript">

        function tableRowSpanning(Table, spanning_row_index) {

            var RowspanTd = false;

            var RowspanText = false;

            var RowspanCount = 0;

            var Rows = $('tr', Table);

            $.each(Rows, function () {

                var This = $('td', this)[spanning_row_index];

                var text = $(This).text();

                if (RowspanTd == false) {

                    RowspanTd = This;

                    RowspanText = text;

                    RowspanCount = 1;

                }

                else if (RowspanText != text) {

                    $(RowspanTd).attr('rowSpan', RowspanCount);

                    RowspanTd = This;

                    RowspanText = text;

                    RowspanCount = 1;

                }

                else {

                    $(This).remove();

                    RowspanCount++;

                }

            });

            // 반복 종료 후 마지막 rowspan 적용

            $(RowspanTd).attr('rowSpan', RowspanCount);

        }

        $(document).ready(function () {

            tableRowSpanning("#timetbody", 1);

            tableRowSpanning("#timetbody", 0);

        });

        function chkForm() {

            if (document.srchForm.txtSearch.value == "") {

                alert('검색어를 입력해 주세요.');

                document.srchForm.txtSearch.focus();

                return false;

            }

            return true;

        }

    </script>

2. colspan

<script type="text/javascript">

    var jv = jQuery.noConflict();

    jv.noConflict(); 

    function trColSpanning(objTr) {

        var Cols = jv('th', objTr);

        var RowspanTd = false;

        var RowspanText = false;

        var RowspanCount = 0;

        jv.each(Cols, function () {

            var text = jv(this).text();

            if (RowspanText == false) {

                RowspanTd = jv(this);

                RowspanText = text;

                RowspanCount = 1;

            }

            else if (RowspanText != text) {

                jv(RowspanTd).attr('colSpan', RowspanCount);

                RowspanTd = jv(this);

                RowspanText = text;

                RowspanCount = 1;

            }

            else {

                RowspanCount++;

                jv(this).remove();

            }

        });

        // 반복 종료 후 마지막 rowspan 적용

        jv(RowspanTd).attr('colSpan', RowspanCount);

    }

    jv(document).ready(function () {

        trColSpanning("#tr_head");

    });

</script>

children( [ selector ] ) 함수는 필터된 선택자와 일치하는 요소들 각각의 자식 요소들을 가져올 수 있습니다.

원문 링크  http://api.jquery.com/children/

.children( [ selector ] )Returns: jQuery

• .children( [ selector ] )
• selector 일치하는 요소들 중에서 추가적으로 선택할 수 있는 선택자 문자열

jQuery 객체는 DOM 요소들의 집합으로 표현됩니다. .children()함수는 DOM 트리에서 자식 요소들을 즉시 찾을 수 있도록 해주고 일치되는 요소들을 새로운 jQuery 객체로 만들어 줍니다. .find()와 .children()함수는 아주 유사하지만 DOM 트리에서 레벨 1의 위치- 첫번째 깊이-만 검색을 하는 부분에서 차이점이 있습니다. 이 부분을 부연설명을 하면, find()함수는 선택요소의 내부 요소들을 모두 검색하고 children()함수는 바라 아래 수준의 요소만 자식요소로 인정한다는 겁니다. 할아버지의 자식은 아버지지 손자가 아니잖아요 ^^;;. 또한 대부분의 jQuery 함수들이 그러하듯이 .children()함수도 text나 주석(comment)들은 반환하지 않습니다. 만약 텍스트 노드나 주석 요소도 반환받고 싶으시면 .contains()함수를 사용하셔야 합니다.

이 함수에는 $() 함수에 인자로 올 수 있는 표현들을 인자로 사용할 수 있습니다. 만약 이 함수에 인자를 사용하게 되면, 그 선택자에 맞게 한번 더 필터 효과를 사용할 수 있게 됩니다.

리스트를 구성하는 마크업을 예로 보시죠.

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

위의 마크업 구조에서 우리는 level-2에서 자식요소를 찾는다고 가정해 보겠습니다. 아래와 같은 스크립트가 필요하겠죠?

이 스크립트의 결과는 A, B, C 아이템의 배경색을 빨간색으로 변하게 합니다.(find 함수는 level-3에 있는 요소까지 다 가져오겠죠.) children 함수에 인자를 사용하지 않아서 자식 요소들이 모두 선택이 되었지만, 일치하는 아이템을 찾기위해 인자를 사용하면 위의 세 아이템 중 조건에 맞는 요소만 찾게 됩니다.

예 제  
클릭한 요소의 자식 요소들을 찾아서 효과를 줍니다. (빨간 테두리를 입히고 자식 요소의 개수를 아래에 표시해 주네요.)

<!DOCTYPE html>
<html>
<head>
  <style>
  body { font-size:16px; font-weight:bolder; }
  div { width:130px; height:82px; margin:10px; float:left;
        border:1px solid blue; padding:4px; }
  #container { width:auto; height:105px; margin:0; float:none;
        border:none; }
  .hilite { border-color:red; }
  #results { display:block; color:red; }
  p { margin:10px; border:1px solid transparent; }
  span { color:blue; border:1px solid transparent; }
  input { width:100px; }
  em { border:1px solid transparent; }
  a { border:1px solid transparent; }
  b { border:1px solid transparent; }
  button { border:1px solid transparent; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <div id="container">

    <div>
      <p>This <span>is the <em>way</em> we</span> 
      write <em>the</em> demo,</p>

    </div>
    <div>
      <a href="#"><b>w</b>rit<b>e</b></a> the <span>demo,</span> <button>write 
      the</button> demo,
    </div>

    <div>
      This <span>the way we <em>write</em> the <em>demo</em> so</span>

      <input type="text" value="early" /> in
    </div>
    <p>
      <span>t</span>he <span>m</span>orning.
      <span id="results">Found <span>0</span> children in <span>TAG</span>.</span>

    </p>
  </div>
<script>

    $("#container").click(function (e) {
      $("*").removeClass("hilite");
      var $kids = $(e.target).children();
      var len = $kids.addClass("hilite").length;

      $("#results span:first").text(len);
      $("#results span:last").text(e.target.tagName);

      e.preventDefault();
      return false;
    });
</script>

</body>
</html>

미리보기

각 박스 영역을 클릭하시면 자식 요소들에 빨간 테두리가 그려져요. 함 해보세요. 그나저나 스크립트가 무지 복잡해 보이네요. 제가 보기엔 $kids 로 변수를 사용하는게 제일 핵심처럼 보여요. 바로 jQuery 객체 변수인가 보네요. 사실 jQuery 객체를 어떻게 받아야 하나 그동안 고민해었는데요. ^^ 해결됬네요. 그 외는 뭐 복잡하기만 하지 별 다른건 없어보입니다.

예 제  
div 요소의 자식 요소들에 빨간 2줄짜리 밑줄을 그려줍니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  body { font-size:16px; font-weight:bolder; }
  span { color:blue; }
  p { margin:5px 0; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <p>Hello (this is a paragraph)</p>

  <div><span>Hello Again (this span is a child of the a div)</span></div>
  <p>And <span>Again</span> (in another paragraph)</p>

  <div>And One Last <span>Time</span> (most text directly in a div)</div>
<script>$("div").children().css("border-bottom", "3px double red");</script>

</body>
</html>

미리보기

설명 그대롭니다.

예 제  
함수에 인자를 세팅하여 선택하고 있습니다.

<!DOCTYPE html>
<html>
<head>
  <style>

  body { font-size:16px; font-weight:bolder; }
  p { margin:5px 0; }
  </style>
  <script src="http://code.jquery.com/jquery-1.5.js"></script>
</head>
<body>
  <div>
    <span>Hello</span>
    <p class="selected">Hello Again</p>
    <div class="selected">And Again</div>

    <p>And One Last Time</p>
  </div>
<script>$("div").children(".selected").css("color", "blue");</script>

</body>
</html>

미리보기

children 함수에 selected 라는 클래스명을 가진 자식 요소를 선택하도록 인자를 집어 넣었네요. 직관적입니다.

자식 요소를 찾는 선택자 기억나시나요? 사실 저도 안납니다. ㅎㅎ;; 함 찾아보시구요. 이번같이 함수가 편하실지 선택자가 편하실지;;; 개인의 취향대로 사용하셔요~. 전 함수가 ㅎㅎㅎ

그럼 즐프하세요.

1. 노드 찾기

 - 태그 이름으로 노드 찾기 :  $("태그이름"),   $("선택자")

 - 클래스 이름으로 노드 찾기 : $(".클래스이름")

 - ID로 노드 찾기 : $("선택자")

 - 속성으로 노드 찾기 : $("[속성이름=값]")

 - 찾은 요소 개수 구하기 :  .size()    ,     .length

 - 찾은 요소 n번째 접근하기 : .eq(index)    ,    .each(function(index){});

 - 찾은 요소에서 특정요소만을 걸러내기 : .filter("선택자")

 - 찾은 요소에서 특정 자식요소만 찾기 :  .find("선택자")

2. 자식 노드 찾기 

 - 전체 자식 노드 찾기
    -- 텍스트 노드 포함 전체 자식 노드 찾기 :  $("선택자").contents()
    -- 텍스트 노드 제외한 전체 자식 노드 찾기 : $("선택자").children("선택자")

 - n번째 자식 노드 접근
    -- $("선택자").children().eq(N)
    -- $("선택자").children(":eq(N)")

 - 첫번째 자식 노드 접근
    -- $("선택자").children().first()
    -- $("선택자").children(":first")
    -- $("선택자").children().eq(0)
    -- $("선택자").children(":eq(0)")

 - 마지막 자식 노드 접근
    -- $("선택자").children().last()
    -- $("선택자").children(":last")
 
3. 부모 노드 찾기
 
 - 바로 위의 부모 : $("선택자").parent()

 - 모든 부모 찾기
    -- $("선택자").parents()  모든 부모
 - 모든 부모 중 선택자에 해당하는 부모 찾기
    -- $("선택자").parents("선택자")

4. 형제 노드 찾기

 - 이전 형제 노드 찾기
    -- $("선택자").prev()
    -- $("선택자").prevAll("선택자");

 - 다음 형제 노드 찾기
    -- $("선택자").next()
    -- $("선택자").nextAll("선택자");

5. 노드 생성,추가,이동,삭제

 - 생성
    -- $("노드")
    -- $("선택자").html("<노드>...</노드>")
    -- $("노드").clone()

 - 추가
    -- $기준노드.append($추가노드)
    -- $추가노드.appendTo($기준노드)
    -- $기준노드.prepend($추가노드)  
    -- $추가노드.prependTo($기준노드)
    -- $추가노드.insertBefore($기준노드)
    -- $기준노드.before($추가노드)
    -- $추가노드.insertAfter($기준노드)
    -- $기준노드.after($추가노드)

 - 삭제
    -- $("선택자").remove()

 - 이동
    -- $기준노드.append($이동노드)  
    -- $이동노드.appendTo($기준노드)
    -- $이동노드.insertBefore($기준노드)
    -- $기준노드.before($이동노드)
    -- $이동노드.insertAfter($기준노드)   
    -- $기준노드.after($이동노드)

6. 텍스트 노드 다루기

 - 텍스트 노드 생성 : $("텍스트")
 
 - 텍스트 노드 추가 : $기준노드.append("텍스트")

 - 텍스트 노드 변경 : $기준노드.text("새로운 텍스트")

7. .children()과 .find() 차이

div.starter

.child

.child

.child

.child

.child

.child

$('.starter').children('.child');  =>  빨간색만 검색된다. 바로 하위 레벨만 검색된다.

$('.starter').find('.child');  => 빨간색과 파란색 모두 검색된다. (하위 레벨 모두)

1.선택된 라이오 버튼 값 가져오기

$("input[name='name']:checked").val();

2.라디오 버튼 강제 선택

$("input[name='name']:radio[value='val']").attr('checked',true);

3.라디오 버튼 선택 유무 판단

if( $("input[name='name']:checked").length==0){

alert("선택 안됌");

return false;

}

4. IE 혹은 크롬에서 checked="checked" 모두 정상 동작하기 위해서는 

// Check

document.getElementById("checkbox").checked = true;

//  Uncheck

document.getElementById("checkbox").checked = false;

jQuery (1.6+):

// Check

$("#checkbox").prop("checked", true);

//  Uncheck

$("#checkbox").prop("checked", false);

$("#checkbox").attr("checked", true); 이건...크롬만 된다...IE 는 안됨...

5. checkbox 체크된 갯수 찾기

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

6. 체크박스 전체 체크/해제

$('input:checkbox[name="chk_all"]').click(function () {

            var upper_this;

            upper_this = $(this)

            $('input:checkbox[name="chk_indicator"]').each(function () {

                this.checked = upper_this.is(":checked");

            });

        });