数据缓存 队列控制 插件机制 多库共存

2024-03-28 23:18
文章标签 数据 队列 控制 插件 缓存 机制 共存 多库

本文主要是介绍数据缓存 队列控制 插件机制 多库共存，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

数据缓存

data([key],[value])

概述

在元素上存放数据,返回jQuery对象。

如果jQuery集合指向多个元素，那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando，就能在一个元素上存放任何格式的数据，而不仅仅是字符串。

参数

key

存储的数据名.

key,value

key:存储的数据名

value:将要存储的任意数据

obj

一个用于设置数据的键/值对

data()

示例

描述:

在一个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!;

 

removeData([name|list])

概述

在元素上移除存放的数据

与$(...).data(name, value)函数作用相反

参数

[name]

存储的数据名

[list]

移除数组或以空格分开的字符串

示例

描述:

从元素中删除之前添加的数据：

jQuery 代码:

$("#btn2").click(function(){

  $("div").removeData("greeting");

  alert("Greeting is: " + $("div").data("greeting"));

});

 

jQuery.data(element,[key],[value])

概述

在元素上存放数据,返回jQuery对象。

注意：这是一个底层方法。你应当使用.data()来代替。

参数

element,key,value

element:要关联数据的DOM对象

key:存储的数据名

value:将要存储的任意数据

//跟$(element).date(key,value);一样

element,key

element:要查询数据的DOM对象

key:存储的数据名

element

要查询数据的DOM对象

示例

jQuery 代码:

jQuery.data(document.body, 'foo', 52);

jQuery.data(document.body, 'bar', 'test');

 

 

 

队列控制

queue(element,[queueName])

概述

显示或操作在匹配元素上执行的函数队列

参数

element,[queueName]

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

element,queueName,newQueue

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

newQueue:替换当前函数列队内容的数组

element,queueName,callback()

element:检查附加列队的DOM元素

queueName:字符串值，包含序列的名称。默认是 fx, 标准的效果序列。

callback():要添加进队列的函数

示例

描述:

显示队列长度

HTML 代码:

<style>//<style> 标签定义 HTML 文档的样式信息。

//在 style 元素中，您规定的是 HTML 元素如何在浏览器中呈现。

 

  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();

描述:

通过设定队列数组来删除动画队列

HTML 代码:

<style>

  div { margin:3px; width:40px; height:40px;

        position:absolute; left:0px; top:30px; 

        background:green; display:none; }

  div.newcolor { background:blue; }

  </style>

 

  <button id="start">Start</button>

  <button id="stop">Stop</button>

  <div></div>

jQuery 代码:

$("#start").click(function () {

      $("div").show("slow");

      $("div").animate({left:'+=200'},5000);

      $("div").queue(function () {

          $(this).addClass("newcolor");

          $(this).dequeue();//使用 dequeue() 终止一个自定义的队列函数：

      });

      $("div").animate({left:'-=200'},1500);

      $("div").queue(function () {

          $(this).removeClass("newcolor");

          $(this).dequeue();

      });

      $("div").slideUp();

  });

  $("#stop").click(function () {

      $("div").queue("fx", []);

      $("div").stop();

  });

描述:

插入一个自定义函数 如果函数执行后要继续队列，则执行 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();

});

 

 

dequeue([queueName])

概述

从队列最前端移除一个队列函数，并执行他。

参数

[queueName]

队列名，默认为fx// f出自英语单词function(函数)
设集合A 是一个非空的数集，对A 中的任意数x按照确定的法则f，都有唯一确定的数y与它对应，责这种关系叫做集合A 上的一个函数。

示例

描述:

使用 dequeue() 终止一个自定义的队列函数

jQuery 代码:

$("div").queue(function () {

  $(this).toggleClass("red");

  $(this).dequeue();

});

描述:

用dequeue来结束自定义队列函数，并让队列继续进行下去。

HTML 代码:

<style>

  div { margin:3px; width:50px; position:absolute;

        height:50px; left:10px; top:30px; 

        background-color:yellow; }

  div.red { background-color:red; }

  </style>

 

  <button>Start</button>

  <div></div>

jQuery 代码:

$("button").click(function () {

      $("div").animate({left:'+=200px'}, 2000);

      $("div").animate({top:'0px'}, 600);

      $("div").queue(function () {

          $(this).toggleClass("red");

          $(this).dequeue();

      });

      $("div").animate({left:'10px', top:'30px'}, 700);

  });

 

 

clearQueue([queueName])

概述

清空对象上尚未执行的所有队列

如果不带参数，则默认清空的是动画队列。这跟stop(true)类似，但stop()只能清空动画队列，而这个可以清空所有通过 .queue() 创建的队列。

参数

queueName

含有队列名的字符串。默认是"Fx"，动画队列。

示例

描述:

停止当前正在运行的动画：

jQuery 代码:

$("#stop").click(function(){

  $("#box").clearQueue();

});

插件机制

jQuery.fn.extend(object)

概述

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

查看这里<a href="http://docs.jquery.com/Plugins/Authoring" title="Plugins/Authoring">Plugins/Authoring</a>可以获取更多信息。

