Scribd
Upload
5 views2 pages

JQuery Notes

The document provides an overview of JQuery, explaining how it wraps HTML elements into JQuery objects for method usage. It details various methods for selecting, modifying, adding, removing, and toggling content and classes of HTML elements. Additionally, it covers event binding and unbinding in JQuery.

Uploaded by

kellothermes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
5 views2 pages

JQuery Notes

The document provides an overview of JQuery, explaining how it wraps HTML elements into JQuery objects for method usage. It details various methods for selecting, modifying, adding, removing, and toggling content and classes of HTML elements. Additionally, it covers event binding and unbinding in JQuery.

Uploaded by

kellothermes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

JQuery

JQuery statements wrap the HTML elements into JQuery objects that allow us to use
JQuery methods on them.
The JQuery objects are placed in an array.

$("#input") will wrap the HTML input element inside the JQuery wrapper object.

Selecting elements with JQuery selector will return JQuery Wrapper Objects that
allow us to use JQuery method on the selected elements such as

1. $("#input").css()
2. $("#input").val()

-------------- Selecting elements with jquery -------------


$("#element").next()
$("#element").prev()

The above two methods will select the previous or next sibling elements of the
selected element.

$("#element").parent()
This will go up one level of the selected element to find the parent of the
selected element.

$("#element").children()
This will select the childern elements of the selected element.

We can change JQuery methods.

$
("#element").css({width:"200px"}).next().css({color:"blue"}).parent().css({border:"
1px solid black"})

---- Adding content to the HTML elements using JQuery methods --------

1. $("#element").append()
2. $("#element").prepend()
3. $("#element").before()
4. $("#element").after()
5. $("#element").html()
6. $("#element").text()

----- Removing / Emptying HTML elements using JQuery ----


1. $("#element").remove() // Entirely remove the HTML element
2. $("#element").empty() // Empty the content in the HTML element

-- Removing or changing HTML attributes using JQuery ----


1. $("#element").removeAttr("attribute name");
2. $("#element").attr("attribute name", "attribute value);

--------- Wrapping / Unwrapping elements with JQuery ----------------


Wrapping elements with HTML element
$("element").wrap("<html element/>");

$("element")wrapAll("<html element/>");
----- Adding/Removing/ Toggling classes in JQuery ----
$("#element").removeClass("class name")

$("#element").addClass("class name")

$("#element").toggleClass("class name") // Toggle the specify class to the selected


element

--- Binding / Unbinding events to the element in JQuery ----

1. $("#element").on("event name", callback function);


2. $("#element").off("event name");

---- Event helper function ----

$("#element").click(callback function);

You might also like