jQuery 팁과 요령

통사론

• roosteronacid 의 기성 이벤트의 속기
• roosteronacid에 의한 줄 바꿈 및 연결성
• Nathan Long의 네 스팅 필터
• roosteronacid에 의해 같은 줄에 컬렉션을 캐시하고 명령을 실행
• roosteronacid의 선택기 를 포함합니다
• roosteronacid에 의한 요소 생성시 속성 정의
• roosteronacid 의 배열처럼 jQuery 함수에 액세스
• noConflict 함수-Oli에 의해 $ 변수 해제
• noConflict 모드에서 $ 변수를 nickf로 분리
• roosteronacid에 의한 충돌 없음 모드

데이터 저장고

• 데이터 함수 -TenebrousX에 의해 데이터를 요소 에 바인딩
• 스테로이드에서 HTML5 데이터 속성 지원! roosteronacid에 의해
• Filip Dupanović 의 jQuery 메타 데이터 플러그인

최적화

• roosteronacid 로 복잡한 선택기의 성능 최적화
• lupefiasco 의 컨텍스트 매개 변수
• Nathan Long의 검색 저장 및 재사용
• HTML 요소 생성 및 참조 유지, 요소 존재 여부 확인, Andreas Grech 의 자체 선택기 작성

여러 가지 잡다한

• 컬렉션에서 요소의 색인을 redsquare로 확인하십시오.
• TM의 라이브 이벤트 핸들러
• 익명의 함수를 ken의 명명 된 함수 로 교체
• Slace의 Microsoft AJAX 프레임 워크 및 jQuery 브릿지
• egyamado의 jQuery 튜토리얼
• 컬렉션에서 요소를 제거 하고 roosteronacid에 의해 체인 성을 유지
• Ben 의 익명 기능 시작시 $ this 선언
• FireBug Lite, Hotbox 플러그인, Color Blend에 의해 이미지가로드 된 시점과 Google CDN
• harriyott의 써드 파티 jQuery 스크립트의 신중한 사용
• Jan Zich 의 각 기능
• Chris S의 양식 확장 플러그인
• OneNerd에 의한 각 기능의 비동기
• jQuery 템플릿 플러그인 : roosteronacid의 렌더링 기능 을 사용하여 복잡한 로직 구현

HTML 요소 생성 및 참조 유지

var newDiv = $("<div />");

newDiv.attr("id", "myNewDiv").appendTo("body");

/* Now whenever I want to append the new div I created, 
   I can just reference it from the "newDiv" variable */

요소가 존재하는지 확인

if ($("#someDiv").length)
{
    // It exists...
}

자신 만의 선택기 작성

$.extend($.expr[":"], {
    over100pixels: function (e)
    {
        return $(e).height() > 100;
    }
});

$(".box:over100pixels").click(function ()
{
    alert("The element you clicked is over 100 pixels height");
});

jQuery의 data()방법은 유용하며 잘 알려져 있지 않습니다. DOM을 수정하지 않고도 DOM 요소에 데이터를 바인딩 할 수 있습니다.

중첩 필터

필터가 중첩 될 수 있습니다 ( 별명이 여기에 표시됨).

.filter(":not(:has(.selected))")

난 정말 팬이 아니야 $(document).ready(fn) 지름길 . 물론 코드는 줄이지 ​​만 코드의 가독성도 줄어 듭니다. 당신이 볼 때 $(document).ready(...), 당신은 당신이보고있는 것을 알고 있습니다. $(...)너무 많은 다른 방법으로 즉시 이해됩니다.

여러 프레임 워크가있는 경우 사용할 수 있습니다 jQuery.noConflict(); 말한대로 수 있지만 다음과 같이 다른 변수를 지정할 수도 있습니다.

var $j = jQuery.noConflict();

$j("#myDiv").hide();

$x(...)스타일 호출 로 정리할 수있는 여러 프레임 워크가있는 경우 매우 유용 합니다.

오, jQuery 메타 데이터를 잊지 말자 ! data () 함수는 훌륭하지만 jQuery 호출을 통해 채워 져야합니다.

다음과 같은 사용자 정의 요소 속성에 대한 W3C 준수를 위반하는 대신 :

<input 
  name="email" 
  validation="required" 
  validate="email" 
  minLength="7" 
  maxLength="30"/> 

대신 메타 데이터를 사용하십시오.

<input 
  name="email" 
  class="validation {validate: email, minLength: 2, maxLength: 50}" />

