数据缓存
1 data(name) 返回值:Any
功能:返回返回元素存储上相应名字的数据,可以用data(name,value)来设定。
如果jQuery指向的集合指向多个元素,那将只返回第一个元素的数据
--name String 存储的数据名
eg:在一个div上存取数据
HTML 代码:
<div></div>jQuery 代码:
$("div").data("blah"); // undefined
$("div").data("blah", "hello"); // blah设置为hello
$("div").data("blah"); // hello
$("div").data("blah", 86); // 设置为86
$("div").data("blah"); // 86
$("div").removeData("blah"); //移除blah
$("div").data("blah"); // undefined描述:
在一个div上存取名/值对数据
HTML 代码:
<div></div>jQuery 代码:
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;
2 data(name,value) 返回值:Any
在元素上存放数据,同时也返回value
--name String 存储的数据名
--value Any 将要存储的数据
eg:参考data(name)
3 removeData(name) 返回值:jQuery
在元素上移除存放的数据
与$(...).data(name,value)函数作用相反
--name String 要存储的数据名
eg:参考data(name)
4 query(name) 返回值:Array<Function>
返回值指向第一个匹配元素的队列(将是一个函数数组)
--name String 队列名,默认为vfx
eg:
显示队列长度
HTML 代码:
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
span { color:red; }
</style>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
jQuery 代码:
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();
5 query(name,callback) 返回值:jQuery
在匹配的元素的队列最后添加一个函数
--name String 队列名,默认为fx
--callback Function 要添加进队列的函数
eg:插入一个自定义函数如果函数执行后要继续队列,则执行 jQuery(this).dequeue();
HTML 代码:
<style>
div { margin:3px; width:40px; height:40px;
position:absolute; left:0px; top:30px;
background:green; display:none; }
div.newcolor { background:blue; }
</style>
Click here...
<div></div>
jQuery 代码:
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
6 query(name,queue) 返回值:jQuery
将匹配元素的队列用新的一个队列来代替(函数数组)
--name String 队列名,默认为fx
--queue Array<Function> 用于替换的队列。所有函数都有一个参数,这个值与queue(callback)相同
eg:通过设定队列数组来删除动画队列
7 dequeue(name) 返回值:jQuery
从队列最前端一处一个队列函数,并执行他
--name String 队列名,默认为fx
分享到:
相关推荐
**jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
《jQuery学习笔记详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的语法和强大的功能,深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery,无论你是初学者还是有...
**jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...
本篇将详细探讨jQuery学习笔记中第二天涉及的电梯导航案例,该案例旨在实现一个网页上的楼层跳转功能,通过点击楼层链接,页面会平滑滚动到相应的位置,提升用户体验。 首先,我们要理解电梯导航的基本原理。在网页...
- jQuery对象转为DOM对象通常通过索引访问,如`$("#msg")[0]`,这将返回第一个匹配元素的DOM节点,可以使用DOM方法,但不能再调用jQuery方法。 3. **获取jQuery集合中的某一项**: 使用`eq(index)`或`get(index)`...
**jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...
### jQuery学习笔记精心整理 #### 一、什么是jQuery 1. **定义**: - **第三方**:jQuery是由第三方组织或个人编写的函数库,并非浏览器内置或开发者自定义的函数,因此使用前需从官方网站([www.jquery.com]...
本篇文章将基于“jQuery学习笔记源码 1第一个jquery”的主题,深入探讨jQuery的核心概念、基本用法以及在实际项目中的应用。 一、jQuery简介 jQuery是由John Resig在2006年创建的,它的目标是“write less, do ...
### Jquery 学习笔记1 本篇笔记主要围绕 jQuery 的基本使用方法展开,包括了 DOM 操作、选择器的使用、属性与过滤器等内容。jQuery 是一款优秀的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画等...
### JQuery自学学习笔记 #### 一、JQuery简介与基本语法 JQuery 是一款轻量级的 JavaScript 库,极大地简化了 HTML 元素的选择、操作以及事件处理等任务。它提供了一种更加简单的方式来进行网页开发,使得开发者...
《jQuery学习笔记源码1-3章》涵盖了jQuery的基础到进阶内容,是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...
### 锋利的JQuery学习笔记 #### 一、页面加载事件与链式操作 **页面加载事件**:在Web开发中,确保DOM完全加载完毕后再执行某些操作是非常重要的。JQuery提供了一个简单的方式来实现这一目标,即通过`$(document)....
### JQuery学习笔记详解 在本篇学习笔记中,我们将详细探讨JQuery的选择器以及一些基本用法,并结合具体的代码示例来深入理解JQuery的工作原理。 #### 选择器 1. **选择特定元素** - `$('#selected-plays > li:...
在本篇jQuery学习笔记中,我们将探讨如何使用这个流行的JavaScript库来简化网页开发中的DOM操作。jQuery以其简洁的API和强大的功能,使得处理HTML元素、事件处理、动画以及Ajax交互变得更加简单。以下是一些基本的...
**jQuery学习笔记——属性大全** 在JavaScript的世界里,jQuery是一个非常流行且强大的库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本笔记将深入探讨jQuery中的核心属性,帮助开发者快速掌握和...
《jQuery学习笔记——15天快速入门指南》 jQuery,作为一个强大的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。它以其简洁的API和高效的性能,成为了前端开发者的首选工具之一...
例如,`$("div:first").css("background", "#bfa")`将选择并改变第一个`div`元素的背景色,而`$("div:gt(3)").css("background", "#bfa")`会改变索引值大于3的所有`div`元素的背景色。 解决jQuery与其他库(如...