在jQuery中使用自定义属性
在jquery中 自定义属性及值
默认以下都是在class='acitve'对象中 进行自定义属性操作：
1，自定义属性格式：data-xxxx
2，获取该属性值： $('.active').data('xxxx') 获取属性值：data-xxxx的值
3，设置该属性值： $('.active').data('xxxx','love') 设置属性： data-xxxx="love"
如：<div class="active" data-love="you"></div>
1，获取属性值： $('.active').data('love');
2，设置属性值： $('.active').data('love','fuck');
把 data-love = "fuck" 修改该属性值，在控制台其值是不会改变的，从控制台输出是可以看到的。
3，此外设置$('.active')对象没有的属性，如添加 data-itemNum 并设置默认值 five
4，如：$('.active').data('itemNum','five');审查元素是看不到该属性的，只能输出控制台可以看到该值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="container" data-name="you" data-love='mom'>
<button class="getData">获取数据</button><span class="show"></span>
<input type="text" class="text"><button class="setData">设置数据</button>
</div>
<script src="js/jquery.js"></script>
<script>
//获取所有DOM对象
var $container = $('.container');
var $getData = $('.getData');
var $show = $('.show');
var $text = $('.text');
var $setData = $('.setData');
//按钮单击事件 获取数据
$getData.on('click',function(){
//这是获取$show对象的 data-name 属性值 可以在 $show对象中查看该属性及值。
$show.text($container.data('name'));
})
//单机设置data相关属性
$setData.on('click',function(){
//设置$container对象的 data-love 属性及其值，
//如果 data-love 属性存在，在修改属性后，在控制台中是看不到其值的变化，但是输出就可以看到变化。
//如果 data-love 不存在，则设置后，控制台看不到该属性，只能输出才能看到。
$container.data('love',$text.val());
console.log($container.data('love'));
})
</script>
</body>
</html>在jquery中 自定义属性及值
默认以下都是在class='acitve'对象中 进行自定义属性操作：
1，自定义属性格式：data-xxxx
2，获取该属性值： $('.active').data('xxxx') 获取属性值：data-xxxx的值
3，设置该属性值： $('.active').data('xxxx','love') 设置属性： data-xxxx="love"
如：<div class="active" data-love="you"></div>
1，获取属性值： $('.active').data('love');
2，设置属性值： $('.active').data('love','fuck');
把 data-love = "fuck" 修改该属性值，在控制台其值是不会改变的，从控制台输出是可以看到的。
3，此外设置$('.active')对象没有的属性，如添加 data-itemNum 并设置默认值 five
4，如：$('.active').data('itemNum','five');审查元素是看不到该属性的，只能输出控制台可以看到该值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="container" data-name="you" data-love='mom'>
<button class="getData">获取数据</button><span class="show"></span>
<input type="text" class="text"><button class="setData">设置数据</button>
</div>
<script src="js/jquery.js"></script>
<script>
//获取所有DOM对象
var $container = $('.container');
var $getData = $('.getData');
var $show = $('.show');
var $text = $('.text');
var $setData = $('.setData');
//按钮单击事件 获取数据
$getData.on('click',function(){
//这是获取$show对象的 data-name 属性值 可以在 $show对象中查看该属性及值。
$show.text($container.data('name'));
})
//单机设置data相关属性
$setData.on('click',function(){
//设置$container对象的 data-love 属性及其值，
//如果 data-love 属性存在，在修改属性后，在控制台中是看不到其值的变化，但是输出就可以看到变化。
//如果 data-love 不存在，则设置后，控制台看不到该属性，只能输出才能看到。
$container.data('love',$text.val());
console.log($container.data('love'));
})
</script>
</body>
</html>
在jQuery中使用自定义属性的更多相关文章
- 总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别
一..attr()和.data()的区别: .attr()和.data()本质上属于DOM属性和Jquery对象属性的区别. 看一个例子: <!DOCTYPE html> <html ...
- jquery 中一些 特殊方法 的特殊使用 一览表
cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...
- jQuery中使用data()方法读取HTML5自定义属性data-*实例
如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...
- jQuery中prop() , attr() ,css() 的区别
1. HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过JavaScript能够存取的值. (1)在jQuery中,prop()是操作DOM属性,attr()是操作HTML属性. HT ...
- 深入jQuery中的data()
引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...
- jQuery中.attr()和.prop()的区别
之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...
- jquery中Live方法不可用，Jquery中Live方法失效
jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...
- jquery中的属性和css
jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...
- jQuery中的prop（）和attr（）的区别
1.jQuery中的prop()和attr()的区别 prop()是在jQuery1.6版本之后才有的,在之前一直都是使用attr(), prop()修复了attr()的一些小bug. 2.推荐用法: ...
随机推荐
- （三）spring Security 从数据库中检索用户名和密码
文章目录 配置 Druid 数据源 数据库 Mapper 文件 自定义 `UserDetailsService` 自定义登陆校验器 `AuthenticationProvider ` 配置 secur ...
- PAT(B) 1049 数列的片段和（C）规律
题目链接:1049 数列的片段和 (20 point(s)) 题目描述 给定一个正数数列,我们可以从中截取任意的连续的几个数,称为片段.例如,给定数列 { 0.1, 0.2, 0.3, 0.4 },我 ...
- Scala Actor入门
介绍 Scala的Actor类似于Java中的多线程编程.但是不同的是,Scala的Actor提供的模型与多线程有所不同.Scala的Actor尽可能地避免锁和共享状态,从而避免多线程并发时出现资源争 ...
- 海思HI35xx平台软件开发快速入门之H264解码实例学习
ref :https://blog.csdn.net/wytzsjzly/article/details/82500277 前言 H264视频编码技术诞生于2003年,至今已有十余载,技术相当成熟 ...
- [Luogu5320][BJOI2019]堪破神机(DP+斯特林数)
https://www.cnblogs.com/cjyyb/p/10747543.html 特征方程+斯特林反演化简式子,要注意在模998244353意义下5没有二次剩余,所以每个数都要用$a+b\s ...
- 轻松玩转Ant Design Pro一
ant design pro来源于ant design,其是一段自带样式的react组件,用于企业后台的漂亮的,可控的组件.ant design有很多组件和样式,不可能所有都记住,我们只要记住常用的, ...
- vue导出Excel文件
1.需要安装file-saver和script-loader.xlsx npm install file-saver / yarn add file-saver npm install script- ...
- Java 之 转换流
一.字符编码和字符集 二.编码引发的问题 当我们使用 UTF-8 编码保存文件时,用 UTF-8 再次读取不会出现任何问题.但是,当使用其他的编码(如GBK)读取文件时,就会出现乱码现象. Demo: ...
- K2 BPM_【解决方案】K2+SAP：端到端无缝集成，为企业全面赋能提速_十年专注业务流程管理系统
企业数字化转型离不开信息技术的支撑,大部分企业的各项业务都会有专业的系统,比如ERP.BI.CRM等.但这些系统往往由于无法融合,造成信息孤岛.数据断层等问题,这阻碍了企业推动数字化转型的进程.如何实 ...
- LCD驱动的学习
简介: LCD是基于液晶的. LCD(liquid crystal display)按驱动方式分类可以分为静态驱动,简单矩阵驱动,主动矩阵驱动.其中,简单矩阵又可以分为扭转向列型(TN)和超转向列型( ...