jquery中class操作

最新推荐文章于 2024-04-26 12:27:12 发布
最新推荐文章于 2024-04-26 12:27:12 发布
阅读量440 收藏
点赞数
文章标签： jquery中class操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43469418/article/details/87634656
版权

设置单个样式 .color(“样式名”，“样式值”)
设置多个样式 .css({“样式名”:“样式值”,“样式名”:“样式值”})
获取样式 .css(“样式名”)
添加类 . addClass()
移除类 .removeClass()
判断类 .hasClass()
切换类 .toggleClass()
设置单个属性 .attr(“属性名”,“属性值”);
设置多个属性 .attr({“属性名”：“属性值”，“属性名”：“属性值”})
获取属性 .attr(“属性名”)
案例 tab栏切换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 360px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 90px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            $(".tab>li").mouseenter(function () {
                $(this).toggleClass("active").siblings().removeClass("active");
                var index=$(this).index();
                $(".products>div").eq(index).addClass("selected").siblings().removeClass("selected");
            });
            
        });
    </script>

</head>
<body>
<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆</span></li>
        <li class="tab-item">国妆名牌<span>◆</span></li>
        <li class="tab-item">清洁用品<span>◆</span></li>
        <li class="tab-item">男士精品</li>
    </ul>
    <div class="products">
        <div class="main selected">
            <a href="#"><img src="img/guojidapai.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="#"><img src="img/guozhuangmingpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="#"><img src="img/qingjieyongpin.jpg" alt=""/></a>
        </div>
        <div class="main">
            <a href="#"><img src="img/nanshijingpin.jpg" alt=""/></a>
        </div>
    </div>
</div>

