jq操作class类

迷南。 2023-06-05 08:11 10阅读 0赞

[https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan]

鼠标移入移除切换样式

方法一：

css  
    .menu {
            color: green;
        }
        .active {
            color: red;
            text-decoration: underline;
        }
    
    html
        <h2 class="menu">this is h2 tag</h2>
    
    js/jq
    　　$('.menu').on({
            mouseover : function(){
                $('.menu').attr('class','active menu');
            },
            mouseout : function(){
                $('.menu').attr('class','menu');
    
            }
        });

方法二

addClass()  添加类名

removeClass()   移除类名

$('.menu').on({
            mouseover : function(){
                $('.menu').addClass('active');
            },
            mouseout : function(){
                $('.menu').removeClass('active');
    
            }
        });

方法三

hover 合成事件（mouseover+mouseout）

（js无hover事件）

$('.menu').hover(function(){
            $('.menu').addClass('active');
    
        },function(){
            $('.menu').removeClass('active');
        })

点击切换class类名

<h2 class="item">this is h2 tag</h2>
    
        $('.item').click(function(){
            $('.item').toggleClass('active');
        });

toggleClass（）； 切换class类名

转载于:https://www.cnblogs.com/sandraryan/p/11528744.html

[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 class类(class类是object类的超类)

class类名对象名有哪些？ (1)class类名对象名如：classStudentstud1,stud2;把class和Student合起来作为一个类名，用来定义对象

旧城等待，/ 2023年09月26日 13:29/ 0 赞/ 129 阅读

相关 jq操作class类

[https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan] 鼠标移入移除切换样式方法一

迷南。/ 2023年06月05日 08:11/ 0 赞/ 11 阅读

相关 jq指定的所有class添加样式

css代码： .className{ color: red; } jq代码: $(".class").addClass("classNa

秒速五厘米/ 2022年10月29日 03:14/ 0 赞/ 203 阅读

相关 jq select操作

添加option $ ( "\ID option" ). each ( function ( ) \{ if ($ ( this ). val ( ) == 111 )

朴灿烈づ我的快乐病毒、/ 2022年08月26日 13:10/ 0 赞/ 248 阅读

相关 JQ DOM操作

今天开始学习李炎恢老师JQ视频中有关DOM操作的相关方法，在此记录下学习过程，以便日后回来复习！首先是一些对元素内容的操作，大体分为3个方法 `html(),text

本是古典何须时尚/ 2022年08月01日 11:12/ 0 赞/ 226 阅读

相关 jq 操作元素内容

操作元素内容返回元素的所有内容，包括子标签对象数组.html(); function t1() {

清疚/ 2021年07月25日 02:02/ 0 赞/ 489 阅读

相关 jq 操作元素属性

操作元素属性获得元素属性数组对象.attr("属性名"); 不能拿到value的实时值，只能拿到默认值数组对象.val()

快来打我*/ 2021年07月24日 19:02/ 0 赞/ 580 阅读

相关 jq 操作文档节点

操作文档结构内部插入追加数据到已有内容后面对象数组.append("追加内容"); 会解析标签 fun

深藏阁楼爱情的钟/ 2021年07月24日 17:30/ 0 赞/ 490 阅读

相关 jq 操作元素样式

返回css样式内容对象数组.css("样式名") function t2() { var showdiv=

短命女/ 2021年07月24日 14:35/ 0 赞/ 508 阅读

相关 jq 操作动画

链式调用.stop(true),可停止之前动画，加载当前动画动画可以链式调用显示隐藏的的元素(逐渐显示,动态改变成设置的高和宽)

谁借莪１个温暖的怀抱￠/ 2021年07月24日 13:18/ 0 赞/ 564 阅读