开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

jQuery addClass工作，但javascript classList.add不工作

问题：jQuery addClass工作，但javascript classList.add不工作。

回答： jQuery是一个流行的JavaScript库，它简化了JavaScript的编程，并提供了许多方便的方法和功能。其中一个方法是addClass，它用于向元素添加一个或多个CSS类。

相比之下，原生的JavaScript提供了classList属性和相关的方法，用于操作元素的类。其中之一是classList.add，它用于向元素添加一个或多个类。

如果在使用原生JavaScript的classList.add方法时遇到问题，可能有以下几个原因：

兼容性问题：classList.add方法在一些旧版本的浏览器中可能不被支持。可以通过使用polyfill或检查浏览器版本来解决此问题。
元素选择问题：确保你正在操作正确的元素。可以使用开发者工具检查元素的选择器是否正确。
异步加载问题：如果你的JavaScript代码是在页面加载完成之前执行的，可能会导致元素还没有完全加载，导致classList.add方法无法正常工作。可以将代码放在DOMContentLoaded事件处理程序中，以确保在DOM完全加载后再执行。
CSS优先级问题：如果你的CSS样式中存在优先级较高的规则，可能会覆盖通过classList.add方法添加的类。可以通过调整CSS规则的优先级或使用!important来解决此问题。

综上所述，如果在使用原生JavaScript的classList.add方法时遇到问题，可以检查兼容性、元素选择、异步加载和CSS优先级等方面的问题。如果问题仍然存在，可以进一步调试代码或提供更多的上下文信息以便更好地帮助解决问题。

腾讯云相关产品和产品介绍链接地址：腾讯云提供了丰富的云计算产品和服务，包括云服务器、云数据库、云存储、人工智能等。以下是一些相关产品和介绍链接：

云服务器（ECS）：提供可扩展的云服务器实例，适用于各种应用场景。了解更多：https://cloud.tencent.com/product/cvm
云数据库MySQL版（CDB）：提供高性能、可扩展的云数据库服务，适用于各种规模的应用。了解更多：https://cloud.tencent.com/product/cdb
云存储（COS）：提供安全可靠的对象存储服务，适用于存储和处理各种类型的数据。了解更多：https://cloud.tencent.com/product/cos
人工智能（AI）：提供各种人工智能服务，包括图像识别、语音识别、自然语言处理等。了解更多：https://cloud.tencent.com/product/ai

请注意，以上链接仅供参考，具体的产品和服务选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

30·灵魂前端工程师养成-jQuery中的设计模式

---- -多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。...('.test') // 不返回元素们，返回api对象 api.addClass('red') // this 就是 api .addClass('green') // this 就是 api...代码如下： main.js jQuery('.test') // 不返回元素们，返回api对象 .addClass('red') // this 就是 api .addClass('green...') // this 就是 api .addClass('blue') // 链式操作实现find函数 jQuery是构造函数么？...('.test1') api1.addClass('blue') const api2 = api1.find('.child').addClass('red') api1.addClass('green

1.5K2 0

企业数字化营销，这个工作不“性感”但很重要

特别是对于运营本身来说，其中有很多脏活累活，有很多细节的工作，随着企业员工越来越年轻化，愿意干这些工作的人也越来越少。...但这些细枝末节的工作，在越大的企业越完成不了。因为规模越大，部门间的隔阂越大，很难协同完成这些事情。而当协同难度很大的时候，很多工作就需要运营的同学自己干，这时所谓的脏活累活就来了。...其三，数据搜索的工具不统一。过去很多企业内部部门的工具都是单独采购的，有的用 A 公司的工具，有的用 B 公司的工具，这也会导致难以实现融合。其四，企业看似掌握了很多数据，但可用的数据却很少。...他们的职责就是协调各个部门，统一资源、统一口径、统一标准，只有把这个前期工作做好，后面的工作才能顺利开展。...有意思的是，很多时候，不投入、不去做就想不清楚，就看不清“坑”在哪，因为别人的“坑”不一定是你的“坑”。每个企业的组织文化不一样，基因区别很大，哪怕卖的是同一款产品，适合的营销方法也完全不一样。

3382 0

推荐的十个CSS动画库

