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与DropDownList 区别分析
Jan 01 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
Feb 26 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
JavaScript数值千分位格式化的两种简单实现方法
Aug 01 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
jQuery each和js forEach用法比较
Feb 27 jQuery
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
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php单元测试phpunit入门实例教程
2017/11/17 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
DOM 基本方法
2009/07/18 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
JQuery 学习技巧总结
2010/05/21 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
2011/09/05 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
2016/09/06 Javascript
KnockoutJS 3.X API 第四章之click绑定
2016/10/10 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
Python中正则表达式详解
2017/05/17 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
python+django+selenium搭建简易自动化测试
2020/08/19 Python
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
教师的实习自我鉴定
2013/12/17 职场文书
大学生毕业鉴定
2014/01/31 职场文书
学生会招新策划书
2014/02/14 职场文书
计划生育标语
2014/06/23 职场文书
大雁塔导游词
2015/02/04 职场文书
求职信:求职应该注意的问题
2019/04/24 职场文书