在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中使用自定义属性的更多相关文章

  1. 总结Jquery中获取自定义属性使用.attr()和.data()以及.prop()的区别

    一..attr()和.data()的区别: .attr()和.data()本质上属于DOM属性和Jquery对象属性的区别. 看一个例子: <!DOCTYPE html> <html ...

  2. jquery 中一些 特殊方法 的特殊使用 一览表

    cnblogs的页面, 一种是管理页面, 是随笔的列表 a full list of essays. 另一种是 首页. 要搜索文档的话, 就使用 "首页"的那种方式. 一个jque ...

  3. jQuery中使用data()方法读取HTML5自定义属性data-*实例

    如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险 主要的方法如 ...

  4. jQuery中prop() , attr() ,css() 的区别

    1.  HTML属性是指页面标记中放在引号中的值,而DOM属性则是指通过JavaScript能够存取的值. (1)在jQuery中,prop()是操作DOM属性,attr()是操作HTML属性. HT ...

  5. 深入jQuery中的data()

    引入 data函数在jQuery中看起来很不起眼, 就像沙滩上一颗平凡的沙子, 但仔细一瞅, 却惊讶的发现data是jQuery中无比重要的一环, 甚至jQuery中各种事件都基于此. data有什么 ...

  6. jQuery中.attr()和.prop()的区别

    之前学习jQuery的时候,学习到了两种取得标签的属性值的方法:一种是elemJobj.attr(),另一种是elemJobj.prop().而在学习JS的时候,只有一种方法elemObj.getAt ...

  7. jquery中Live方法不可用，Jquery中Live方法失效

    jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...

  8. jquery中的属性和css

    jQuery中的属性用于获取或设置元素的属性 1.attr(),获取或设置所有相匹配的元素的属性值:removeAttr("attr"),移除所有相匹配的元素的属性 //html ...

  9. jQuery中的prop（）和attr（）的区别

    1.jQuery中的prop()和attr()的区别 prop()是在jQuery1.6版本之后才有的,在之前一直都是使用attr(), prop()修复了attr()的一些小bug. 2.推荐用法: ...

随机推荐

  1. Redis--zset类型操作命令

    有序集合类型 zset (sorted set ) redis 有序集合zset和集合set一样也是string类型元素的集合,且不允许重复的成员. 不同的是 zset 的每个元素都会关联一个分数(分 ...

  2. python学习-41 装饰器 -- 高阶函数

    装饰器:本质就是函数.是为其他函数添加附加功能的. 原则:1.不修改被修饰函数的源代码2.不修改被修饰函数的调用方式 --- 装饰器的知识储备 装饰器=高阶函数+函数嵌套+闭包 高阶函数 1.高阶函数 ...

  3. pandas之时间重采样笔记

    周期由高频率转向低频率称为降采样:例如5分钟股票交易数据转换为日交易数据 相反,周期也可以由低频转向高频称为升采样 其他重采样:例如每周三(W-WED)转换为每周五(W-FRI) import pan ...

  4. Hibernate定义

    Hibernate:(Object Relational Mapping)对象关系映射   对象关系映射就是在操作数据库之前,先将数据库的表和实体类关联起来,通过实体类的对象,就可以操作数据库,开发人 ...

  5. 两个gif图片动画效果

    <div className="uploading-animation-tip-wrap"> <img src={require('~/shared/assets ...

  6. Spring Cloud Alibaba学习笔记（10） - Spring消息编程模型下，使用RocketMQ收发消息

    编写生产者 集成 添加依赖 <dependency> <groupId>org.apache.rocketmq</groupId> <artifactId&g ...

  7. MySQL绿色版mysql-5.7.17-winx64简洁安装教程

    1.解压MySQL绿色版,复制my-default.ini,修改名称为my.ini 2. 以下为my.ini文件 # For advice on how to change settings plea ...

  8. Ajax调用WebService接口样例

    在做手机端h5的应用时,通过Ajax调用http接口时没啥问题的:但有些老的接口是用WebService实现的,也来不及改成http的方式,这时通过Ajax调用会有些麻烦,在此记录具体实现过程.本文使 ...

  9. vue多页面项目搭建(vue-cli 4.0)

    1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...

  10. 2019最新Web前端经典面试试题(含答案)

    1,阐述清楚浮动的几种方式(常见问题)(1)父级div定义 height原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题. 优点:简单.代码少.容易掌握 缺点:只适合高 ...