通过 JavaScript document.querySelector('.my-element').classList.add('animated', 'slideInLeft') 通过 Jquery...('vivify', 'slideInLeft') 使用 Jquery $(".my-element").addClass("vivify slideInLeft") 就像Animate CSS一样，Vivify...('.my-element').classList.add('magictime', 'fadeIn') 使用 Jquery $(".my-element").addClass("magictime fadeIn...('cssanimation','fadeIn') 使用 Jquery $(".my-element").addClass("cssanimation fadeIn") 你也可以添加infinite类，...('shake','shake-hard') 使用 Jquery $(".my-element").addClass("shake shake-hard") 后话原文：https://dev.to/weeb

1.4K3 0

【译】推荐的十个CSS动画库

通过 JavaScript document.querySelector('.my-element').classList.add('animated', 'slideInLeft') 通过 Jquery...('vivify', 'slideInLeft') 使用 Jquery $(".my-element").addClass("vivify slideInLeft") 就像Animate CSS一样...('.my-element').classList.add('magictime', 'fadeIn') 使用 Jquery $(".my-element").addClass("magictime...('cssanimation','fadeIn') 使用 Jquery $(".my-element").addClass("cssanimation fadeIn") 你也可以添加infinite...('shake','shake-hard') 使用 Jquery $(".my-element").addClass("shake shake-hard") 后话原文：dev.to/weeb/10

7361 0

Javascript修改元素的class几种实践

现代浏览器现代浏览器classList优化过，它提供了一些方法，并且不依赖任何框架和插件： document.getElementById("MyElement").classList.add('MyClass...\S)/) ) Javascript框架或插件上面的代码都是标准的JavaScript，但通常的做法是使用framework或library 来简化常见任务，以及解决编写代码时可能没有想到的修复错误和边缘情况...虽然有些人认为添加一个大约50 KB的框架来简单地改变一个类是不合适的，如果你正在做大量的JavaScript工作，或者任何可能有不寻常的跨浏览器行为的东西，那么插件还是非常值得一试的。...下面的示例展示了如何使用jQueyr，可能是最常用的JavaScript库（尽管还有其他值得研究的）。（注意，$ 这里是jQuery对象。）...使用jQuery来操作元素class 使用jQuery可以明显简化我们的代码，我们可以将下面的代码与上面的代码比较： $('#MyElement').addClass('MyClass'); $('

7.9K1 0

jQuery VS JavaScript原生API

如今技术日新月异，各类框架库也是层次不穷。即便当年漫山红遍的JQuery（让开发者write less, do more，So Perfect!!）如今也有被替代的大势。...但JS原生API写法依旧；并且有时候只不过小写一个Demo，或者产品中只有少量的前端效果或DOM操作，就去花时间&空间引入jQuery，或者React？不免有取宰牛之刀以杀鸡之嫌。...在jQuery的温柔乡里，是否还能记得原生她javascript原生？如果仅为使用个选择器($)或者类似的东西，是否真的有必要加载jQuery？故此了解下JS常用原生写法还是蛮有必要的。...[update-2015-12-07]有看到抛弃jQuery，拥抱原生JavaScript一文中提到，jQuery 代表着传统的以 DOM 为中心的开发模式，但现在复杂页面开发流行的是以 React 为代表的以数据...Show me the code.直接看代码；以下是jQuery和JavaScript实现相同操作的等价代码：选择元素 // jQuery var els = $('.el'); //===

1.6K6 0

JavaScript与jQuery其他操作对比

JavaScript与jQuery其他元素操作对比 JavaScript与jQuery其他操作对比功能 JavaScript jQuery 创建元素 createElement("tag-name")...removeAttribute("attr-name") removeAttr("attr-name") 设置css style.cssAttr css("css-attr","css-val") 添加class classList.add...("class-name") addClass("class-name") 删除class classList.remove("class-name") removeClass("class-name"...) toggleClass(“class-name”,条件); 添加元素操作 JavaScript hxb.insertBefore(Element,hxb.firstElementChild);...newElement); }else{ parent.insertBefore(newElement,targetElement.nextElementSibling); } } jQuery

1331 0

jQuery选择器和用jQuery 实现 Tab 切换效果（1）