参数

Object                                           Object

用来扩充添加 jQuery 对象。

示例

描述:

增加两个插件方法。

jQuery 代码:

jQuery.fn.extend({

  check: function() {

    return this.each(function() { this.checked = true; });

  },

  uncheck: function() {

    return this.each(function() { this.checked = false; });

  }

});

结果:

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

 

jQuery.extend(object)

概述

扩展jQuery对象本身。

用来在jQuery命名空间上增加新函数。 查看 'jQuery.fn.extend' 获取更多添加插件的信息。

参数

object

用以扩展 jQuery 对象

 

 

多库共存

jQuery.noConflict([extreme])

概述

运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。

参数

Extreme                               Boolean

传入 true 来允许彻底将jQuery变量还原

示例

描述:

将$引用的对象映射回原始的对象。

jQuery 代码:

jQuery.noConflict();

// 使用 jQuery

jQuery("div p").hide();

// 使用其他库的 $()

$("content").style.display = 'none';

描述:

恢复使用别名$，然后创建并执行一个函数，在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中，原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

jQuery 代码:

jQuery.noConflict();

(function($) { 

  $(function() {

    // 使用 $ 作为 jQuery 别名的代码

  });

})(jQuery);

// 其他用 $ 作为别名的库的代码

描述:

创建一个新的别名用以在接下来的库中使用jQuery对象。

jQuery 代码:

var j = jQuery.noConflict();

// 基于 jQuery 的代码

j("div p").hide();

// 基于其他库的 $() 代码

$("content").style.display = 'none';

描述:

完全将 jQuery 移到一个新的命名空间。

jQuery 代码:

var dom = {};

dom.query = jQuery.noConflict(true);

结果:

// 新 jQuery 的代码

dom.query("div p").hide();

// 另一个库 $() 的代码

$("content").style.display = 'none';

// 另一个版本 jQuery 的代码

jQuery("div > p").hide();

 

 

这有助于确保jQuery不会与其他库的$对象发生冲突。 
在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。 
注意:这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库之前使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。 
OK，这样一来的话，$这个函数就没办法用了，这不是很郁闷，我可不想习惯了$在去投奔其它的函数名了。怎么办呢？办法还是有的，如下代码： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html http://www.w3.org/1999/xhtml" target=_blank>http://www.w3.org/1999/xhtml" > 
<head> 
    <title></title> 
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script><!--导入jQuery库，当然网站上用应该使用压文件，开发在VS08下使用jquery-1.3.2-vsdoc.js，会有智能提示--> 
    <script type="text/javascript"> 
        $ = document.getElementById;//定义一个$函数，与jQuery的$函数发生冲突 
        (function($) {//使用匿名方法（闭包{具体叫法尚不明朗，先这么叫吧}），接收一个参数$ 
            $(function() { 
                $("#show").css({ border: "1px dotted #336699", width: "200px", height: "150px", color: "red" }).html("今天天气不错，挺风和日丽的！"); 
            }); 
        })(jQuery);//给前的匿名函数传参，最终前面$里面存储的是jQuery, 
    </script> 
</head> 
<body> 
    <div id="show"></div> 
</body> 
</html> 

我们就不必在为有多个库使用$而烦脑了。


这篇关于数据缓存 队列控制 插件机制 多库共存的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/856962。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
关于数据埋点，你需要了解这些基本知识

关于数据埋点，你需要了解这些基本知识

产品汪每天都在和数据打交道，你知道数据来自哪里吗？ 移动app端内的用户行为数据大多来自埋点，了解一些埋点知识，能和数据分析师、技术侃大山，参与到前期的数据采集，更重要是让最终的埋点数据能为我所用，否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式，可以区分为： 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理：自动程度高的，能解决通用统计，便于统一化管理，但个性化定
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
异构存储（冷热数据分离）

异构存储（冷热数据分离）

异构存储主要解决不同的数据，存储在不同类型的硬盘中，达到最佳性能的问题。 异构存储Shell操作 （1）查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies （2）为指定路径（数据存储目录）设置指定的存储策略 hdfs storagepolicies -setStoragePo
阅读更多...
Hadoop集群数据均衡之磁盘间数据均衡

Hadoop集群数据均衡之磁盘间数据均衡

生产环境，由于硬盘空间不足，往往需要增加一块硬盘。刚加载的硬盘没有数据时，可以执行磁盘数据均衡命令。（Hadoop3.x新特性） plan后面带的节点的名字必须是已经存在的，并且是需要均衡的节点。 如果节点不存在，会报如下错误： 如果节点只有一个硬盘的话，不会创建均衡计划： （1）生成均衡计划 hdfs diskbalancer -plan hadoop102 （2）执行均衡计划 hd
阅读更多...
hdu1180（广搜+优先队列）

hdu1180（广搜+优先队列）

此题要求最少到达目标点T的最短时间，所以我选择了广度优先搜索，并且要用到优先队列。 另外此题注意点较多，比如说可以在某个点停留，我wa了好多两次，就是因为忽略了这一点，然后参考了大神的思想，然后经过反复修改才AC的 这是我的代码 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2