jQuery.data() 함수 사용법에 대한 자세한 설명

data() 함수는 현재 jQueryobject와 일치하는 모든 요소의 데이터에 액세스하는 데 사용됩니다.

data() 함수를 통해 접근한 데이터는 임시 데이터입니다. 페이지를 새로 고치면 이전에 저장된 데이터는 더 이상 존재하지 않습니다.

이 함수는 jQuery 객체(인스턴스)에 속합니다. data() 함수를 통해 저장된 데이터를 제거해야 하는 경우에는 RemoveData() 함수를 사용하세요.

Syntax

data() 함수에는 다음 두 가지 용도가 있습니다.

사용법 1:

jQueryObject.data([ key [, value ] ])

지정된 키 이름 key를 사용하여 데이터에 액세스합니다. 값 매개변수가 지정되면 값이 있는 데이터가 키 이름에 저장된다는 의미이고, 값 매개변수가 지정되지 않으면 매개변수가 없으면 이전에 키 이름에 저장된 데이터를 읽는다는 의미입니다. 지정하면 이전 데이터가 객체 형태로 반환됩니다. 모든 데이터가 저장됩니다.

사용법 2:

jQueryObject.data( object )

동시에 개체 형태로 원하는 수의 키-값 데이터를 전달합니다. 개체의 각 attribute는 키 이름이고 속성 값입니다. 값입니다.

참고: data() 함수의 모든 "데이터 저장" 작업은 현재 jQuery 개체와 일치하는 각 요소에 대한 것입니다. 모든 "데이터 읽기" 작업은 첫 번째 일치하는 요소에 대해서만 수행됩니다.

Parameters

이전 구문 섹션에 정의된 매개변수 이름에 따라 해당 매개변수를 찾으세요.

매개변수 설명

key 선택사항/키 이름 string은 문자열 유형으로 지정됩니다.

값 선택/모든 유형 저장해야 하는 모든 유형의 데이터입니다.

객체 객체 클래스지정된 객체는 여러 키-값 쌍을 캡슐화하고 동시에 여러 데이터를 저장하는 데 사용됩니다.

반환 값

data()함수의 반환 값은 모든 유형입니다. 반환 값의 유형은 현재 data() 함수가 "데이터 저장" 작업을 수행하는지 아니면 "데이터 읽기"를 수행하는지에 따라 다릅니다. 작업.

data() 함수가 "데이터 저장" 작업을 수행하면 현재 jQuery 객체 자체를 반환하고, "데이터 읽기" 작업을 수행하면 읽은 데이터를 반환합니다.

현재 jQuery 객체가 여러 요소와 일치하는 경우 데이터를 읽을 때 data() 함수는 첫 번째로 일치하는 요소만 사용합니다.

data(key) 함수 실행 시 해당 데이터를 찾을 수 없는 경우(매개변수 키가 하나만 전달되는 경우) undefound가 반환됩니다. data() 함수를 실행할 때 해당 데이터를 찾을 수 없으면(매개변수 없이) 빈 객체(속성이 없는)가 반환됩니다.

예제 및 설명

다음 HTML 코드를 예로 들어보세요.

<div id="n1">
    <div id="n2">
        <ul id="n3">
            <li id="n4">item1</li>
            <li id="n5">item2</li>
            <li id="n6">item3</li>
        </ul>
    </div>  
</div>

다음 jQuery 코드를 작성합니다.

var $li = $("li");
// 同时向所有的li元素存储数据
$li.data("name", "CodePlayer");
$li.data("desc", "专注于编程开发技术分享");
$li.data("url", "http://www.365mini.com/");
var $n5 = $("#n5"); // 通过n4、n5、n6都可以读取数据
//  返回键值name所对应的数据
document.writeln( $n5.data("name") ); // CodePlayer
// 以对象形式返回所有的数据
var obj = $("#n6").data();
for(var i in obj){
    document.writeln( i + "=" + obj[i] + "<br>");   
}
/*输出：
name=CodePlayer
desc=专注于编程开发技术分享
url=http://www.365mini.com/
*/
//移除掉n4上存储的键名为name的数据
$("#n4").removeData("name");
// 虽然$li匹配3个li元素，但是读取数据只以第一个li元素n4为准，因此返回undefined
document.writeln( $li.data("name") ); // undefined
var object = { 
        name: "张三",
        age: 18,
        score: [87, 23, 56],
        options: { gender: "男", address: "水帘洞" }
    };
// 同时向所有的div元素以对象形式设置多个key-value数据
// value值可以是任意类型的数据，包括数组、对象等
$("div").data( object );
var $n2 = $("#n2"); // 通过n1、n2都可以读取数据
document.writeln( $n2.data("name") ); // 张三
document.writeln( $n2.data("score") ); // 87,23,56
document.writeln( $n2.data("options") ); // [object Object]

위 내용은 jQuery.data() 함수 사용법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!