jQuery笔记之data方法

【jQuery笔记之data方法】的更多相关文章

jQuery笔记之data方法

成品图如下所示: 搭建HTML+CSS结构 <style> /* 给tpl设置为不可见,因为我们不需要用到他,我们只是要克隆他身上的东西,克隆完就把他删掉.就跟渣男一样!!!*/ .tpl{ display: none; } </style> </head> <body> <div class="wrapper"> <div class='tpl'> <p></p> <span>…

HTML5中的data-*属性和jQuery中的.data()方法使用

原文地址链接:http://blog.csdn.net/fly_zxy/article/details/50687691: HTML5中的data-*属性我们往往会根据需要在HTML标记上添加自定义的属性来存储和操作数据,我们自定义的属性名字也千奇百怪,五花八门.我们可以通过原生的getAttribute()或jQuery中的.attr()来获取我们自定义的属性.但是前端技术在向着规范化前进.HTML5标准规定,自定义的属性都已data—*开头,这样就区分开了固有属性和自定义属性.HTML代码…

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

如果你使用jQuery类库,那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性,方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险主要的方法如下: 复制代码代码如下: .data( key, value ).data( obj ).data( key ).data() 从jQuery 1.4.3起, HTML 5 data- 属性将自动被引用到jQuery的数据对象中.例如HTML: 复制代码代码如下: <div data-role =…

jQuery中的data方法:

向元素附加数据,然后取回该数据: $("#btn1").click(function(){ $("div").data("greeting", "Hello World"); }); $("#btn2").click(function(){ alert($("div").data("greeting")); }); 定义和用法 data() 方法向被选元素附加数据,或…

jQuery笔记之工具方法—Ajax 优化回调地狱

在上一篇文我们说到了回调地狱不好的地方,今天我们看看怎么来优化它,让它可以运用到实际开发中. 什么是回调地狱?回调地狱就是一个函数里面嵌套了所有功能函数,然后缩略图形成一个三角形. 这样的代码可复用性不强.阅读性差也代表可维护性差.扩展性也差. 也不符合设计模式的六大原则, 其中的单一职责原则, 和开闭原则单一职责原则:尽量让一个函数只做一件事情开闭原则:函数应该对扩展开放,对修改关闭 --------------------------------------------------…

jQuery笔记之工具方法—高级方法Ajax

$.ajxa() ——基本使用前提:先了解js的执行机制 $.Callbacks()——回调 $.Deferred()——异步 $.when() 网络服务器链接由<渡一教育>提供 ------------------------------------------------- $.ajxa() //$.ajax() -- 基本使用 // 参数 obj // 属性 url: 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person…

jQuery笔记之工具方法extend插件扩展

jQuery工具方法 $.extend()插件扩展(工具方法) $.fn.extend()插件扩展(实例方法) 浅度克隆.深度克隆两个方法基本是一样的,唯一不同的就是调用方式不一样 ------------------------------------------------------------- $.extend()插件扩展(工具方法) 可以自己定义方法拿来使用我们定义的是可以自己传入相应的参数,然后返回出两个参数之间的随机数的方法 $. 自定义的方法名就可以使用 $.fn.exte…

jQuery笔记之工具方法

jQuery 工具方法 $.type()判断数据类型 $.isArray() $.isFunction() $.isWindow()... $.trim()消除空格 $.proxy()改变this指向 $.noConflict()防止冲突 $.each()循环 $.map() $.parseJSON()严格json字符串转换成对象-原生JSON.parse() $.makeArray() 类数组转换成数组 ---------------------------------------------…

jQuery 第四章实例方法 DOM操作之data方法

jquery 里面的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有联系,存信息, 存数据.以便以操作, 但是淘宝把data 等放在行间样式上, 是为了 vue 等其他框架的使用,在jquery中, jquery为我们提供了一个方法, 就是.data() 以便于我们存信息, 存数据.是用jquery 时,不推荐把 data等信息,写在行间样式了,性能不高,还频繁…

jQuery笔记之 Ajax回调地狱

