index.html Archives

Limited Time Offer!

For Less Than the Cost of a Starbucks Coffee, Access All DevOpsSchool Videos on YouTube Unlimitedly.
Master DevOps, SRE, DevSecOps Skills!

Enroll Now

How to Use add-remove CSS classes in jQuery?

by rajeshkumarOctober 2, 2021April 13, 2022jQuery

So in this blog, we’re going to learn that Use add-remove CSS classes in jQuery?

So let’s go ahead and do that for first in index.html, with help of style.css & main.js and define-

Additional CSS classes can be added to an element via addClass() For instance, add the class .fancy-link to all anchor tags. Note that you *do not* add a dot in front of the class name here.

$(“a”).addClass(“fancy-link”);

You can also add multiple classes at once.

$(“p:first”).addClass(“large emphasize”);

To attach a class based on the index of the element in your selected set of elements, you can use a callback function.

$(“li li”).addClass(function(index) {
// This adds classes .item-0, .item-1, … to the list’s sub-items.
$(this).addClass(“item-” + index);
});

You can even use two parameters for the callback function, the index and the current class of the element.

$(“div”).addClass(function(index, currentClasses) {
console.log(currentClasses); // String containing all classes

// Add .red-box if the current classes contain "dummy"
if (currentClasses.indexOf("dummy") !== -1) {
  return "red-box";
}

});

How to Use change CSS styles in jQuery?

by rajeshkumarOctober 1, 2021April 13, 2022jQueryLeave a Comment

So in this blog, we’re going to learn that How to Use change CSS styles in jQuery?

So let’s go ahead and do that for first in index.html, with help of style.css & main.js and define-

To retrieve or set the value of a CSS property, you can use css(). This works similar to attr() and prop(): pass one argument to read or two arguments to set a new value. For instance, you can achieve the same as with hide() like this:

$(“p:first”).css(“display”, “none”);

You can change any CSS property in this simple way.

redBox.css(“background-color”, “#AA5500”);

$(“p”).css(“font-size”, “20px”);

You can even change the value of a property relative to its previous value

redBox.css(“width”, “+=20px”);
redBox.css(“height”, “-=20px”);

Also, you can retrieve multiple values by passing an array as the argument

var properties = $(“p”).css([“font-size”, “line-height”, “color”]);

You can see that in the Developer Tools (F12 in browser) in the Inspector tab.

redBox.css(“user-select”, function() {
// [some logic here…]
return “none”;
});

Tagged : css / index.html / jquery / main.js / style.css / styles

How to Use image-slideshow in jQuery?

by rajeshkumarSeptember 30, 2021April 13, 2022jQuery

So in this blog, we’re going to learn that How to Use an image-slideshow in jQuery?

So let’s go ahead and do that for first in index.html, with help of style.css & main.js and define-

Select the <img> inside the gallery to manipulate it later Now, Initialize an array of all images for

the gallery we want to cycle through all images we have and show one after the other in our

gallery. For this, we create a variable i: the index of the image we want to currently show. setInterval will call whatever code is inside the callback function every 2 seconds. This way,

we can change the shown image every 2 seconds.

Tagged : image-slideshow / index.html / jquery / main.js / style.css

How to Use Change Attributes Properties in jQuery?

by rajeshkumarSeptember 30, 2021April 13, 2022jQueryLeave a Comment

So in this blog, we’re going to learn that How to Use Change Attributes Properties in jQuery?

So let’s go ahead and do that for first in index.html, with help of style.css & main.js and define-

In this main.js To read the current value of an attribute, use attr() with only one argument: the name of the attribute you want to read. after that Retrieve the value of the href attribute of the “<a>” tag This is logged into the console. To see it, press F12 in Firefox/Chrome to open the Developer Tools and click on the Console tab.

Tagged : Attributes / Change / index.html / jquery / main.js / properties / style.css