JQuery CSS

By

JQuery uses the css() method for CSS manipulation. To perform various task the css() uses three different syntaxes. They are,
  1. css(name):- This method return CSS property value.
  2. css(name,value):- This method to set CSS property and value.
  3. css({properties}) – This uses to set multiple CSS properties and values.
Syntax for return CSS property: –
$(this).css(“background-color”);
In the above syntax css() return the specified CSS property value of the FIRST selected element.
Syntax for set CSS property and value: –
 $(“p”).css(“background-color”,”yellow”);
In the above syntax the css() set the specified CSS property for ALL matched elements.
Syntax for multiple CSS property/value pairs: –
$(“p”).css({“background-color”:”yellow”,”font-size”:”200%”});
The css({properties}) to set one or more CSS property/value pairs for the selected elements.
For manipulating the size we use the below methods.
1)  height():-The height() method sets the height of all matching elements.
Syntax: –
$(“#div1”).height(“200px”);
2) width():-The width() method sets the width of all matched elements.
Syntax: –
$(“#div2”).width(“300px”);

JQuery CSS methods

1)      addClass():- This method adds one or more classes to selected elements.
Syntax: –
$(selector).addClass(class)
The class parameter specifies one or more class names to be added.
Syntax for add class using a function: – $(selector).addClass(function(index,oldclass))
The function(index,oldclass) parameter specifies a function that returns one or more class names to be added.
A)    Index: – Optional. Receives the index position of the selector
B)    Oldclass:-Optional. Receives the old class value of the selector
2)      hasClass():- This method checks if any of the selected elements have a specified class.
Syntax: –
$(selector).hasClass(class)
The parameter “class” specifies the class to search for in the selected elements.
READ  New jQuery Interview Questions and Answers for beginners
3)      offset():- Offset() uses to sets or returns the position (relative to the document) for selected elements.
Syntax: –
$(selector).offset()
Syntax for set offset coordinates: –
 $(selector).offset(value)
  1. The value parameter specifies the top and left coordinates in pixels. Possible values are,
  2. Value pair, like {top:100,left:0}
2)      An object with top and left properties
Syntax for set offset coordinates using a function:-
$(selector).offset(function(index,oldoffset))
3) The parameter “function(index,oldoffset)” specifies a function that returns an object
containing the top and left coordinates.
  1. index – Optional. Receives the index position of the selector
  2. oldoffset – Optional. Receives the current coordinates of the selector
4)  offsetParent():- It returns the first parent element that is positioned.
Syntax: –
$(selector).offsetParent()
5)   position():- The position() method returns the position (relative to the parent element) of the first selected element. It returns an object with 2 properties, top and left, which represent the top and left positions in pixels.
Syntax: –
$(selector).position()
6)      removeClass():- This method removes one or more classes from selected elements.
Syntax:-
$(selector).removeClass(classname)
The classname parameter specifies one or more class names to remove. To remove several classes, separate the class names with space. If this parameter is empty, all classes will be removed.
Syntax for remove class using a function:-
$(selector).removeClass(function(index,oldclass))
The function(index,oldclass) parameter returns one or more class names to remove.
  1. index – Optional. Receives the index position of the selector
  2. oldclass – Optional. Receives the old class value of the selector
7)  scrollLeft():- The scrollLeft() method sets or returns the horizontal position of the scrollbar for the selected elements.
READ  JQuery HTML Manipulation
Syntax for return horizontal scrollbar position: –
$(selector).scrollLeft()
It returns the horizontal position of the scrollbar for the first matched element.
Syntax for set horizontal scrollbar position: –
 $(selector).scrollLeft(position)
The position parameter specifies the new position in pixels.
8 )  scrollTop():- This method sets or returns the vertical position of the scrollbar for the selected elements. The vertical position of the scrollbar is the number of pixels scrolled from the top. When the scrollbar is on the top, the position is 0.
Syntax for return vertical scrollbar position: –
$(selector).scrollTop()
Syntax for set vertical scrollbar position: – $(selector).scrollTop(position)
The parameter “position” specifies the new position in pixels.
9)      toggleClass():- This method toggles between adding/removing one or more classes from selected elements. This method checks each element for the specified classes. The classes are added if missing, and removed if already set – This creates a toggle effect. However, by using the “switch” parameter, you can specify to only remove, or only add a class.
Syntax: –
$(selector).toggleClass(class,switch)
The class parameter specifies one or more class names to add or remove. To specify several classes, separate the class names with a space.
The switch parameter is a Boolean value specifying if the class should be added (true), or removed (false).
Syntax foe toggle classes using a function:-
$(selector).toggleClass(function(index,class),switch)
The parameter “function(index,class)” specifies a function that returns one or more class names to add/remove.
  1. index – Optional. Receives the index position of the selector.
  2. class – Optional. Receives the current class of the selector.

No comments:

Post a Comment