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 相关文章推荐
range 标准化之获取
Aug 28 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
js 左右悬浮对联广告特效代码
Dec 12 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
JS判断字符串包含的方法
May 05 Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
手动初始化Angular的模块与控制器
Dec 26 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
Sep 21 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
Sep 21 Javascript
vue实现路由监听和参数监听
Oct 29 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
用户的详细注册和判断
2006/10/09 PHP
PHPMyAdmin 快速配置方法
2009/05/11 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
php邮件发送的两种方式
2020/04/28 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
angular 服务的单例模式(依赖注入模式下)详解
2018/10/22 Javascript
vue项目中使用Svg的方法
2018/10/24 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
Vue router安装及使用方法解析
2020/12/02 Vue.js
python中的装饰器详解
2015/04/13 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
TensorFLow 不同大小图片的TFrecords存取实例
2020/01/20 Python
在PyTorch中使用标签平滑正则化的问题
2020/04/03 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
Hobbs官方网站:英国奢华女性时尚服装
2020/02/22 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
企业职业病防治方案
2014/05/29 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
三峡人家导游词
2015/01/31 职场文书
大明湖导游词
2015/02/03 职场文书
MybatisPlus代码生成器的使用方法详解
2021/06/13 Java/Android
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android