本次演示回调地狱: 模拟电影网站,判断用户是否为该网址的vip用户(最高权限为vip) 如果vpi就展示出vip电影,点击相应的电影显示出该电影的详细介绍 ------------------------------------------------------------------ 先来看一下成品图: 先搭建好HTML+CSS结构,代码如下: <style> *{ padding: 0px; margin:0px; } .tpl{ display: none; } .wrapper{ o…

HTML 5 的自定义 data-* 属性和jquery的data()方法的使用

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用.这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和…

繁星——jquery的data()方法

今天在看JQuery文档的时候偶然看到了data()方法,觉得挺好用的,这里做个记录. 这个方法用于在元素上存放数据,返回jQuery对象.在文档中提到V1.4.3 新增用法NEW data(obj) 可传入key-value形式的数据.这个方法的用法如下: (1)在一个div上存取数据 //HTML代码: <div></div> //JQuery代码: $("div").data("blah"); // undefined $("…

利用jQuery内置的data()方法存储数据

jQuery提供了内置的data()方法,与DOM元素不同的是,它可以用来存储key/value类型的数据.数据的存储是很容易的: $('#myDiv').data('currentState', 'off'); 我们修改上一个例子的代码,以便于我们可以使用相同的HTML内容(除了没有"expanded"类)并使用data()函数来进行状态的存储: $('.button').click(function() { var menuItem = $(this).parent(); var…

JQuery data方法的使用-遁地龙卷风

(-1)说明我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本测试例子用到的showMessage方法如下 showMessage.i = 0; function showMessage(object) { var body = $("body")[0]; var $p =$("#debugp"); if($p.length==0) { $p = $("&…

html5的自定义data-＊属性和jquery的data()方法的使用示例

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用. 这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布…

转载 JQuery.data()方法学习

转载原地址 http://hanchaohan.blog.51cto.com/2996417/1271551 转载时请务必以超链接形式标明文章原始出处 .作者信息和本声明.否则将追究法律责任.http://hanchaohan.blog.51cto.com/2996417/1271551 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>返回值:jQue…

jquery data方法取值与js attr取值的区别

<a data-v="3"></a> jquery data方法的运行机制: 第一次查找dom,使用attributes获取到dom节点值,并将其值存到缓存里,第二次操作的时候,还是先找到dom,但是这次取值是直接从缓存读了,少了一步对dom的操作 attr()方法每次都要操作dom,性能上差点儿 $('a').data('v')取到的值是页面初次加载的缓存值,以后如何更改,在页面上都不会改变,但缓存值会变,可以传给i/o请求使用 document.getEle…

jQuery 的.data()方法

jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification. 示例: <div…

html5的自定义data-*属性与jquery的data()方法的使用

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用.这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和…

html5的自定义data-*属性和jquery的data()方法的使用

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据.但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用.这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情. 你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和…

JQuery官方学习资料（译）：Data方法

你可能经常会想需要通过元素来存储一些数据.在JavaScript中你可能需要给元素添加属性来实现这样的功能,但是在某些浏览器中,你可能还需要处理因此造成的内存泄露问题.JQuery提供了一个简单的方法来存储数据到元素中和检索元素中存储的数据,并且为你解决相关的内存泄露问题. // 通过元素来存储和检索数据 $( "#myDiv" ).data( "keyName", { foo: "bar" } ); $( "#myDiv&qu…

对 jQuery 中 data 方法的误解

一直以来都认为新版本中 data 是调用 dataset 实现的,对于低版本IE则采用 getAttribute其实一直是我误解了,也不知道最初这个想法是怎么来的.难道我被盗梦了? 今天谢亮兄弟和我讨论一个东西的时候,谈到了性能,他用的是 attr 操作自定义属性 data-uid,我说用 data 好,因为是 dataset 实现,然后他去翻了下 jQuery 源码和我说,没有发现这个东西,我就纳闷了.于是我去仔细读了下 data 方法的源码,才发现我一直误会了,再此,向之前问我 data…

jquery data方法获取某个元素上事件

获取某个元素上的事件,jquery的给元素绑定的事件可以用data方法取出来. 通过$(element).data("events")来获取 // 比如给一个button绑定两个click事件 $("button").click(function() { alert("1") }); $("button").click(function() { alert("2") }); // 这个时候点击该button…

html 5 data-* (dataset) 属性和 jquery data方法比较

一些文章在介绍html 5 data-* (dataset)属性时,会提到jquery的data方法,认为data方法能够很好的利用html 5的这个特性.但实际上,二者的兼容性是很差的.下面给出一段测试代码: <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <div id="e" data-v="origin">…

jQuery的data()方法

jQuery文档对.data()方法的描述: As of jQuery 1.4.3 HTML 5 data- attributes will be automatically pulled in to jQuery's data object. The treatment of attributes with embedded dashes was changed in jQuery 1.6 to conform to the W3C HTML5 specification. 示例: $("di…

jQuery学习笔记之extend方法小结

在学习jQuery的时候,学习到了$.extend的主要用法,在此做一个简单的总结. (1)当只写一个对象自变量时,拓展的是jQuery的工具方法,如: $.extend({ aaa:function(){alert('a')}, bbb:function(){alert('b')} }) 调用就是$.aaa(); $.bbb();也可以拓展jQuery对象的方法,如: $.fn.extend({ aaa:function(){alert(1)}, bbb:function(){alert(2…

Jquery笔记和ajax笔记

Jquery笔记:jQuery是一个JavaScript函数库,专为事件处理设计 1.jQuery的引入 <script text="type/javascript" src=""></script> html5中<script src=""></script> 2.选择器实例 $(this),$("p"),$("p.intro"),$(".intr…

前端：jQuery笔记

前端:jQuery笔记此系列文章乃是学习jQuery的学习笔记. Asp.net MVC Comet推送摘要: 一.简介在Asp.net MVC实现的Comet推送的原理很简单. 服务器端:接收到服务器发送的AJAX请求,服务器端并不返回,而是将其Hold住,待到有东西要通知客户端时,才将这个请求返回. 客户端:请求异步Action,当接收到一个返回时,立即又再发送一个. 缺点:会长期占用一个Asp...阅读全文 posted @ 2015-02-10 12:01 逆心阅读(1072)…

jquery中的ajax方法

$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async: 要求为B…

Python全栈之jQuery笔记

jQuery runnoob网址: http://www.runoob.com/jquery/jquery-tutorial.html jQuery API手册: http://www.runoob.com/manual/jquery/ jQuery笔记笔记来源于: 传智播客的黑马程序员视频笔记. 菜鸟教程:http://www.runoob.com/ 自己的查询与整理. JS的不完美地方: 1. 代码比较麻烦,给多个元素添加事件需要遍历,可能还需要进行嵌套. 2. 找对象麻烦,方法少,还比较…