<script>
    jQuery('*[class=validation]').each(function () {
        var metadata = $(this).metadata();
        // etc.
    });
</script>

라이브 이벤트 핸들러

에 대한 이벤트 핸들러 설정 어떤 이 초기 페이지 로딩 후 DOM에 추가됩니다 경우에도 선택과 일치하는 요소를 :

$('button.someClass').live('click', someFunction);

이를 통해 Ajax를 통해 컨텐츠를로드하거나 javascript를 통해 컨텐츠를 추가하고 해당 요소에 대해 자동으로 이벤트 핸들러를 설정할 수 있습니다.

마찬가지로 실시간 이벤트 처리를 중지하려면

$('button.someClass').die('click', someFunction);

이러한 실시간 이벤트 처리기는 일반 이벤트와 비교하여 몇 가지 제한 사항이 있지만 대부분의 경우에 효과적입니다.

자세한 내용은 jQuery 설명서를 참조하십시오. .

UPDATE : live()그리고는 die()jQuery를 1.7에서 사용되지 않습니다. 유사한 교체 기능에 대해서는 http://api.jquery.com/on/ 및 http://api.jquery.com/off/ 를 참조하십시오 .

UPDATE2 : live()jQuery 1.7 이전에도 오랫동안 사용되지 않았습니다. 1.7 이전 버전의 jQuery 1.4.2 이상에서는 delegate()및을 사용하십시오 undelegate(). live()예 ( $('button.someClass').live('click', someFunction);)를 사용하여 재기록 될 수있는 delegate()그와 같은 $(document).delegate('button.someClass', 'click', someFunction);.

익명 함수를 명명 된 함수로 바꿉니다. 이것은 실제로 jQuery 컨텍스트를 대체하지만 콜백 함수에 의존하기 때문에 jQuery를 사용할 때처럼 보입니다. 인라인 익명 함수의 문제점은 디버그하기가 더 어렵고 (명백한 이름의 함수가있는 6 단계 "익명"의 콜 스택을 훨씬 쉽게 볼 수 있음), 동일한 익명의 여러 익명 함수가 있다는 사실입니다. jQuery-chain은 읽고 유지 관리하기가 어려워 질 수 있습니다. 또한 익명 함수는 일반적으로 재사용되지 않습니다. 반면에 명명 된 함수를 선언하면 재사용 가능성이 높은 코드를 작성할 수 있습니다.

삽화; 대신에:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

나는 선호한다:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

요소 생성시 속성 정의

jQuery 1.4에서는 객체 리터럴을 사용하여 요소를 생성 할 때 속성을 정의 할 수 있습니다.

var e = $("<a />", { href: "#", class: "a-class another-class", title: "..." });

... 스타일을 추가 할 수도 있습니다.

