首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

我使用Jquery添加了一个src属性,但它的工作方式有所不同。为什么?

Jquery是一个流行的JavaScript库,用于简化前端开发中的DOM操作、事件处理、动画效果等。当使用Jquery添加一个src属性时,它的工作方式可能会有所不同,原因如下:

  1. Jquery的.attr()方法和.prop()方法的区别:Jquery提供了两种方法来操作元素的属性,即.attr()和.prop()。.attr()方法用于获取或设置HTML属性的值,而.prop()方法用于获取或设置元素的属性值。当使用.attr()方法添加src属性时,它会将属性值直接添加到HTML标签中,但不会触发浏览器对该属性的解析和执行。相反,当使用.prop()方法添加src属性时,它会将属性值添加到元素的属性中,并且会触发浏览器对该属性的解析和执行。
  2. 动态加载资源:Jquery的.attr()方法添加src属性时,如果该属性值是一个URL链接,浏览器会尝试加载该资源。这意味着,当使用.attr()方法添加src属性时,浏览器会立即开始加载该资源,并且可能会导致页面加载速度变慢。相反,使用.prop()方法添加src属性时,浏览器不会立即加载资源,而是等待其他JavaScript代码执行完毕后再加载。
  3. 事件绑定:当使用.attr()方法添加src属性时,如果该属性值是一个JavaScript代码片段或函数名,它会将该代码片段或函数名作为字符串添加到HTML标签中。这意味着,该代码片段或函数名不会被执行,而只是作为字符串存在。相反,使用.prop()方法添加src属性时,如果该属性值是一个JavaScript代码片段或函数名,它会将该代码片段或函数名作为实际的JavaScript代码添加到元素的属性中,并且会被执行。

总结起来,当使用Jquery添加src属性时,如果希望立即加载资源并触发浏览器对该属性的解析和执行,可以使用.attr()方法;如果希望延迟加载资源或将JavaScript代码作为属性值执行,可以使用.prop()方法。

腾讯云相关产品推荐:

  • 云服务器(CVM):提供弹性计算能力,满足各种业务需求。详情请参考:腾讯云云服务器
  • 云数据库MySQL版(CDB):提供高可用、可扩展的MySQL数据库服务。详情请参考:腾讯云云数据库MySQL版
  • 人工智能机器学习平台(AI Lab):提供丰富的人工智能开发工具和算法模型,帮助开发者快速构建和部署AI应用。详情请参考:腾讯云人工智能机器学习平台
  • 云存储(COS):提供安全、稳定、低成本的对象存储服务,适用于各种数据存储需求。详情请参考:腾讯云云存储
  • 区块链服务(BCS):提供一站式区块链解决方案,帮助企业快速搭建和管理区块链网络。详情请参考:腾讯云区块链服务

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

都9102年了,还需要用到 jQuery 吗?

在本文中,将介绍 jQuery 历史、优点、缺点以及为什么你仍要用它。 什么是jQuery?...jQuery 是开源(任何人都可以贡献、修改代码或建议更新功能),它在互联网上有一个非常大用户社区【https://forum.jquery.com/】。 为什么开发人员仍然使用jQuery?...它有一些很好功能,人们觉得有用。其中包括: jQuery一个可扩展插件系统 - jQuery一个即插即用插件系统。你所需要做就是下载插件并使用或自定义它们来满足你需求。...增加了包大小 - 当被压缩时,其大小为 86.1 Kb 或 28 kb,jQuery 为你网站增加了更多大小,即使大多数情况下只需要其中一部分功能。...@keyframes 是一个用于动画内容重要工具,用来定义要在舞台上应用样式以及 animation 属性或其子属性,它被绑定到选择器,指定如何用关键帧样式及其应用时机。

2.2K40

jQuery.data() 实现方式

