jq之類名相關操作(addclass、removeClass、hasClass)及深意

原創 &XYZ& 2020-03-17 12:28

文章目錄

addclass

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知"心"</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="demo"></div>
  <div class="demo"></div>
  <div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  //給第一個類名爲demo的div添加一個active類名
  $('.demo').eq(0).addClass('active');

  //給第二個類名爲demo的div添加多個類名
  $('.demo').eq(1).addClass('active xyz');

  //給全部的類名爲demo的div添加一個state類名
  $('.demo').addClass('state');

  /*
  對於jq,addClass()方法，我們還可以當成addClass(function(){})
  */
  $('.demo').addClass(function(index, ele){
    //我們現在給爲偶數的類名爲demo的div添加一個demo2的類名
    if( (index+1) % 2 == 0){
      return 'demo2'
    }
  })
</script>

</html>

removeClass

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>溫故而知"心"</title>
  <link rel="stylesheet" href="./index.css">
</head>

<body>
  <div class="demo demo1 active"></div>
  <div class="demo demo1 active"></div>
  <div class="demo demo1"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  //給第一個類名爲demo的div刪除一個active類名
  $('.demo').eq(0).removeClass('active');

  //給第一個類名爲demo的div刪除demo和active類名，注意順序無所謂
  $('.demo').eq(0).removeClass('active demo');

  //如果第二個類名demo使用removeClass方法，裏面什麼都不填，那就是把class裏面的類名全部都刪除掉
  $('div').eq(1).removeClass();

  //刪除body裏面的div爲偶數的（順序）
  $('div').removeClass(function (index, ele) {
    if ((index + 1) % 2 == 0) {
      return 'demo1'
    }
  })

  //刪除body裏面的div所有的類名
  $('div').removeClass()


</script>

</html>

hasClass

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background-color: #0000ff;
            margin-bottom: 10px;
        }

        .demo.active {
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div class="demo active"></div>
    <div class="demo"></div>
    <div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //通過jq判斷類名爲demo的div裏面有沒有active類名
    console.log($('.demo').hasClass('active'));

    /*
    點擊div並使背景顏色變成紅色，其餘的div變成藍色;
    */
    $('.demo').click(function () {
        $('.demo').removeClass('active');
        $(this).addClass('active')
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>溫故而知“心”</title>
    <style>
        .wrapper .style1 {
            background-color: #ff8c00;
        }

        .wrapper .style1 li {
            color: #ff0000;
        }

        .wrapper .style2 {
            background-color: #0000ff;
        }

        .wrapper .style2 li {
            color: #006400;
        }

        .wrapper.active .style1 {
            background-color: #ff0000;
        }

        .wrapper.active .style1 li {
            color: #ff8c00;
        }

        .wrapper.active .style2 {
            background-color: #006400;
        }

        .wrapper.active .style2 li {
            color: #0000ff;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class="style1">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul class="style2">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    $('.wrapper').click(function (ele, index) {
        if ($(this).hasClass('active')) {
            $(this).removeClass('active')
        } else {
            $(this).addClass('active')
        }
    })
</script>

</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

界面控件DevExtreme v23.2亮點 - 標籤、表單、編輯器功能升級

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-28 12:19:08

H5按需加載探索——Webpack模塊化示例

1-前言 瀏覽器早已已經全面支持ESM即ES模塊化，可以實現前端代碼的模塊化，以及按需加載/下載，甚至還提供了一個非常貼心的ES特性：importmap 通過importmap，可以代碼零修改實現按需加載： 1.1 在html中聲明模塊的

原創 2024-05-22 11:10:06

界面控件DevExtreme v23.1、v23.2盤點 - 增強的TypeScript(Angular、React、Vue)

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

原創 2024-05-07 11:34:56

Web前端開發常用到的和升職加薪的技能點分別是哪些？

隨着互聯網的高速發展以及技術的不斷革新，Web前端工程師需要掌握的技術也有所變更。很多人想知道當前常用的Web前端技術有哪些?如何快速掌握這些技術?接 常用的Web前端技術有哪些? Web前端是爲了協調前端設計與後端開發之間工作的崗位，是

原創 2023-10-10 09:55:05

現在入行web前端開發晚了？數據代表一切

前端程序員是大家都公認的高薪崗位，那他們的工資到底有沒有傳說中那麼高呢？我們來看看職友集的數據。 數據來源：職友集 就北上廣深杭的前端薪資來看，平均薪資均達到一萬以上。 通常來講： 工作1~2年後會成爲前端高級軟件工程師，年薪可以

原創 2023-10-10 09:54:58

layui使用serializeJson報Uncaught TypeError: $(...).serializeJson is not a function錯

layui使用serializeJson報Uncaught TypeError: $(...).serializeJson is not a function錯 報錯原因是沒有layui自帶的jquery中沒有對應這個方法。 二種解決辦法：

原創 2023-02-08 23:50:08

個人Scrum敏捷開發轉型中的技術實踐

Scrum無處不在，說起Scrum敏捷開發框架，也許大家並不陌生，表面理解它其實並不複雜，但是真正用得好的公司並不多，我自己曾經的工作環境也依然沒有體驗過敏捷開發非常成熟的實踐過程，但是我依然推薦這種開發方式，不論是對於企業發展還是生活中

原創 2022-04-30 12:48:30

springboot集成socketio實現一對一實時聊天

看到別人的系統或者app都有聊天功能，大家有沒有想過自己的系統也集成進去呢？現在來揭曉！ 第一步：pom.xml添加socketio依賴 <dependency> <groupId>com.corundumstudio.so

原創 2022-04-30 11:11:09

js組合圖片（在圖上畫二維碼）

總的有兩個依賴， jquery和jquery.qrcode 。實現原理其實就是圖層的堆疊。做二維碼推廣的時候要用到此方法 <body> <div class="" id="qrcode" style="display: none;

原創 2022-04-30 10:42:12

Iframe不同層級方法調用和元素獲取

jquery 獲取元素 父取子 $("#iframeId").contents().find("#elementId") 子取父 $("#elementId",window.parent.document) 方法、變量調用 父調

原創 2022-04-30 06:30:08

六年來技術變遷的心得體會

1 技術發展的一些體會 從2016年開始, 筆者走上了"程序猿"這條路, 至今已經有6年了. 這6年來, 從項目開發所使用的前後端技術不斷變遷, 我深切體會到這一行技術發展的日新月異, 何其迅速. 本文不談具體的技術細節, 只談一談入行這6

原創 2022-04-30 06:03:09

在沒有jQuery的情況下查找最近的元素 - Finding closest element without jQuery

問題： I am trying to find the closest element with a specific tag name without jquery.我試圖在沒有 jquery 的情況下找到具有特定標籤名稱的最近元素。

fyin1314 2021-12-29 09:18:03

How to post an array of complex objects with JSON, jQuery to ASP.NET MVC Controller?

問題： My current code looks like the following. 我當前的代碼如下所示。 How can I pass my array to the controller and what kind of p

javail 2021-12-29 09:15:00

如何從 JavaScript 讀取腳本標籤中的 JSON？ - How can I read a JSON in the script-tag from JavaScript?

問題： I have a dynamically generated page where I want to use a static JavaScript and pass it a JSON string as a paramete

javail 2021-12-29 09:15:00

event.preventDefault() vs. return false (no jQuery)

問題： I wondered if event.preventDefault() and return false were the same.我想知道event.preventDefault()和return false是否相同。 I

javail 2021-12-28 21:15:02