jQuery Archives - scmGalaxy

How to Use add-remove CSS classes in jQuery?

rajeshkumar — Sat, 02 Oct 2021 12:40:11 +0000

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";
}

});

CSS classes in jQuery without js

CSS classes in jQuery with js

The post How to Use add-remove CSS classes in jQuery? appeared first on scmGalaxy.

How to Use change CSS styles in jQuery?

rajeshkumar — Fri, 01 Oct 2021 12:52:42 +0000

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”;
});

Use change CSS styles in jQuery

The post How to Use change CSS styles in jQuery? appeared first on scmGalaxy.

How to Use image-slideshow in jQuery?

rajeshkumar — Thu, 30 Sep 2021 12:55:30 +0000

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 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.

Use image-slideshow in jQuery

The post How to Use image-slideshow in jQuery? appeared first on scmGalaxy.

How to Use Change Attributes Properties in jQuery?

rajeshkumar — Thu, 30 Sep 2021 12:28:14 +0000

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 “” 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.

Change Attributes Properties in jQuery

The post How to Use Change Attributes Properties in jQuery? appeared first on scmGalaxy.

How to Use Removing elements in jQuery?

rajeshkumar — Wed, 29 Sep 2021 13:01:25 +0000

So in this blog, we’re going to learn that How to Use Removing elements in jQuery?