用name和value为对象附加数据     使用 jQuery.data() 为普通对象附加数据时,其本质是将一个 “cache” 附加到了对象上,并使用一个特殊属性名称。     ...而 “cache” 又是 “obj” 一个属性,在 jQuery 1.6中,这个属性名称是 “jQuery16”加上一个随机数(如下面提到jQuery16018518865841457738”...为了深入了解其中实现机制,我们有使用一个循环来获取 “obj” 属性,实际上是取出了在 “obj” 上附加 “cache”对象。     ...DOM Element (当然,也可以用 jQuery 选择器),然后在这个 DOM Element 上附加了一个属性,随后就从 DOM Element 上取出了附加属性并输出。     ...认为这应该是一种性能优化方式,毕竟少一个引用层次,存取速度应该会略快一些。 jQuery 中这刻意优化地方非常多,在许多原本可以统一处理对方都进行了特殊处理。

98970
  • 手把手教你用jQuery Mobile做相册

    【一、项目背景】 jQuery是当前很流行一个JavaScript框架,使用类似于CSS选择器,可以方便操作HTML元素,拥有很好可扩展性,拥有不少jQuery插件,也可对个方面进行插件开发。..."> 【三、项目实施】 1. body里面写入以下代码,(img标签src属性导入自己喜欢图片,设置图片样式)。...data-rel="popup" 设置当前元素具有弹出窗功能 data-position-to="window" 设置弹出窗出现在窗口中间位置 2. 给图片图标。...="delete" 删除按钮 data-role="button" 表示这是一个按钮 提示:jQuery Mobile 中按钮会自动获得样式,这增强了他们在移动设备上交互性和可用性。...我们推荐您使用 data-role="button" 元素来创建页面之间链接,而 或 元素用于表单提交。 【四、效果展示】 1.

    2.4K10

    通过代码重用攻击绕过现代XSS防御

    XSS已有近二十年历史了,但它仍然是Web上最常见漏洞之一。因此,已经发展了许多机制来减轻漏洞影响。经常会误以为这些机制可以作为针对XSS保护。今天,我们将了解为什么情况并非如此。...我们只需要注入一个ID为“ expression”和一个名为“ data”属性HTML元素。内部数据将传递给eval。 我们试一试,是的!我们绕过了CSP! ?...JavaScript执行接收器小工具:类似于我们刚才看到示例,可以独立运行,也可以作为链中最后一步 让我们看另一个例子。我们将使用相同应用程序,但现在让我们包括jQuery mobile。 <?...任何内容,幸运是,jQuery Mobile有一个已知脚本小工具可供我们使用。...可能不明显是,当您创建弹出窗口时,库会将id属性写入HTML注释中。 ? jQuery中负责此工作代码如下所示: ? 这是一个代码小工具,我们可以滥用它来运行JavaScript。

    2.6K10

    【深入浅出jQuery】源码浅析--整体架构

    ,那么为什么两个方法指向同一个函数实现,但是却实现不同功能呢, // 阅读源码就能发现这归功于 this 强大力量 // 如果传入两个或多个对象,所有对象属性会被添加到第一个对象 target /...实现和 jQuery.fn.extend 实现共用了同一个方法,但是为什么能够实现不同功能了,这就要归功于 Javascript 强大(怪异?)...hide(); 当选择了 ('div').eq(0) 之后使用 end() 可以回溯到上一步选中 jQuery 对象 $('div'),其内部实现其实是依靠添加了 prevObject 这个属性: ?...// 给返回jQuery 对象添加属性 prevObject // 所以也就是为什么通过 prevObject 能取到上一个合集引用了 ret.prevObject = this;...然后想谈谈正则表达式,jQuery 当中用了大量正则表达式,觉得如果研读 jQuery ,正则水平一定能够大大提升,如果是个正则小白,建议在阅读之前先去了解以下几点: 1)了解并尝试使用 Javascript

    66241

    JavaScript 构造函数

    脑海中浮现第一件事是“建筑师”。也许只是个人感觉,但第一次了解 JavaScript 构造函数时,这是脑海中浮现第一件事。...构造函数功能包括创建一个新对象并为对象中已经存在任何属性设置值。...由于函数关键字工作方式与其他函数一样,因此可以使用它来定义构造函数。但是,构造函数遵循以下准则: 使用大写字母在构造函数名称中,以使其与其他函数区分开。 构造函数如何使用 this 关键字有所不同。...关于 JavaScript 构造函数重要信息虽然有时使用构造函数可能很简单,但它也可能非常费力。以下是每个开发人员都应该知道一些关于使用构造函数基本信息。...使用基于参数构造函数 构造函数可以扩展以接受参数。如果要开发灵活、响应灵活代码,这是至关重要。当从一个构造函数创建对象时,该对象将始终继承构造函数中声明所有属性

    18720

    script新属性integrity与web安全,再谈xss

    当浏览器检测加载脚本签名与给定签名不一致时,会拒绝执行该脚本。为什么CDN主推SRI功能,因为XSS,可以牵扯出DDoS攻击(分布式拒绝服务攻击),XSS比劫持肉鸡简单多了!...JavaScript可以发出HTTP(S)请求,实现网页内容异步加载,但它也能将浏览器变成攻击者武器。...为了节省带宽及提高性能,它们会使用由第三方托管JavaScript库。jQuery是Web上最流行JavaScript库,截至2014年大约30%网站都使用了它。...如果攻击者攻陷了这样一个托管JavaScript文件服务器,并向文件中添加了DDoS代码,那么所有访问者都会成为DDoS攻击一部分,这就是服务器劫持,如下图所示:这种攻击之所以有效是因为HTTP中缺少一种机制使网站能够禁止被篡改脚本运行...这就是守门神:integrity=文件指纹密码散列可以唯一标识一个数据块,任何两个文件密码散列均不相同。属性integrity提供了网站希望运行脚本文件密码散列。

    1.1K10

    3分钟搞定图片懒加载

    为什么需要懒加载 对于一个页面加载速度影响最大因素之一就是图片资源,如果一个页面图片太多(比如某宝,某东等),整个页面的图片大小可以到达几百兆,即使在百兆宽带,全部下载的话,也需要上十秒时间,这对于用户耐心考验是巨大...因此,通过html5自定义属性data-xxx先暂存src值,然后在需要显示时候,再将data-xxx值重新赋值到imgsrc属性即可。...可以看出,10张图片是一次性全部加载完。 下面改造成懒加载: 首先将页面上图片 src 属性设为空字符串,而图片真实路径则设置在data-src属性中。...当向下滑动时候,从Network面板可以看到,剩下图片是一个个加载。 可能有人疑问为什么第一次加载了4张,而不是3张?...因为在判断是否在可视区内加了100 ,return bound.top <= clientHeight + 100; 可以提前加载一张图片。 注意:一定要设置图片高度。

    2.4K20

    2024全网最全面及最新且最为详细网络安全技巧 七之 XSS漏洞典例分析POC以及 如何防御和修复(5)———— 作者:LJS

    Tui Editor使用了第二种方式,在他代码中发现了一个默认HTML sanitizer,在用户没有指定自己sanitizer时将使用这个内置sanitizer:https://github.com... 这里使用一个id为attributesinput元素劫持了原本formattributes,el.attributes不再等于属性列表,自然关于移除白名单外属性逻辑也就无从说起了。...在Tui Editor单元测试中增加了这样一个case: 平平无奇,但我将其放到未修复HTML sanitizer中竟然绕过了属性白名单,成功执行...而Tui Editor因为只考虑了双svgPayload,所以可以使用它轻松绕过最新补丁,构造一个无交互XSS。 那么是否还能再找到一种绕过方式呢?...htmlPrefilter()中实现:jquery-src,其后再进行原生innerHTML调用来加载到页面。

    8610

    微服务架构之Spring Boot(三十三)

    自动配置在Spring默认值之上添加了以下功能: 包含 ContentNegotiatingViewResolver 和 BeanNameViewResolver beans。...默认情况下,资源映射到 /** ,但您可以使用 spring.mvc.static-path-pattern 属性对其进行调整。...如果您应用程序打包为jar,请不要使用 src/main/webapp 目录。虽然这个目录是一个通用标准,它工作原理只是战争 包装,它是默默大多数构建工具忽略,如果你生成一个罐子。...以jQuery为例, 加 "/webjars/jquery/jquery.min.js" 会产生 "/webjars/jquery/x.y.z/jquery.min.js" 。...使用(例如)JavaScript模块加载器动态加载资源时,不能重命名文件。这就是为什么其他策略也得到支持并可以合并原因。

    1.5K20

    JavaScript中各种模块化规范

    为什么要模块化 在模块化这东西没出来之前,前端脚本引用大概是这样: </...为了解决这些问题,各种模块化方案都出来了 CommonJS 这种方式通过一个叫做require方法,同步加载依赖,然后返导出API供其它模块使用一个模块可以通过exports或者module.exports...mymodule", ["dep1", "dep2"], function(d1, d2) { return someExportedValue; }); AMD 规范中,define 函数有一个公有属性...require.js 了 CMD表示不服 CMD是SeaJS 在推广过程中对模块定义规范化产出 CMD 规范中定义了 define 函数有一个公有属性 define.cmd。...// 暴露公共方法 return test; })); ES6 modules: 你们都让开,才是标准 ES6为JavaScript添加了一些语言结构,

    85790

    Web高性能动画及渲染原理(1)CSS动画和JS动画

    ,这也就不难理解为什么首屏渲染时transition不会生效了。...综上可知,animation是一种强制执行动画,既对transition过渡动画失效场景进行了补充实现,同时也增加了动画细节可定制性(例如循环动画或往复动画实现),但它功能扩展仍然是针对单过程动画...,后续元素依次类推,就需要为每一个动画执行项animation属性设置递增delay值,这样需求使用原生CSS既难编写也难维护,它通常需要借助预编译器才能够实现,但是如果在JS脚本中来完成相同设定...使用Velocity.js实现动画 velocity.js是一个非常易用轻量级动画库,它包含了jQuery中$.animate( )方法全部功能,但是比jQuery更流畅。.../jquery.min.js"> <script src=".

    7.6K30

    前端入门24-响应式布局(BootStrap)声明正文-响应式布局(BootStrap)

    反正,BootStrap 本质就就是一个框架,封装了一系列属性样式、组件给开发者使用,开发者只要了解有哪些属性样式可以用、有哪些组件可以用、效果怎么样、怎么用就可以了,至于这些,就只能是一步步在实际开发中...目前代码里,我们完全没有写过 CSS,只在 HTML 文档中,添加了 标签内容,就能够达到这样页面效果了,所以,其实,BootStrap 已经封装好了一大堆属性样式,我们只要在标签上通过...那么,点击完按钮后,第一个 为什么会被展开了呢?...首先,需要对当前这个按钮添加 navbar-toggler class,然后需要通过 data-target 指明控制展开区域,这也是为什么一个 中会有一个 id 属性,就是用来给这个按钮控制它...我们再来看导航栏一个效果,再来分析下: ?

    3.6K20

    JQuery 入门学习(完结)

    这个效果相信大家在很多地方见到过,这里运用了Jquery和HTML DOM两种方法结合。这就是要说一个重点。    ...其实改动并不大,表格还是刚才表格,Jquery中增加了一个函数: $(".hovertable td").click(function(event){ var name = $(event.target.parentNode...看第一行,我们会发现,event.target.parentNode认识,但为什么要把它放在$()中间?     这就涉及到DOM对象转换成Jquery对象过程。...大家用Jquery多了就会喜欢Jquery简洁,但DOM对象并不能使用Jquery方法,所以Jquery其实给了大家一个方式,能把DOM对象转换成Jquery对象,也就是把DOM对象直接放到$()中即可...这里也一样,把event.target.parentNode转换成了Jquery对象。后面一个children其实是Jquery没讲到“遍历函数”。

    94410
    领券