用javascript的classList代替jquery的class操作

javascript的className操作方法比较难受，他获取的是一个连续的字符串

必须要用split拆分开，好多人因此想去用jquery的addClass,removeClass,hasClass等等

classList解决了这个问题，虽然兼容性并不算好。但会更好的，我们先学习一下

HTMLElement都会有classList属性，

主要方法有如下：

el.classList.add()

el.classList.remove()

el.classList.contain()

el.classList.toggle()

尝试一下就懂了，很简单吧，会了这个，再也对jquery估计依赖可以少很多了。啦啦啦

时间： 2024-10-11 21:24:20

用javascript的classList代替jquery的class操作的相关文章

JavaScript（15）jQuery 选择器

jQuery 选择器选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &

JavaScript DOM对象和JQuery对象相互转换

1.分析源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C

JavaScript（14）jQuery（JavaScript 库）

JavaScript 框架(库) JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常很困难也很耗时.为了应对这些调整,许多的 JavaScript (helper) 库应运而生. 这些 JavaScript 库常被称为 JavaScript 框架. jQuery jQuery 是目前最受欢迎的 JavaScript 框架.它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象).jQuery 同时提供 companion UI(用户界面)和插件. jQue

JavaScript学习总结(四)——jQuery插件开发与发布

JavaScript学习总结(四)--jQuery插件开发与发布目录一.插件开发基础 1.1.$.extend 1.1.1.扩展属性或方法给jQuery 1.1.2.扩展对象 1.2.$.fn.extend 1.3.$.fn 二.插件开发 2.1.jQuery插件开发基本模式 2.2.获取上下文 2.3.第一个jQuery插件 2.4.链式编程 2.5.参数与默认值 2.5.1.默认值 2.5.2.参数对象 2.5.2.参数类型 2.6.命名空间与面向对象 2.7.插件与关联的CSS 2.8

JavaScript大杂烩14 - 使用JQuery(上)

JQuery意义 - Why? 为什么要使用JQuery,从我个人来说,就是这么几点:简化代码 + 统一行为 + 功能强大 + 搭配方便. 简化代码是从写代码的角度来说的,实现同样的功能,如果用JavaScript内置对象和函数去完成的话,需要写很多代码,而使用JQuery这种类库却很简洁,下面的例子会体现出来. 统一行为是从浏览器的兼容性的角度来说的,实现一个行为,如果用JavaScript内置对象和函数去完成的话,需要处理很多的兼容性问题,这个在前面我们已经见识过了,使用JQuery这种类库

JavaScript（20）jQuery HTML 添加和删除元素

jQuery - 添加元素通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 jQuery append() 方法在被选元素的结尾插入内容. $("p").append("Some appended text."); jQue

JavaScript大杂烩15 - 使用JQuery(下)

前面我们总结了使用各种selector拿到了jQuery对象了,下面就是对这个对象执行指定的行为了. 2. 操作对象 - 行为函数action 执行jQuery内置的行为函数的时候,JQuery自动遍历jQuery对象中包装的所有对象,依次在这些对象上执行指定的行为,直白的说,就是JQuery执行的是批量的操作,所以在JQuery中,默认情况下,是不需要强行的遍历包装对象,然后独自的执行指定的行为的.下面是常用的行为函数介绍. 1). 遍历jQuery对象虽然执行jQuery内置的方法的时候不

JavaScript（19）jQuery HTML 获取和设置内容和属性

jQuery HTML jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery DOM 操作 jQuery 中非常重要的部分,就是操作 DOM 的能力.jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易. 提示:DOM = Document Object Model(文档对象模型) DOM 定义访问 HTML 和 XML 文档的标准:"W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容.结构以及样式."

javascript 学习小结 (三) jQuery封装ajax尝试 by FungLeo

javascript 学习小结 (三) jQuery封装ajax尝试 by FungLeo 前言在JS学习中,对于原生的很多东西我理解得并不透彻.但是使用jQuery来操作DOM,基本上还是非常熟练的.但是对于AJAX数据交互的处理,我不是很理解. 近期团队交给我一个后端全接口提供给我的项目.我要利用这些接口来自己组织前端代码.为了学习,我决定不使用VUE或者其他的前端框架来做.而是只使用jQuery框架,数据的部分全部使用拼接字符串的形式实现. 获取数据,显示数据,提交数据. 在这个项目中(