</body>
</html>
媛源缘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery中ajax请求后台返回json数据并渲染HTML的方法
12-29
html实例 <input type=text name=dishes value= class=seek_product placeholder=请输入菜名/> <button type='button' class=btn_nor onclick=seek_product()>搜索</button> 序号 <th width=70%
jQuery中的select操作详解
01-19
下面给大介绍了jquery对select的操作介绍，非常不错，具有内容介绍如下所示： select的html标签如下： <select class=xxx id=yyy><option></option>...<option></option></select> 1.设置value为“lll...
jQuery中的class操作
sinat_25017107的博客
09-14 4648
在jQuery中，对于元素的属性操作相对于JavaScript来说代码要简单很多，这次主要介绍几个常用的jQuery中的属性操作。 首先先写一个简单的盒子出来用作案例演示： 这个是html的部分，构造了一个盒子和几个用于点击事件的按钮：<body> <button>添加一个红色背景</button> <button>移除红色背景</button> <button>判断有没
jQuery对Class属性的操作
chen2745213271的博客
06-19 2552
下面介绍一下jQuery对Class属性操作的方法把 第一addClass（），该方法可以设置单个或多个元素的Class属性，用法如下图 这样子页面显示的结果就会有CSS样式 第二removeClass（），该方法可以移除元素的Class属性，用法如下图 这样子页面上什么都不会显示 第三toggleClass（），该方法可以移除或添加元素的Class属性，如果选中的元素有了该方法设置的Class属性那么就会移除，如果没有则会添加，用法如下图 添加或移除都和上面两个的结果一样.
前端提高篇(八十六)：jQuery的class属性操作addClass()与removeClass()、hasClass()、toggleClass()
安之ccy的博客
03-29 1629
1.addClass()与removeClass()基本使用 addClass：添加class；removeClass：移除class，返回this对象，支持链式操作 $('div').addClass('test').removeClass('test'); 另： 当一个方法要取值时返回要取的值；不需要返回时，返回this对象，方便链式调用 就像text()，当取文本时，返回文本；设置文本时，返回this console.log ($('div').text()); console.log ($('di
3.jqueryDOM操作
weixin_51353891的博客
08-17 780
attr() 概念：获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。 取值： .attr( attributeName ) 获取第一个元素的某个属性值 // 获取第一个元素的background-color样式属性值 $('div').css("background-color"); .attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值， 我们需要依靠jQuery的 .each()或者.map()方法循环。 赋值： .attr( at
jQuery DOM操作实例
01-19
更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的，下面是jQuery的DOM操作方法...
jQuery 中的 DOM 操作
11-23
在JavaScript的世界里，jQuery库为DOM操作...总的来说，jQuery通过其丰富的API，使得DOM操作变得简洁高效，是前端开发中不可或缺的工具。无论是在查找、创建、修改还是删除节点，jQuery都能提供简洁且强大的解决方案。
jquery点击改变class并toggle
12-11
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax...在实际项目中，可以根据需求进行更复杂的逻辑操作，如链式调用其他jQuery方法，或者结合Ajax请求进行异步数据交互。
JQuery中操作Css样式的方法
12-09
$(“#two”).attr(“class”,”divClass”)设置Id为two的class属性。 //2、追加样式 $(“#two”).addClass(“divClass2”)为ID为two的对象追加样式divClass2 //3、移除样式 $(“#two”).removeClass(“divClass”)...
jquery动态添加和删除class属性
ComeOnTom的专栏
06-13 8862
在用jquery时，遇到一个问题，就是如何动态得添加和删除class的属性，下面是我的解决代码： 测试 $(document).ready(function(){ $("button").click(function(){ $("p:first").addClass("intro"); $("p:first").removeClass("default");
【jQuery】jQuery操作class详细说明
liuzhenhe1988的专栏
01-07 1040
1、给指定目标添加class：addClass <div id="headerDiv" class="divcss1"></div> <script> $('#headerDiv').addClass('divcss2'); </script> //执行后div headerDiv有两个class：divcss1和divcss2 2、删除指定目标中的class：removeClass <div id="headerDiv" clas
jQuery关于class的操作
weixin_30568715的博客
12-27 116
关于对class的操作有增、删、改、查另外还会有一个就是选择性添加删除，也就是如果此标签有此class就删除，若没有此class就添加上去 1.addClass() 方法向被选元素添加一个或多个类。还可以为方法传入一个函数(当添加的class已经存在的时候就不会重复添加) 1 $('p').addClass(function(n,o){//第一个参数是标签所在的位置的下标值，从0开始；第二...
Python中进程和线程到底有什么区别？_python线程和进程的关系和区别
最新发布
m0_60707221的博客
04-26 382
书籍的好处就在于权威和体系健全，刚开始学习的时候你可以只看视频或者听某个人讲课，但等你学完之后，你觉得你掌握了，这时候建议还是得去看一下书籍，看权威技术书籍也是每个程序员必经之路。Python所有方向路线就是把Python常用的技术点做整理，形成各个领域的知识点汇总，它的用处就在于，你可以按照上面的知识点去找对应的学习资源，保证自己学得较为全面。光学理论是没用的，要学会跟着一起敲，要动手实操，才能将自己的所学运用到实际当中去，这时候可以搞点实战案例来学习。工欲善其事必先利其器。
jquery多class层级选择元素的实现以及模糊匹配
ERIZHU的博客
11-24 6352
$(‘.class1 .class2‘) 选择class1元素下class2的元素（中间有空格）; $(‘.class1.class2‘) 选择同时含有class1和class2的元素（中间没有空格）; $(‘.class1,.class2‘) 选择class1或者class2的元素（中间有逗号）. 获取父节点并设置样式 var divdom = $("span:contains(...
Jquery动态给表格中的Td追加class
steamPlayGame的博客
10-16 1157
Jquery动态给表格中的Td追加class <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(f
5.jQuery 的 Class操作
Bi-Hu的博客
05-21 245
5.jQuery 的 Class操作 主要讲解对Class操作的三个方法： 1.addClass(内容)他用来添加元素集合中全部元素的类名，如果元素集合中没有Class，则加入内容；如果存在不一样的class 补接：'空格' + 内容，其实你看到的是表面内容，实际上它是直接补上一个class即： .OldClass.NewClass 不相信你可以试试 加入空格 你获取不了 ！如果已经存在一样的c...
jquery对class进行操作
老杨的博客
09-05 1921
l  addClass(class)  添加指定的样式 l  removeClass(class)  移出指定的样式 l  toggleClass(class)  如果指定的样式原来已经有了，就删除；如果没有就添加 l  hasClass(class)  判断是否有指定的样式  返回值有：true，没有：false   表示同时引入三个样式 确认 windo
【JS】jquery-3.4.0实现点击不同的li,切换到对应的div内容
Ning+
10-21 1145
HTML： <ul class="tabItems"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <div class="content"> <div>1</div&gt...
jQuery 操作 class
05-10
使用 jQuery 操作 class 可以使用 `addClass()`、`removeClass()`、`toggleClass()` 和 `hasClass()` 方法。 - `addClass(className)`：向匹配的元素添加一个或多个类名。 - `removeClass(className)`：从所有匹配的元素中删除全部或者指定的类。 - `toggleClass(className)`：如果存在（不存在）就删除（添加）一个类。 - `hasClass(className)`：检查指定的类名是否存在于元素的 class 属性中。 例如，假设我们有以下 HTML 代码： ```html <div id="myDiv" class="foo bar"></div> ``` 我们可以使用以下 jQuery 代码来操作它的 class： ```javascript // 添加一个类名 $("#myDiv").addClass("baz"); // 删除一个类名 $("#myDiv").removeClass("bar"); // 切换一个类名 $("#myDiv").toggleClass("active"); // 检查是否存在一个类名 if ($("#myDiv").hasClass("foo")) { console.log("myDiv has class foo"); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值