二、选择器的用法 1、.eq(index)，.get([index]) 对于一个特定结果集，我们想获取到指定index的jQuery对象 $('div').eq(3); //获取结果集中的第四个jQuery...对象通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象 $('div')[2] //获取第三个dom对象 $('div').get(2)...// //获取第三个dom对象 get()不写参数把所有对象转为DOM对象返回 ?...prev正好相反，获取元素之前的同辈元素 $('.child').eq(1).next().addClass('ddd') $('.child').eq(1).prev().addClass('ddd'...panel.classList.remove('active') }) this.parentElement.nextElementSibling.querySelectorAll('.panel')[index].classList.add

3.7K2 0

10 个最佳 CSS 动画库

： $(".my-element").addClass("animated slideInLeft") 2....它们的工作方式完全相同，有Animate CSS的大多数类且还扩展了一些。...', 'fadeIn') 使用 JQ 方式： $(".my-element").addClass("magictime fadeIn") 5. cssanimation.io ?...它的工作原理与 Animista 类似。例如，可以选择一个动画并直接从站点获取代码，或者也可以下载整个库。 ? 用法将cssanimation {animation_name}添加到指定的元素上。...** 使用 JQ $(".my-element").addClass("bounceIn") ?

1.3K1 0

能解决 80% 需求的 10个 CSS动画库

： $(".my-element").addClass("animated slideInLeft") 2....它们的工作方式完全相同，有Animate CSS的大多数类且还扩展了一些。... 使用 JS 方式： document.querySelector('.my-element').classList.add(...它的工作原理与 Animista 类似。例如，可以选择一个动画并直接从站点获取代码，或者也可以下载整个库。用法将cssanimation {animation_name}添加到指定的元素上。...','fadeIn') 使用 JQ $(".my-element").addClass("cssanimation fadeIn") 还可以添加 infinite 类，这样动画就可以循环播放。

1.2K2 0

jQuery 之元素节点操作滚轮事件与函数节流

插件使用 jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。...函数节流 javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数..." src="js/jquery-1.12.4.min.js"> $(function(){ var $h = $(window)....Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

1.3K6 0

Salesforce学习 Lwc（十九）Include JQuery in LWC (Lightning Web Component)

image.png 使用Java语言开发的朋友们对于jQuery，一点也不陌生，简单来说它是JavaScript 库，我们都知道，JavaScript 是一门很烦琐的编程语言，不仅语法复杂，还会出现各种兼容问题...，为了减少工作量，我们常常会把 JavaScript 中经常用到的一些功能或特效封装成一个“代码库”，这样在实际开发中只需要调用一些简单的函数就能直接使用这些功能或特效了。...今天我们讲解对于Lwc，如何引入JQuery 。事前准备： 1.先来看看JQuery 的几个简单方法。...} else if(targetName=='smaple1') { $(this.template.querySelector('div.mydiv')).addClass...} else if(targetName=='smaple2') { $(this.template.querySelector('div.mydiv')).addClass

8552 0

时隔一年多jQuery发布3.6.1新版本，你还在用JQ吗？

以下是 jQuery 3.6.1 的一些改进：基础设施改进在这个版本中团队做了很多工作来更新项目的一些测试和构建基础设施，包括将 CI 从 Travis CI 迁移到 GitHub Actions，在...在 addClass(array) 中跳过错误在不增加任何大小的情况下，添加了对跳过传递给addClassor的数组中的任何错误值的支持removeClass。...幸运的是更多地依赖浏览器可以成为解决问题的方法，但团队仍然需要在 3.x 分支中为 IE 去除 CDATA 部分。这将在 4.0 中删除。...jQuery，甚至唯恐避之不及，但它曾经的功绩仍不可磨灭，jQuery 致力于消除浏览器差异，简化了操作 DOM 的方法，让早期的开发者们能轻松实现动画、修改 CSS 等各种操作，说它是 JavaScript...最后我想用去年 jQuery 3.6.0 发布时底下寥寥数个评论中的一句话来作为结尾：非常感谢您为维护和改进 jQuery 所做的所有辛勤工作，因为我们中的许多人仍然依赖 jQuery 来处理大多数生产中运行的项目

2.1K2 0

jquery怎么添加类和移除类

jquery中可用addClass()和removeClass()来添加类和移除类。...jquery添加类和移除类的方法方法描述 addClass() 向匹配的元素添加指定的类名。 removeClass() 从所有匹配的元素中删除全部或者指定的类。...jquery addClass()添加类 addClass() 方法向被选元素添加一个或多个类。该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。...="text/javascript"> $(document).ready(function() { $("button").click(function...如果不设置该参数，则会移除所有类。示例：移除所有的 "intro" 类 1234567891011121314151617181920212223242526 <!

5.4K5 0

jQuery.validationEngine.js学习

/js/jquery-1.8.2.min.js" type="text/javascript"> jQuery(document...以下是引擎的工作流程在使用jquery.validationEngine.js时还需要一个js文件：包括许多语言包，这里我们就用en包做个示范，引入jQuery.validationEngine-en.js...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

4K2 0

你可曾见过如此简单粗暴的JavaScript解说 -- if 判断的正确打开方式？

在JavaScript中，对于 if else 的逻辑判断你肯定非常熟悉，本文罗列了几种你不一定知道的简写方式，仅供参考。...1.gif 我猜想，jQuery对toggleClass的实现应该也差不多是这个意思。...dom.hasClass(className) && dom.addClass(className) 这句话是不是已经成立了，OK，那么因为右边是 || ，左边都已经成立了，那么我右边的代码是不是可以不执行了呀...那么，这句话就不成立了，&& 左边的是假，那么右边的就不执行了、就是说： dom.addClass(className) 这句话不执行了。综合来看： !...参加工作后对计算机感兴趣，深知初学编程之艰辛。希望将自己所学记录下来，给初学者一点帮助。免责声明：博客中所有的图片素材均来自百度搜索，仅供学习交流，如有问题请联系我，侵立删，谢谢。

6465 0

EasyUI----EasyUI-Tree联想加模糊查询

195px;" /> 接下来是javascript...'''javascript代码''' var treeid; var textid; $(function () { //键盘事件 $(document).keydown(function...e.which : e.keyCode; //键盘Up事件 if (keycode == 38) { if (jQuery.trim($("#append...$("#" + textid).val(value); //将选择的设备显示到搜索框中 $("#append").hide().html(""); //隐藏下拉框 } 在外面工作...，收获是很大的，之前做项目，许多的东西都是别人封装好，咱们直接拿过来用，再怎么找也没有自己去从头到尾研究一边来的透彻，现在工作了，项目刚开始做，工作量还是很大的，不过能学到的知识也是很多的，有苦才有甜嘛

2.4K4 0

css 去色_css按钮点击改变颜色

下面介绍样式实现，可以减少一倍量的工作哦。...grayscale(0); filter:url(“about:blank”); filter: grayscale(0); filter: rgb; } JS $(document)....ready(function() { $(‘a’).hover(function() { $(this).removeClass(‘grayscale’) }, function() { $(this).addClass...本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

3.4K2 1

angularJS的DOM操作

AngularJs是不直接操作DOM的，但是在平时的开发当中，我们有的时候还是需要操作一些DOM的，如果使用原生的JS的话操作过于麻烦，所以大家一般都是使用jQuery，jQuery虽然好用，但是AngularJs...是不建议和JQuery同时使用的，所以AngularJs给我们也提供了一些操作DOM的方法———Jqlite 查阅官方提供的api，可以看到使用方法是angular.element(ele)...一.不引用jquery的情况 angular.element(document.querySelector("#span1")).addClass('test1'); <!...引用jQuery的前提下，和$用法基本相同：angular.element(‘#‘).html(); angular.element("#span1").addClass('test1'); 注意：在..." src="js/jquery-1.8.3.min.js"> </script

731 0

jQuery 之 $(this) 出了什么问题?

近期在写jQuery的时候出了这样一个问题?..." src="jquery-1.10.2.min.js"> $(function() { $('a').click...(function(event) { $(this).addClass('clicked'); setTimeout(function(){ $(this).removeClass(...可是问题在以下,为什么以下的那个setTimeout()无法工作呢. 我百思不得其解....(event) { $this = $(this); $this.addClass('clicked'); setTimeout(function(){ console.log

5821 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