dir.by  
Праздники ...
Праздники ...
День Святого Валентина (14 Февраля)
Концерты, выставки, цирки ...
Концерты, выставки, цирки ...
Спектакль "А-ля Козе-рак, выше голову" г. Минск 17 января, 7 февраля, 7 марта, 10 апреля 2026
Афишу
Спорт занятия ...
Спорт занятия ...
Занятия в тренажерном зале
Спорт занятие
Компьютеры, игры, программирование
Компьютеры, игры, программирование
Объявления ...
Объявления ...
Салон красоты (массаж)
Объявление
Форум (ваши вопросы, обсуждение)
Форум (ваши вопросы, обсуждение)
Programming, development, testing
→
jQuery - JavaScript library for convenient work with HTML
→
Add/Remove class in the jQuery. Example: $("#Name").addClass("my"); $("#Name").removeClass("my");
  Looked at 5287 times    
 Add/Remove class in the jQuery 
last updated: 25 October 2019
  JavaScript  
// add class
$("#Name").addClass("className");

// remove class
$("#Name").removeClass("className");
Example
  Html  
<html>

<!-- heading -->
<head>
     <meta charset="utf-8">
     <title>Example</title>

     <!-- styles -->
     <style>
          .my {color:green; font-weight:600;}
     </style>
</head>

<!-- page -->
<body>
     <!-- connect the library jQuery -->
     <script src="https://dir.by/example_lib/jquery/jquery-3.3.1.min.js"></script>

     <!-- HTML Elements -->
     <div id="myElement1">
          Hello
     </div>
    
     <!-- JavaScript -->
     <script>
          // the page has opened
          $( function()
          {
               // looking for an element by ID and add a class
               $("#myElement1").addClass("my");
               // <div id="myElement1"> Hello     </div>

               // looking for an element by ID and delete the class
               $("#myElement1").removeClass("my");
               // <div id="myElement1"> Hello     </div>
          });
     </script>
</body>

</html>
 
← Previous topic
Show/hide item in the jQuery. Example: $("#Name").show()
 
Next topic →
Change the content of an element in the jQuery. Example: $("#Name").html("Good morning");
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)
Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
• What the JQuery ?
• jQuery where to download and how to connect?
• Create a new application with jQuery
• Examples jQuery
• Event html the page has opened. jQuery Example: $(function () {...}); or $( document ).ready(function() { ... });
find one item by ID
• Find Item by ID in the jQuery. Example: $("#Name")
find many items in the list ID
Find Item by: tag, attribute, class
• Find the element (elements) by attribute name in the jQuery. HTML example: <div color='green'>Hello!</div> Example of jQuery: var elem = $("[color]");
• find the element by attribute and attribute value in the jQuery. Example: $("[my='123a']")
iterate through all the elements with the desired class
• Iterate through all items | each | in the jQuery. Example: $('.book').each(function(i, elem) { /*to do something*/ });
element (show/hide)
• Show/hide item in the jQuery. Example: $("#Name").show()
class (add/remove from an item)
• Add/Remove class in the jQuery. Example: $("#Name").addClass("my"); $("#Name").removeClass("my");
content of the element (change/take)
• Change the content of an element in the jQuery. Example: $("#Name").html("Good morning");
• Take content from an item in the jQuery. Example: $("#Name").html();
value for attribution (change/take)
• Change the value for the attribute in the jQuery. Example: $("#Name").attr("aaa", "Hello"); $("#Name").removeAttr("aaa");
• Take the value from the attribution in the jQuery. Example: $("#Name").attr("aaa");
value for the DOM object property (change/take)
• Change the property of a DOM object in the jQuery. Example: $("#Name").prop("eee", "Hello");
• Take a property of the DOM object in the jQuery. Example: $("#Name").prop("eee");
meaning checkbox (change/take)
• Change the value for checkbox in the jQuery. Example: $("#Name").prop('checked', true);
• Take value checkbox in the jQuery. Example: $("#Name").prop('checked');
CSS styles for an element
• Change the CSS style of an element in the jQuery. Example: $("#Name").css("color", "#cc0000");
• Take CSS style of the element in the jQuery. Example: var value1 = $("#Name").css("color");
Create an item
• insertAfter | Insert new content HTML after the desired element in the jQuery. Example: $("<font color='green'>my text</font>").insertAfter($("#div1"));
• append | Create an item HTML to the end of the block element in the jQuery. Example: $("body").append("<font color='green'>my text</font>")
value for an item (change/take)
• Change value for HTML element in the jQuery. Example: $("#Name").val("Hello");
• Take value you have an HTML element in the jQuery. Example: var value1 = $("#Name").val();
select an item from the list by index
• In the jQuery choose HTML option from HTML select. Select by index, value. Example: $("#myColors").prop('selectedIndex', 2);
• In the jQuery take value, index from active HTML option. Example1: var value = $("#myColors").val(); Example 2: var index = $("#myColors").prop('selectedIndex');
enable / disable
• Enable / disable for HTML element in the jQuery. Example of enable: $("#Book").removeAttr("disabled"); Disable example: $("#Book").attr("disabled", "disabled");
Send a request ajax
• Send ajax query | jQuery. Example: $.ajax({ type:"POST", url:"...", data:{...}}, success: function(msg) { ... } });
• Event when ajax query has been finished | jQuery. Example: $(document).ajaxStop(function () { ... });
Событие
handling the click event
• Event when we click the left mouse button on the element | click | jQuery | Example: $("#Name").click(function(event) { ... });
• Handle event click for all elements | jQuery. Example: $(document).on("click", function(event){ ... });
event handling submit
• Event when on your form press the button "submit" | jQuery. Example: $("#Your Form ID").submit( function() { ... } );
Additional topics, questions
• jQuery.fn and jQuery.prototype it's the same thing
WWW sites to explore JQuery
• Sites to explore JQuery
  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика