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 相关文章推荐
Javascript 面向对象 命名空间
May 13 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
javascript实现显示和隐藏div方法汇总
Aug 14 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
JS中的三个循环小结
Jun 20 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
vue项目中使用多选框的实例代码
Jul 22 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入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
php实现专业获取网站SEO信息类实例
2015/04/02 PHP
php常用数组函数实例小结
2016/12/29 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
js 用于检测类数组对象的函数方法
2017/05/02 Javascript
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
微信小程序一周时间表功能实现
2019/10/17 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
使用scrapy实现爬网站例子和实现网络爬虫(蜘蛛)的步骤
2014/01/23 Python
Python解析网页源代码中的115网盘链接实例
2014/09/30 Python
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python set集合类型操作总结
2014/11/07 Python
python 求1-100之间的奇数或者偶数之和的实例
2019/06/11 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
Application Cache未缓存文件无法访问无法加载问题
2014/05/31 HTML / CSS
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
关于工资低的辞职信
2014/01/14 职场文书
学生安全责任书
2014/04/15 职场文书
机关党员公开承诺书
2014/08/30 职场文书
公司财务部岗位职责
2015/04/14 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS