jQuery中data()方法用法实例


Posted in Javascript onDecember 27, 2014

本文实例讲述了jQuery中data()方法用法。分享给大家供大家参考。具体分析如下:

此方法可以向匹配元素附加数据,或者从匹配元素获取数据。

语法结构一:

$(selector).data(name,value)

参数列表:

参数 描述
name 存储的数据名称。
value 将要存储的任意数据。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>data()函数-三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#add").click(function(){

    $("div").data("mydata","三水点靠木欢迎您");

  })

  $("#show").click(function(){

    $("div").text($("div").data("mydata"));

  })

})

</script>

</head>

<body>

<div></div>

<button id="add">向元素添加数据</button>

<button id="show">显示添加的数据</button>

</body>

</html>

以上代码能够在匹配的div元素上附加名称mydata,值为“三水点靠木欢迎您”的数据,然后利用数据名称返回。

语法结构二:

从匹配元素中返回指定数据名称的附加的数据。

$(selector).data(name)

参数列表:

参数 描述
name 存储的数据名称。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>data()函数-三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#add").click(function(){

    $("div").data("mydata","三水点靠木欢迎您");

  })

  $("#show").click(function(){

    $("div").text($("div").data("mydata"));

  })

})

</script>

</head>

<body>

  <div></div>

  <button id="add">向元素添加数据</button>

  <button id="show">显示添加的数据</button>

</body>

</html>

以上代码能够在匹配的div元素上附加名称mydata,值为“三水点靠木欢迎您”的数据,然后利用数据名称返回。

语法结构三:

使用键/值对对象向匹配元素添加数据。

$(selector).data(properties)

参数列表:

参数 描述
properties 一个用于设置数据的键/值对。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>data()函数-三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("#add").click(function(){

    $("div").data("mydata",{username:"daoliang"});

  })

  $("#show").click(function(){

    alert($("div").data("mydata").username);

  })

})

</script>

</head>

<body>

<div></div>

<button id="add">把数据添加元素</button>

<button id="show">获取添加到元素的数据</button>

</body>

</html>

以上代码能够以键/值对方式为div附加名称为mydata的数据,然后通过数据名和键取得附加的数据值。

语法结构四:

使用对象方式为指定元素附加数据。

$(selector).data(object)

参数列表:

参数 描述
object 一个用于设置数据的对象。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>data()函数-三水点靠木</title> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  var mytest=new Object();

  mytest.first="三水点靠木欢迎您";

  mytest.second="JQuery专区";

  $("#add").click(function(){

    $("div").data(mytest);

  })

  $("#show").click(function(){

    alert($("div").data("second"));

  })

});

</script>

</head>

<body>

  <div></div>

  <button id="add">把数据添加元素</button>

  <button id="show">获取添加到元素的数据</button>

</body>

</html>

以上代码以对象方式附加数据,并且取得附加的数据值。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
json的使用小结
Jun 08 Javascript
原生JS实现圣旨卷轴展开效果
Mar 06 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
webpack 动态批量加载文件的实现方法
Mar 19 Javascript
详解vue组件之间的通信
Aug 30 Javascript
vue iview 隐藏Table组件里的某一列操作
Nov 13 Javascript
JS实现九宫格拼图游戏
Jun 28 Javascript
jQuery中index()方法用法实例
Dec 27 #Javascript
jQuery中get()方法用法实例
Dec 27 #Javascript
jQuery的context属性用法实例
Dec 27 #Javascript
jQuery对象的selector属性用法实例
Dec 27 #Javascript
jQuery对象的length属性用法实例
Dec 27 #Javascript
jQuery中size()方法用法实例
Dec 27 #Javascript
jQuery中each()方法用法实例
Dec 27 #Javascript
You might like
在PHP中使用灵巧的体系结构
2006/10/09 PHP
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
php实现表单提交上传文件功能
2018/05/28 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
[原创]站长必须要知道的javascript广告代码
2007/05/30 Javascript
jquery批量控制form禁用的代码
2013/08/06 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JS回调函数基本定义与用法实例分析
2017/05/24 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
[02:36]DOTA2英雄基础教程 斯拉克
2013/11/29 DOTA
Python深入学习之内存管理
2014/08/31 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
python实现的分层随机抽样案例
2020/02/25 Python
聊聊python中的循环遍历
2020/09/07 Python
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
高性能钓鱼服装:Huk Gear
2019/02/20 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
高分子材料与工程专业推荐信
2013/12/01 职场文书
出纳担保书范文
2014/04/02 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
Python软件包安装的三种常见方法
2022/07/07 Python
GO中sync包自由控制并发示例详解
2022/08/05 Golang