原生js和jQuery操作类的整理

最新推荐文章于 2024-07-25 09:24:40 发布
最新推荐文章于 2024-07-25 09:24:40 发布
阅读量121 收藏 1
点赞数 1
文章标签： javascript jquery html5 类 class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42116266/article/details/111240172
版权

原生js操作类

#h5以前：className(不方便添加、也不方便删除)

在这里插入图片描述

#h5以后：classList：
1. 添加一个类：元素.classList.add(类名)，添加多个，逗号隔开
2. 删除一个类：元素.classList.remove(类名)，删除多个，逗号隔开
3. 切换一个类：元素.classList.toggle(类名)，切换一个类
4. 判断是否有某个类：元素.classList.contains(类名)
5. 替换某个类：元素.classList.replace(类名)在这里插入图片描述

jQuery操作类

1. 添加类：元素.addClass(类名)
2. 移除类：元素.removeClass(类名)
3. 切换类：元素.toggleClass(类名)
4. 判断类：元素.hasClass(类名)
在这里插入图片描述

码农世界里的小仙女
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS和JQuery动态添加、删除表格行的方法
10-24
主要介绍了原生JS和JQuery动态添加、删除表格行的方法,涉及javascript针对页面元素的动态操作技巧,需要的朋友可以参考下
基于JQuery和原生JavaScript实现网页定位导航特效
10-20
本文将探讨如何使用jQuery和原生JavaScript实现这种效果。首先，我们来看一下代码结构。 HTML部分定义了一个固定位置的菜单(#menu)，包含了链接到页面不同区域的列表项。每个列表项的`<a>`标签都带有`href`属性，该...
jQuery学习笔记（黑马课堂+补充）
新日暮里の小轩的博客
05-24 1577
JQuery学习笔记（自用） 1.DOM对象和jQuery对象 DOM对象：原生JS取到的对象 getElementsById() getElementsByTagName() 特点：只能调用Dom方法或者属性，不能调用JQuery属性或者方法 jQuery对象:利用jQuery选择器获取到的对象 > $(selector).action() > $(“选择器”);//里面需要加引号 特点：只能调用JQuery的方法或者属性，不能调用原生JS对象 JQuery对象是一个伪数组
原生js操作元素类名(classList,classList.add...)
Dcripple的博客
10-23 2954
1、classList classList属性是一个只读属性，返回元素的类名，作为一个DOMTokenList集合(用于在元素中添加，移除及切换css类) length:返回类列表中类的数量，该属性是只读的 <style> .lis { width: 200px; height: 100px; background-color: skyblue; } .box { width: 100px;
原生javascript中的一些方法
雨落千木的时节
09-25 560
1，innerHTML属性，替换掉元素原来的所有子节点 2，outerHTML属性，替换包括当前元素本身的所有元素 3，insertAdjacentHTML()方法，接收两个参数，第一个参数是插入的位置，第二个参数是插入的html元素 第一个参数必须是以下各个值： beforebegin:在当前元素之前插入紧邻的同辈元素 beforeend:在当前元素中插入第一个子元素即在第一个子元素之
原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()
u011200562的博客
11-03 3920
原生js操作元素类名 classList.add( newClassName )； classList.toggle( className )； classList.remove( oldClassName )； classList.contains( oldClassName ); classList.add( newClassName )； 添加新的类名，如已经存在，取消添加 classList.contains( oldClassName ); 确定元素中是否包含指定的类名，返回值.
jQuery笔记
xawjz的博客
05-06 153
jQuery 概述 jQuery是JavaScript一个封装好的特定的集合（方法和函数），简单理解就是一个js文件，里面对我们原生的js代码进行了封装，存放在里面。这样我们就可以快速高效的使用这些封装好的功能。 jQuery就是为了快速方便的操作dom，里面基本都是函数 概念 j 就是JavaScript ；Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能 jQuery封装了JavaScript常用的功能模块，优化了DOM操作，事件处理、动画
演员选择框三级联动（原生javascript和jquery实现）
05-25
jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画等任务。使用jQuery实现三级联动可以减少代码量，提高可读性。主要步骤与原生JS类似，但语法更简洁： 1. 使用`$(selector)`选择器获取元素。 2. ...
详解用原生JavaScript实现jQuery的某些简单功能
11-26
然而，有时候为了提高性能或者深入理解JavaScript的本质，开发者可能会选择用原生JS实现jQuery的部分功能。本篇文章将详细介绍如何用原生JavaScript实现jQuery的一些简单功能，如选择器、事件绑定以及`html()`和`css...
50款原生js案例（绝美整合）
10-26
这个“50款原生js案例（绝美整合）”集合了作者半年的辛勤整理，包含了各种JavaScript插件和效果，旨在帮助开发者们提升技能，找到灵感。下面我们将深入探讨这些标签所代表的知识点，并对每个部分进行详细的阐述。 ...
js获取dom元素上所有的类名，增加类名，去除类名，切换类名(原生 vs jquery)
业余前端的职业经历
06-28 6988
我们都知道 一个元素可以写多个类名，每个类名之间使用空格隔开 <p class="p1 p2">hello world</p> 1.原生的方法 1.1.获取元素的类名 : el.classList 可以添加多个类名 中间空格隔开 var p=document.getElementsByTagName('p')[0]; console.log(p.classList） 1.2判断是否包括某个类名 el.classList.contains var p=document.ge
原生JS操作DOM元素的类名class
weixin_34162629的博客
12-03 1560
1.classList 详见MDN Element.classList add( String [, String] )添加指定的类值。如果这些类已经存在于元素的属性中，那么它们将被忽略。remove( String [,String] )删除指定的类值。item ( Number )按集合中的索引返回类值。toggle ( String...
原生js，JQuery查找元素，修改类名
渐行渐远
07-27 4541
原生js，JQuery查找元素，修改类名
【JavaScript】第二十三天 (jQuery)
wu12378900的博客
03-02 448
jquery 1.1jQuey介绍 1.1.1javascript库 javaScript库：即 library ，是一个封装好的特定集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。 简单理解：就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。我们可以快速高效的使用这些封装好的功能了。 比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。  &nbsp
JavaScript-修改元素类名
qq_39111074的博客
09-26 2004
修改元素类型：设置className 如果要修改元素比较多的样式，可以不用每个样式都用- - -元素对象.style.属性名 = 属性值 可以用修改类名，css定义一个类名，将要样式写在里面，触发事件后，js将元素类名修改成新类名 注意：类名会覆盖原来的类名，如果要保留原来的类名，可以设置类名：‘旧类名 新类名’，eg：this.className = ‘old change’； 代码示例： <!DOCTYPE html> <html lang="en"> <head>
通过Js更改元素标签类名
tuoniaoxs的博客
04-27 8579
通过JS代码更改html等语言的元素标签的类名 前言 在写html等前端页面时，我们会用到各种标签元素，配合js代码可以实现验证、变化等效果。在JS的编写中，我们有三种方法可以改变元素的类名，如下。 1、setAttribute() setAttribute()方法是创建或者改变元素的某个属性，我们可以利用这个方法对元素的类名进行更改。具体方法是这样的 el.setAttribute(“class”,“classname”) <div id="box"></div> <scri
JQ操作类与JS操作类的区别
vcezzyo的博客
12-24 298
1、原生js操作类：会覆盖元素原先的类名 2、JQ操作类：jq里面的类只是对指定类进行操作（追加、移除）等操作，不影响原来的类名 2.1JQ追加类：element.addClass(‘类名’) 2.2JQ移除类;element.removeClass(‘类名’) <body> <div class="one"></div> </body> <script> //1、原生js操作类名:会覆盖原来的类名 // var one=d
【React 】开发环境搭建详细指南
lph159的博客
07-24 1213
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
最新发布
exlink2012的专栏
07-25 359
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
原生js有没有类似jquery .find方法
05-18
在原生 JavaScript 中，可以使用 `querySelectorAll` 方法来实现类似 jQuery 中 `.find` 的功能。该方法返回一个 NodeList 对象，包含与指定选择器组匹配的文档中的元素列表，可以使用 NodeList 提供的方法遍历和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值