JQuery:在我的html代码中使用自定义属性是不好的做法吗？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

data自定义属性在jQuery中的用法

（1）如果在HTML文档中设置的data-自定义属性的单个字符串的名称的属性中若有大写值，在js文件中获取时只能用小写的形式获取。...如： HTML中data-Role，获取当时为$(node).data(“role”); （2）如果在HTML中设置data-role和data-Role是一样的，html属性不区分大小写。...然后我们从验证结果中可以看出，js只会找到第一个与其匹配就直接返回。（3）如果用js来设置data属性，那么如果你定义的是大写的格式，则访问也必须是大写的形式。...最后讲一下data()和attr()的区别：（1）是否需要传参： data() 可以不传入参数，这使获得的是一个js对象，就算你在html中没有设置任何data自定义属性时，获得的也是一个对象。...（4）data-attribute属性会在页面初始化的时候放到jQuery对象中，被缓存起来，而attr方法却不会。

4.2K2 0

【实战技巧】CSS自定义属性以及在VUE3中的使用

---- 什么是css自定义属性官方称之为自定义属性 ,但我比较习惯叫它变量 ,简单点说就是一种开发者可以自主命名和使用的 CSS 属性. CSS变量和预处理器中的变量有什么不同？...CSS变量是浏览器中直接可用的CSS属性，而预处理中的变量是用于编译成常规的CSS代码，浏览器其实对它们一无所知。...我们可以在样式表中，在内联样式中，在 SVG的标签中直接使用CSS变量，甚至可以在运行时用JavaScript直接修改它。但是我们是无法对预处理器中的变量做上面这些操作的....假如只是定义了一个自定义元素和它的属性值，浏览器是不会做出反应的。如下面的代码， .foo 的字体颜色由color决定，但--theme-color对.foo没有作用。...VUE3.0中,可以在CSS中使用响应式变量, 通过下图可以看出,它的原理就是运用了CSS自定义属性我们先在HelloWorld.vue中写入下方代码,我们使用定时器两秒以后修改color的值,

3.6K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

JQuery中的bind()和unbind()的理解「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。 bind()和unbind()提供了事件的绑定和取消机制，既可以绑定html默认支持的事件，也能够绑定自定义的事件。...1、JQuery中事件可以重复绑定，不会覆盖。...如果多个事件需要注册相同的处理函数，那么可以使用如下代码进行简化(事件名称使用空格分隔)： 1 $("#button1").bind("mousedown mouseup",function(){...如果我们指定了自定义的参数，那么JQuery会将它放在事件对象的data属性中，即通过eventObject.data就能够拿到我们传递的参数值。 4、事件取消的三种形式。...可以看到这种做法非常的不好，因为这种做法不允许使用匿名函数，我们不得不暴露全局的函数(至少要求unbind的时候能够看得见)。JQuery提供了事件命名空间机制 5、事件命名空间。

2K3 0

PHP版的jQuery

但问题在在于，只有前端程序员可以利用jQuery的强力，他们可以用它分析HTML，根据CCS类，HTML属性，CSS规则等各种选择器来查询、获取、操作HTML里的任何一个元素。...遇到这种情况，后端程序员通常的做法就是用正则表达式、或用XML解析器。这些做法非常的笨拙，不方便，效率低下。所以，对于在服务器端解析HTML，每个后端程序员都极力避免。...因为我也是个Web程序员，经常使用jQuery解析HTML页面上的内容。如果这个任务放到浏览器端执行，太简单了，只需要一句代码：jQuery('.title').each(...)...之前说了，所有的这样类似jQuery的能分析HTML DOM的PHP程序库都一个相同的通病：遇到中文会有乱码。我在使用phpQuery的过程中也遇到了这个问题。...我在解决phpQuery的中文乱码问题也是反复尝试才最后搞定的，没有任何理论依据。就像是有个程序员的笑话：这段代码不好用，我不知道为什么。这段代码好用，我也不知道为什么。

1.6K3 0

你被哪个后来知道很傻的BUG困扰过一天以上吗？

先说说我以前遇到的jquery 操作HTML data全局属性缓存的坑。...data-* 全局属性是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本(一般指JavaScript) 与 HTML 之间进行专有数据的交换。...这个坑，坑了我一早上，后来百度下才知道，原来jquery设置的值是在缓存里。。。...果断查看下jquery的源码，真相都在代码里：三：正确的使用方式如果需要修改dom元素上的data必须用js的方式： document.getElementById("div1").dataset.num...你遇到过什么很傻的坑吗？欢迎在评论区留言。

2751 0

手机响应式网站设计_如何做响应式网页设计

大家好，又见面了，我是你们的朋友全栈君。 wap页面怎么做?...宽度自适应做到了但是高度呢，高度也用百分比吗？难道把元素的高度写死吗。这种做法就是jquery mobile页面的做法了，大屏手机显示效果不好看。用Bootstrap做栅格化。...下面是格式化后的部分代码： @media only screen and (max-width: 300px) { html { font-size: 8.33333px } .viewport...有没有更智能的方式？为什么每次都要通过小工具去换算单位呢，有没有办法让单位自动换算的？直接用css当然是行不通的，虽然它有calc()这个属性，但是兼容性不强。...改好之后又遇到几个其它方法的坑，遂打算自己写一个，反正也不难。我最先尝试使用sass来写的。它是基于ruby环境的，这个我就不计较了，反正安装方式跟node一样简单，安装子。

2K1 0

js写插件教程

；我为了方便都写到一个html中了；请把这个script标签中的内容单独写在一个js文件里 //整个插件写在一个立即执行函数里；就是function(){}();函数自执行；保证里面的变量不会与外界互相影响...；多不好；一堆方法function就不调用；对；这里是调用的时候最开始执行的函数 } //；给构造函数addHtml对象原型里添加属性（方法） addHtml.prototype...= {//给函数写方法；这里可能不止一个函数；你还记得你在全局里写一个个的function吗；贼乱； //找也不好找；把一个个函数都写到对象的属性里；调用函数就直接调用对象的属性；...("demo-1","add-1");//这里是实例1调用插件的代码 new addHtml("demo-2","add-2"); //这里是实例2调用插件的代码 //是不是明白为什么要写插件了...--这里是最简单的插件写法；当然还有传对象参数的插件等等。。。。--> html>

40.2K1 0

缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解

问题原因：在新版的浏览器中，即使你删除了 Javascript 控制的 src 属性，浏览器仍然会去加载这个图像。...解决方法：直接修改 HTML 的结构，在 img 标签中添加新的属性，把 src 属性的值指向占位图片，添加 data-original 属性，让其指向真正的图像地址。...你可以使用以下代码，加载这几个文件： jquery.js" type="text/javascript"> jquery.lazyload.js...这样的用户体验并不好，你可以设置 effect 属性，来控制显示图片的效果。...使用 container 属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。

4.3K1 0

教你开发jQuery插件（转）教你开发jQuery插件（转）

://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方，我认为是它的可扩展性吸引了众多开发者为其开发插件，从而建立起了一个生态系统...但如你所见，这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。...变量定义：好的做法是把将要使用的变量名用一个var关键字一并定义在代码开头，变量名间用逗号隔开。...的Hoist特性，即使你将变量的定义穿插在逻辑代码中，在代码解析运行期间，这些变量的声明还是被提升到了当前作用域最顶端的，所以我们将变量定义在一个作用域的开头是更符合逻辑的一种做法。...HTML中保持双引号，JavaScript中保持单引号一方面，HTML代码中本来就使用的是双引号，另一方面，在JavaScript中引号中还需要引号的时候，要求我们单双引号间隔着写才是合法的语句，除非你使用转意符那也是可以的

4.8K1 0

我曾用 Angular 重写了 jQuery 应用，如今却被 React 逼疯了

在我的第一份工作中，我正好参与了一项将一个庞大且难以管理的 jQuery 应用重写为 Angular 应用的工作。不管是过程还是最终结果都相当好。...这个问题通过使用 React 钩子将状态“侧载（sideloading）”到组件中得到了解决。对此，我还没有听到有人抱怨过，但你们是认真的吗？你们是在说任何组件都可以使用任何部分的应用状态吗？...但在实践中，你能像这样干净利落地分开吗？首先，我最不满意的是 useEffect 被用来“在组件挂载后运行某物”。...我认为，代码之所以糟糕，是因为开发一个交互式 UI，其中任何组件都可以更新任何其他组件，这简直是在软件开发中能做的最复杂的事情之一了。想想你在日常生活中使用的任何其他系统。...在输入方面，我说的是：“去减少按钮的数量”，这可能无法强制执行。但毫无疑问，功能越少，代码库就越容易管理。这很简单，不值得一提，是吗？产品经理知道吗？

2390 0

jQuery 升级踩坑大全

使用了被废弃的jQuery.browser属性 jQuery Migrate对此错误的警告是 JQMIGRATE: jQuery.browser is deprecated 在前端开发中我们经常要根据不同的浏览器版本做出不同的处理...JQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated 实践中我发现，早期写的代码里面，获取一个input输入表单的值时，是怎么获取的呢？...两者的区别是：prop设置的是某元素固有的属性，而attr设置的是写在html标签上的自定义属性。...IE6/7/8浏览器不支持修改input表单的type属性在jQuery Migrate中是这样的警告： JQMIGRATE: Can't change the 'type' of an input...因为这五个接口从来没有出现在jQuery的官方文档中，并且有些在后续版本中已经删除，可谓来无影去无踪。看源代码的话在早期版本有机会找到他们的存在，但是并不建议使用。建议采用其他方法实现相应的功能。

4.4K9 0

jquery插件与扩展

如你所见，这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console，输出特定格式的信息，定义一次后可以通过jQuery在程序中任何需要的地方调用它。...所以在上面插件代码中，我们在this身上调用jQuery的css()方法，也就相当于在调用 $('a').css()。...但这里还有个问题是如果我这个函数要接收参数应该怎么写呢？让插件接收参数一个强劲的插件是可以让使用者随意定制的，这要求我们提供在编写插件时就要考虑得全面些，尽量提供合适的参数。...若要编写一个复杂的插件，代码量会很大，如何组织代码就成了一个需要面临的问题，没有一个好的方式来组织这些代码，整体感觉会杂乱无章，同时也不好维护，所以将插件的所有方法属性包装到一个对象上，用面向对象的思维来进行开发...所以好的做法是我们在代码开头加一个分号，这在任何时候都是一个好的习惯。 var foo=function(){ //别人的代码 }//注意这里没有用分号结尾 //开始我们的代码。。。

3.2K3 0

面向设计的半封装web组件开发

好了，现在组件都是开发背景的前端写的，所以呢，很多HTML布局啊，样式表现啊，都集成在了web组件中，一些动态的表现就使用洋洋洒洒的API控制。...(这里 ks- 为 prefixCls)… “扬长避短”原本是个褒义词，显然，我放在这里讲，是要说其不好的。...但是，最后的结果是，新的前端团队放弃了之前项目的前端解决方案，还是使用了自己的简洁派做法，seajs + jQuery + … 各位观众可能会疑问了，咦，为啥不使用现成的东西啊？...比方说jQuery, 10个项目都使用jQuery, 有个项目需要使用jQuery某新特性，于是升级都爱了2.0, 其他项目也要更着升级吗？...面对设计的要求，我们以前的做法是这样的，web组件不动，针对具体项目，common.js中来个二次封装；而现在的做法是采用私人定制的方法，在原web组件根据设计需求，捣鼓UI相关内容。

1.1K10 0

面向设计的半封装web组件开发

好了，现在组件都是开发背景的前端写的，所以呢，很多HTML布局啊，样式表现啊，都集成在了web组件中，一些动态的表现就使用洋洋洒洒的API控制。...(这里 ks- 为 prefixCls)… “扬长避短”原本是个褒义词，显然，我放在这里讲，是要说其不好的。...但是，最后的结果是，新的前端团队放弃了之前项目的前端解决方案，还是使用了自己的简洁派做法，seajs + jQuery + … 各位观众可能会疑问了，咦，为啥不使用现成的东西啊？...比方说jQuery, 10个项目都使用jQuery, 有个项目需要使用jQuery某新特性，于是升级都爱了2.0, 其他项目也要更着升级吗？...面对设计的要求，我们以前的做法是这样的，web组件不动，针对具体项目，common.js中来个二次封装；而现在的做法是采用私人定制的方法，在原web组件根据设计需求，捣鼓UI相关内容。

1.1K2 0

面向设计的半封装web组件开发 - 腾讯ISUX

好了，现在组件都是开发背景的前端写的，所以呢，很多HTML布局啊，样式表现啊，都集成在了web组件中，一些动态的表现就使用洋洋洒洒的API控制。...(这里 ks- 为 prefixCls)… “扬长避短”原本是个褒义词，显然，我放在这里讲，是要说其不好的。...但是，最后的结果是，新的前端团队放弃了之前项目的前端解决方案，还是使用了自己的简洁派做法，seajs + jQuery + … 各位观众可能会疑问了，咦，为啥不使用现成的东西啊？...比方说jQuery, 10个项目都使用jQuery, 有个项目需要使用jQuery某新特性，于是升级都爱了2.0, 其他项目也要更着升级吗？...面对设计的要求，我们以前的做法是这样的，web组件不动，针对具体项目，common.js中来个二次封装；而现在的做法是采用私人定制的方法，在原web组件根据设计需求，捣鼓UI相关内容。

1K4 0

HTML5的data-*自定义属性

HTML5增加了一项新功能是自定义数据属性，也就是data-*自定义属性。...在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。...具体使用方法例下：在传统的做法中我们可以配合...jquery使用，如下： $("#head").attr("data-home"); $("#head").attr("data-home","new"); 或者纯js做法：在IE浏览器里，我们通过获取对象后直接调用就可以了...data-属性选择器在实际开发时，可以根据自定义的data-属性选择相关的元素。

1.8K4 1

2017 学习 JavaScript 感觉如何？

我在想是不是可以用jQuery来获取和展示数据呢？我知道有更新的框架，但是这些框架我越了解反而越困惑。答： jQuery难道不是几年前导致你不做web开发的原因吗？...问：嗯，我觉得自己没做对，搞不清楚为什么自己的app总是状态诡异，也许你能帮我更好地梳理组织jQuery代码，这样就不会总是麻烦重重了。...答： JSX仅是Javascript的一种语法扩展，它可以让你使用HTML标签，从而免于因为写代码而生成DOM元素。问：只用JavaScript开发有什么问题呢？...但是考虑到Ember隐藏了一些特定的、我希望你在加速开发的过程中能够直接看见的东西，所以我会很高兴向你展示如何使用Mithril来运行app。问：太好了！...问：哦等等，实际上我读到过这些内容，在浏览器中运行转译器不是不好吗？答：是不好，转译器会增加显著的延迟，但是为了学习，用转译器有什么不行的呢？过后是很容易再改的。

1K10 0

WordPress开发人员犯的12个最严重的错误

这种做法不好，原因如下： 1.该文件可以随着主题的变化而变得非常大，正在积极开发中，将会增加功能，有时您将看到大小为1 MB的文件。该文件将在全站范围内加载，即使在某些页面中只需要文件中10%的代码。...9.使用.php文件输出CSS或JavaScript代码而不是静态.css和.js文件我已经看过主题，甚至是WordPress插件，其中有这样的文件style.php只是用来生成自定义CSS代码并打印出来...ver=1' />），并根据仪表板中更新的自定义设置生成CSS代码。这在WordPress性能方面真的是一个糟糕的做法。...在PHP方法中使用HTML代码通常是一种不好的做法(当然对于小的HTML代码也有例外)，特别是对于一个由多个开发人员维护的插件来说。...在PHP脚本中，只有三分之一的代码被实际使用时，我已经多次看到这种做法。这可能有一些缺点，包括： 1.代码不使用与现有项目代码相同的样式。

3.9K1 0

easyui(一) 初始easyui「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。　　　　　　　　分享使我快乐。哈哈~ 　　　　　　　　　　　　　　　　　　　　　　–WZY 一、什么是easyui？　　　　　　...easyui就是一个前端框架，JQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复杂的...还是不懂，在easyui/demo/resizable/basic.html中查看内容(看easyui给出的例子，怎么用，在对照文档就懂了) 　　　　　　　　　　　　　给出的例子，重点就两个，6-10...16行关键代码就是文档中第一个使用案例。还是不懂，没关系，下面就解释给你听。...(渲染为)可以拖动改变大小的效果 2.2、使用resizable组件的属性的两种方式　　　　　　　　　　　方式一：html方式 <!

3.9K3 0

JS魔法堂：那些困扰你的DOM集合类型

由于document.getElementsByName在不同的浏览器中返回不同类型的对象，因此推荐使用[{Number} 索引]的方法来访问集合元素会省心一些； 4....但IE11中的HTMLAllCollection还可以当作函数使用，具体请看本文的第三节。...另外，JQuery中也有一个data函数，那么它跟以"data-"开头的自定义特性有什么关联呢？...html:，使用jquery-1.10.2 var $el = $('#div'), el = $el[0];...JQuery这种算是折中的做法吧，所以用JQuery的data API操作自定义特性时最好不要跟dataset或get/setAttribute等原生API混合用咯。

2.5K9 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