$(".role-info .play").click(function(){ $(".role-info .video").show(); $(".role-info video").attr("src",function(){ switch(role){ case 0: return "https://webstatic.mihoyo.com/upload/static-resource/2022/02/15/36c3eda9e32a39a56c75bf9b51284c04_7759740696565879212.mp4" case 1: return "https://webstatic.mihoyo.com/upload/static-resource/2021/09/19/6ad98a93af5a4caf2c8eddfd8bda51d7_3890877391063843086.mp4" case 2: return "https://webstatic.mihoyo.com/upload/static-resource/2021/08/31/b124feae6bab5a3694d59e7c7315af84_1762984313232940807.mp4" } }) $(".role-info video").trigger("play"); })解释代码

时间: 2024-04-02 09:36:26 浏览: 140

jQuery $.data()方法使用注意细节

jQuery中的$.data()方法是一个非常重要的函数，它用于存储与DOM元素相关联的数据，但使用时有一些需要注意的细节。本文档将深入介绍这些细节，以帮助开发者更好地理解和应用$.data()方法。从jQuery 1.4.3版本开始，HTML5的data-*属性会被自动添加到jQuery的data对象中。这意味着如果你在HTML元素中定义了data-*属性，你可以使用$.data()方法直接访问这些数据，而无需使用.attr()方法。例如，对于以下HTML元素： ```html <div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div> ``` 可以通过$.data()方法以如下方式进行访问： ```javascript $("div").data("role") === "page"; $("div").data("lastValue") === 43; $("div").data("hidden") === true; $("div").data("options").name === "John"; ``` 接着，当使用$.data()方法获取数据值时，jQuery会尝试将获取的字符串值转换成JavaScript的数据类型。这一转换包括以下几种情况： 1. 如果值是"true"或"false"，则返回相应的布尔值。 2. 如果值是"null"，则返回null值。 3. 如果值是由纯数字构成的字符串（例如"123"），则返回相应的数字。 4. 如果值是由JSON格式字符串构成（例如"{key:value}"或"[1,2,3]"），则尝试使用jQuery.parseJSON()方法解析该值为JSON对象或数组。 5. 如果以上情况都不符合，那么返回的是原始字符串值。需要注意的是，如果你希望获取的是字符串值，而不希望它被自动转换成其他数据类型，你可以使用.attr("data-" + key)方法来获取对应的值。这个方法不会对值进行任何类型转换，而是返回HTML属性中的实际字符串值。此外，从jQuery 1.6版本起，对于带有嵌入破折号的属性名（例如data-background-color）的处理方式也有所改变，其变更符合W3C的HTML5规范。从代码逻辑上看，$.data()方法首先尝试从DOM元素中获取指定的data-*属性值。如果元素节点类型为1（即元素节点），并且内部没有找到对应的数据，则会尝试从HTML的data-*属性中获取。获取到的字符串值随后会被根据上述规则进行类型转换。要理解上述过程，我们可以查看jQuery的源码中相关部分，如下所示： ```javascript function dataAttr(elem, key, data) { // 如果在内部没有找到任何值，并且元素节点类型是1（即元素节点） if (data === undefined && elem.nodeType === 1) { // 替换掉大写字母后的破折号，使得属性名符合data-*的标准格式 var name = "data-" + key.replace(rmultiDash, "$1").toLowerCase(); data = elem.getAttribute(name); if (typeof data === "string") { try { // 尝试将获取的字符串值转换成JavaScript的数据类型 data = data === "true" ? true : data === "false" ? false : data === "null" ? null : // 只有字符串完全由数字构成时才转换成数字 +data + "" === data ? +data : // 如果数据格式像是JSON，则尝试用jQuery.parseJSON解析 rbrace.test(data) ? jQuery.parseJSON(data) : data; } catch(e) { // 如果转换出错，则忽略异常 } // 确保设置的数据不会被后续改变 jQuery.data(elem, key, data); } else { data = undefined; } } return data; } ``` $.data()方法是处理DOM元素与JavaScript数据关联的强大工具。它不仅能够简化数据管理，而且允许开发者通过简捷的方式管理数据。但是使用该方法时，开发者需要注意数据类型转换的规则，尤其是在需要保持数据原始类型时，应该使用(attr)方法获取值。正确地理解和使用这些细节，可以避免在使用$.data()方法时遇到的常见的问题和错误。

这是一段 JavaScript 代码，主要实现了一个点击事件处理函数。当用户点击页面上的某个元素（.role-info .play）时，会触发该函数。该函数的目的是展示一个视频，视频的地址根据变量 role 的不同值而异。在函数内部，通过 switch 语句判断变量 role 的值，并根据不同的值返回相应的视频地址。然后将该视频地址赋值给一个视频元素（.role-info video）的 src 属性，最后触发该视频元素的播放操作。

阅读全文

相关推荐

Node.js-node-express|实现登录验证和授权

ansible-galaxy.gentoo-systemd-remote

arg.role && {role : {$in: arg.role}}

cat lnmp_nfs.yml -name: use nfs role hosts: web roles: - nfs

this.$refs['role'].validate()

data-bs-toggle="modal" data-bs-target=".add-modal"

tigera-operator.yaml

SysRole info = roleMapper.checkRoleKeyUnique(role.getRoleKey());

kubectl taint node master node-role.kubernetes.io/master:NoSchedule-

const andwhere = ([ arg.role && {role : {$in: arg.role}} ])

vue-admin-template中，怎么设置store.state.user.role的值？

data = data.field; data.role ='yonghu'解释

java.sql.SQLSyntaxErrorException: ORA-01031: insufficient privileges

this.$router 传递对象

role.pb.model.RoleSet roles = 7;

By default, which file describes scopes and role-templates of an application for the instantiation of an XSUAA service instance? (A). xs-security.json (B). package.json (C). manifest.yml (D). services-manifest.yml

page.get_by_role

3.授权的T-sql语句

最新推荐

html5的data-role的属性

性能测试中用LambdaProbe监控Tomcat Tomcat和Probe的配置.doc

ACS880基本控制程序固件手册-revD-参数手册

WordPress作为新闻管理面板的实现指南

管理建模和仿真的文件

函数与模块化编程宝典：J750编程高效之路

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1， 这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标 求该点的建筑高度（塔外的高度为零)的程序

NPC_Generator：使用Ruby打造的游戏角色生成器

"互动学习：行动中的多样性与论文攻读经历"

流程控制与循环结构详解：J750编程逻辑构建指南

用C语言求有4个圆塔，圆心分别为（2，2)，(2，-2)，(-2，2)，(-2，-2)圆半径为1，这4个塔的高度为10m 塔以外无建筑物接输入任意点的坐标求该点的建筑高度（塔外的高度为零)的程序