jQuery HTML/CSS

These are the methods used in jquery for fetching, and manupulating a element with html, css and more.
You will study important jquery methods in upcomming concepts, These are for your reference for building your knowledege to get to know more methods to make your code build easy.

Method

Description

Example

addClass()

Adds one or more classes to the selected element

$("#myElement").addClass("highlight");

after()

Inserts content after the selected element

$("#myParagraph").after("<p>New paragraph</p>");

append()

Appends content to the end of the selected element

$("#myList").append("<li>New Item</li>");

appendTo()

Appends the selected element to another element

$("#myItem").appendTo("#myList");

attr()

Gets or sets the value of an attribute

$("#myImage").attr("src", "newimage.jpg");

before()

Inserts content before the selected element

$("#myParagraph").before("<p>New paragraph</p>");

clone()

Creates a copy of the selected elements

var clone = $("#myElement").clone();

css()

Gets or sets CSS properties for the selected element

$("#myElement").css({ "color": "red", "font-size": "20px" });

detach()

Removes the selected element from the DOM, but keeps a copy

var detached = $("#myElement").detach();

empty()

Removes all child elements of the selected element

$("#myContainer").empty();

hasClass()

Checks if the selected element has a specific class

$("#myElement").hasClass("active");

height()

Gets or sets the height of the selected element

var elementHeight = $("#myElement").height();

html()

Gets or sets the HTML content of the selected element

$("#myDiv").html("New content");

innerHeight()

Gets the inner height of the selected element

var innerHeight = $("#myElement").innerHeight();

innerWidth()

Gets the inner width of the selected element

var innerWidth = $("#myElement").innerWidth();

insertAfter()

Inserts the selected element after another element

$("#myElement").insertAfter("#anotherElement");

insertBefore()

Inserts the selected element before another element

$("#myElement").insertBefore("#anotherElement");

offset()

Gets the current coordinates of the first element in the set of matched elements

var coordinates = $("#myElement").offset();

offsetParent()

Gets the closest positioned ancestor

var parent = $("#myElement").offsetParent();

outerHeight()

Gets the outer height of the selected element

var outerHeight = $("#myElement").outerHeight();

outerWidth()

Gets the outer width of the selected element

var outerWidth = $("#myElement").outerWidth();

position()

Gets the current coordinates of the first element in the set of matched elements relative to the offset parent

var coordinates = $("#myElement").position();

prepend()

Prepends content to the beginning of the selected element

$("#myList").prepend("<li>New Item");

prependTo()

Prepends the selected element to another element

$("#myItem").prependTo("#myList");

prop()

Gets the value of a property for the first element in the set of matched elements

var value = $("#myCheckbox").prop("checked");

remove()

Removes the selected element from the DOM

$("#toBeRemoved").remove();

removeAttr()

Removes an attribute from the selected element

$("#myLink").removeAttr("target");

removeClass()

Removes one or more classes from the selected element

$("#myElement").removeClass("highlight");

removeProp()

Removes a property set by `.prop()` method

$("#myElement").removeProp("disabled");

replaceAll()

Replaces the selected element with another element or HTML structure

$("#newElement").replaceAll("#oldElement");

replaceWith()

Replaces the selected element content with another element or HTML structure

$("#myElement").replaceWith("<div>New content</div>");

scrollLeft()

Gets or sets the horizontal scrollbar position of the first element in the set of matched elements

var scrollLeft = $("#myElement").scrollLeft();

scrollTop()

Gets or sets the vertical scrollbar position of the first element in the set of matched elements

var scrollTop = $("#myElement").scrollTop();

text()

Gets or sets the text content of the selected element

var content = $("#myParagraph").text();

toggleClass()

Adds or removes one or more classes from the selected element, depending on whether they are present or absent

$("#myElement").toggleClass("active");

unwrap()

Removes the parent of the selected element

$("#myElement").unwrap();

val()

Gets or sets the value of form elements

var value = $("#myInput").val();

width()

Gets or sets the width of the selected element

var elementWidth = $("#myElement").width();

wrap()

Wraps an HTML structure around each element in the set of matched elements

$("#myElement").wrap("<div class='wrapper'<>/div>");

wrapAll()

Wraps an HTML structure around all elements in the set of matched elements

$(".items").wrapAll("<div class='wrapper'<>/div>");

wrapInner()

Wraps an HTML structure around the content of each element in the set of matched elements

$("#myElement").wrapInner("<div class='wrapper'<>/div>");


Quick Recap - Topics Covered

jQuery HTML/CSS

Practice With Examples in Compilers

The Concepts and codes you leart practice in Compilers till you are confident of doing on your own. A Various methods of examples, concepts, codes availble in our websites. Don't know where to start Down some code examples are given for this page topic use the code and compiler.

Example js

Example 1 Example 2 Example 3 Example 4 Example 5


Quiz


FEEDBACK

Rating


Message