$("<a />", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

다음 은 설명서에 대한 링크 입니다.

jQuery 객체에 다른 별칭을 사용하는 대신 (noConflict를 사용하는 경우) 항상 jQuery 코드를 모두 폐쇄로 감싸서 작성합니다. 이것은 document.ready 함수에서 수행 할 수 있습니다.

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

또는 다음과 같이 할 수 있습니다.

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

나는 이것이 가장 휴대하기 쉽다는 것을 안다. 프로토 타입과 jQuery를 동시에 사용하는 사이트에서 작업하고 있으며 이러한 기술로 모든 충돌을 피할 수있었습니다.

색인 확인

jQuery에는 .index가 있지만 요소 목록이 필요하고 색인을 원하는 요소를 전달하므로 사용하기가 어렵습니다.

var index = e.g $('#ul>li').index( liDomObject );

다음이 훨씬 쉽습니다.

정렬되지 않은 목록 내의 세트 (예 : 목록 항목) 내의 요소 색인을 알고 싶은 경우 :

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

준비된 이벤트의 속기

명시적이고 장황한 방법 :

$(document).ready(function ()
{
    // ...
});

속기 :

$(function ()
{
    // ...
});

핵심 jQuery 함수에서 선택기 매개 변수 외에 컨텍스트 매개 변수를 지정하십시오. context 매개 변수를 지정하면 jQuery가 DOM 루트가 아닌 DOM의 더 깊은 지점에서 시작할 수 있습니다. 충분히 큰 DOM이 주어지면 context 매개 변수를 지정하면 성능이 향상됩니다.

예 : 문서의 첫 번째 양식 내에서 radio 유형의 모든 입력을 찾습니다.

$("input:radio", document.forms[0]);

참조 : http://docs.jquery.com/Core/jQuery#expressioncontext

실제로 jQuery만이 아니라 jQuery와 MS AJAX를위한 멋진 작은 다리를 만들었습니다.

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

많은 ASP.NET AJAX를 수행하는 경우 정말 좋습니다. jQuery는 MS에서 지원하기 때문에 이제 좋은 브리지가 있으므로 jQuery 작업을 수행하는 것이 매우 쉽습니다.

$get('#myControl').j().hide();

따라서 위의 예제는 좋지 않지만 ASP.NET AJAX 서버 컨트롤을 작성하는 경우 클라이언트 측 컨트롤 구현 내에 jQuery를 쉽게 포함시킬 수 있습니다.

복잡한 선택기의 성능 최적화

복잡한 선택기를 사용할 때 DOM의 하위 집합을 쿼리하면 성능이 크게 향상됩니다.

var subset = $("");

$("input[value^='']", subset);

팁과 요령 및 일부 자습서 말하기. Jeffery Way 의이 튜토리얼 시리즈 ( “jQuery for Absolute Beginners”비디오 시리즈) 를 찾았습니다. 아주 도움이됩니다.

jQuery를 처음 사용하는 개발자를 대상으로합니다. 그는 애니메이션, 요소 생성 및 제거 등과 같은 jQuery를 사용하여 많은 멋진 물건을 만드는 방법을 보여줍니다.

나는 그것으로부터 많은 것을 배웠다. 그는 jQuery를 사용하기 쉬운 방법을 보여줍니다. 이제는 그것을 좋아하고 복잡하더라도 jQuery 스크립트를 읽고 이해할 수 있습니다.

다음은 내가 좋아하는 예입니다 " 텍스트 크기 조정 "을

1- jQuery ...

<script language="javascript" type="text/javascript">
    $(function() {
        $('a').click(function() {
            var originalSize = $('p').css('font-size'); // get the font size 
            var number = parseFloat(originalSize, 10); // that method will chop off any integer from the specified variable "originalSize"
            var unitOfMeasure = originalSize.slice(-2);// store the unit of measure, Pixle or Inch

            $('p').css('font-size', number / 1.2 + unitOfMeasure);
            if(this.id == 'larger'){$('p').css('font-size', number * 1.2 + unitOfMeasure);}// figure out which element is triggered
         });        
     });
</script>

2- CSS 스타일링 ...

<style type="text/css" >
body{ margin-left:300px;text-align:center; width:700px; background-color:#666666;}
.box {width:500px; text-align:justify; padding:5px; font-family:verdana; font-size:11px; color:#0033FF; background-color:#FFFFCC;}
</style>

2- HTML ...

<div class="box">
    <a href="#" id="larger">Larger</a> | 
    <a href="#" id="Smaller">Smaller</a>
    <p>
    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    </p>
</div>

이 자습서를 적극 권장합니다 ...

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

비동기 each () 함수

당신이있는 경우 정말 복잡한 문서를 JQuery와 실행 위치를 각 () 함수를 반복하는 동안 브라우저를 고정 및 / 또는 Internet Explorer는 '팝업 이 스크립트를 계속 하시겠습니까 이 솔루션은 하루에 저장합니다'메시지.

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

그것을 사용할 수있는 첫 번째 방법은 each ()와 같습니다.

$('your_selector').forEach( function() {} );

옵션 2 매개 변수는 반복 사이의 속도 / 지연 지정할 수 있습니다 (애니메이션에 유용 할 수있는 다음의 예는 반복 사이에서 1 초 대기를 )

$('your_selector').forEach( function() {}, 1000 );

이 작업은 비동기 적으로 작동하므로 다음 코드 줄 이전에 반복이 완료 될 수 없습니다. 예를 들면 다음과 같습니다.

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

나는 이것을 내부 프로젝트를 위해 썼고, 그것이 개선 될 수 있다고 확신하는 동안 우리가 필요로하는 것을 위해 일했기 때문에 일부 사람들이 유용하다고 생각하기를 바랍니다. 감사 -

구문 속기 설탕-개체 모음을 캐시하고 한 줄에 명령을 실행합니다.

대신에:

var jQueryCollection = $("");

jQueryCollection.command().command();

나는한다:

var jQueryCollection = $("").command().command();

다소 "실제"사용 사례는 다음과 같은 내용이 될 수 있습니다.

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

나는 선언을 좋아한다 $this익명 함수의 시작 부분에 변수를 것이 좋으므로 jQueried를 참조 할 수 있다는 것을 알고 있습니다.

이렇게 :

$('a').each(function() {
    var $this = $(this);

    // Other code
});

재사용을 위해 변수에 jQuery 객체 저장

jQuery 객체를 변수에 저장하면 DOM을 다시 검색하지 않고도 재사용 할 수 있습니다.

@Louis가 제안한 것처럼 변수에 jQuery 객체가 있음을 나타 내기 위해 $를 사용합니다.

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

더 복잡한 예로 상점에 식품 목록이 있고 사용자의 기준과 일치하는 음식 만 표시하려고한다고 가정하십시오. 확인란이있는 양식이 있으며 각 양식에는 기준이 포함되어 있습니다. 확인란의 이름은 organicand lowfat이며 제품에는 해당 클래스가 있습니다 .organic.

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

이제 해당 jQuery 객체로 계속 작업 할 수 있습니다. 체크 박스를 클릭 (체크 또는 체크 해제) 할 때마다 마스터 식품 목록에서 시작하여 체크 박스를 기준으로 필터링하십시오.

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

흥미롭고 중요한 팁 대부분이 이미 언급 된 것 같으므로이 내용은 약간 추가 된 것입니다.

작은 팁은 jQuery.each (object, callback) 함수입니다. 모두가 아마도 jQuery.each (callback)를 사용하고있을 것입니다 함수를 때문에 jQuery 객체 자체를 반복합니다. jQuery.each (object, callback) 유틸리티 함수는 객체와 배열을 반복합니다. 오랫동안, 나는 어떻게 든 다른 구문과 다른 것이 무엇인지 알지 못했고 (모든 구식 루프를 작성하는 것은 중요하지 않습니다), 나는 최근에야 주요 강점을 깨달았습니다.

문제는 jQuery.each (object, callback)의 루프 본문이 함수 이므로 루프에서 매번 새로운 범위 를 얻으 므로 루프 에서 클로저 를 만들 때 특히 편리 합니다.

다시 말해, 일반적인 일반적인 실수는 다음과 같은 일을하는 것입니다.

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

이제 functions배열 에서 함수를 호출 undefined하면 원하는 내용이 아닌 내용에 대해 세 번 경고합니다 . 문제는 하나의 변수 i만 있고 세 개의 클로저 모두 변수를 참조한다는 것입니다. 루프가 완료되면 최종 값 i은 3이며 someArrary[3]입니다 undefined. 클로저를 생성하는 다른 함수를 호출하여이 문제를 해결할 수 있습니다. 또는 기본적으로 jQuery 유틸리티를 사용합니다.

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

이제 함수를 호출하면 예상대로 내용 1, 2 및 3에 대해 세 개의 경고가 표시됩니다.

일반적으로, 그것은 당신이 할 수없는 것이 아니지만 가지고있는 것이 좋습니다.

배열처럼 jQuery 함수에 액세스

부울을 기반으로 클래스 추가 / 제거 ...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

짧은 버전입니다 ...

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

이것에 대한 많은 유스 케이스는 아닙니다. 결코 적은; 나는 그것이 깔끔하다고 생각합니다 :)

최신 정보

주석 읽기 유형이 아닌 경우 ThiefMaster는 toggleClass 가 클래스를 추가 또는 제거해야하는지 여부를 결정 하는 부울 값을 허용 함을 지적합니다 . 위의 예제 코드가 진행되는 한 이것이 최선의 접근 방법입니다 ...

$('selector').toggleClass('name_of_the_class', true/false);

최신 정보:

사이트에이 스크립트를 포함 시키면 모든 브라우저에서 디버깅 할 수있는 Firebug 콘솔이 나타납니다. 완전한 기능은 아니지만 여전히 도움이됩니다! 완료되면 제거하십시오.

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

이 링크를 확인하십시오 :

CSS 트릭에서

업데이트 : 새로운 것을 발견했습니다. JQuery Hotbox입니다.

JQuery Hotbox

Google은 Google 코드에서 여러 JavaScript 라이브러리를 호스팅합니다. 거기에서로드하면 대역폭이 절약되고 이미 캐시 된 빠른 cos 가로 드됩니다.

<script src="http://www.google.com/jsapi"></script>  
<script type="text/javascript">  

    // Load jQuery  
    google.load("jquery", "1.2.6");  

    google.setOnLoadCallback(function() {  
        // Your code goes here.  
    });  

</script>

또는

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

이를 사용하여 이미지가 완전히로드 된 시점을 알 수도 있습니다.

$('#myImage').attr('src', 'image.jpg').load(function() {  
    alert('Image Loaded');  
});

firebug의 "console.info". 경고 상자를 사용하지 않고도 메시지와 변수를 화면에 덤프 할 수 있습니다. "console.time"을 사용하면 많은 코드를 래핑하고 시간이 얼마나 걸리는지 타이머를 쉽게 설정할 수 있습니다.

console.time('create list');

for (i = 0; i < 1000; i++) {
    var myList = $('.myList');
    myList.append('This is list item ' + i);
}

console.timeEnd('create list');

가능한 경우 의사 선택기보다 필터링 방법을 사용하여 jQuery가 querySelectorAll (sizzle보다 훨씬 빠름)을 사용할 수 있습니다. 이 선택기를 고려하십시오.

$('.class:first')

다음을 사용하여 동일한 선택을 할 수 있습니다.

$('.class').eq(0)

'.class'의 초기 선택은 QSA와 호환되므로 더 빠릅니다.

컬렉션에서 요소를 제거하고 체인 성을 유지

다음을 고려하세요:

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

이 filter()함수는 jQuery 객체에서 요소를 제거합니다. 이 경우 : 텍스트 "One"또는 "Two"를 포함하지 않는 모든 li 요소는 제거됩니다.

입력 요소의 유형 변경

DOM에 이미 연결된 입력 요소의 유형을 변경하려고 할 때이 문제가 발생했습니다. 기존 요소를 복제하고 이전 요소 앞에 삽입 한 다음 이전 요소를 삭제해야합니다. 그렇지 않으면 작동하지 않습니다.

var oldButton = jQuery("#Submit");
var newButton = oldButton.clone();

newButton.attr("type", "button");
newButton.attr("id", "newSubmit");
newButton.insertBefore(oldButton);
oldButton.remove();
newButton.attr("id", "Submit");

양식 필드 유효성 검사 또는 URL 구문 분석과 같은 타사 jQuery 스크립트를 신중하게 사용합니다. 다음에 JavaScript 요구 사항이 발생할 때 알 수 있도록 관련 정보를 확인할 가치가 있습니다.

줄 바꿈 및 연결성

컬렉션에서 여러 통화를 연결하는 경우 ...

$("a").hide().addClass().fadeIn().hide();

줄 바꿈으로 가독성을 높일 수 있습니다. 이처럼 :

$("a")
.hide()
.addClass()
.fadeIn()
.hide();

애니메이션을 트리거하여 애니메이션을 반복 할 수없는 경우 .stop (true, true)을 사용하십시오. 롤오버 애니메이션에 특히 유용합니다.

$("#someElement").hover(function(){
    $("div.desc", this).stop(true,true).fadeIn();
},function(){
    $("div.desc", this).fadeOut();
});

.append()무언가를 반복하는 등의 메소드 호출에서 자체 실행 익명 함수 사용 IE :

$("<ul>").append((function ()
{
    var data = ["0", "1", "2", "3", "4", "5", "6"],
        output = $("<div>"),
        x = -1,
        y = data.length;

    while (++x < y) output.append("<li>" + info[x] + "</li>");

    return output.children();
}()));

나는 이것을 사용하여 내 체인을 벗어나기 위해 크고 불편한 것들을 반복합니다.

스테로이드에서 HTML5 데이터 속성 지원!

데이터 함수 이전에 언급되었다. 이를 통해 데이터를 DOM 요소와 연결할 수 있습니다.

최근 jQuery 팀은 HTML5 사용자 정의 data- * 속성에 대한 지원을 추가했습니다 . 마치 충분하지 않은 것처럼; 그들은 스테로이드로 데이터 기능을 강제로 공급하여 복잡한 객체를 JSON 형태로 마크 업에 직접 저장할 수 있음을 의미합니다.

HTML :

<p data-xyz = '{"str": "hi there", "int": 2, "obj": { "arr": [1, 2, 3] } }' />

자바 스크립트 :

var data = $("p").data("xyz");

data.str // "hi there"
typeof data.str // "string"

data.int + 2 // 4
typeof data.int // "number"

data.obj.arr.join(" + ") + " = 6" // "1 + 2 + 3 = 6"
typeof data.obj.arr // "object" ... Gobbles! Errrghh!